/*=========================================================
RESPONSIVE
Author : AshwaMedia
=========================================================*/


/*=========================================================
XXL
=========================================================*/

@media (min-width:1400px){

.container{

    max-width:1320px;

}

.hero h1{

    font-size:64px;

}

}


/*=========================================================
LAPTOP
=========================================================*/

@media (max-width:1200px){

.hero h1{

    font-size:48px;

}

.section-title h2{

    font-size:36px;

}

.price{

    font-size:36px;

}

}


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

@media (max-width:992px){

.navbar{

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.nav-link{

    margin-left:0;

    padding:12px 0;

}

.hero{

    padding-top:140px;

    min-height:auto;

    text-align:center;

}

.hero h1{

    font-size:42px;

}

.hero-button{

    justify-content:center;

}

.hero-feature{

    justify-content:center;

}

.hero-image{

    margin-top:50px;

    max-width:500px;

    margin-left:auto;

    margin-right:auto;

}

.section-padding{

    padding:80px 0;

}

.feature-box{

    margin-bottom:25px;

}

.pricing-card{

    margin-bottom:30px;

}

.popular{

    transform:none;

}

.cta-section h2{

    font-size:36px;

}

footer{

    text-align:center;

}

footer .text-lg-end{

    text-align:center!important;

    margin-top:25px;

}

}


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

@media (max-width:768px){

.hero h1{

    font-size:34px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.hero-button .btn{

    width:100%;

}

.hero-feature{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

}

.section-title h2{

    font-size:30px;

}

.section-title p{

    font-size:15px;

}

.price{

    font-size:34px;

}

.pricing-card{

    padding:35px 25px;

}

.popular-badge{

    width:180px;

    right:-45px;

    font-size:11px;

}

.feature-item{

    padding:25px;

}

.feature-item i{

    font-size:36px;

}

.counter-box{

    margin-bottom:25px;

}

.process-box{

    margin-bottom:25px;

}

.testimonial-card{

    margin-bottom:25px;

}

.cta-section{

    padding:70px 25px;

}

.cta-section h2{

    font-size:30px;

}

.floating-wa{

    width:58px;

    height:58px;

    font-size:28px;

    right:20px;

    bottom:20px;

}

}


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

@media (max-width:576px){

.navbar-brand{

    font-size:24px;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.btn{

    padding:14px 22px;

}

.section-padding{

    padding:70px 0;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:26px;

}

.feature-box{

    padding:30px 20px;

}

.feature-box i{

    font-size:40px;

}

.feature-box h4{

    font-size:20px;

}

.price{

    font-size:30px;

}

.pricing-card{

    padding:30px 20px;

}

.cta-section h2{

    font-size:26px;

}

footer{

    padding:50px 0 25px;

}

}


/*=========================================================
ANIMATION OFF
=========================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}