/*
Author: Olga Ledis
Date: 09.29.2024
File Name: styles.css
*/

:root {
    /* Colors */
    --primary-color-dark-blue: #081640; /* Dark Blue */
    --primary-color-warm-maroon: #8C1B11; /* Warm Maroon */
    --accent-color-teal: #3DB3CF;           /* Teal */
    --accent-color-pure-blue: #18298C;      /* Pure Blue */
    --accent-color-ochre: #D9B36C;           /* Ochre */
    --accent-color-fire-leaf: #D94711;      /* Fire Leaf */
    --system-feedback-error-red: #E01914;      /* Error Message Red */
    --system-feedback-warning-yellow: #FEC84B;      /* Warning Message Yellow */
    --system-feedback-success-green: #079455;      /* Success Message Green */
    --background-color: #f5f5f5;       /* Light Background */
    --text-color: #333333;             /* Dark Text */
    --link-color: #3e838f;             /* Link Color */
    --hover-color: rgba(0, 0, 0, 0.1); /* Hover Effect Color */
    --border-color: #dcdcdc;           /* Border Color */
    
    /* -------------Typography----------------- */

    /* Font Families */
    --font-primary: "Agenda", Arial, sans-serif;
    --font-secondary: "Forma DJR Micro", Helvetica, sans-serif;

    /* Font Weights */
    --font-primary-weight-light: 300;
    --font-primary-weight-regular: 400;
    --font-primary-weight-bold: 700;
    --font-primary-weight-black: 800;


    --font-secondary-weight-light: 200;
    --font-secondary-weight-regular: 400;
    --font-secondary-weight-medium: 600;
    --font-secondary-weight-bold: 700;
    --font-secondary-weight-black: 800;


    /* Font Sizes */
    --font-size-sm: 0.875rem; /* Small text size (14px) */
    --font-size-base: 1rem; /* Base text size (16px) */
    --font-size-button: 1.5rem; /*buttons*/
    --font-size-lg: 1.25rem; /* Large text size (20px) */
    --font-size-xl: 2rem; /* Extra large text size (32px) */
   
    /*font weight for nav*/
    --font-weight-nav: 800;

    /* Line Heights */
    --line-height-base: 1.66; /* Default line height */
    --line-height-heading: 1.2; /* Tighter line height for headings */

    /* ----------------------Spacing--------------------------- */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 128px;

    /* -----------------------Borders -------------------------------*/

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-hg: 72px;

/* ----------------------- Gradients -------------------------------*/

    /* Gradients */
    --gradient-brown-darkblue: linear-gradient(to right, #7D380E 0%, 17.738094925880432%, #0E1C50 35.476189851760864%, 67.73809492588043%, #213165 100%);
    --gradient-darkblue-blue: linear-gradient(to right, #060D28 0%, 17.738094925880432%, #0E1C50 35.476189851760864%, 67.73809492588043%, #213165 100%);
    --gradient-grey-lightteal: linear-gradient(to left, #DDDDD2 0%, 18.881118297576904%, #42C4D4 37.76223659515381%, 68.8811182975769%, #2493B1 100%);
    --gradient-brown-lightbrown: linear-gradient(to left, #7D1B0E 0%, 17.813267813267814%, #C34314 35.62653562653563%, 67.81326781326781%, #DC6022 100%);

/* ----------------------- Transitions -------------------------------*/

    /* Transitions */
    --transition-duration: 0.3s;
    --transition-ease: ease-in-out;

}

/* -------------------CSS Reset----------------------------------- */

body, header, nav, main, footer, img, h1, ul, h3, p {
    margin: 0; /* Reset default margins */
    padding: 0; /* Reset default padding */
    border: 0; /* Reset default borders */
}
/* -------------------------------Global Styles------------------------------------------ */

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-primary);
    font-style: var(--font-style-primary);
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    justify-content: center; /* Center-align content horizontally */
    align-items: stretch; /* Align items to the top */
    box-sizing: border-box; /* Include padding in width calculations */
}

.flickr-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    justify-content: center; /* Ensure grid content is centered */
    padding: var(--space-lg);
    box-sizing: border-box; /* Include padding in width calculations */
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(240, 240, 240, 1)); /* Light gradient */
    border-radius: 0;
}

.gallery-container, .flickr-gallery-wrapper {
    width: 100%;
    margin: 0 auto; /* Center the container horizontally */
}

figure {
    display: flex; /* Flexbox for alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack image and caption */
    width: 100%; /* Ensure figure spans full width */
    margin: 0;
}

.gallery-item {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-item-wrapper {
    transition: transform 0.3s ease, 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.gallery-item-wrapper:hover {
    transform: scale(1.1); /* Scale image and caption together */
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Force a square ratio */
    border-radius: 3px; /* Round only the top corners */
    max-width: 100%; /* Prevents overflow */
    height: auto; /* Maintains the aspect ratio */
    min-width: 250px; /* Ensures the image is at least 400px wide */
    object-fit: cover; /* Optional: Ensures the image covers the area without distortion */
}


.gallery-item figcaption {
    width: 100%; /* Match the width of the image */
    max-width: 100%; /* Prevent overflow */
    margin-top: var(--space-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-primary-weight-bold);
    text-align: center;
    color: black;
}


/* Lightbox overlay */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
    z-index: 1000; /* Ensure it appears above other elements */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
}

.lightbox-wrapper {
    display: flex; /* Flexbox for horizontal layout */
    flex-direction: row; /* Align items side-by-side */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    max-width: 90%; /* Restrict total width */
    max-height: 90%; /* Restrict total height */
    gap: 20px; /* Space between image and text */
    background: white; /* Solid white background for text and image container */
    border-radius: 8px; /* Add rounded corners */
    padding: 20px; /* Add padding around content */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.lightbox-image {
    max-width: 50%; /* Restrict image to half the width */
    max-height: 70vh; /* Ensure the image fits within the viewport */
    object-fit: contain; /* Scale image while maintaining aspect ratio */
    border-radius: 8px; /* Optional: Rounded corners for image */
}

.lightbox-description {
    max-width: 50%; /* Restrict text to half the width */
    font-size: 1rem;
    color: black; /* Black text color */
    line-height: 1.6; /* Improve text readability */
    text-align: left; /* Align text to the left */
}

/* Fade-in animation for the lightbox */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.gallery-item:hover {
    transform: scale(1.05);
}

.lightbox-caption {
    margin-top: 10px;
    color: white;
    font-size: 1.2rem;
    text-align: center;
    max-width: 90%;
    word-wrap: break-word;
    line-height: 1.4;
}

process-block {
    display: grid; /* Ensures it's treated as a block element */
    grid-template-columns: auto auto;
    gap: var(--space-lg);
    max-width: 100%; /* Restrict the width */
    border-radius: var(--border-radius-hg);
    margin-top: 90px;
    padding-top: 120px; 
    padding: var(--space-lg); /* Center align with some vertical margin */
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(240, 240, 240, 1)); /* Light gradient */
    justify-content: center; /* Center-align content horizontally */
    box-sizing: border-box; /* Include padding in width calculations */
    transform: translateY(100px); /* Start with a downward offset */
    transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth animation */
    opacity: 0; /* Hidden by default */
}

process-block.active {
    transform: translateY(0); /* Slide the process-block into place */
    opacity: 1; /* Make it visible */
}

process-block:not(.active) {
    transform: translateY(100px); /* Keep the offset for inactive blocks */
    opacity: 0; /* Keep it hidden */
}


process-block#process-1 {
    background: var(--gradient-darkblue-blue);
}

process-block#process-1 h1{
    color: white;
}
process-block#process-3 {
    background: var(--gradient-darkblue-blue);
}

process-block#process-3 h1{
    color: white;
}

.process-block h1 {
    font-family: var(--font-primary);
    font-weight: var(--font-primary-weight-bold);
    margin-bottom: 15px;
    color: var(--accent-color-maroon);
}

.process-block p {
    font-family: var(--font-secondary);
    font-size: 1.2rem; /* Maintain readability */
    line-height: 1.6;
    color: black;
    max-width: 800px; /* Restrict text width for better readability */
}

process-block {
    display: block;
    width: 100%;
    padding: var(--space-xl);
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Add spacing and style to match the gallery layout */
.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Add space between blocks */
    margin-top: 30px;
}

.fullwidth img {
    display: block; /* Remove any extra spacing caused by inline elements */
    width: 100%; /* Ensure the image spans the full width of its container */
    height: auto; /* Maintain aspect ratio */
}

/* ---------------------------------------Media Queries ------------------------------------------------ */

/*------------Small devices (e.g., tablets): smaller than 900px-----------*/

@media (max-width: 899px) {

    .nav {
        display: none; /* Hide desktop navigation on small screens */
    }

    .layout {
        display: grid;
        grid-template-columns: 100%fr; /* Single-column layout */
        grid-template-rows: auto auto auto; /* rows for nav, content and footer */
        grid-template-areas: 
            "mobilenavbar"
            "content"
            "footer";
        align-items: start; /* Align items to the top */
        gap: var(--space-sm); /* Adds space between rows */
    }


    .mobilenavbar {
        display: flex;
        max-width: 100vw;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "mobilelogo promotext menutoggle";
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 10;
        padding: 0 16px;
        padding-top: 4px;
    }
    
    .mobilenavbar, .mobilenavbar * {
        margin: 0;
        box-sizing: border-box; /* Ensure padding and borders are included in width calculations */
    }
    /* Logo styling */

    .mobilelogo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px; /* Fixed width */
    }
    
    .mobilelogo-image {
        width: 100%; /* Make the logo fit the parent container */
        height: auto;
        border-radius: 50%; /* Optional: Keep it circular */
    }
    
    .menutoggle {
        grid-area: menutoggle; /* Assign menu toggle area */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90px !important; /* Same width as the logo */
        height: 90px; /* Match the height for consistency */
    }

    .mobilenavtext {
        grid-area: promotext; /* Assign text area */
        text-align: center; /* Center-align the text */
        font-family: var(--font-primary);
        font-size: var(--font-size-lg); /* Adjust font size as needed */
        color: var(--primary-color-warm-maroon);
        font-weight: var(--font-primary-weight-regular); /* Optional: make the text bold */
    }

    /* Hide the default checkbox */
    .menu-toggle-checkbox {
        display: none;
    }
    
    /* Hamburger icon styling */
    .menu-toggle-label {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 25px;
        position: relative;
    }
    
    .hamburger,
    .hamburger::before,
    .hamburger::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #000;
        transition: transform 0.3s ease, opacity 0.3s ease;
        position: absolute;
    }
    
    .hamburger::before {
        top: -8px;
    }
    
    .hamburger::after {
        top: 8px;
    }
    
    /* Rotate hamburger icon to 'X' when menu is active */
    .menu-toggle-checkbox:checked + .menu-toggle-label .hamburger {
        transform: rotate(45deg);
    }
    
    .menu-toggle-checkbox:checked + .menu-toggle-label .hamburger::before {
        transform: rotate(90deg);
        top: 0;
    }
    
    .menu-toggle-checkbox:checked + .menu-toggle-label .hamburger::after {
        opacity: 0;
    }

    
    /* Navigation menu styling */
    
    .mobilenav {
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000; /* Ensure it appears above other elements */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
        background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent background */
        backdrop-filter: blur(10px); /* Blur effect behind the menu */
        padding: 20px 15px; /* Add spacing inside the menu */

    }

    .mobilenav a {
        text-decoration: none; /* Remove underline */
        color: black; /* Default color */
        padding: 10px; /* Add padding for spacing */
        display: block; /* Ensure links take up full width */
        text-align: center;
        font-family: "Agenda", sans-serif;
        font-size: 54px;
        font-weight: var(--font-weight-nav);
        text-transform: uppercase;
        line-height: 100%;
        position: relative; /* Enables pseudo-elements */
        z-index: 1; /* Keeps text above the background */
        transition: color 0s ease-in-out; /* Smooth transition for text color */
    }

    .mobilenav ul {
        list-style-type: none; /* Removes bullets */
        margin: 0; /* Resets default margin */
        padding: 0; /* Resets default padding */
    }

    .mobilenav a span {
        display: block;
    }
    
    .mobilenav a:active {
        opacity: 0.7; /* Dim the link on tap */
        transform: scale(0.95); /* Slightly shrink the text */
        transition: transform 0.2s ease; /* Smooth effect */
    }

    .mobilenav a:active span {
        background: var(--gradient-grey-lightteal);    
    }

    .mobilenav.active {
        display: block !important;
    }


    .mobilenav a:active::before {
        transform: scaleX(1); /* Keep background expanded on click */
    }

    .mobilenav a.current {
        color: white;
        background: var(--gradient-grey-lightteal);
    }

    .menu-toggle {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: right;
        width: 30px;
        height: 25px;
        padding-right: 30px;
        margin-right: 30px;
        margin-left: 30px;
        position: relative;

    }

    .hamburger,
    .hamburger::before,
    .hamburger::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: black;
        transition: transform 0.3s ease, opacity 0.3s ease;
        position: absolute;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        top: 8px;
    }

    .menu-toggle.active .hamburger {
        transform: rotate(45deg);
    }

    .menu-toggle.active .hamburger::before {
        transform: rotate(90deg);
        top: 0;
    }

    .menu-toggle.active .hamburger::after {
        opacity: 0;
    }
    

    /* Adjust the main content to avoid being hidden under the fixed navbar */

    body {
        padding-top: 60px; /* Height of the mobilenavbar */
    }

    main.content {
        grid-area: content; /* Place main content and nav here */
        display: flex;
        flex-direction: column;
    }

    .lightbox-wrapper {
        flex-direction: column; /* Stack image and text vertically */
    }
    .lightbox-image, .lightbox-description {
        max-width: 100%; /* Full width for both elements */
    }


    footer {
        grid-area: footer; /* Place footer correctly */
    }


    /* -----Logo Sub-section Styles----- */

    .logo {
        display: none;
    }

    /*----------------Content Styles------------------*/
   
    body {
        font-size: 18px;
    }

    /* ------------ Paragraph ---------------- */

    p, .section p {
        font-size: 1rem; /* 18px */
        line-height: var(--line-height-base);
        font-weight: var(--font-secondary-weight-regular);
    }

    /* ------------ Large Title ---------------- */

    h1, .section h1 {
        font-size: 48px; 
        line-height: var(--line-height-base);
        font-weight: var(--font-primary-weight-bold);
        padding-bottom: var(--space-sm);
    }

    /* ------------ Category ---------------- */

    h2, .section h2 {
        font-size: 1.75rem; 
        line-height: 2em; 
        font-weight: var(--font-primary-weight-regular);
    }
    
    /* ------------ Lead-text ---------------- */

    h3, .section h3 {
        font-size: var(--font-size-xl); /* 36px */
        font-weight: var(--font-primary-weight-regular);
        font-family: var(--font-primary);
        line-height: 1.15em;
        padding-bottom: var(--space-sm);
        color: var(--primary-color-warm-maroon);
    }

    h4, .section h4 {
        display: none;
        font-size: 1.25rem; 
        line-height: 2.3em; 
        font-weight: var(--font-secondary-weight-light);
        font-family: var(--font-secondary);

    }

    p {
        font-family: var(--font-secondary);
    }

    .short-text {
        display: none;
        grid-area: short-text;
        text-align: left;
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
        margin-bottom: var(--space-sm);
        vertical-align: top;
        margin-top: calc(var(--space-sm) + 102px);

    }

    .dynamic {
        display: grid;
        grid-area: content;
    }

    .const {
        display: grid; 
        grid-area: content;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;"
        column-gap: 20px; /* Remove horizontal gap */
        grid-template-areas: "short-text" "nav";
        row-gap: var(--space-md);
        align-items: start;
        }
        

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

    /* Overall Section Styles */

    main.content {
        grid-area: content;
    }

    .section {
        /* Styles shared across all sections */
        display: grid; 
        grid-template-columns: 1fr; /* One column layout */
        grid-template-rows: auto auto; /* Two rows: one for text, one for image */
        row-gap: var(--space-sm); /* Space between rows */
        grid-template-areas: 
            "section-text"
            "section-image"; /* Place each in its own row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 10%;
        border-radius: 0;
        margin-bottom: var(--space-md);
        color: white;
        font-size: var(--font-size-lg);
        overflow: hidden;
        position: sticky; /* Sticks the section as you scroll */
        height: auto;
        min-height: calc(100vh - 20px); /* Viewport height minus 20 pixels */
        top: 20px; /* Positions the sticky section to the top of the viewport */
        box-sizing: border-box; /* Ensures padding is included in the width calculation */
        z-index: 1; /* Ensures the sections stack properly */
        transform: translateY(100px); /* Start with a downward offset */
        transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth animation */
    }


    .section.active {
        transform: translateY(0); /* Slide the section into place */
    }

    .section:not(.active) {
        transform: translateY(100px); /* Start with a downward offset */
    }

    .section + .section {
        margin-top: -10vh; /* Overlap the top of the next section */
    }

    .image-fit {
        width: 100%; /* Fill the width of the container */
        height: 100%; /* Fill the height of the container */
        object-fit: cover; /* Crop the image to fit without stretching */
        display: block; /* Remove extra space below the image */
    }

    .image-bleed {
        width: 120%; /* Make it 20% wider to "bleed" out on the right */
        height: 150%; /* Make it 50% taller than the container */
        object-fit: cover; /* Still maintain cropping */
        position: relative;
        right: -10%; /* Offset the image to bleed out on the right */
        top: -25%; /* Optionally, shift it upward to center vertically */
    }

    #featured-1 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
        margin-top: 0;
    }

    #featured-2 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-3 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);

    }

    #featured-4 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
    }

    #featured-5 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-5 .image-fit {
        border-radius: 50%;
        width: 50%;
        height: auto;
        object-fit: cover;
    }

    #featured-5 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 100%; /* Ensures the container takes up full height */
    }

    #featured-6 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
    }

    #featured-6 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 50%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-6 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }
    
    #featured-7 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);
    }

    #featured-7 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 100%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-7 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }

    .text-block {
        width: 100%;
        align-items: normal;
        display: grid;
        box-sizing: border-box;
        overflow: hidden;
        position: sticky;
        top: 20px; /* space at the top  - IMPORTANT!*/
        min-height: 70vh; /* Ensure the block takes most of the screen height */
        border-radius: 0;
        color: var(--text-color);
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        opacity: 1; 
        padding: var(--space-lg);
    }

    .text-block + .text-block {
        margin-top: -25vh; /* Overlap a bit to indicate the next section */
    }

    .text-block a {
        color: white;
        text-align: center;
        border: 1px solid white; 
        padding: 20px 15px; 
        text-decoration: none; /* Remove underline */
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-button);
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
        margin-bottom: 10px; /* Adds space between buttons vertically */
    }

    .text-block a:hover {
        color: var(--accent-color-fire-leaf);
        text-decoration: none;
        background: black;
        border: 1px solid black;
    }

    .button-group {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        gap: var(--space-md); /* Adds space between buttons */
        width: 100%; /* Ensures the container takes the full width */
    }
    
    .button-group a {
        display: block; /* Ensures the anchor tags behave like block elements */
        text-align: center; /* Centers the text inside the buttons */
        padding: 12px; /* Adjust padding as needed */
        font-size: var(--font-size-button);
        background-color: var(--accent-color-fire-leaf); /* Dark background */
        color: #fff; /* Light text for contrast */
        text-decoration: none; /* Removes underline from links */
        border-radius: 2px; /* Optional: adds rounded corners */
        width: 100%; /* Makes each button take the full width of the parent */
        box-sizing: border-box; /* Includes padding in width calculation */
    }
    
    .button-group a:hover {
        background-color: #555; /* Slightly lighter background on hover */
    }

    #about-2 {
        padding: 10%;
        background: var(--gradient-darkblue-blue);
        }

    #about-1 {
        padding: 10%;
        background-color: white;
        color: black;
        }

    #about-3 {
        padding: 10%;
        background-color: white;
        color: black;
        }


    #text-block-2 {
        display: grid;
        gap: 10%; /* Space between the columns */
        align-items: start; /* Align items vertically */
        padding: 10% 25% 10% 10%;
        background: var(--gradient-brown-lightbrown);
    }


    /* Image Column */

    .image-column {
        width: 200px;
        height: 200px;
        display: flex; /* Centers the image within the div */
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Ensures content doesn't overflow the div */
        padding: var(--space-sm) 0%;
    }
    
    .image-column img {
        width: 150px; /* Set the width of the circle */
        height: 150px; /* Set the height of the circle (equal to width) */
        border-radius: 50%; /* Makes the image a circle */
        overflow: hidden; /* Ensures content outside the circle is hidden */
        object-fit: cover; /* Ensures the image covers the circle without distortion */
        display: block; /* Optional: Removes extra space for inline images */
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */

    }

    /* Text Column */
    .text-column {
        display: flex;
        flex-direction: column; /* Stack text vertically */
        justify-content: start;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */
    }

    #text-block-4 {
        background: white;
        padding: 10% 25% 10% 10%;
        min-height: 75vh; /* Minimum height equals the screen height */
    }
    .flickr-gallery-wrapper {
        grid-template-columns: 1fr; /* Single column */
        grid-auto-rows: auto; /* Adjust rows automatically */
    }

    process-block {
        grid-template-columns: 1fr;
        padding: 10%;
        border-radius: 0;
        margin-top: 0;
    }

    process-block h1 {
    line-height: var(--line-height-heading);
    }

    process-block p {
        line-height: var(--line-height-base);
        margin-bottom: var(--space-md);
    }


    footer {
        min-height: 50vh; /* Allow height to adjust dynamically */
        grid-area: footer; 
        padding: var(--space-md); /* Reduce padding for smaller screens */
        text-align: center; /* Keep text centered */
        display: flex; /* Use flex for simpler mobile layout */
        flex-direction: column; /* Stack content vertically */
        gap: var(--space-sm); /* Space between items */
        background: linear-gradient(180deg, #ffffff, #f9f9f9, #e6f7f9); /* Faint teal at the bottom */
        border: none;
        box-shadow: none;
    }

    .tagline {
        display: none; /* Hide tagline on smaller screens */
    }

    footer .mobiletagline h1 {
        font-size: var(--font-style-primary);
        font-weight: var(--font-primary-weight-regular); /* Bold font for emphasis */
        font-size: var(--font-size-lg);
        color: var(--primary-color-warm-maroon);
        margin: 0; /* Remove default margin */
        line-height: 1.5; /* Add spacing between lines */
    }

    footer a{
        text-decoration: none;
    }
    .social-icons .icon {
        width: 60px; /* Set icon size */
        height: 60px;
        padding: 10px; /* Add some padding around the container */
        fill: var(--primary-color-warm-maroon); /* Default color */
        transition: fill 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
    }

    .social-icons a:hover .icon {
        opacity: 0.75; /* Slightly transparent on hover */
        fill: black; /* Default color */
        transform: scale(1.1); /* Slightly enlarge icon */
    }

    footer p {
        color: black;
    }
    .quick-links {
        display: none;
    }

    .footer-email {
        display: flex;
        justify-content: center; /* Center the content horizontally */
        font-family: var(--font-secondary);
        font-weight: var(--font-secondary-weight-bold);
        color: var(--accent-color-teal);
        margin-top: 15%;
        margin-bottom: 20px;
    }

    .footer-email a {
        width: 90vw; /* Adjust to 90% of viewport width */
        font-size: calc(5vw + 12px); /* Dynamically scale font size */
        color: var(--accent-color-teal); /* Default link color */
        text-decoration: underline;
        transition: transform 0.3s ease-in-out; /* Smooth click animation */
    }

    .footer-email a:active {
        opacity: 0.75; /* Slightly transparent on click */
        color: var(--primary-color-warm-maroon);
        transform: scale(1.1); /* Slightly enlarge the link on click */
    }
    footer p {
        padding: 60px;
        color: black;
    }
}


/*------------Medium devices (e.g., small laptops): 900–1199px-----------*/

@media (min-width: 900px) and (max-width: 1199px) {
     /* ---------Layout Section Styles----------- */

     .mobilenavbar {
        display: none;
     }

     .layout {
        display: grid;
        grid-template-columns: 140px auto; /* Logo, nav and short text*/
        grid-template-rows: auto auto; /* Rows for content and footer */
        grid-template-areas: "logo content" "footer footer";
        align-items: top; /* Vertically align items */
        width: 100%;
        gap: var(--space-md); /* Adds space between columns */
    }

    /* -----Logo Sub-section Styles----- */

    .logo {
        grid-area: logo; /* Assigns this element to the grid area */
        display: flex;
        align-items: flex-start; /* Aligns logo to the top */
        justify-content: center;
        text-decoration: none;
        color: inherit;
        position: sticky; /* Makes the logo sticky */
        top: 20px; /* Defines the sticky offset from the top of the viewport */
        height: 120px; /* Matches image height to control layout */
        padding: 10%; /* Optional padding */
        background: white; /* Add a background color to avoid transparency issues */
        z-index: 10; /* Ensures the logo stays on top of other content */
        margin-left: var(--space-md);
    }

    .logo-image {
        height: 100%;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .logo:hover .logo-image {
        transform: rotate(90deg); /* Subtle rotation */
        opacity: 0;
    }

    .logo-text {
        position: absolute;
        top: 50%;  /* Centers text vertically over the image */
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
        text-align: center;
        font-size: 21px;
    }

    .logo:hover .logo-text {
        opacity: 1;
        visibility: visible;
    }
    .extra {
        display: none;
    }

    /*----------------Content Styles------------------*/

    main.content {
        grid-area: content;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin-right: var(--space-md);
    }

    .const {
        display: grid; 
        grid-area: content;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;"
        column-gap: 20px; /* Remove horizontal gap */
        grid-template-areas: "short-text" "nav";
        row-gap: var(--space-md);
        align-items: start;
    }

    /* -----Nav Sub-section Styles----- */

    nav {
        grid-area: nav;
        width: auto;
        background-color: white; /* Background for the navigation container */
        padding: 0; /* No extra spacing inside the nav */
        border-radius: var(--border-radius-sm); /* Rounded corners */
        width: 100%;
        position: relative;

    }

    nav ul {
        list-style: none; /* Removes bullet points */
        padding: 0; /* Resets padding */
        margin: 0; /* Resets margin */
    }

    nav li {
        margin: 0; /* Removes extra spacing between list items */
        padding: 0; /* No padding for list items */
    }

    nav a {
        text-decoration: none; /* Removes underline from links */
        color: black; /* Default text color */
        padding: 10px 15px; /* Padding for clickable area */
        display: block; /* Ensures the entire area is clickable */
        text-align: left; /* Aligns text to the left */
        font-size: 72px; /* Large font size */
        font-weight: var(--font-weight-nav); /* Makes the text bold */
        text-transform: uppercase; /* Transforms text to uppercase */
        line-height: 72px; /* Controls line height */
        overflow: hidden; /* Hides overflowing content */
        position: relative; /* Enables pseudo-elements for background effects */
        z-index: 1; /* Ensures text stays above the background */
        transition: color 0.3s ease-in-out; /* Smooth transition for text color */
    }

    nav a::before {
        content: ""; /* Empty content for the background effect */
        position: absolute; /* Positions it relative to the parent */
        top: -15%; /* Offset upward to account for extra height */
        left: 0; /* Aligns to the left */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        background: var(--gradient-grey-lightteal); /* Use the gradient variable */
        transform: scaleX(0); /* Initially hidden */
        transform-origin: left; /* Starts growing from the left */
        transition: transform 0.6s ease-in-out; /* Smooth scaling effect */
        z-index: -1; /* Places it behind the text */
    }

    nav a:hover {
        color: white; /* Changes text color on hover for contrast */
    }

    nav a:hover::before {
        transform: scaleX(1); /* Expands the background fully on hover */
    }

    nav a:active::before {
        transform: scaleX(0); /* Shrinks the background on click */
    }

    /* Add this for the text scaling effect */
    nav a span {
        display: inline-block; /* Required for scaling */
        transition: transform 0.6s ease-in-out; /* Smooth scaling effect */
    }

    nav a:hover span {
        transform: scale(1.5); /* Scales text up on hover */
        transition: transform 0.6s ease-in-out; /* Smooth transition for text scaling */
        transform-origin: left; /* Keeps scaling consistent with the background */
    }

    /* -----Right  Sub-section Styles----- */

    .short-text {
        grid-area: short-text;
        text-align: left;
        font-size: 21px;
        margin-top: calc(var(--space-xl) + 20px);
        vertical-align: top;
    }

    h1 {
        font-size: var(--font-size-xxl);
    }

    p {
        font-family: var(--font-secondary);
        line-height: 1.6em;
    }

    h3, .short-text h3 {
        font-size: 1.75rem; 
        font-weight: var(--font-weight-regular);
        font-family: var(--font-primary);
        line-height: 1.4em;
        padding-bottom: var(--space-sm);
        padding-left: 10px;
        padding-right: 10px;
        color: var(--primary-color-warm-maroon);
    }
    .dynamic {
        display: grid;
        grid-area: content;
    }

    /* Header styles */
    header {
        text-align: center;
        padding: 20px 0;
    }

    /* Overall Section Styles */

    .section {
        /* Styles shared across all sections */
        display: grid; 
        grid-template-columns: 1fr; /* One column layout */
        grid-template-rows: auto auto; /* Two rows: one for text, one for image */
        row-gap: var(--space-lg); /* Space between rows */
        grid-template-areas: 
            "section-text"
            "section-image"; /* Place each in its own row */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 10%;
        border-radius: var(--border-radius-hg);
        margin-bottom: var(--space-lg);
        color: white;
        font-size: var(--font-size-lg);
        overflow: hidden;
        position: sticky; /* Sticks the section as you scroll */
        top: 20px; /* Positions the sticky section to the top of the viewport */
        height: calc(100vh - 20px); /* Viewport height minus 20 pixels */
        box-sizing: border-box; /* Ensures padding is included in the width calculation */
        z-index: 1; /* Ensures the sections stack properly */
        transform: translateY(100px); /* Start with a downward offset */
        transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth animation */
    }


    .section.active {
        transform: translateY(0); /* Slide the section into place */
    }

    .section:not(.active) {
        transform: translateY(100px); /* Start with a downward offset */
    }

    .section + .section {
        margin-top: -10vh; /* Overlap the top of the next section */
    }

    process-block {
        grid-template-columns: 1fr;
        padding: 10%;
        margin-top: 0;
    }

    process-block h1 {
    line-height: var(--line-height-heading);
    font-size: 3rem;
    font-weight: var(--font-primary-weight-black);
    margin-bottom: 15px;
    }

    process-block p {
        line-height: var(--line-height-base);
        margin-bottom: var(--space-md);
    }

    .flickr-gallery {
        border-radius: var(--border-radius-hg);
        margin-top: 90px;
        padding-top: 120px; 
    }

    .section h1 {
        font-size: 3rem;
        line-height: var(--line-height-heading);
    }

    .section h4 {
        font-family: var(--font-secondary);
        font-weight: var(--font-secondary-weight-light);
        line-height: var(--line-height-base);
    }

    .section p {
        line-height: var(--line-height-base);
    }

    process-block {
        grid-template-columns: 1fr;
        padding: 10%;
    }

    .image-fit {
        width: 100%; /* Fill the width of the container */
        height: 100%; /* Fill the height of the container */
        object-fit: cover; /* Crop the image to fit without stretching */
        display: block; /* Remove extra space below the image */
    }

    .image-bleed {
        width: 120%; /* Make it 20% wider to "bleed" out on the right */
        height: 150%; /* Make it 50% taller than the container */
        object-fit: cover; /* Still maintain cropping */
        position: relative;
        right: -10%; /* Offset the image to bleed out on the right */
        top: -25%; /* Optionally, shift it upward to center vertically */
    }

    #featured-1 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
        margin-top: 0;
    }

    #featured-2 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-3 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);

    }

    #featured-4 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);
    }

    #featured-5 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-5 .image-fit {
        border-radius: 50%;
        width: 50%;
        height: auto;
        object-fit: cover;
    }

    #featured-5 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 100%; /* Ensures the container takes up full height */
    }

    #featured-6 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
    }

    #featured-6 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 50%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-6 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }

    #featured-7 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);
    }

    #featured-7 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 50%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-7 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }

    .text-block {
        position: sticky;
        top: 20px; /* space at the top  - IMPORTANT!*/
        min-height: 70vh; /* Ensure the block takes most of the screen height */
        background: white; /* Example background */
        border-radius: var(--border-radius-hg);
        color: var(--text-color);
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        opacity: 1; 
    }

    .text-block + .text-block {
        margin-top: -25vh; /* Overlap a bit to indicate the next section */
    }


    .text-block a {
        color: white;
        text-align: center;
        border: 1px solid white; 
        padding: 20px 15px; 
        text-decoration: none; /* Remove underline */
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-button);
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
        margin-bottom: 10px; /* Adds space between buttons vertically */
    }

    .text-block a:hover {
        color: var(--accent-color-fire-leaf);
        text-decoration: none;
        background: black;
        border: 1px solid black;
    }

    .button-group {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        gap: var(--space-md); /* Adds space between buttons */
        width: 70%; /* Adjust as needed for the desired button width */
        margin: 0 auto; /* Center-align the group within its parent container */
        align-items: center; /* Align buttons horizontally within the group */
        margin-top: 5%;
    }
    
    .button-group a {
        display: block; /* Ensures the anchor tags behave like block elements */
        text-align: center; /* Centers the text inside the buttons */
        padding: 12px; /* Adjust padding as needed */
        font-size: var(--font-size-button);
        background-color: var(--accent-color-fire-leaf); /* Dark background */
        color: #fff; /* Light text for contrast */
        text-decoration: none; /* Removes underline from links */
        border-radius: 2px; /* Optional: adds rounded corners */
        width: 100%; /* Makes each button take the full width of the parent */
        box-sizing: border-box; /* Includes padding in width calculation */
    }
    
    .button-group a:hover {
        background-color: #555; /* Slightly lighter background on hover */
    }

    #text-block-1 {
        padding: 10%;
        }

    #text-block-1 h1 {
            color: black; /* Set h1 color to black */
            line-height: var(--line-height-base);
        }


    .two-column-block {
        display: grid;
        grid-template-columns: 0.35fr 1fr; /* Adjust as needed */
        gap: var(--space-md);
        align-items: start; /* Align items to the top */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }

    #text-block-2 {
        display: grid;
        gap: 10%; /* Space between the columns */
        align-items: start; /* Align items vertically */
        padding: 10% 25% 10% 10%;
        background: var(--gradient-brown-lightbrown);
    }


    /* Image Column */
    .image-column img {
        width: 200px; /* Set the width of the circle */
        height: 200px; /* Set the height of the circle (equal to width) */
        border-radius: 50%; /* Makes the image a circle */
        overflow: hidden; /* Ensures content outside the circle is hidden */
        object-fit: cover; /* Ensures the image covers the circle without distortion */
        display: block; /* Optional: Removes extra space for inline images */
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */

    }

    /* Text Column */
    .text-column {
        display: flex;
        flex-direction: column; /* Stack text vertically */
        justify-content: start;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */
    }

    #text-block-3 {
        background: var(--gradient-darkblue-blue);
        color: white;
        padding: 10% 25% 10% 10%;
        min-height: 75vh; /* Minimum height equals the screen height */
        border-top-left-radius: var(--border-radius-hg);
        border-top-right-radius: var(--border-radius-hg);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

    }

    #text-block-4 {
        background: white;
        padding: 10% 25% 10% 10%;
        min-height: .9vh; /* Minimum height equals the screen height */
    }

    .flickr-gallery-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto; /* Adjust rows automatically */
    }

    footer {
        min-height: 50vh;
        grid-area: footer; 
        padding: var(--space-lg);
        text-align: center;
        font-size: var(--font-size-base);
        color: white; 
        display: grid; /* Make it a grid container */
        padding-bottom: var(--space-xl);
        background: linear-gradient(180deg, #ffffff, #f9f9f9, #e6f7f9); /* Faint teal at the bottom */
    }

    .mobiletagline {
        display: none;
    }

    footer h1{
        text-align: center; /* Center align the text */
        margin: 10px 0; /* Add margin around the h2 */
        font-weight: 500;
    }

    footer a{
        text-decoration: none;
    }

    
    footer .social {
        text-decoration: none; /* Remove underline from links */
    }

    .social-icons .icon {
        width: 60px; /* Set icon size */
        height: 60px;
        padding: 10px; /* Add some padding around the container */
        margin-top: 30px;
        margin-bottom: 30px;
        fill: var(--primary-color-warm-maroon); /* Default color */
        transition: fill 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
    }

    .social-icons a:hover .icon {
        opacity: 0.75; /* Slightly transparent on hover */
        fill: black; /* Default color */
        transform: scale(1.1); /* Slightly enlarge icon */
    }

    footer .tagline h1 {
        font-size: var(--font-style-primary);
        font-weight: var(--font-primary-weight-regular); /* Bold font for emphasis */
        font-size: var(--font-size-lg);
        color: var(--primary-color-warm-maroon);
        margin: 0; /* Remove default margin */
        margin-top: 25px;
        line-height: 1.5; /* Add spacing between lines */
    }

    .quick-links {
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        display: flex; /* Arrange links in a row */
        justify-content: center; /* Center them horizontally */
        gap: var(--space-md); /* Add space between items */
    }
    
    .quick-links a {
        display: inline-block;
        text-decoration: none; /* Remove underline */
        padding: 5px 0; /* Add padding for a button-like feel */
        font-size: 1.8rem; /* Larger font size for prominence */
        font-weight: var(--font-weight-nav);
        color: black; /* Set link color */
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover and click transitions */
        vertical-align: middle; /* Align all links to the middle */
    }
    
    .quick-links a:hover {
        opacity: 0.75; /* Slightly transparent on hover */
        transform: scale(1.1); /* Slightly enlarge the link */
    }
    
    .quick-links a:active {
        transform: scale(0.95); /* Shrink slightly on click */
    }
    
    .quick-links a.current {
        display: inline-block;
        background: var(--accent-color-teal);
        text-decoration: none; /* Remove underline */
        color: white;
        padding: 5px 10px; /* Add padding for a button-like feel */

    }

    .footer-email {
        display: flex;
        justify-content: center; /* Center the content horizontally */
        font-family: var(--font-secondary);
        font-weight: var(--font-secondary-weight-bold);
        color: var(--accent-color-teal);
        margin-top: 20px; /* Add some space above the link */
        margin-bottom: 20px;
    }

    .footer-email a {
        width: 60vw;
        font-size: calc(5vw + 12px); /* Dynamically scale font size based on screen width */
        color: var(--accent-color-teal); /* Default link color */
        text-decoration: underline; /* Remove underline */
        transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth hover effects */
    }
    
    .footer-email a:active {
        opacity: 0.75; /* Slightly transparent on click */
        color: var(--primary-color-warm-maroon);
        transform: scale(1.1); /* Slightly enlarge the link on click */
    }

    footer p {
        padding: 60px;
        color: black;
    }

}


/*------------------Large devices (e.g., desktops): 1200px and bigger--------------*/

@media (min-width: 1200px) {

    /* ---------Layout Section Styles----------- */

    .mobilenavbar {
        display: none;
    }

    .layout {
        display: grid;
        grid-template-columns: 140px auto; /* Logo, nav and short text*/
        grid-template-rows: auto auto; /* Rows for content and footer */
        grid-template-areas: "logo content" "footer footer";
        align-items: top; /* Vertically align items */
        width: 100%;
        gap: var(--space-md); /* Adds space between columns */
    }

    /* -----Logo Sub-section Styles----- */

    .logo {
        grid-area: logo; /* Assigns this element to the grid area */
        display: flex;
        align-items: flex-start; /* Aligns logo to the top */
        justify-content: center;
        text-decoration: none;
        color: inherit;
        position: sticky; /* Makes the logo sticky */
        top: 20px; /* Defines the sticky offset from the top of the viewport */
        height: 120px; /* Matches image height to control layout */
        padding: 10%; /* Optional padding */
        background: white; /* Add a background color to avoid transparency issues */
        z-index: 10; /* Ensures the logo stays on top of other content */
        margin-left: var(--space-md);
    }

    .logo-image {
        height: 100%;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .logo:hover .logo-image {
        transform: rotate(90deg); /* Subtle rotation */
        opacity: 0;
    }

    .logo-text {
        position: absolute;
        top: 50%;  /* Centers text vertically over the image */
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
        text-align: center;
        font-size: 21px;
    }

    .logo:hover .logo-text {
        opacity: 1;
        visibility: visible;
    }

    .extra {
        display: none;
    }

    /*----------------Content Styles------------------*/

    main.content {
        grid-area: content;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin-right: var(--space-md);
    }

    .const {
        display: flex; 
        grid-area: content;
        grid-template-columns: 1fr 1fr 300px;/* nav short text +extra*/
        column-gap: 20px; /* Remove horizontal gap */
        grid-template-areas: "nav short-text extra";
        align-items: start;
    }

    /* -----Nav Sub-section Styles----- */

    nav {
        grid-area: nav;
        width: auto;
        background-color: white; /* Background for the navigation container */
        padding: 0; /* No extra spacing inside the nav */
        border-radius: var(--border-radius-sm); /* Rounded corners */
        margin-top: calc(var(--space-xl) + 20px);
        width: 100%;
        position: relative;
    }

    nav ul {
        list-style: none; /* Removes bullet points */
        padding: 0; /* Resets padding */
        margin: 0; /* Resets margin */
    }

    nav li {
        margin: 0; /* Removes extra spacing between list items */
        padding: 0; /* No padding for list items */
    }

    nav a {
        text-decoration: none; /* Removes underline from links */
        color: black; /* Default text color */
        padding: 10px 15px; /* Padding for clickable area */
        display: block; /* Ensures the entire area is clickable */
        text-align: left; /* Aligns text to the left */
        font-size: 80px; /* Large font size */
        font-weight: var(--font-weight-nav); /* Makes the text bold */
        text-transform: uppercase; /* Transforms text to uppercase */
        line-height: 90%; /* Adjust this to align text vertically */
        overflow: hidden; /* Hides overflowing content */
        position: relative; /* Enables pseudo-elements for background effects */
        z-index: 1; /* Ensures text stays above the background */
        transition: color 0.3s ease-in-out; /* Smooth transition for text color */
    }

    nav a::before {
        content: ""; /* Empty content for the background effect */
        position: absolute; /* Positions it relative to the parent */
        top: -37%; /* Offset upward to account for extra height */
        left: 0; /* Aligns to the left */
        width: 100%; /* Full width */
        height: 120%; /* Extend background height */
        background: var(--gradient-grey-lightteal); /* Use the gradient variable */
        transform: scaleX(0); /* Initially hidden */
        transform-origin: left; /* Starts growing from the left */
        transition: transform 0.6s ease-in-out; /* Smooth scaling effect */
        z-index: -1; /* Places it behind the text */
    }

    nav a:hover {
        color: white; /* Changes text color on hover for contrast */
    }

    nav a:hover::before {
        transform: scaleX(1); /* Expands the background fully on hover */
    }

    nav a:active::before {
        transform: scaleX(0); /* Shrinks the background on click */
    }

    /* Add this for the text scaling effect */
    nav a span {
        display: inline-block; /* Required for scaling */
        transition: transform 0.6s ease-in-out; /* Smooth scaling effect */
    }

    nav a:hover span {
        transform: scale(1.5); /* Scales text up on hover */
        transition: transform 0.6s ease-in-out; /* Smooth transition for text scaling */
        transform-origin: left; /* Keeps scaling consistent with the background */
    }

    /* -----Right  Sub-section Styles----- */

    .short-text {
        grid-area: text;
        margin-top: calc(var(--space-xl) + 20px);
        text-align: left;
        font-size: var(--font-size-lg);
        margin-top: calc(var(--space-xl) + 20px);
    }

    h3, .short-text h3 {
        font-size: var(--font-size-xl); 
        font-weight: var(--font-weight-bold);
        font-family: var(--font-primary);
        line-height: 1.4em;
        padding-bottom: var(--space-sm);
        padding-left: 10px;
        padding-right: 10px;
        color: var(--primary-color-warm-maroon);
    }

    .extra {
        width: 90px;
    }

    .dynamic {
        display: grid;
        grid-area: content;
    }

    /* Header styles */
    header {
        text-align: center;
        padding: 20px 0;
    }

    /* Overall Section Styles */

    .section {
        /* Styles shared across all sections */
        display: grid; 
        grid-template-columns: .75fr 1fr; /* text and image*/
        column-gap: var(--space-xl);
        grid-template-areas: "section-text section-image";
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 5%;
        border-radius: var(--border-radius-hg);
        margin-bottom: var(--space-xl);
        color: white;
        font-size: var(--font-size-lg);
        overflow: hidden;
        position: sticky; /* Sticks the section as you scroll */
        top: 20px; /* Positions the sticky section to the top of the viewport */
        height: calc(100vh - 20px); /* Viewport height minus 20 pixels */
        width: 90%;
        z-index: 1; /* Ensures the sections stack properly */
        transform: translateY(100px); /* Start with a downward offset */
        transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth animation */
    }

    .section.active {
        transform: translateY(0); /* Slide the section into place */
    }

    .section:not(.active) {
        transform: translateY(100px); /* Start with a downward offset */
    }

    .section + .section {
        margin-top: -10vh; /* Overlap the top of the next section */
    }

    .section h1 {
        font-size: 3.75rem;
        line-height: var(--line-height-heading);
    }

    .section h4 {
        font-family: var(--font-secondary);
        font-weight: var(--font-secondary-weight-light);
        line-height: var(--line-height-base);
    }

    .section p {
        line-height: var(--line-height-base);
    }

    .flickr-gallery {
        border-radius: var(--border-radius-hg);
        margin-top: 90px;
        padding-top: 120px;
    }

    .image-fit {
        width: 100%; /* Fill the width of the container */
        height: 100%; /* Fill the height of the container */
        object-fit: cover; /* Crop the image to fit without stretching */
        display: block; /* Remove extra space below the image */
    }

    .image-bleed {
        width: 120%; /* Make it 20% wider to "bleed" out on the right */
        height: 150%; /* Make it 50% taller than the container */
        object-fit: cover; /* Still maintain cropping */
        position: relative;
        right: -10%; /* Offset the image to bleed out on the right */
        top: -25%; /* Optionally, shift it upward to center vertically */
    }

    #featured-1 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
        margin-top: 0;
    }

    #featured-1 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
        margin-top: 0;
    }

    #featured-2 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-3 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);

    }

    #featured-4 {
        /* Styles specific to this section */
        background: var(--gradient-brown-darkblue);
    }

    #featured-5 {
        /* Styles specific to this section */
        background: var(--gradient-grey-lightteal);
    }

    #featured-5 .image-fit {
        border-radius: 50%;
        width: 90%;
        height: auto;
        object-fit: cover;
    }

    #featured-5 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 100%; /* Ensures the container takes up full height */
        margin-top: 50%;
    }

    #featured-6 {
        /* Styles specific to this section */
        background: var(--gradient-darkblue-blue);
    }

    #featured-6 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 100%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-6 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }

    #featured-7 {
        /* Styles specific to this section */
        background: var(--gradient-brown-lightbrown);
    }

    #featured-7 .image-fit {
        border-radius: 50%; /* Makes the image circular */
        width: 100%; /* Ensures it takes the full width of its container */
        height: auto; /* Automatically adjusts height */
        aspect-ratio: 1; /* Forces a 1:1 aspect ratio */
        object-fit: cover; /* Ensures the image fills the container neatly */
    }
    

    #featured-7 div[section-image] {
        display: flex; /* Enables flexbox layout */
        align-items: flex-start; /* Aligns the image to the top of the container */
        justify-content: center; /* Optional: Center the image horizontally */
        height: 50%%; /* Ensures the container takes up full height */
    }


    .gallery-section {
        display: flex;
        height: calc(100vh - 20px); /* Viewport height minus 20 pixels */
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        padding: var(--space-md);
        border-radius: var(--border-radius-hg);
        margin-bottom: var(--space-xl);
        color: white;
        font-size: var(--font-size-lg);
        overflow: hidden;
        position: relative; /* Ensure arrows stay within bounds */
        width: 100%; /* Take full width of the container */
        box-sizing: border-box; /* Include padding in width calculations */
    }

    
    process-block h1 {
        font-family: var(--font-primary);
        font-weight: var(--font-primary-weight-black);
        font-size: 3.75rem;
        margin-bottom: 15px;
        margin-top: 30px;
        color: var(--accent-color-maroon);
        max-width: 100%; /* Restrict text width for better readability */

    }
    
    process-block p {
        font-family: var(--font-secondary);
        font-size: var(--font-size-lg);
        line-height: var(--line-height-base);
        margin-bottom: 15px;
        color: black;
        max-width: 100%; /* Restrict text width for better readability */
    }

    
    .text-block {
        position: sticky;
        top: 20px; /* space at the top  - IMPORTANT!*/
        min-height: 70vh; /* Ensure the block takes most of the screen height */
        background: white; /* Example background */
        border-radius: var(--border-radius-hg);
        color: var(--text-color);
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        opacity: 1; 
    }

    .text-block + .text-block {
        margin-top: -25vh; /* Overlap a bit to indicate the next section */
    }

    .text-block a {
        color: white;
        text-align: center;
        border: 1px solid white; 
        padding: 20px 15px; 
        text-decoration: none; /* Remove underline */
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-button);
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
        margin-bottom: 10px; /* Adds space between buttons vertically */
    }

    .text-block a:hover {
        color: var(--accent-color-fire-leaf);
        text-decoration: none;
        background: black;
        border: 1px solid black;
    }

    .button-group {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        gap: var(--space-md); /* Adds space between buttons */
        width: 100%; /* Adjust as needed for the desired button width */
        margin: 0 auto; /* Center-align the group within its parent container */
        align-items: center; /* Align buttons horizontally within the group */
        margin-top: 15%;
    }
    
    .button-group a {
        display: block; /* Ensures the anchor tags behave like block elements */
        text-align: center; /* Centers the text inside the buttons */
        padding: 12px; /* Adjust padding as needed */
        font-size: var(--font-size-button);
        background-color: var(--accent-color-fire-leaf); /* Dark background */
        color: #fff; /* Light text for contrast */
        text-decoration: none; /* Removes underline from links */
        border-radius: 2px; /* Optional: adds rounded corners */
        width: 100%; /* Makes each button take the full width of the parent */
        box-sizing: border-box; /* Includes padding in width calculation */
    }
    
    .button-group a:hover {
        background-color: #555; /* Slightly lighter background on hover */
    }

    #text-block-1 {
        padding: 10%;
        }

    #text-block-1 h1 {
            color: black; /* Set h1 color to black */
            line-height: var(--line-height-heading);
        }


    .two-column-block {
        display: grid;
        grid-template-columns: 0.35fr 1fr; /* Adjust as needed */
        gap: var(--space-md);
        align-items: start; /* Align items to the top */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }

    #text-block-2 {
        display: grid;
        gap: 10%; /* Space between the columns */
        align-items: start; /* Align items vertically */
        padding: 10% 25% 10% 10%;
        background: var(--gradient-brown-lightbrown);
    }


    /* Image Column */
    .image-column img {
        width: 200px; /* Set the width of the circle */
        height: 200px; /* Set the height of the circle (equal to width) */
        border-radius: 50%; /* Makes the image a circle */
        overflow: hidden; /* Ensures content outside the circle is hidden */
        object-fit: cover; /* Ensures the image covers the circle without distortion */
        display: block; /* Optional: Removes extra space for inline images */
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */

    }

    /* Text Column */
    .text-column {
        display: flex;
        flex-direction: column; /* Stack text vertically */
        justify-content: start;
        font-size: var(--font-size-xl);
        line-height: var(--line-height-base);
        margin: 0; /* Reset margins */
        padding: 0; /* Reset padding */
    }

    #text-block-3 {
        background: var(--gradient-darkblue-blue);
        color: white;
        padding: 10% 25% 10% 10%;
        min-height: 75vh; /* Minimum height equals the screen height */
        border-top-left-radius: var(--border-radius-hg);
        border-top-right-radius: var(--border-radius-hg);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

    }

    #text-block-4 {
        background: white;
        padding: 10% 25% 10% 10%;
        min-height: .9vh; /* Minimum height equals the screen height */
    }


    footer {
        min-height: 50vh;
        grid-area: footer; 
        padding: var(--space-lg);
        text-align: center;
        font-size: var(--font-size-base);
        color: white; 
        display: grid; /* Make it a grid container */
        padding-bottom: var(--space-xl);
        background: linear-gradient(180deg, #ffffff, #f9f9f9, #e6f7f9); /* Faint teal at the bottom */
    }

    .mobiletagline {
        display: none;
    }

    footer h1{
        text-align: center; /* Center align the text */
        margin: 10px 0; /* Add margin around the h2 */
        font-weight: 500;
    }

    footer a{
        text-decoration: none;
    }

    
    footer .social {
        text-decoration: none; /* Remove underline from links */
    }

    .social-icons .icon {
        width: 60px; /* Set icon size */
        height: 60px;
        padding: 20px; 
        padding-top: 36px;
        padding-bottom: 36px;
        fill: var(--primary-color-warm-maroon); /* Default color */
        transition: fill 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
    }

    .social-icons a:hover .icon {
        opacity: 0.75; /* Slightly transparent on hover */
        fill: black; /* Default color */
        transform: scale(1.1); /* Slightly enlarge icon */
    }

    footer .tagline h1 {
        font-size: var(--font-style-primary);
        font-weight: var(--font-primary-weight-regular); /* Bold font for emphasis */
        font-size: var(--font-size-lg);
        color: var(--primary-color-warm-maroon);
        margin: 0; /* Remove default margin */
        padding-top: 36px;
        line-height: 1.5; /* Add spacing between lines */
    }

    .quick-links {
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        display: flex; /* Arrange links in a row */
        justify-content: center; /* Center them horizontally */
        gap: var(--space-lg); /* Add space between items */
    }
    
    .quick-links a {
        display: inline-block;
        text-decoration: none; /* Remove underline */
        padding: 5px 0; /* Add padding for a button-like feel */
        font-size: 2.4rem; /* Larger font size for prominence */
        font-weight: var(--font-weight-nav);
        color: black; /* Set link color */
        transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover and click transitions */
        vertical-align: middle; /* Align all links to the middle */
    }
    
    .quick-links a:hover {
        opacity: 0.75; /* Slightly transparent on hover */
        transform: scale(1.1); /* Slightly enlarge the link */
    }
    
    .quick-links a:active {
        transform: scale(0.95); /* Shrink slightly on click */
    }
    
    .quick-links a.current {
        display: inline-block;
        background: var(--accent-color-teal);
        text-decoration: none; /* Remove underline */
        color: white;
        padding: 5px 10px; /* Add padding for a button-like feel */

    }

    .footer-email {
        display: flex;
        justify-content: center; /* Center the content horizontally */
        font-family: var(--font-secondary);
        font-weight: var(--font-secondary-weight-bold);
        color: var(--accent-color-teal);
        margin-top: 20px; /* Add some space above the link */
        margin-bottom: 20px;
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth hover and click transitions */
    }
    
    .footer-email a {
        width: 60vw;
        font-size: calc(5vw + 12px);
        color: var(--accent-color-teal);
        text-decoration: underline;
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
        transform-origin: center; /* Scale from the center */
    }


    .footer-email a:active {
        opacity: 0.75; /* Slightly transparent on click */
        color: var(--primary-color-warm-maroon);
        transform: scale(1.1); /* Slightly enlarge the link on click */
    }

    footer p {
        padding: 60px;
        color: black;
    }
    
}