/* RESET */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@font-face {
    font-family: AvenirLight;
    src: url(./fonts/avenir-lt-w01_35-light1475496.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: AvenirHeavy;
    src: url(./fonts/avenir-lt-w01_85-heavy1475544.woff2);
    font-weight: 700;
    font-display: swap;
}

:root,
:host,
.spxThemeOverride,
.max-width-container,
#root {
    --color_0: 255, 255, 255;
    --color_1: 255, 255, 255;
    --color_2: 0, 0, 0;
    --color_3: 237, 28, 36;
    --color_4: 0, 136, 203;
    --color_5: 255, 203, 5;
    --color_6: 114, 114, 114;
    --color_7: 176, 176, 176;
    --color_8: 255, 255, 255;
    --color_9: 114, 114, 114;
    --color_10: 176, 176, 176;
    --color_11: 255, 255, 255;
    --color_12: 231, 231, 235;
    --color_13: 197, 197, 207;
    --color_14: 115, 115, 140;
    --color_15: 22, 22, 63;
    --color_16: 248, 240, 255;
    --color_17: 221, 187, 255;
    --color_18: 158, 63, 253;
    --color_19: 105, 42, 169;
    --color_20: 53, 21, 84;
    --color_21: 211, 193, 255;
    --color_22: 189, 163, 255;
    --color_23: 123, 70, 255;
    --color_24: 82, 47, 170;
    --color_25: 41, 23, 85;
    --color_26: 178, 192, 239;
    --color_27: 137, 157, 223;
    --color_28: 48, 85, 207;
    --color_29: 32, 57, 138;
    --color_30: 16, 28, 69;
    --color_31: 224, 159, 198;
    --color_32: 194, 109, 160;
    --color_33: 163, 20, 106;
    --color_34: 109, 13, 71;
    --color_35: 54, 7, 35;
    --color_36: 255, 255, 255;
    --color_37: 22, 22, 63;
    --color_38: 231, 231, 235;
    --color_39: 197, 197, 207;
    --color_40: 115, 115, 140;
    --color_41: 158, 63, 253;
    --color_42: 248, 240, 255;
    --color_43: 221, 187, 255;
    --color_44: 105, 42, 169;
    --color_45: 22, 22, 63;
    --color_46: 22, 22, 63;
    --color_47: 22, 22, 63;
    --color_48: 158, 63, 253;
    --color_49: 158, 63, 253;
    --color_50: 255, 255, 255;
    --color_51: 255, 255, 255;
    --color_52: 158, 63, 253;
    --color_53: 158, 63, 253;
    --color_54: 197, 197, 207;
    --color_55: 197, 197, 207;
    --color_56: 255, 255, 255;
    --color_57: 255, 255, 255;
    --color_58: 158, 63, 253;
    --color_59: 158, 63, 253;
    --color_60: 158, 63, 253;
    --color_61: 158, 63, 253;
    --color_62: 255, 255, 255;
    --color_63: 255, 255, 255;
    --color_64: 197, 197, 207;
    --color_65: 197, 197, 207;
    --font_0: normal normal bold 90px / 1.4em worksans-semibold, 'work sans', sans-serif;
    --font_1: normal normal normal 16px / 1.4em din-next-w01-light, sans-serif;
    --font_2: normal normal normal 80px / 1.4em worksans-semibold, 'work sans', sans-serif;
    --font_3: normal normal normal 52px / 1.4em avenir-lt-w01_85-heavy1475544, sans-serif;
    --font_4: normal normal normal 36px / 1.4em worksans-semibold, 'work sans', sans-serif;
    --font_5: normal normal normal 26px / 1.4em worksans-semibold, 'work sans', sans-serif;
    --font_6: normal normal normal 16px / 1.4em avenir-lt-w01_85-heavy1475544, sans-serif;
    --font_7: normal normal normal 24px / 1.4em avenir-lt-w01_35-light1475496, sans-serif;
    --font_8: normal normal normal 18px / 1.4em avenir-lt-w01_35-light1475496, sans-serif;
    --font_9: normal normal normal 15px / 1.4em avenir-lt-w01_35-light1475496, sans-serif;
    --font_10: normal normal normal 12px / 1.4em din-next-w01-light, sans-serif;
    --wix-ads-height: 38px;
    --sticky-offset: 38px;
    --wix-ads-top-height: 38px;
    --site-width: 320px;
    --above-all-z-index: 100000;
    --portals-z-index: 100001;
    --wix-opt-in-direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --minViewportSize: 320;
    --maxViewportSize: 1920;
    --theme-spx-ratio: 1px;
    --full-viewport: 100 * var(--one-unit) * var(--browser-zoom);
    --scaling-factor: clamp(var(--spx-stopper-min), var(--full-viewport), min(var(--spx-stopper-max), var(--section-max-width)));
    --customScaleViewportLimit: clamp(var(--minViewportSize) * 1px, var(--full-viewport), min(var(--section-max-width), var(--maxViewportSize) * 1px));
}

:root {
    --wst-button-color-fill-primary: rgb(var(--color_48));
    --wst-button-color-border-primary: rgb(var(--color_49));
    --wst-button-color-text-primary: rgb(var(--color_50));
    --wst-button-color-fill-primary-hover: rgb(var(--color_51));
    --wst-button-color-border-primary-hover: rgb(var(--color_52));
    --wst-button-color-text-primary-hover: rgb(var(--color_53));
    --wst-button-color-fill-primary-disabled: rgb(var(--color_54));
    --wst-button-color-border-primary-disabled: rgb(var(--color_55));
    --wst-button-color-text-primary-disabled: rgb(var(--color_56));
    --wst-button-color-fill-secondary: rgb(var(--color_57));
    --wst-button-color-border-secondary: rgb(var(--color_58));
    --wst-button-color-text-secondary: rgb(var(--color_59));
    --wst-button-color-fill-secondary-hover: rgb(var(--color_60));
    --wst-button-color-border-secondary-hover: rgb(var(--color_61));
    --wst-button-color-text-secondary-hover: rgb(var(--color_62));
    --wst-button-color-fill-secondary-disabled: rgb(var(--color_63));
    --wst-button-color-border-secondary-disabled: rgb(var(--color_64));
    --wst-button-color-text-secondary-disabled: rgb(var(--color_65));
    --wst-color-fill-base-1: rgb(var(--color_36));
    --wst-color-fill-base-2: rgb(var(--color_37));
    --wst-color-fill-base-shade-1: rgb(var(--color_38));
    --wst-color-fill-base-shade-2: rgb(var(--color_39));
    --wst-color-fill-base-shade-3: rgb(var(--color_40));
    --wst-color-fill-accent-1: rgb(var(--color_41));
    --wst-color-fill-accent-2: rgb(var(--color_42));
    --wst-color-fill-accent-3: rgb(var(--color_43));
    --wst-color-fill-accent-4: rgb(var(--color_44));
    --wst-color-fill-background-primary: rgb(var(--color_11));
    --wst-color-fill-background-secondary: rgb(var(--color_12));
    --wst-color-text-primary: rgb(var(--color_15));
    --wst-color-text-secondary: rgb(var(--color_14));
    --wst-color-action: rgb(var(--color_18));
    --wst-color-disabled: rgb(var(--color_39));
    --wst-color-title: rgb(var(--color_45));
    --wst-color-subtitle: rgb(var(--color_46));
    --wst-color-line: rgb(var(--color_47));
    --wst-font-style-h2: var(--font_2);
    --wst-font-style-h3: var(--font_3);
    --wst-font-style-h4: var(--font_4);
    --wst-font-style-h5: var(--font_5);
    --wst-font-style-h6: var(--font_6);
    --wst-font-style-body-large: var(--font_7);
    --wst-font-style-body-medium: var(--font_8);
    --wst-font-style-body-small: var(--font_9);
    --wst-font-style-body-x-small: var(--font_10);
    --wst-color-custom-1: rgb(var(--color_13));
    --wst-color-custom-2: rgb(var(--color_16));
    --wst-color-custom-3: rgb(var(--color_17));
    --wst-color-custom-4: rgb(var(--color_19));
    --wst-color-custom-5: rgb(var(--color_20));
    --wst-color-custom-6: rgb(var(--color_21));
    --wst-color-custom-7: rgb(var(--color_22));
    --wst-color-custom-8: rgb(var(--color_23));
    --wst-color-custom-9: rgb(var(--color_24));
    --wst-color-custom-10: rgb(var(--color_25));
    --wst-color-custom-11: rgb(var(--color_26));
    --wst-color-custom-12: rgb(var(--color_27));
    --wst-color-custom-13: rgb(var(--color_28));
    --wst-color-custom-14: rgb(var(--color_29));
    --wst-color-custom-15: rgb(var(--color_30));
    --wst-color-custom-16: rgb(var(--color_31));
    --wst-color-custom-17: rgb(var(--color_32));
    --wst-color-custom-18: rgb(var(--color_33));
    --wst-color-custom-19: rgb(var(--color_34));
    --wst-color-custom-20: rgb(var(--color_35));
}



.container-fluid {
    max-width: 1600px;
}

h1 {
    font-size: 36px;
    font-weight: 700;
    color: rgb(var(--color_15));
    line-height: 1.1em;
}

h2 {
    font-size: 32px;
    font-weight: 600;
    color: rgb(var(--color_15));
    line-height: 1.4em;
}

.header {
    background: #ffffff;
    /* border-bottom: 1px solid #eee; */
}



/* body {
    padding-top: 90px;
} */

.header,
section {
    scroll-margin-top: 100px;
    /* adjust to your header height */
}

.header.shrink {
    padding-block: 6px;
    background: rgba(255, 255, 255, 0.95);
    transition: 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    /* or your transparent / blurred theme */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.header-inner {
    margin: 0 auto;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.logo-wrapper {
    width: 100%;
    display: flex;
    /* justify-content: center; */
}

/* Logo */
.logo {
    font-size: 1.4rem;
    font-weight: 700;
}

.logo img {
    width: 260px;
}

/* Desktop Nav */
.nav {
    display: flex;
    gap: 24px;
}

.nav a {
    text-decoration: none;
    color: #222;
    font-weight: normal;
    color: rgb(22, 22, 63);
    font-size: 22px;
    height: 50px;
    display: flex;
    align-items: center;
}

.nav a:active,
.nav a:hover {

    color: rgb(158, 63, 253);
}

/* MOBILE STYLES */

/* Hamburger default */
.menu-toggle {
    width: 32px;
    height: 21px;
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.menu-toggle span {
    display: block;
    height: 3px;
    background: #111;
    border-radius: 3px;
    transition: 0.4s;
}

@media (max-width: 992px) {

    .header-inner {
        justify-content: center;
    }

    .logo-wrapper {
        width: 100%;
    }

    /* Hidden state */
    .nav {
        position: absolute;
        top: 90px;
        right: 0;
        width: 100%;

        background: white;
        flex-direction: column;
        align-items: center;

        /* Start hidden but layout-ready */
        opacity: 0;
        /* max-height: 0; */
        overflow: hidden;

        gap: 0;
        padding: 0;

        border-top: 1px solid #eee;
        transition:
            opacity 0.35s ease,
            max-height 0.45s ease;
    }

    /* OPEN STATE — **no display change**, no flex jump */
    .nav.open {
        opacity: 1;
        max-height: 100vh;
        height: 100vh;
        background-color: #fff;
        /* enough to show links */
        padding: 24px 0;
        gap: 16px;
        z-index: 9999999999;
    }

    /* Mobile hamburger */
    .menu-toggle {
        display: flex;
        z-index: 9999;
    }

    /* ANIMATION: Hamburger → X */
    .menu-toggle.open span:nth-child(1) {
        transform: translateY(9px) rotate(-45deg);
    }

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

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


#home p {
    color: rgb(var(--color_15));
    max-width: 300px;
    margin: 0 auto;
    font-size: 20px;
    font-family: AvenirLight;
    padding: 0 16px
}

#home h1 {
    font-size: 48px;
    font-weight: 700;
    color: rgb(var(--color_15));
    line-height: 1.1em;
    margin: 54px 0 6px;
    padding: 0 16px
}

#home img.mobile-hero {
    max-height: 300px;
}


#home .btn-container {
    position: relative;
    overflow: hidden;
}

#home a.btn-purple {
    --rd: 100px 100px 100px 100px;
    --trans1: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    --shd: none;
    --fnt: var(--font_8);
    --trans2: color 0.4s ease 0s;
    --txt: var(--color_8);
    --brw: 0px;
    --bg: var(--color_41);
    --brd: var(--color_37);
    --bgh: var(--color_37);
    --brdh: var(--color_36);
    --txth: var(--color_36);
    --bgd: 204, 204, 204;
    --alpha-bgd: 1;
    --brdd: 204, 204, 204;
    --alpha-brdd: 1;
    --txtd: 255, 255, 255;
    --alpha-txtd: 1;
    --alpha-txth: 1;
    --alpha-brdh: 0;
    --alpha-brd: 1;
    --alpha-bg: 1;
    --alpha-bgh: 1;
    --boxShadowToggleOn-shd: none;
    --alpha-txt: 1;
    background-color: var(--corvid-background-color, rgba(var(--bg, var(--color_17, color_17)), var(--alpha-bg, 1)));
    color: #fff;
    text-decoration: none;
    border-radius: var(--corvid-border-radius, var(--rd, 0));

    box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, .6));
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    top: 30px;
    transition: var(--trans1);
    cursor: pointer !important;
    font-weight: 300;
    padding: 12px 16px;
    font-family: AvenirLight;
    font-size: 18px;
}

#services {
    padding: 20px 16px;
}

#services p {
    font-family: AvenirLight;
}

#services .promo h2 {
    font-size: 42px;
}

#services .promo h3 {
    font-size: 30px;
    font-weight: 600;
}

#services .cards h2 {
    margin-top: 50px;
    color: rgb(var(--color_41));
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
}

#services .cards .service {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#services .cards .service svg {
    /* width: 84px; */
    margin-top: 40px;
    height: 87px;
}

#services .cards .service h3 {
    font-size: 18px;
    margin-top: 20px;
    color: rgb(var(--color_15));
    font-weight: 600;
    /* margin-bottom: 0; */
    font-family: AvenirHeavy;
}

#services .cards .service p {
    font-size: 18px;
    color: rgb(var(--color_15));
    text-align: center;
    /* max-width: 250px; */
    padding: 0 32px;
    margin: 0 auto;
    font-family: AvenirLight;
}

#about {
    padding: 50px 0 0;
}

#about h3 {
    text-transform: uppercase;
    color: rgb(var(--color_41));
    font-size: 21px;
}

#about h2 {
    font-size: 29px;
    font-weight: 600;
    color: rgb(var(--color_15));
    line-height: 1.2em;
    margin: 20px 0 40px;
}

#about p {
    /* max-width: 280px; */
    padding: 0 32px;
    font-size: 18px;
    margin: 16px auto 0;
    font-family: AvenirLight;
}

#about img {
    max-height: 480px;
}

#testimonials {
    background-color: rgb(158, 63, 253);
}

.testimonials {
    text-align: center;
    padding: 50px 16px;
}

.testimonials h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}

.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.slide {
    min-width: 100%;
    padding: 0;
    border-radius: 16px;
    /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); */
}

.slide .text {
    font-size: 32px;
    margin-bottom: 20px;
    /* font-style: italic; */
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

.slide .author {
    font-size: 16px;
    /* margin-bottom: 20px; */
    /* font-style: italic; */
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
    margin-top: 10px;
}

/* Bullets */
.slider-dots {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.slider-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-dots button.active {
    background: #fff;
}

#contact {
    padding: 50px 16px;
}

#contact h2 {
    font-size: 42px;
    font-weight: 700;
    color: rgb(var(--color_15));
    line-height: 1.4em;
}

#contact .location,
#contact .email {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

#contact .location p,
#contact .address p {
    font-family: AvenirLight;
    margin-bottom: 0;
}

#contact svg {
    width: 32px;
    height: 40px;
}

form .form-label {
    font-family: 'AvenirLight';
}

form .form-control {
    border: 1px solid rgb(22, 22, 63);
    border-radius: 0;
    font-family: 'AvenirLight';
    padding: .75rem;
}

form .submit-btn {
    background-color: rgb(158, 63, 253);
    color: #fff;
    border: none;
    width: 100%;
    font-family: AvenirLight;
    padding: 14px;
    font-size: 18px;
}

footer p {
    font-family: AvenirLight;
}

@media screen and (min-width: 992px) {
    .header-inner {
        justify-content: space-between;
    }

    .logo-wrapper {
        width: auto;
    }

    .nav a {

        font-size: 18px;
    }

    #home {
        /* The image used */
        background-image: url("../images/hero-desktop.png");

        /* Set a specific height */
        height: 95vh;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 36px;
    }

    #home img.mobile-hero {
        display: none;
    }

    #home .btn-container {
        position: relative;
        overflow: unset;
    }

    .fade-up {
        opacity: 0;
        transform: translateY(60px);
        animation: fadeUp 0.8s ease-out forwards;
    }

    .fade-up-delay-1 {
        animation-delay: 0.2s;
    }

    .fade-up-delay-2 {
        animation-delay: 0.4s;
    }

    .fade-up-delay-3 {
        animation-delay: 0.6s;
    }


    #home .btn-container a.btn-purple {
        margin: 0;
        left: 28px;
        transform: none;
    }


    #home p {
        color: rgb(var(--color_15));
        max-width: 400px;
        margin: 0;
        font-size: 20px;
        font-family: AvenirLight;
    }

    .services-container {
        display: flex;
        justify-content: space-between;
    }

    #services .cards .service svg {
        width: 120px;
        height: auto;
    }

    #services .cards .service h3 {
        margin-top: 35px;
        text-align: center;
    }

    #services .cards .service p {

        max-width: 300px;
        padding: 0 0;


    }

    #services .promo {
        max-width: 1000px;
        margin-inline: auto;
        padding-top: 80px;
    }

    #services .promo h2 {
        font-size: 82px;
        line-height: 1.3em;
    }

    #services .promo h3 {
        font-size: 51px;
        line-height: 1.3em;
    }

    #services .promo p,
    #services .promo li {
        font-size: 18px;
    }

    #about {
        padding: 50px 0 0;
    }

    #about .container-fluid {
        max-width: 100%;
    }

    #about p {
        padding: 0;
    }

    #about .left {
        padding-top: 60px;
        padding-inline-start: calc(((100% - min(1600px, 100%)) / 2) + 16px);
        padding-inline-end: 32px;
    }

    #about .left h3 {
        font-size: 19px;
    }

    #about .left h2 {
        font-size: 36px;
    }

    #about .left p {
        max-width: 410px;
        margin-left: 0;
    }


    #about img.mobile-hero {
        max-height: unset;
    }

    .parallax-wrapper {
        position: relative;
        overflow: hidden;
        height: 100%;
        /* does NOT change */
        min-height: 600px;
        /* optional: ensures height on desktop */
    }

    .parallax-img {
        position: absolute;
        top: 50%;
        left: 0;
        width: 200%;
        height: 150%;
        object-fit: cover;
        object-position: center bottom;
        transform: translateY(-50%);
        will-change: transform;
        pointer-events: none;
    }

    #testimonials {
        padding-top: 70px;
    }

    .slide .text {
        font-size: 42px;
        max-width: 640px;
        margin: 0 auto 20px;
    }

    #contact .container-fluid {
        max-width: 1000px;
    }

    #contact .submit-btn {
        width: auto;
        padding: 10px 20px;
        font-size: 16px;
        float: right;
    }



}

@media screen and (min-width:1200px) {
    #home h1 {
        font-size: 62px;
    }

    #home p {
        color: rgb(var(--color_15));
        max-width: 470px;
        margin: 0;
        font-size: 22px;
        font-family: AvenirLight;
    }

    .parallax-img {
        width: 140%;
        height: 150%;
    }
}

@media screen and (min-width:1400px) {
    #home h1 {
        font-size: 72px;
    }

    .parallax-img {
        width: 110%;
        height: 150%;
    }
}

@media screen and (min-width:1600px) {
    #home h1 {
        font-size: 82px;
    }

    .parallax-img {
        width: 100%;
        height: 180%;
    }
}




@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up-onview {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
    will-change: opacity, transform;
}

.fade-up-onview.visible {
    opacity: 1;
    transform: translateY(0);
}