/*==================================================
Responsive
VoiText Portfolio Edition
==================================================*/

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

@media (max-width:1200px){

    .container{

        width:min(92%,1100px);

    }

}


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

@media (max-width:992px){

    section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:48px;

    }

    .hero{

        min-height:90vh;

    }

    .hero__title{

        font-size:clamp(3rem,8vw,5rem);

    }

    .about__content{

        grid-template-columns:1fr;

        gap:48px;

    }

    .about__image{

        order:-1;

    }

    .features__grid{

        grid-template-columns:1fr;

    }

    .voice-grid{

        grid-template-columns:1fr;

    }

    .pricing-grid{

        grid-template-columns:1fr;

    }

}


/*=========================================
768px
Tablet Portrait
=========================================*/

@media (max-width:768px){

    /* Header */

    .header{

        height:72px;

    }

    .header .btn{

        display:none;

    }

    .nav{

        display:none;

    }

    .hamburger{

        display:block;

    }

    .mobile-nav.active{

        display:block;

    }

    /* Hero */

    .hero{

        min-height:85vh;

        padding-top:90px;

    }

    .hero__container{

        width:100%;

    }

    .hero__eyebrow{

        font-size:.75rem;

        letter-spacing:.2em;

    }

    .hero__title{

        font-size:3rem;

    }

    .hero__description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero__buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

    /* About */

    .about__text{

        text-align:center;

    }

    /* Card */

    .feature-card,

    .voice-card,

    .price-card{

        padding:34px 28px;

    }

    /* CTA */

    .cta{

        padding:80px 0;

    }

    .cta h2{

        font-size:2rem;

    }

    /* Footer */

    .footer__nav{

        flex-direction:column;

        gap:20px;

    }

}


/*=========================================
576px
Smartphone
=========================================*/

@media (max-width:576px){

    html{

        font-size:15px;

    }

    section{

        padding:60px 0;

    }

    .container{

        width:90%;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .hero{

        min-height:80vh;

    }

    .hero__title{

        font-size:2.5rem;

    }

    .hero__description{

        font-size:.95rem;

    }

    .hero__buttons{

        gap:16px;

    }

    .btn{

        height:52px;

    }

    .page-hero{

        padding:150px 0 70px;

    }

    .page-hero h1{

        font-size:2.2rem;

    }

    .contact-form{

        gap:20px;

    }

    .form-group input,

    .form-group textarea{

        padding:14px 16px;

    }

    .price{

        font-size:2.4rem;

    }

}


/*=========================================
400px
Small Smartphone
=========================================*/

@media (max-width:400px){

    .logo{

        font-size:1.5rem;

    }

    .hero__title{

        font-size:2.1rem;

    }

    .hero__description{

        font-size:.9rem;

    }

    .section-heading h2{

        font-size:1.8rem;

    }

    .feature-card,

    .voice-card,

    .price-card{

        padding:28px 22px;

    }

    .footer__logo{

        font-size:1.7rem;

    }

}