body {
    font-family: "amaranth", sans-serif;
    background-color: #a5c4e7;
}

h1 {
    color: whitesmoke;
    text-shadow: 1px 1px 5px #111111;
    font-size: 2.5em;
    text-align: center;
}

h2 {
    color: whitesmoke;
    text-shadow: 1px 1px 3px #111111;
    font-size: 1.5em;
}

#aboutSection {
    color: whitesmoke;
    text-shadow: 1px 1px 2px #111111;
}

/*PORTFOLIO IMAGE BACKGROUND STYLES*/
#portfolioImage {
    padding: 2px;
	background-origin: border-box;
	background-size: cover;
	box-sizing: border-box;
	/*box-shadow: 0 0 150px 25px rgba(249, 190, 55, 1); Removed this box shadow since it was added with the sun-glow animation*/
    border-radius: 50%;
	background-image: linear-gradient(to bottom right, #e43f2d, #c5822b, #f6e602);
    animation: sun-glow 4s ease-in-out infinite; /* glow animation--works with keygrames sun-glow*/
}

@keyframes sun-glow {
    0% {
        box-shadow: 0 0 125px 20px rgba(249, 190, 55, 1);
    }
    25% {
        box-shadow: 0 0 75px 15px rgba(238, 175, 97, 0.8);
    }
    50% {
        box-shadow: 0 0 50px 10px rgba(247, 220, 111, 0.6);
       
    }
    100% {
        box-shadow: 0 0 125px 20px rgba(249, 190, 55, 1);
    }
  }


/* TYPING ANIMATION IN ABOUT SECTION */
#typing-text {
    text-shadow: none;
}

a#typing-link {
    color: #4f46e5;
    text-decoration: none;
    font-style: italic; /* Just in case */
}

a#typing-link:hover {
text-decoration: underline;
}

html {
scroll-behavior: smooth; /* Enables smooth scrolling */
}

#typing-text::after {
content: "|";
animation: blink 1s infinite;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* END OF TYPING ANIMATION*/

.projectDivs {
display: flex;
justify-content: center; /* Center the cards horizontally */
align-items: center; /* Center the cards vertically */
position: relative;
width: 80%; /* FC: Adjusted to fit DIV within the project container*/
height: 90vh;
/*overflow: hidden; /* Hide overflowing cards. Disabled this to allow full view of the card in expanded mode. */
}

.project-card {
flex: 0 0 calc(33.333% - 1rem); /* Show 3 cards at once */
/* transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);*/
/* 03/31/25: Updated transition property to fix the flash effect after hovering.*/
transition: 
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    filter 0.3s ease;
filter: grayscale(100%); /* Apply grayscale to all cards by default */
position: absolute; /* Position cards absolutely within the container */
opacity: 0; /* Hide all cards by default */
z-index: 1; /* Default z-index for non-active cards */
width: 40%; /* Set a fixed width for the cards (adjust as needed) */
}

/* Active card styles */
.project-card.active-card {
transform: scale(1.05); /* Scale up the active card */
filter: grayscale(0); /* Remove grayscale */
opacity: 1; /* Fully visible */
z-index: 10; /* Bring the active card to the front */
left: 50%; /* Center the active card */
transform: translateX(-50%) scale(1.05); /* Center and scale */
}

.project-card.active-card:hover {
    transform: scale(1.1) translateX(-50%); /* Slightly increase scale on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */
}

/* Previous card (left of active card) */
.project-card.prev-card {
left: 10%; /* Position to the left */
transform: translateX(-10%) scale(0.9); /* Slightly smaller and offset */
opacity: 0.5; /* Partially visible */
filter: grayscale(100%); /* Grayed out */
z-index: 5;
}

/* Next card (right of active card) */
.project-card.next-card {
right: 10%; /* Position to the right */
transform: translateX(10%) scale(0.9); /* Slightly smaller and offset */
opacity: 0.5; /* Partially visible */
filter: grayscale(100%); /* Grayed out */
z-index: 5;
}

.project-card h3 {
    color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); /* Applied the same color as the project card background color for th technologies section.*/
}

.bg-white\/75 {
    background-color: rgb(255 255 255 / 0.75);
}

.bg-lighBlue {
    background-color: #a1c9f4;
}

.bg-hero-image-opacity {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url('images/backgroundImage8.jpeg'); /* Used linear-gradient to apply opacity to hero image only. Alternative would be to create a psuedo child element: https://javascript.plainenglish.io/how-to-avoid-applying-passing-opacity-to-a-child-element-in-css-7e622b5590c2 */
  }

/* Flex-justify content end*/
.justify-end {
    justify-content: flex-end;
}

.rounded-4x1 {
    border-radius: var(--radius-4xl);
}

/* Scrolling Effect to Reveal Hidden Sections */
.hidden-section {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}
  
.hidden-section.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Hamburger Menu */
@media (max-width: 767px) {
    /* Hamburger menu transitions */
    #navbar-default {
        transition: max-height 0.5s ease;
        max-height: 0;
        opacity: 1; /* Changed from 0 to 1 */
        visibility: hidden;
        overflow: hidden;
    }
    
    #navbar-default.open {
        visibility: visible;
        max-height: 500px; /* Adjust based on your content height */
    }

    /* Hamburger icon animations */
    #icon-open, #icon-close {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    #icon-open {
        position: absolute;
    }
    
    #icon-close {
        opacity: 0;
        transform: rotate(-90deg);
    }
    
    #menu-toggle-btn[aria-expanded="true"] #icon-open {
        opacity: 0;
        transform: rotate(90deg);
    }
    
    #menu-toggle-btn[aria-expanded="true"] #icon-close {
        opacity: 1;
        transform: rotate(0deg);
    }

    /* Navbar styles */
    #nav {
        position: fixed;
        width: 100%;
        transition: background-color 0.5s ease, box-shadow 0.5s ease;
    } 
    
    #navbar-default ul {
        padding-bottom: 1rem;
    }
      
    /* Nav Link visibility. Force text colors in mobile view */
    #navbar-default .nav-link {
        opacity: 1 !important;
        transition: color 0.5s ease !important;
    }
    
    /* Light text when scrolled */
    .bg-gray-800 .nav-link {
        color: #f3f4f6 !important; /* gray-100 */
    }
    
    /* Dark text when menu open at top */
    .bg-\[\#a5c4e7\] .nav-link {
        color: #1f2937 !important; /* gray-800 */
    }
    
    /* Hover states */
    #navbar-default .nav-link:hover {
        background-color: rgba(255,255,255,0.2) !important;
    }

    /* Project cards */
    .projectDivs {
        width: 100%;
        height: 50vh;
    }
    
    /* Project card nav buttons */
    #prevBtn {
        left: -0.5rem;
        z-index: 10;
    }
    
    #nextBtn {
        right: -0.5rem;
        z-index: 10;
    }
    
    /* Back to Top Button Mobile Styles */
    body, html {
        overflow-x: hidden;
        transform: none !important;
    }   
    
    #backToTopContainer {
        bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    #backToTopBtn {
        width: 3rem !important;
        height: 3rem !important;
        background: rgb(255 255 255 / 0.75) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
  }