/*======================================================================
    VYZARA
    RESPONSIVE
======================================================================*/



/*======================================================================
    1400px
======================================================================*/

@media (max-width:1400px){

    html{

        font-size:15.5px;

    }

}



/*======================================================================
    1200px
======================================================================*/

@media (max-width:1200px){

    .container{

        width:min(94%,1200px);

    }

}



/*======================================================================
    992px
======================================================================*/

@media (max-width:992px){

    html{

        font-size:15px;

    }

    section{

        padding:6rem 0;

    }

    .container{

        width:min(92%,100%);

    }

    /*==============================
        NAVBAR
    ==============================*/

    .navbar{

        min-height:74px;

        padding:0 1.5rem;

        border-radius:18px;

    }

    .navbar__menu{

        display:none;

    }

    .navbar__actions{

        display:none;

    }

    .navbar__toggle{

        display:flex;

    }

    .navbar__logo{

        width:150px;

        height:auto;

    }

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

    .mobile-menu{

        top:74px;

        right:-100%;

        width:100%;

        height:calc(100vh - 74px);

        padding:2rem;

        border-left:none;

    }

    .mobile-menu.active{

        right:0;

    }

    .mobile-menu__nav{

        gap:1.5rem;

    }

    .mobile-menu__link{

        font-size:1rem;

    }

}
/*======================================================================
    HERO RESPONSIVE
======================================================================*/

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

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:120px 0 80px;

    }

    .hero__wrapper{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .hero__visual{

        order:1;

    }

    .hero__content{

        order:2;

        width:100%;

        align-items:center;

        text-align:center;

    }

    .hero__eyebrow{

        justify-content:center;

    }

    .hero__title{

        width:100%;

        max-width:100%;

        font-size:4rem;

        line-height:1;

    }

    .hero__description{

        max-width:700px;

    }

    .hero__actions{

        justify-content:center;

    }

    .hero__highlights{

        justify-content:center;

    }

    .hero__visual-wrapper{

        width:420px;

    }

    .hero__glass{

        width:260px;

        height:260px;

    }

    .hero__logo{

        width:140px;

    }

    .hero__circle--one{

        width:420px;

        height:420px;

    }

    .hero__circle--two{

        width:340px;

        height:340px;

    }

    .hero__circle--three{

        width:240px;

        height:240px;

    }

}


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

@media (max-width:576px){

    .hero{

        padding:110px 0 60px;

    }

    .hero__wrapper{

        gap:3rem;

    }

    .hero__content{

        padding-inline:.5rem;

    }

    .hero__title{

        font-size:2.5rem;

        line-height:1.08;

        max-width:100%;

    }

    .hero__description{

        font-size:1rem;

    }

    .hero__actions{

        width:100%;

        flex-direction:column;

    }

    .hero__actions .btn{

        width:100%;

    }

    .hero__visual-wrapper{

        width:min(300px,80vw);

    }

    .hero__glass{

        width:190px;

        height:190px;

    }

    .hero__logo{

        width:110px;

    }

    .hero__circle--one{

        width:300px;

        height:300px;

    }

    .hero__circle--two{

        width:240px;

        height:240px;

    }

    .hero__circle--three{

        width:170px;

        height:170px;

    }

}


/*==================================================
    EXTRA SMALL
==================================================*/

@media (max-width:400px){

    .hero__title{

        font-size:2.2rem;

    }

    .hero__eyebrow{

        font-size:.72rem;

        letter-spacing:.18em;

    }

}
/*======================================================================
    CONTENT GRIDS
    992px
======================================================================*/

@media (max-width:992px){

    /*==================================================
        TRUST STRIP
    ==================================================*/

    .trust-strip{

        padding:4rem 0;

    }

    .trust-strip__wrapper{

        grid-template-columns:repeat(2,1fr);

        gap:1.5rem;

    }

    .trust-strip__item{

        padding:1.8rem;

    }

    /*==================================================
        ECOSYSTEMS
    ==================================================*/

    .ecosystem-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .ecosystem-card{

        padding:2.5rem;

    }

    /*==================================================
        EXPERIENCES
    ==================================================*/

    .experience-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .experience-card__content{

        padding:2rem;

    }

}
/*======================================================================
    CONTENT GRIDS
    576px
======================================================================*/

@media (max-width:576px){

    /*==================================================
        TRUST STRIP
    ==================================================*/

    .trust-strip__wrapper{

        grid-template-columns:1fr;

        gap:1rem;

    }

    .trust-strip__item{

        padding:1.5rem;

    }

    .trust-strip__item h3{

        font-size:.95rem;

    }

    /*==================================================
        ECOSYSTEMS
    ==================================================*/

    .ecosystem-card{

        padding:2rem;

    }

    .ecosystem-card__number{

        width:52px;

        height:52px;

    }

    /*==================================================
        EXPERIENCES
    ==================================================*/

    .experience-card__media{

        aspect-ratio:16/11;

    }

    .experience-card__content{

        padding:1.75rem;

    }

}
/*======================================================================
    CONTENT SECTIONS
    992px
======================================================================*/

@media (max-width:992px){

    /*==================================================
        WHY VYZARA
    ==================================================*/

    .why__grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .why-card{

        padding:2.5rem;

    }


    /*==================================================
        PHILOSOPHY
    ==================================================*/

    .philosophy__grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .philosophy-card{

        padding:2.5rem;

    }


    /*==================================================
        CREDIBILITY
    ==================================================*/

    .credibility-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .credibility-card{

        padding:2.5rem;

    }


    /*==================================================
        METHODOLOGY
    ==================================================*/

    .methodology__timeline{

        grid-template-columns:1fr;

        gap:2rem;

    }

    .methodology__timeline::before{

        display:none;

    }

    .methodology-step{

        padding:2.5rem;

    }

    .methodology-step__number{

        width:64px;

        height:64px;

        font-size:1.1rem;

    }

}
/*======================================================================
    CONTENT SECTIONS
    576px
======================================================================*/

@media (max-width:576px){

    /*==================================================
        WHY
    ==================================================*/

    .why-card{

        padding:2rem 1.5rem;

    }


    /*==================================================
        PHILOSOPHY
    ==================================================*/

    .philosophy-card{

        padding:2rem 1.5rem;

    }


    /*==================================================
        CREDIBILITY
    ==================================================*/

    .credibility-card{

        padding:2rem 1.5rem;

    }


    /*==================================================
        METHODOLOGY
    ==================================================*/

    .methodology-step{

        padding:2rem 1.5rem;

    }

}
/*======================================================================
    FOUNDER • CTA • FOOTER
    992px
======================================================================*/

@media (max-width:992px){

    /*==================================================
        FOUNDER
    ==================================================*/

    .founder__wrapper{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .founder__image{

        max-width:480px;

        margin-inline:auto;

    }

    .founder__content{

        align-items:center;

        text-align:center;

    }

    .founder__quote{

        margin-top:2rem;

        text-align:left;

    }

    /*==================================================
        CTA
    ==================================================*/

    .cta__wrapper{

        padding:4rem 3rem;

    }

    .cta__actions{

        justify-content:center;

        flex-wrap:wrap;

        gap:1.25rem;

    }

    /*==================================================
        FOOTER
    ==================================================*/

    .footer__top{

        grid-template-columns:repeat(2,1fr);

        gap:3rem;

    }

    .footer__brand{

        grid-column:1/-1;

        text-align:center;

        align-items:center;

    }

    .footer__description{

        max-width:600px;

        margin-inline:auto;

    }

}
/*======================================================================
    FOUNDER • CTA • FOOTER
    576px
======================================================================*/

@media (max-width:576px){

    /*==================================================
        FOUNDER
    ==================================================*/

    .founder__wrapper{

        gap:3rem;

    }

    .founder__image{

        max-width:100%;

    }

    .founder__quote{

        padding:1.5rem;

    }

    /*==================================================
        CTA
    ==================================================*/

    .cta__wrapper{

        padding:2.5rem 1.5rem;

    }

    .cta__actions{

        flex-direction:column;

        gap:1rem;

    }

    .cta__actions .btn{

        width:100%;

        justify-content:center;

    }

    /*==================================================
        FOOTER
    ==================================================*/

    .footer{

        padding-top:5rem;

    }

    .footer__top{

        grid-template-columns:1fr;

        gap:2.5rem;

        text-align:center;

    }

    .footer__brand{

        align-items:center;

    }

    .footer__logo{

        width:180px;

    }

    .footer__description{

        max-width:100%;

    }

    .footer__column{

        align-items:center;

    }

    .footer__column ul{

        align-items:center;

    }

    .footer__bottom{

        flex-direction:column;

        text-align:center;

        gap:1rem;

    }

}
/*======================================================================
    SMALL DEVICES
    400px
======================================================================*/

@media (max-width:400px){
    .hero__title{

    font-size:2.2rem;
    line-height:1.08;
}
    html{

        font-size:14px;

    }

    .container{

        width:min(94%,100%);

    }

    .navbar{

        min-height:68px;

        padding:0 1rem;

    }

    .navbar__logo{

        width:135px;

        height:auto;

    }

    .mobile-menu{

        top:68px;

        height:calc(100vh - 68px);

        padding:1.5rem;

    }

    .section-title{

        font-size:2rem;

        line-height:1.1;

    }

    .hero{

        padding-top:6.5rem;

        padding-bottom:3.5rem;

    }

    .hero__wrapper{

        gap:2.2rem;

    }

    .hero__visual-wrapper{

        width:min(250px,80vw);

    }

    .hero__glass{

        width:170px;

        height:170px;

    }

    .hero__logo{

        width:95px;

    }

    .hero__circle--one{

        width:250px;

        height:250px;

    }

    .hero__circle--two{

        width:210px;

        height:210px;

    }

    .hero__circle--three{

        width:150px;

        height:150px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

}



/*======================================================================
    EXTRA SMALL
    320px
======================================================================*/

@media (max-width:320px){

    html{

        font-size:13px;

    }

    .navbar{

        padding:0 .8rem;

    }

    .navbar__logo{

        width:120px;

    }

    .hero__visual-wrapper{

        width:220px;

    }

    .hero__glass{

        width:150px;

        height:150px;

    }

    .hero__logo{

        width:85px;

    }

}



/*======================================================================
    LANDSCAPE PHONES
======================================================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding-top:8rem;

        padding-bottom:4rem;

    }

    .hero__wrapper{

        grid-template-columns:1fr 1fr;

        gap:3rem;

    }

    .hero__content{

        align-items:flex-start;

        text-align:left;

    }

    .hero__actions{

        justify-content:flex-start;

    }

    .hero__highlights{

        justify-content:flex-start;

    }

    .hero__scroll{

        display:none;

    }

}



/*======================================================================
    iPhone Safe Area
======================================================================*/

@supports (padding:max(0px)){

    .header{

        padding-top:max(1rem, env(safe-area-inset-top));

    }

    .mobile-menu{

        padding-bottom:max(2rem, env(safe-area-inset-bottom));

    }

}