* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@font-face {
    /*// font-family: "Ford F-1";*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Light.otf") format("opentype");
    /* src: url("../fonts/Ford-Antenna-Light.woff") format("woff");*/
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    /* font-family: "Ford F-1";
   src: url("../fonts/FORD_F1_FontPackage/FordF-1-Light.otf") format("opentype");*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Light.otf") format("opentype");
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    /*  font-family: "Ford F-1";
   src: url("../fonts/FORD_F1_FontPackage/FordF-1-Light.otf") format("opentype");*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    /*font-family: "Ford F-1";
    
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Regular.otf") format('opentype');*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    /*font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Regular.otf") format('opentype');*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Regular.otf") format('opentype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    /*font-family: "Ford F-1";
   
     src: url("../fonts/FORD_F1_FontPackage/FordF-1-Bold.otf") format('opentype');*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: bold;
    font-display: swap;
}

@font-face {
    /*font-family: "Ford F-1";
     src: url("../fonts/FORD_F1_FontPackage/FordF-1-Bold.otf") format('opentype');*/
    font-family: "Ford F-1";
    src: url("../fonts/FORD_F1_FontPackage/FordF-1-Bold.otf") format("opentype");
    font-style: italic;
    font-weight: bold;
    font-display: swap;
}
body {
    font-family: "Ford F-1" !important;
    line-height: 1.6;
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
}


/* --- Welcome Section Container --- */
.welcome-section {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Background Styles (grouped) */
    background-image: url('/Newimages/FordSAHome.png');
    background-size: cover;
    background-position: center;
    background-color: #333; /* Fallback color */
    /* Layout (use clamp() for better fluid padding) */
    padding: 0 clamp(20px, 10%, 100px);
    margin: 0;
}

/* --- Dark Overlay (Pseudo-element) --- */
.welcome-section::before {
    content: "";
    position: absolute;
    inset: 0; /* Modern shorthand for top, left, right, bottom: 0 */
    background: rgba(0, 0, 0, 0.65);
}

/* --- Content Wrapper (The Fix Applied Here) --- */
.content-container {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    width: 100%; /* Ensures it shrinks on mobile */
    margin: 0 auto; /* Centers content reliably */
    box-sizing: border-box; /* Ensures padding/borders don't add extra width */
}

    /* --- Typography (using relative REM units for better scaling) --- */
    .content-container h1 {
        font-size: 3.5rem;
        margin-bottom: 1.25rem; /* 20px / 16px default font size */
        font-weight: 800;
        line-height: 1.1;
        color: white;
        padding-top:2em;
    }

    .content-container .tagline {
        font-size: 1.5rem;
        margin-bottom: 0.9375rem; /* 15px */
        font-weight: 600;
    }

    .content-container p {
        margin-bottom: 1.875rem; /* 30px */
        line-height: 1.4;
        font-size: 1rem; /* 16px */
        opacity: 0.9;
        color: white;
    }
.branding-logos {
    position: relative;
    bottom: 0;
    right: 0;
    float:right;
    /* Flexbox for vertical alignment if needed, depending on exact layout */
}

.homebuttons {
    display: inline-block;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 1em;
    font-weight: bold;
    margin-right: 10px;
    font-size: 0.7rem;
    color: white;
    background-color: #076FF0 !important;
    border: 1px solid #004d98;
}


.ford-logo-vertical {
    position: relative;
    right: 0;
    top: 0em;
    left: 15%;
    bottom: 0;
    background-color: #004d98;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    transform: rotate(270deg) translateY(-10px);
    transform-origin: right top;
    height: 4em;
    width: 30vh;
    white-space: nowrap;
    border-radius: 1em;
    font-weight:bold;
}

.benefits-section {
    display: flex;
    max-width: 1200px;
    margin: 50px auto;
    overflow: hidden;
}

.benefits-text-column {
    flex: 1;
    padding: 40px;
}

.benefits-image-column {
    flex: 1;
    position: relative;
    overflow: hidden;
}


.benefits-text-column h2 {
    margin-bottom: 0.51em;
    font-family: "Ford F-1" !important;
    color: #00095B;
    line-height: 38px;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 15px;
    
}
.benefits-text-column span {
    color: #066FEF;
}
    .benefits-text-column > p {
    margin-bottom: 30px;
    color: #666;
}
img {
    max-width: 100%; /* Ensures the image never exceeds the width of its parent container */
    height: auto; /* Automatically calculates the height to maintain the aspect ratio */
    display: block; /* Helps prevent extra space below images */
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.icon-placeholder {
    font-size: 1.5rem;
    color: #004d98;
    background-color: #e6f2ff;
    border-radius: 1%;
    width: 5em;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.feature-content h3 {
    color: #066FEF;
    font-size: 22px;
    margin-bottom: 5px;
}

.feature-content p {
    color: #666;
    font-size: 14px;
}

.mechanic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin-left: -5em;
    border-radius: 2em;
}

.blue-overlay-bg {
    position: absolute;
    right: 0;
    top: 30%;
    bottom: 0;
    width: 200px;
    background-color: #002e60;
    z-index: 1;
    height: 20em;
    border-radius: 2em;
    /* padding-right: 27em; */
    float: right;
}

.fleet-solution-section {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 20px auto;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
}


.content-box {
    background-color: #002e60;
    color: white;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    margin-bottom: -100px;
}

    .content-box h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .content-box p {
        font-size: 1rem;
        opacity: 0.9;
        line-height: 1.4;
    }




member-steps-section h2 {
    text-align: center;
    color: #333;
    margin-bottom: 40px;
    font-size: 1.8rem;
}

.member-steps-section h2 .highlight {
    color: #007bff;
}


.steps-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    flex: 1;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
}

/* Color Classes */
.card-dark-blue {
    background-color: #00095B;
    color: white;
}

.card-darker {
    background-color: #00142E;
    color: white;
}

.card-bright-blue {
    background-color: #066FEF;
    color: white;
}

.card-light-bg {
    background-color: #ECEDF4;
    color: #333;
}


.step-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    opacity: 0.8;
}

.step-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 600;
    color: white;
}

.step-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Buttons */
.step-btn {
    display: inline-block;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    color: white;
    background-color: #00095B;
    border-radius: 1em;
}
.step-btn-darkblue {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    color: white;
    background-color: #00142E;
    border-radius: 1em;
}

.card-light-bg .step-btn {
    background-color: #007bff;
    color: white;
}


.whatsapp-icon-placeholder {
    background-color: #25d366;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 15px;
    margin-left: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    content: '✆';
}

.cssmargintop {
    margin-top: 1em;
}

.csscardfour {
    color: #00095B !important;
}

.trade-club-section-container {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    
}

.image-column, .content-column {
    flex: 1;
}

/* Left Column Styling */
.image-column {
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .main-mechanic-image {
        margin-left: 0em !important;
    }
}
    .blue-accent-bg {
        position: absolute;
        left: 0;
        top: 15%;
        bottom: 15%;
        width: 150px;
        background-color: #002e60;
        transform: translateX(-70px) rotate(0deg);
        margin-left: 5em;
        z-index: 2;
        border-radius: 1em;
        padding: 4em;
    }

    .main-mechanic-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 2;
        border-radius: 8px 0 0 8px;
        margin-left: 5em;
    }

    /* Right Column Styling */
    .content-column {
        margin: 40px 50px;
        color: #333;
        border: 1px solid #d5d8dc;
        padding: 1.5em;
    }

        .content-column h2 {
            color: #004d98;
            font-size: 2rem;
            margin-bottom: 25px;
        }

    /* Accordion Styles */
    .accordion-item {
        border-bottom: 1px solid #eee;
    }

    .accordion-header {
        padding: 15px 0;
        cursor: pointer;
        font-weight: bold;
        color: #004d98;
        display: flex;
        align-items: center;
    }

        .accordion-header .icon {
            font-size: 1.5rem;
            margin-right: 15px;
            line-height: 1;
            color: #007bff;
        }

    .accordion-btn {
        background-color: transparent;
        color: #00095B;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        border-bottom: 1px solid #d5d8dc;
        outline: none;
        transition: background-color 0.3s;
        font-weight: 700;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 1em;
    }

        .accordion-btn:hover {
            color: #066FEF;
        }

    .accordion-content {
        padding: 0px 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }
    /*.accordion-content {
    padding-bottom: 15px;
    font-size: 0.9rem;
    color: #666;
}*/


    .accordion-item.expanded .accordion-header {
        border-left: 5px solid #007bff;
        padding-left: 15px;
        margin-left: -20px;
    }


    .statistics-area {
        margin-top: 30px;
    }

    .stats-rewards {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .donut-chart-placeholder {
        width: 100px;
        height: 100px;
        background-color: #e6f2ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 0.7rem;
        padding: 10px;
        color: #004d98;
        border: 8px solid #007bff;
    }

    .rewards-value {
        margin-left: 20px;
    }

        .rewards-value .value {
            display: block;
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }

        .rewards-value .currency {
            color: #666;
            font-size: 0.8rem;
            display: block;
        }

    .stats-dealers, .stats-members {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        color: #00095B;
        line-height: 24px;
        font-weight: 400;
    }

    .stats-dealers {
        border-bottom: 0.31em solid #066FEF;
    }

    .stats-members {
        border-bottom: 1px solid #eee;
        display: block;
    }

        .stats-members strong {
            display: block;
            margin-bottom: 10px;
        }

    .member-dots-placeholder {
        height: 3em;
        background: radial-gradient(circle at center, #007bff 25%, transparent 25%) 0 0 / 35px 70px repeat-x;
        width: 100%;
    }
/* Individual Slide Styling */
.slide {
    /* Ensures each slide takes the full width of the container when snapped */
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    /* CRITICAL: Defines the snap point for each slide */
    scroll-snap-align: start;
}
.slider-container {
    display: flex;
    /* Changed from hidden to auto/scroll to allow swiping */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    width: 90%;
    max-width: 1000px;
    height: 300px;
    border-radius: 2px;
    /* Optional: Hide scrollbar for a cleaner mobile look */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    /* Hide scrollbar for Chrome, Safari, and Opera */
    .slider-container::-webkit-scrollbar {
        display: none;
    }

    /* CRITICAL: Add styles for the images/slides inside the container */
    .slider-container > * {
        /* Prevents items from shrinking or growing unexpectedly */
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        /* CRITICAL: Defines the snap point */
        scroll-snap-align: start;
        /* Ensures images look good when resizing */
        object-fit: cover;
    }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures images cover the area without distortion */
            border-radius: 10px;
        }

    .slide-caption {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 1rem;
    }

    /* Navigation Dots/Links Styling */
    .slider-navigation {
        margin-top: 0px;
        display: flex;
        gap: 10px;
        align-content: space-around;
        justify-content: center;
        align-items: center;
        margin: 1em;
    }

        .slider-navigation a {
            display: block;
            width: 12px;
            height: 12px;
            background-color: #aaa;
            border-radius: 50%;
            text-indent: -9999px; /* Hide the numbers 1, 2, 3 visually */
            transition: background-color 0.3s;
        }

            /* Change dot color when the corresponding slide is targeted via URL hash */
            .slider-navigation a:hover,
            .slider-container:has(#slide-1:target) .slider-navigation a:nth-child(1),
            .slider-container:has(#slide-2:target) .slider-navigation a:nth-child(2),
            .slider-container:has(#slide-3:target) .slider-navigation a:nth-child(3),
            .slider-container:has(#slide-4:target) .slider-navigation a:nth-child(4) {
                background-color: #333;
            }




    /*.Autoslider-container {
        width: 50%;
        height: 400px;
        overflow: hidden;
        border: 5px solid #333;
        margin: 50px auto;
        border-radius: 2em;
    }


    .Autoslider-wrapper {
        display: flex;
        width: 900px;*/ /* Width of (3 images * 300px) */
        /*animation: slide 9s infinite linear;
    }

        .Autoslider-wrapper img {
            width: 800px;
            height: 400px;
        }

   */
.question-box {
    padding: 10px 20px;
    font-size: 24px;
    font-weight: 500;
    display: inline-block;
    margin-top: 0em;
}
.Autoslider-container {
    width: 50%; /* Adjusted by your preference */
    height: 300px;
    overflow: hidden;
    border: 5px solid #333;
    margin: 50px auto;
    border-radius: 2em;
}

.Autoslider-wrapper {
    display: flex;
    width: 400%; /* 4 images = 400% width */
    animation: slide 12s infinite ease-in-out; /* Changed to 12s for 4 images */
}

    .Autoslider-wrapper img {
        width: 100%; /* Each image takes up 1/4 of the wrapper */
        height: 400px;
        object-fit: cover; /* Prevents image stretching */
    }

/* THE MISSING ANIMATION */
@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    20% {
        transform: translateX(0%);
    }
    /* Pause on Image 1 */
    25% {
        transform: translateX(-25%);
    }
    /* Slide to Image 2 */
    45% {
        transform: translateX(-25%);
    }
    /* Pause on Image 2 */
    50% {
        transform: translateX(-50%);
    }
    /* Slide to Image 3 */
    70% {
        transform: translateX(-50%);
    }
    /* Pause on Image 3 */
    75% {
        transform: translateX(-75%);
    }
    /* Slide to Image 4 */
    95% {
        transform: translateX(-75%);
    }
    /* Pause on Image 4 */
    100% {
        transform: translateX(0%);
    }
    /* Reset to Start */
}

    .benefits-image-column {
        flex: 1; /* Columns share space equally when there is room */
        min-width: 300px; /* Prevents columns from getting too squished */
        min-height: 600px;
    }

    /* Media query to force stacking on smaller screens */
    @media (max-width: 768px) {
        .benefits-section {
            flex-direction: column; /* Stacks the text and image sections vertically */
        }
    }

    @media (max-width: 768px) {
        .benefits-section, .steps-container {
            flex-direction: column; /* Stacks columns and cards vertically */
        }

        @media (max-width: 768px) {
            .trade-club-section-container {
                flex-direction: column; /* Stacks the text and image sections vertically */
            }
        }

        @media (max-width: 768px) {
            .Autoslider-container {
                width: 90%; /* Occupy more screen space on mobile */
                margin: 20px auto; /* Reduce vertical spacing */
                border-width: 3px; /* Thinner border for small screens */
                border-radius: 1em; /* Slightly sharper corners for better fit */
            }
        }

        @media (max-width: 768px) {
            .trade-club-section-container, .steps-container {
                flex-direction: column; /* Stacks columns and cards vertically */
            }

            .content-container h1 {
                font-size: 1.8rem;
            }

            .content-container p {
                font-size: 0.9rem;
            }

            .welcome-section {
                height: 60vh;
            }

            .benefits-text-column, .benefits-image-column {
                padding: 15px;
            }

            .content-box {
                margin-bottom: -50px;
                padding: 20px;
            }

            .ford-logo-vertical {
                position: static;
            }
        }
    }

    .csssubmargintop {
        margin-top: 1em;
    }

    .cssfont18px {
        font-size: 16px;
    }

    .rum_sst_contents {
        position: fixed;
        margin: 0;
        padding: 6px 13px 8px 13px;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        border-style: solid;
        display: block;
        z-index: 100000;
    }

    .rum_sst_right {
        right: -1px;
        cursor: pointer;
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -moz-border-radius-topright: 10px;
        border-top-right-radius: 10px;
        -moz-border-radius-topleft: 10px;
        border-top-left-radius: 10px;
    }

    #rum_sst_tab {
        font-family: "
        top: 50%;
        background-color: #066fef;
        color: #ffffff;
        border-style: solid;
        border-width: 0px;
    }

    .mainheadingptag {
        text-align: center;
        font-family: "ford-f1", Sans-serif;
        color: #00095B;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }
    /* --- Main Wrapper & Positioning Context --- */
    .rewards-graphic-wrapper {
        /* Adjust width as needed for your layout */
        width: 15em;
        margin: 20px auto;
        position: relative;
    }

    /* --- The Semi-Circle Container --- */
    .rewards-arc-container {
        position: relative;
        /* Ratio is roughly 2:1 width to height */
        width: 100%;
        height: 150px;
        background-color: #e6e6e6; /* Light gray fill */
        border: 10px solid #007bff; /* Blue outer arc/border */
        /* Key for the semi-circle shape: */
        border-radius: 50% / 100%;
        /* Hide the bottom part of the border */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
        /* Ensures labels are positioned relative to this container */
        position: relative;
        overflow: hidden; /* Keeps content nicely within the arc */
    }

    /* --- Centered Text Content --- */
    .rewards-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        text-align: center;
        color: #00004d; /* Dark blue text color */
        font-weight: 600;
        padding: 0 10px; /* Prevents text from hitting the side arcs */
    }

        .rewards-content span {
            display: block; /* Ensures each line breaks */
            font-size: 0.9rem;
            line-height: 1.2;
        }

            /* Specific styling for the year, if needed */
            .rewards-content span:last-child {
                font-weight: 800;
                margin-top: 5px;
            }

    /* --- Bottom Labels (R0 and R2M) --- */
    .rewards-label-start,
    .rewards-label-end {
        position: absolute;
        bottom: -20px; /* Position below the graphic baseline */
        font-size: 0.8rem;
        color: #444;
    }

    .rewards-label-start {
        left: 5px;
    }

    .rewards-label-end {
        right: 5px;
        font-weight: bold;
    }
/*   //heade desktop styles start */
header#DesktopHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #f1f1f1;
}

.topnav {
    overflow: hidden;
    background-color: #f1f1f1;
    /* float: left;*/
}

.fa-caret-down:before {
    content: "\f0d7";
    color: #00095b;
}
.fa-caret-down:hover {
    content: "\f0d7";
    color: #fff;
}
.topnav a {
    float: left;
    display: block;
    color: #00095b;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}

.menuactive {
    background-color: #066fef;
    color: #ffffff !important;
    border-style: solid;
    border-width: 0px;
    border-radius: 5px;
}

.topnav .icon {
    display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: white;
        padding: 0px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-top: 2.8em;
    padding-top:1em;
}
    .dropdown-content::before {
        content: "";
        position: absolute;
        top: 0px; /* Adjust based on the gap size */
        left: 0;
        width: 100%;
        height: 15px;
        display: block;
    }


    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

.topnav a:hover, .dropdown:hover .dropbtn .fa-caret-down:before {
    
    background-color: #555;
    color: white;
    border-radius:2px;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
    transition-delay: 0.2s;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}



img.sticky {
    position: sticky;
    top: 0;
}

.site-headerlogo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f1f1f1;
    align-content: space-around;
}

@media screen and (max-width:600px) {

    .responsive-logo {
        width: 35%;
    }


    header#DesktopHeader {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        font-size: 24px;
    }
}


@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdown {
            float: none;
            display: block;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
            margin-top:0em;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}

.menuactive{
    background-color: #066fef;
    color: #ffffff !important;
    border-radius: 2px;
}
a.menuactive .fa-caret-down:before {
    background-color: #066fef;
    color: white;
   
}
.responsive-logo {
    max-width: 100%;
    height: auto;
    display: block;
    width: 200px;
}

.fa-times {
    display: none;
}

.topnav.responsive .fa-bars {
    display: none;
}

.topnav.responsive .fa-times {
    display: inline;
}