/* =====================================================
   GETCLOUD v3.0
   Responsive Styles
===================================================== */

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

@media (max-width: 1400px){

    .container{
        width:92%;
    }

    .hero-content h1{
        font-size:60px;
    }

}

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

@media (max-width: 1200px){

    .hero-grid{

        grid-template-columns:
        1fr 1fr;

        gap:40px;
    }

    .hero-content h1{
        font-size:56px;
    }

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

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

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

    .footer-grid{

        grid-template-columns:
        1fr 1fr;
    }

}

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

@media (max-width: 992px){

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

    .hero{

        padding-top:130px;
        padding-bottom:80px;
    }

    .hero-grid{

        grid-template-columns:
        1fr;

        text-align:center;
    }

    .hero-content p{

        max-width:100%;
    }

    .hero-buttons{

        justify-content:center;
    }

    .hero-stats{

        justify-content:center;
    }

    .hero-image{

        margin-top:20px;
    }

    .hero-image img{

        max-width:450px;
    }

    .partner-wrap{

        gap:15px;
    }

    .partner-item{

        font-size:14px;
    }

    .cta-content h2{

        font-size:40px;
    }

}

/* =====================================================
   Mobile Menu Start
===================================================== */

@media (max-width: 768px){

    .navbar{

        height:70px;
    }

    .mobile-toggle{

        display:block;
    }

    .menu{

        position:absolute;

        top:70px;
        left:0;

        width:100%;

        background:#fff;

        box-shadow:
        0 10px 30px rgba(0,0,0,.08);

        display:none;
    }

    .menu.active{

        display:block;
    }

    .menu ul{

        flex-direction:column;

        gap:0;
    }

    .menu li{

        border-bottom:
        1px solid #eee;
    }

    .menu a{

        display:block;

        padding:18px 25px;
    }

    .nav-cta{

        display:none;
    }

}

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

@media (max-width: 768px){

    .section-title{

        margin-bottom:40px;
    }

    .section-title h2{

        font-size:32px;
    }

    .section-title p{

        font-size:16px;
    }

    .hero-content h1{

        font-size:46px;
    }

    .hero-content p{

        font-size:18px;
    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;
    }

    .btn-primary,
    .btn-secondary{

        width:280px;
    }

    .hero-stats{

        flex-wrap:wrap;

        gap:25px;
    }

    .service-grid{

        grid-template-columns:
        1fr;
    }

    .stats-grid{

        grid-template-columns:
        1fr;
    }

    .case-grid{

        grid-template-columns:
        1fr;
    }

    .footer-grid{

        grid-template-columns:
        1fr;

        gap:35px;
    }

    .cta-content h2{

        font-size:34px;
    }

    .cta-content p{

        font-size:18px;
    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;
    }

}

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

@media (max-width: 576px){

    .container{

        width:94%;
    }

    .hero{

        padding-top:120px;
        padding-bottom:70px;
    }

    .hero-badge{

        font-size:13px;
    }

    .hero-content h1{

        font-size:38px;
    }

    .hero-content p{

        font-size:16px;
    }

    .hero-image img{

        max-width:100%;
    }

    .service-card{

        padding:25px;
    }

    .service-card h3{

        font-size:22px;
    }

    .counter{

        font-size:44px;
    }

    .stat-card{

        padding:30px 20px;
    }

    .faq-question{

        padding:20px;
        padding-right:50px;

        font-size:16px;
    }

    .faq-question::after{

        right:20px;
    }

    .faq-answer{

        padding:
        0 20px 20px;
    }

    .cta-content h2{

        font-size:28px;
    }

    .footer{

        padding:60px 0 25px;
    }

    .footer-logo{

        max-width:180px;
    }

}

/* =====================================================
   Small Mobile
===================================================== */

@media (max-width: 420px){

    .hero-content h1{

        font-size:32px;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
    }

    .hero-stats{

        flex-direction:column;

        gap:15px;
    }

    .partner-item{

        width:100%;

        text-align:center;
    }

    .service-card{

        padding:20px;
    }

    .cta-content h2{

        font-size:24px;
    }

}

/* =====================================================
   Landscape Phone
===================================================== */

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

    .hero{

        padding-top:100px;
        padding-bottom:50px;
    }

    .hero-grid{

        grid-template-columns:
        1fr 1fr;
    }

}