:root {
    --primary-color: #083434;
    --secondary-color: #ababd3;
    --accent-color: #e6bd39;
    --text-dark: #333;
    --text-white: #fff;
    --inactive-color: #ccc;
    --footer-bg: #e0dcdb05;
    --background-color: #869ea5;
}   


/* General Styles */
body {
    font-family: 'Lexend', sans-serif;
    margin: 0;
    padding: 0;   
    /*background: linear-gradient(135deg, #869ea5, #869ea5); */
    background-image: url('img/background2k.webp');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat; /* Prevent repeating */
    background-color: #181424;
    color: var(--secondary-color); /* Secondary */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
    -ms-text-size-adjust: 100%; /* IE/Edge */
    text-size-adjust: 100%; /* Standard property */
    min-height: 100vh; /* Ensure gradient covers full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

p {
    line-height: 1.6; 
    margin: 0; 
    padding: 0; 
    color: var(--primary-color); 

}

/* Mobile menu burger button - hidden by default on larger screens */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    margin-left: auto;
    z-index: 10;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--secondary-color);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.container {
    max-width: 1200px; 
    margin: 0 auto; /* Centers the container */
    padding: 0 2rem; /* Adds padding inside the container, acting as margins */
    width: 100%;
    box-sizing: border-box;
}

.studio-name{
    font-size: 1.5rem; 
    font-weight: 900;
    color: var(--secondary-color);
    padding-left: 20px;
}

h1 {
    font-size: 2rem;;
    margin-bottom: 1rem; 
    color: var(--primary-color); 
    text-shadow: 0px 0px 20px #f0ecdc;
    
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem; 
    color: var(--primary-color); 
}

.PortfolioSectionTitle {
    padding-top: 20px;
}

#heading h1 {
    margin-top: 40px;
}

#heading p {
    text-shadow: 0px 0px 14px #f0ecdc;

}



a {
    color: var(--secondary-color); 
    text-decoration: none;
}

a:hover {
    color: var(--accent-color); 
}

/* Header & Nav */
header {
    width: 100%; 
    min-height: 130px; /*how far down will first divs on the website (not header) will start at */

}

header::before {
    content: '';
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 450px;
    background-image: url('img/navbar4k.webp');
    background-size: 120% auto;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 998; 
    pointer-events: none;
    
}

nav {
    width: 100%; 
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 999; 
    /* Optional: Add a background color to nav if needed */
    /* background-color: var(--primary-color); */

}

/* Container for nav content to keep it centered */
.nav-content {
    max-width: 1100px; /* Or your container width */
    margin: 0 auto; /* Center the content */
    padding: 0 1rem; /* Add padding on the sides */
    display: flex;
    align-items: flex-start; /* Align items to the top */
    justify-content: center;
    padding-top: 50px; /* Add 20px padding from the top */
    gap: 1rem; /* Add gap between flex items instead of margins */
    pointer-events: auto; /* Make nav content clickable again */

}

/* Style the new logo area */
.logo-area {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent logo area from shrinking */
}

.logo {
    max-height: 50px;
    width: auto;
}

/* Language Picker Styles */
.language-picker {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    min-width: 100px; /* Keep min-width */
    text-align: center;
    flex-shrink: 0; /* Prevent language picker from shrinking */
    padding-top: 10px;
}

.language-picker span {
    font-family: "Twemoji Country Flags", sans-serif; /* Add Twemoji font */
    margin: 0 0.3rem;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all 0.2s ease;
    border-left: 2px solid rgba(204, 172, 255, 0.247);
    border-right: 2px solid rgba(204, 172, 255, 0.247);
    border-top: 0;
    border-bottom: 0;
    border-radius: 4px;
    padding: 0px 4px; /* Fixed padding value */
    display: inline-block;
}

.language-picker span:hover,
.language-picker span.active {
    opacity: 1;
    border-right: 2px solid rgb(128, 124, 164);
    border-left: 2px solid rgb(128, 124, 164);
    

}

.nav-right {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allow nav-right to take up remaining space */
    justify-content: flex-end; /* Align the internal ul to the right */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    /* No explicit width needed, will fit content */
}

main {
    padding: 2rem;
    padding-top: 100px; /* Add padding to prevent overlap with fixed nav - adjust value as needed */
}

section {
    margin-bottom: 3rem;
    text-align: center;
}

.PortfolioSectionTitle {
    text-align: center; 
}

#portfolio {
    background-color: #201c3c85;
    padding: 20px 0px; 
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    backdrop-filter: blur(5px); 
}

button, .button {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px; /* Rounded */
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Soft shadow */
    text-decoration: none; /* Remove underline for anchor tags */
    display: inline-block; /* Make anchor behave like button */

    background-color: var(--accent-color); /* Accent */
    color: var(--primary-color); /* Primary */
}

button:hover, .button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
    background-color: var(--text-white); 
}


.portfolio-item {
    padding: 20px 100px 20px 100px; 
    border-radius: 8px;
    overflow: hidden; 
    color: var(--text-white); 
    display: flex; 
    align-items: center;
    gap: 1.5rem; 
    text-align: left;
    max-width: 1000px;
}


.portfolio-description {
    /* flex: 1; */ /* Remove flex: 1 */
    flex: 0 0 50%; /* Set flex-basis to 50%, don't grow or shrink */
    padding-right: 1rem; /* Add some padding to prevent text touching the image container */
    box-sizing: border-box; /* Include padding in width calculation */
}



.portfolio-description h3 {
    margin-bottom: 0.5rem;
    color: var(--secondary-color); /* Optional: Style title */
}

.portfolio-description p {
    color: var(--secondary-color); /* Optional: Style title */

}

.portfolio-image-container {
    flex: 0 0 50%; /* Set flex-basis to 50%, don't grow or shrink */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 1rem; /* Add some padding */
    box-sizing: border-box; /* Include padding in width calculation */
}


.portfolio-image {
    max-width: 350px; 
    height: auto;       
    max-height: 250px;        
    object-fit: contain;    
    display: block;       
    border-radius: 4px;
}


/* 

-------------------
TESTIMONIALS
-------------------

*/

#testimonials {
    background-color: #201c3c85;
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    backdrop-filter: blur(5px); 
    padding: 3rem 2rem; /* Increased padding */
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    position: relative; /* Keep relative for button positioning */
    z-index: 1; /* Establish stacking context */
    overflow: visible; /* Keep visible so buttons outside swiper are shown */

}

#testimonials h2 {
    color: var(--secondary-color); 
}

/* Swiper Container */
.testimonial-swiper {
    max-width: 900px; /* Adjust width as needed */
    margin: 1rem auto; /* Center the swiper */
    padding-bottom: 3rem; /* Space for pagination */
    position: relative; /* Keep relative for Swiper's internal positioning */
    /* overflow: visible !important; /* REMOVE this to allow Swiper to clip slides */
    /* Swiper's default overflow: hidden will now apply */
}

/* Individual Slide */
.swiper-slide {
    display: flex; /* Use flexbox for centering content */
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    height: auto; /* Allow slide height to adjust to content */
    box-sizing: border-box; /* Include padding in width calculation */
    padding: 0 10px; /* Add some horizontal padding between slides if spaceBetween isn't enough */
}

/* Card within the slide */
.testimonial-card {
    background-color: var(--primary-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: left; /* Align text left within the card */
    width: 100%; /* Make card take full width of slide space */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make card fill slide height */
    cursor: default;  /* Regular cursor */
}


.testimonial-card .testimonial-portrait {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

.testimonial-card .testimonial-author-info {
    text-align: left;
}


.testimonial-card .testimonial-name {
    font-weight: bold;
    margin-bottom: 0.1rem;
    font-size: 1rem;
    color: var(--text-white); 
}

.testimonial-card .testimonial-desc {
    font-weight: 300;
    color: var(--secondary-color);
    margin-bottom: 0; 
    font-size: 0.9rem; 
}

.testimonial-card .testimonial-stars {
    margin-bottom: 1rem; 
    text-align: left; 
}

.testimonial-card .testimonial-stars .star-img {
    width: 1.2rem; 
    height: 1.2rem; 
    object-fit: contain;
    margin-right: 0.1rem; 
    display: inline-block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2)); /* Adding soft shadow to stars */
    vertical-align: middle;
    transform-origin: center center; 
}

/* Keyframes for star spinning animation */
@keyframes spinStar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Class to apply the animation */
.testimonial-card .testimonial-stars .star-img.spin-animate {
  animation-name: spinStar;
  animation-duration: 1.25s; /* MUST MATCH JAVASCRIPT */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; 
  animation-iteration-count: 1;
}


.testimonial-card .testimonial-review {
    font-style: italic;
    color: var(--text-white);
    margin-bottom: 1rem; /* Space below review text */
    flex-grow: 1; /* Allow review to take up available space */
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    width: 40px; 
    height: 40px; 
    margin-top: -20px; /* Vertically center */
    z-index: 999 !important; /* Ensure buttons are on top */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color); 
    background-color: rgb(255, 255, 255); /* Use var(--primary-color) with alpha? Needs RGBA */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
     background-color: var(--secondary-color);
     box-shadow: 0 2px 10px rgba(0,0,0,0.7);
}


.swiper-button-prev {
    left: 40px; 
}

.swiper-button-next {
    right: 40px; 
}



.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 1.5rem; 
    font-weight: bold;
}


/* Swiper Pagination Bullets */
.swiper-pagination {
    text-align: center;
    margin-top: 25px; /* Add margin to push it down from the swiper container */
    position: relative; /* Needed for z-index if bullets overlap something */
    z-index: 10; /* Ensure bullets are clickable */
}

.swiper-pagination-bullet {
    width: 10px; /* Adjust size */
    height: 10px; /* Adjust size */
    background-color: var(--inactive-color); /* Inactive color */
    opacity: 1;
    margin: 0 5px; /* Spacing */
    border-radius: 50%;
    transition: background-color 0.3s ease;
    display: inline-block; /* Ensure bullets are inline */
}

.swiper-pagination-bullet-active {
    background-color: var(--accent-color); /* Active color (Accent) */
}

.portfolio-button-next {
    margin-right: 250px;
}

.portfolio-button-prev {
   margin-left: 250px;
}

.portfolio-button-container {
    display: flex;
    justify-content: center;
    margin: 20px 0px;
}

/* 

-------------------
CLIENTS
-------------------

*/

#clients {
    padding: 3rem 2rem;
    text-align: center;
    margin: 3rem 0;
}

#clients h2 {
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
}

.client-logo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ClientsSectionTitle {
    color: var(--primary-color);
}

.client-logo-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.client-logo {
    max-width: auto;
    height: auto;
    max-height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease;
}

.client-logo-container:hover .client-logo {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Tooltip Styles */
.tooltip {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--text-white);
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--primary-color);
}

.client-logo-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -40px;
}


/* 

-------------------
CONTACT
-------------------

*/

#contact p {
    color: var(--primary-color); /* Primary */
    padding-bottom: 50px;
}

#contact h2 {
    color: var(--primary-color); /* Primary */
}


/* 
-------------------
FOOTER
-------------------
*/

footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
}

#copyright p {
    margin: 0;
    font-size: 0.9rem; 
    color: var(--secondary-color); /* Secondary */
}

.footer-links {
    margin-bottom: 10px;
    text-align: center;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #333;
    text-decoration: underline;
}

#copyright {
    text-align: center;
    padding: 20px 0;
}



/* 

-------------------
MOBILE & TABLET ADJUSTMENTS
-------------------

*/

/* Media query for 2k screens and above */
@media screen and (min-width: 2300px) {
    header {
        background-size: cover; /* Use cover or 100% auto for full width */
        min-height: 200px; 
    }


    header::before {
        height: 550px; /* Example height */
        background-size: 100% auto;

    }
}

@media screen and (min-width: 3800px) {


    header {
        background-size: cover; /* Use cover or 100% auto for full width */
        min-height: 300px; 
    }

    header::before {
        height: 680px; /* Example height */
        background-size: 100% auto;

    }
}



@media screen and (max-width: 1200px) {
    
    .testimonial-review {
        padding-left: 25px;
        padding-right: 15px;
    }

    .portfolio-button-next {
        margin-right: 20px;
    }

    .portfolio-button-prev {
        margin-left: 20px;
    }

    #testimonials {
        padding: 3rem 2rem; /* Reverted padding for consistency, adjust if needed */
        /* margin: 0px; */ /* Removed margin */
        /* width: 100vw; */ /* Removed to prevent overflow */
        /* margin-left: calc(-50vw + 50%); */ /* Removed to prevent overflow */
        border-radius: 18px; /* Keep border-radius */
        background-color: #201c3c85; /* Keep background */
        -webkit-backdrop-filter: blur(5px); /* Keep backdrop filter */
        backdrop-filter: blur(5px); /* Keep backdrop filter */
        position: relative; /* Keep relative */
        z-index: 1; /* Keep z-index */
        overflow: visible; /* Keep overflow visible */
    }


    header {
        background-size: cover; /* Use cover or 100% auto for full width */
        min-height: 180px; 
    }
    
    header::before {
        background-size: 250% auto;
    }

    body {
        background-size: 110% auto;
    }
    
    
}


@media screen and (max-width: 768px) {
    
    
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.25rem;
        color: var(--secondary-color); /* Secondary */
        text-shadow: 0px 0px 14px #201c3c;
    }

    header::before {
        background-size: 400% auto;
    }

    .testimonial-review {
        padding-left: 15px;
        padding-right: 15px;
    }

     .swiper-button-prev {
        left: 10px;
    }
    
    .swiper-button-next {
        right: 10px;
    }
    
    .swiper-button-prev,
    .swiper-button-next {
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }
    
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1rem;
    }

    .nav-content {
        /* Mobile uses grid */
        display: grid; 
        grid-template-columns: auto 1fr auto; /* Logo | Spacer | Burger */
        align-items: center;
        padding: 0 1rem; /* Keep padding */
        height: auto; /* Allow height to adjust */
        position: relative; /* For positioning the dropdown */
    }

    .logo-area {
        grid-column: 1 / 2;
        margin-right: 0; /* Reset margin for grid */
        justify-self: start;
    }
    
    .language-picker {
        grid-column: 2 / 3; /* Center column */
        justify-self: center; /* Center within its grid area */
        margin: 0; /* Reset margins for grid */
    }
    
    .menu-toggle {
        display: flex; /* Show the burger menu on mobile */
        grid-column: 3 / 4; /* Position in the grid */
        /* grid-row: 1; */ /* Implicitly row 1 */
        justify-self: end;
        margin-left: 0; /* Reset margin */
    }
    
    .nav-right {
        grid-column: 1 / 4; /* Span full width */
        grid-row: 2; /* Below the top row */
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        margin-left: 0; /* Reset margin for grid layout */
        background-color: var(--primary-color); /* Add background for dropdown */
        position: absolute; /* Position relative to nav-content */
        top: 100%; /* Position below the header */
        left: 0;
        z-index: 999; /* Ensure it's above content below */
    }
    
    .nav-right.active {
        max-height: 500px; /* Adjust based on your menu size */
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Optional separator */
    }
    
    nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0;
        align-items: center; /* Center items vertically */
    }
    
    nav ul li {
        width: 100%;
        text-align: center;
        padding: 0.8rem 0; /* Increase padding for touch */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separators */
    }

    nav ul li:last-child {
        border-bottom: none; /* Remove border from last item */
    }

    #portfolio {
        padding: 20px 0px; /* Adjust padding for smaller screens if needed */
        /* margin: 0px; */ /* Removed margin */
        /* width: 100vw; */ /* Removed to prevent overflow */
        /* margin-left: calc(-50vw + 50%); */ /* Removed to prevent overflow */
        background-color: #201c3c85; /* Keep background */
        -webkit-backdrop-filter: blur(5px); /* Keep backdrop filter */
        backdrop-filter: blur(5px); /* Keep backdrop filter */
    }

    .portfolio-item {
        padding: 20px 20px; /* Adjust padding for smaller screens */
        flex-direction: column; /* Stack items vertically */
        text-align: center; /* Center text */
    }

    .logo-area {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #clients {
        padding: 2rem 1rem;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 500px;
    }

    .client-logo-container {
        padding: 0.8rem;
    }

    .client-logo {
        max-width: 100px;
        max-height: 50px;
    }

    #testimonials {
        width: 100vw;
        min-width: 100vw;
        margin-left: calc(-50vw + 50%); 
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .testimonial-card {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
   
}

/* 
====================
    HALF-SCREEN
====================
*/

@media screen and (max-width: 992px) {
    
   #heading h1 {
    margin-top: 20px;
    }

}

/* 
====================
    TABLET
====================
*/

@media screen and (max-width: 670px) {
    
   #heading h1 {
    margin-top: 35px;
    }

    header {
        background-size: cover; /* Use cover or 100% auto for full width */
        min-height: 80px; 
    }

}


/* 
====================
    MOBILE
====================
*/

@media screen and (max-width: 576px) {
    h1  {
        font-size: 1.75rem;
    }
    
    #heading p {
        font-size: .9rem;
        color: var(--accent-color);
        text-shadow: 0px 0px 14px #201c3c;
    }

    .studio-name {
        font-size: 1rem; /* Adjusted for smaller screens */
    }

    .logo-area {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .clients-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 300px;
    }

    .client-logo {
        max-width: 80px;
        max-height: 40px;
    }
   
}

/* 
====================
    MOBILE THIN
====================
*/
@media screen and (max-width: 430px) {

#heading h1 {
    margin-top: 40px;
    }

       h1  {
        color: var(--accent-color);
        text-shadow: 0px 0px 8px #201c3c;
    
    }

}


/* 
====================
    MOBILE EXTRA-THIN
====================
*/
@media screen and (max-width: 380px) { 

h1  {
        font-size: 1.5rem;
    }

#heading h1 {
    margin-top: 20px;
    }


}
/* 
====================
    LEAF ANIMATION
====================
*/


/* Leaf Animation Styles */
#leaf-container {
    position: absolute; /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Will be set dynamically in JS for full page height */
    pointer-events: none;
    z-index: -1;
    overflow: hidden; /* Prevent leaves straying outside */
}

.leaf {
    position: absolute;
    top: 50px; /* Start at the top of the page */
    width: 30px;
    height: 30px;
    pointer-events: none;
    background-image: url('img/leaf.webp');
    background-size: contain;
    background-repeat: no-repeat;
    /* Animate top for falling, transform for swaying */
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite; /* Fall once, sway infinitely during fall */
    animation-direction: normal, alternate; /* Sway back and forth */
    animation-fill-mode: forwards; /* Keep final state of fall */
}

@keyframes fall {
    to {
        top: var(--fall-distance); /* Animate top instead of transform */
    }
}

@keyframes sway {
    from {
        transform: translateX(-10px) rotate(calc(var(--start-rotation, 0deg) + -10deg)) scale(var(--start-scale, 1));
    }
    to {
        transform: translateX(10px) rotate(calc(var(--start-rotation, 0deg) + 10deg)) scale(var(--start-scale, 1));
    }
}

/* 
====================
    FONT
====================
*/


/* Critical CSS (moved from inline) */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lexend');
}