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

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

@media (max-width:1400px){

}

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

@media (max-width:1200px){

}

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

@media (max-width:992px){

    /* ==========================================
       PRICING
    ========================================== */

    #pricing{
        padding:100px 0;
    }

    #pricing .container{
        max-width:100%;
    }

    .billing-toggle{
        margin:40px 0 55px;
    }

    .pricing-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .pricing-plans{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }

    .pricing-card{
        padding:28px;
        border-radius:22px;
    }

    .plan-header{
        gap:14px;
        margin-bottom:28px;
    }

    .plan-icon{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:28px;
    }

    .plan-header h3{
        font-size:20px;
    }

    .plan-header p{
        font-size:15px;
    }

    .plan-price h2{
        font-size:52px;
    }

    .plan-price span{
        font-size:18px;
    }

    .pricing-card li{
        font-size:16px;
        margin-bottom:15px;
    }

    .pricing-card .btn-outline,
    .pricing-card .btn-primary,
    .pricing-card .btn-gradient{
        height:54px;
    }

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

    .why-wio{
        margin-top:70px;
    }

    .why-wio .section-heading{
        margin-bottom:55px;
    }

    .why-wio .section-heading h2{
        font-size:52px;
    }

    .why-wio .section-heading p{
        font-size:21px;
        max-width:760px;
    }

    .why-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .why-column{
        gap:28px;
    }

    .feature-item{
        gap:18px;
    }

    .feature-icon{
        width:64px;
        height:64px;
        border-radius:18px;
    }

    .feature-icon i{
        font-size:26px;
    }

    .feature-content h3{
        font-size:28px;
    }

    .feature-content p{
        font-size:18px;
    }

    /* ==========================================
       DOWNLOAD BANNER
    ========================================== */

    .download-banner{
        grid-template-columns:1.5fr 1fr 1fr;
        gap:20px;
        padding:28px;
        margin-top:55px;
    }

    .download-left{
        gap:18px;
    }

    .download-left i{
        width:68px;
        height:68px;
        font-size:28px;
    }

    .download-left h3{
        font-size:28px;
    }

    .download-left p{
        font-size:16px;
    }

    .download-middle{
        padding:20px;
    }

    .download-middle h4{
        font-size:20px;
    }

    .download-middle li{
        font-size:15px;
    }

    .download-right .btn-primary{
        height:54px;
    }

}

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

@media (max-width:768px){

    /* ==========================================
       PRICING
    ========================================== */

    .pricing-plans{
        grid-template-columns:1fr;
    }

    .pricing-footer{
        grid-template-columns:1fr;
    }

    .download-banner{
        grid-template-columns:1fr;
    }

}

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

@media (max-width:576px){

    .pricing-card{
        padding:24px;
    }

}