@font-face {
    font-family: 'Gotham';
    src: url('../fonts/GothamHTF-Light.ttf');
}

@font-face {
    font-family: 'AssistantBold';
    src: url('../fonts/Assistant-Bold.ttf');
}

@font-face {
    font-family: 'AssistantExtraBold';
    src: url('../fonts/Assistant-ExtraBold.ttf');
}

@font-face {
    font-family: 'AssistantExtraLight';
    src: url('../fonts/Assistant-ExtraLight.ttf');
}

@font-face {
    font-family: 'AssistantLight';
    src: url('../fonts/Assistant-Light.ttf');
}

@font-face {
    font-family: 'AssistantRegular';
    src: url('../fonts/Assistant-Regular.ttf');
}

@font-face {
    font-family: 'AssistantSemiBold';
    src: url('../fonts/Assistant-SemiBold.ttf');
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.ttc');
}

@font-face {
    font-family: 'InterVariable';
    src: url('../fonts/InterVariable.ttf');
}

@font-face {
    font-family: 'InterVariableItalic';
    src: url('../fonts/InterVariable-Italic.ttf');
}


* {
    margin: 0;
    padding: 0;
}

:root {
    /*Colors*/
    --primary-sl: hsl(199,82%,36%); /*Blue*/
    --secondary-sl: hsl(30,93%,55%); /*Orange*/
    --info-sl: hsl(214,66%,56%); /*Light Blue*/
    --success-sl: hsl(172,91%,25%); /*Green*/
    --warning-sl: hsl(39,97%,58%); /*Yellow*/
    --error-sl: hsl(347, 76%,48%); /*Light Red*/
    --black1-sl: hsl(0,0%,0%);
    --black2-sl: hsl(0,0%,11%);
    --black3-sl: hsl(0,0%,16%);
    --white-sl: hsl(0,100%,100%);
    --gray1-sl: hsl(0,0%,20%);
    --gray2-sl: hsl(0,0%,31%);
    --gray3-sl: hsl(0,0%,51%);
    --gray4-sl: hsl(0,0%,74%);
    --gray5-sl: hsl(0, 0%, 88%);
    --deco1-sl: hsl(339, 41%, 35%); /*Dark washed putple*/
    --deco2-sl: hsl(293,45%,29%); /*Purple*/
    --deco3-sl: hsl(65,24%,54%); /*Light Washed Green*/
    --deco4-sl: hsl(64, 55%, 47%); /*Light  Green*/

    --deco5-sl: #F0EAF0;
    --lightbg-sl: #E0D4E2;
    /*servicesMain*/
    --circle-diameter: 230px;
    --background-color: white;
    --text-color-light: #f1f1f1;
    --text-color-dark: #23272b;
    --card-grey: #F2F2F2;/*#F6F6F6;*/
    /*SL Colors*/
    --color-orange: #F78D22; /*#FCB52D;*/
    --color-red: #D61D45; /*#e53935;*/
    --color-blue: #1179A9; /*#2196f3;*/
    --color-green: #067969; /*#cddc39;*/
    --color-army-green: #80883B; /*#808000;*/
    --color-light-green: #B0B836;
    --color-dark-green: #067969;
    --color-purple: #7E354F; /*#64296C;*/
    --color-vibrant-purple: #64296C;
    --color-yellow: #FCB52D; /*#ffc107;*/
    /*FONTS*/
    --font-regular: 'AssistantRegular', Arial, sans-serif;
    --font-light: 'AssistantLight', Arial, sans-serif;
    --font-bold: 'AssistantBold', sans-serif;
    --font-extra-bold: 'AssistantExtraBold', sans-serif;
    --font-gotham: 'Gotham', sans-serif;
    --font-inter: 'Inter', sans-serif;
}

body {
    font-family: var(--font-regular);
    background-color: var(--background-color);
    color: var(--text-color);
}

/*Optional*/
h1, h2, h3 {
    font-family: var(--font-bold);
}

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

.Hero-insights-number {
    font-family: var(--font-bold);
}

.drive-timeline h2 {
    font-family: var(--font-inter);
}

.all {
    width: 100%;
    height: 8vh;
    position: fixed;
    top: 0;
    z-index: 10000;
    background-color: hsl(0,0%,0%,0);
    transition: background-color 0.3s ease;
}

.flex {
    display: flex;
    justify-content: center;
    gap: var(--gap, 2rem);
}




.mobile-nav-toggle {
    display: none;
}

.primry-header {
    align-items: center;
    justify-content: space-between;
    padding-inline: 6vw !important;
    /*height: 15vh;*/
    transition: background-color 0.3s ease, height 0.5s ease;
    background-color: white;
    height: 8vh;
}

    .primry-header.scrolled {
        background-color: white;
        height: 8vh;
    }

.primary-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .primary-navigation a {
        font-family: var(--font-bold);
        text-decoration: none;
        font-size: 14px;
        margin-inline-end: 0.5em;
        color: var(--black1-sl);
    }

    .primary-navigation .active {
        color: #6c2eb7;
        font-weight: bold;
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.dropdown {
    position: relative;
    display: inline-block;
    list-style: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #4D4D4F;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 80px;
    padding-left: 0 !important;
}

    .dropdown-content a {
        text-align: center;
        font-family: var(--font-bold);
        text-decoration: none;
        font-size: 10px;
        color: #4D4D4F;
        padding: 12px 3px;
        display: block;
        margin-inline: 0 !important;
        background-color: white !important;
    }

        .dropdown-content a:hover {
            background-color: black;
            color: black;
        }

.dropdown:hover .dropdown-content {
    display: block;
    list-style: none;
}


.theme-switcher-float {
    position: fixed;
    top: 100px; /* Adjust this value to match your navbar height */
    right: 32px;
    z-index: 1000;
    background: transparent;
}

@media (max-width: 1023px) {
    .primary-navigation {
        --gap: 1rem;
        position: fixed;
        z-index: 1000;
        inset: 0 0 0 50%;
        flex-direction: column;
        padding: min(30vh, 10rem) 2em;
        background-color: hsla(0, 0%, 74%, 0.8);
        backdrop-filter: blur(1rem);
        transform: translateX(100%);
        transition: transform 250ms ease-out;
    }

        .primary-navigation[data-visible="true"] {
            transform: translateX(0%);
        }

    .mobile-nav-toggle {
        display: block;
        position: absolute;
        z-index: 9999;
        background: url('/images/home/Icons/Branding.svg');
        background-repeat: no-repeat;
        width: 2rem;
        border: 0;
        aspect-ratio: 1;
        top: 30%;
        right: 5%;
    }
}

.thought-section .thought-content .thought-contact-container,
.thought-section .thought-content .thought-contact-container .thought-contact-heading,
.thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-card-body .thought-card-title,
.thought-section .thought-content .thought-contact-container .thought-contact-inner .thought-card-body p {
    color: var(--text-color-dark);
}