/*=============================================
    RESPONSIVE.CSS
    Utkarsh Growth Consultancy
==============================================*/

/*==================================
Large Desktop
===================================*/

@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:58px;
}

}

/*==================================
Laptop
===================================*/

@media (max-width:1200px){

.hero-grid{
    gap:50px;
}

.hero h1{
    font-size:52px;
}

.section-title h2{
    font-size:42px;
}

.services-grid,
.why-grid,
.testimonial-grid{
    grid-template-columns:repeat(2,1fr);
}

.process-grid{
    grid-template-columns:repeat(2,1fr);
}

.counter-grid{
    grid-template-columns:repeat(2,1fr);
}

.levels-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

}

@media (max-width:991px){

.footer .container{

    grid-template-columns:1fr;
    gap:45px;
    text-align:center;

}

.footer-logo{

    align-items:center;

}

.footer-logo p{

    margin:auto;

}

.footer-contact p{

    justify-content:center;

}

.social-icons{

    justify-content:center;

}

}



@media (max-width:992px){

    .why-about .container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .why-about .right{
        justify-content:center;
    }

    .why-about .right img{
        max-width:100%;
        height:auto;
    }

    .why-about .left h2{
        font-size:38px;
    }
}

/*==================================
Tablet
===================================*/

@media (max-width:992px){

section{
    padding:80px 0;
}

.hero{
    padding-top:150px;
}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-image{

    order:-1;

    max-width:550px;

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

nav{

    position:fixed;

    top:90px;

    right:-100%;

    width:300px;

    height:100vh;

    background:white;

    transition:.4s;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    padding-top:40px;

}

nav.active{

    right:0;

}

nav ul{

    flex-direction:column;

    gap:30px;

    text-align:center;

}

.menu-btn{

    display:block;

}

.btn-nav{

    display:none;

}

.services-grid,

.why-grid,

.testimonial-grid,

.levels-grid,

.process-grid,

.counter-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.social-icons{

    justify-content:center;

}

.section-title h2{

    font-size:38px;

}

h1{

    font-size:46px;

}

h2{

    font-size:40px;

}

h3{

    font-size:28px;

}

.container{

    width:90%;

}

}

/*==================================
Mobile Landscape
===================================*/

@media (max-width:768px){

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    border-bottom:1px solid #ece2c6;
    z-index:999;
}

.nav-container{

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:95px;
}

.logo h2{

    font-size:26px;

}

.logo span{

    font-size:11px;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:40px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,

.secondary-btn{

    width:100%;

    text-align:center;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    font-size:34px;

}

.service-card,

.why-card,

.step,

.count-box,

.level-card,

.testimonial-card{

    padding:30px;

}

footer{

    text-align:center;

}

.footer-grid{

    gap:30px;

}

.whatsapp-float{

    width:55px;

    height:55px;

    right:20px;

    bottom:20px;

}

#scrollTop{

    width:48px;

    height:48px;

    right:20px;

    bottom:90px;

}

}

/*==================================
Mobile Portrait
===================================*/

@media (max-width:576px){

.container{

    width:92%;

}

.hero h1{

    font-size:34px;

    line-height:1.2;

}

.hero-tag{

    font-size:12px;

}

.hero p{

    font-size:15px;

}

.section-title span{

    font-size:12px;

}

.section-title h2{

    font-size:30px;

}

h3{

    font-size:24px;

}

p{

    font-size:15px;

}

.primary-btn,

.secondary-btn{

    padding:15px 20px;

    font-size:15px;

}

.btn-nav{

    display:none;

}

.service-card,

.why-card,

.step,

.level-card,

.testimonial-card,

.count-box{

    padding:25px;

}

.count-box h2{

    font-size:42px;

}

.quote{

    width:55px;

    height:55px;

}

.quote i{

    font-size:22px;

}

.faq-question{

    padding:18px;

    font-size:16px;

}

.faq-answer{

    padding:0 18px 18px;

}

.social-icons{

    gap:12px;

}

.social-icons a{

    width:42px;

    height:42px;

}

.copyright{

    font-size:14px;

}

}

/*==================================
Extra Small Devices
===================================*/

@media (max-width:420px){

.hero h1{

    font-size:30px;

}

.section-title h2{

    font-size:27px;

}

.logo h2{

    font-size:22px;

}

.logo span{

    display:none;

}

.hero-buttons{

    gap:15px;

}

.primary-btn,

.secondary-btn{

    font-size:14px;

}

.whatsapp-float{

    width:50px;

    height:50px;

    font-size:24px;

}

#scrollTop{

    width:45px;

    height:45px;

}

}

/*==================================
Ultra Small Phones
===================================*/

@media (max-width:360px){

.hero h1{

    font-size:28px;

}

.section-title h2{

    font-size:24px;

}

.logo h2{

    font-size:20px;

}

.service-card,

.why-card,

.step,

.count-box,

.level-card,

.testimonial-card{

    padding:20px;

}

.primary-btn,

.secondary-btn{

    padding:14px;

}

}

/*==================================
Landscape Height Fix
===================================*/

@media (max-height:700px){

.hero{

    padding-top:120px;

}

}

/*==================================
Animation Optimization
===================================*/

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

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}