/* ==========================================================================
   Fluxoweby
   Responsive
   Version: 1.0
   ========================================================================== */

/* ==========================================================================
   <= 1440px
   ========================================================================== */

@media (max-width:1440px){

    :root{

        --container-width:1180px;

    }

}

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

@media (max-width:1200px){

    :root{

        --container-width:100%;

        --container-padding:32px;

    }

    .hero-wrapper{

        gap:var(--space-12);

    }

    .about-wrapper{

        gap:var(--space-12);

    }

    .contact-wrapper{

        gap:var(--space-12);

    }

}

/* ==========================================================================
   <= 992px
   ========================================================================== */

@media (max-width:992px){

    section{

        padding-block:var(--space-20);

    }

    .hero{

        min-height:auto;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        align-items:center;

    }

    .hero-features{

        justify-content:center;

    }

    .cloud-dashboard{

        max-width:700px;

        margin-inline:auto;

    }

    .about-wrapper{

        grid-template-columns:1fr;

    }

    .about-content{

        text-align:center;

        align-items:center;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .contact-info{

        text-align:center;

        align-items:center;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .statistics-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .pricing-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}

/* ==========================================================================
   <= 768px
   ========================================================================== */

@media (max-width:768px){

    :root{

        --header-height:72px;

        --container-padding:20px;

    }

    section{

        padding-block:var(--space-16);

    }

    h1{

        font-size:clamp(2.5rem,8vw,4rem);

    }

    h2{

        font-size:2rem;

    }

    .navbar{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .hero-actions{

        width:100%;

        flex-direction:column;

    }

    .hero-actions .button{

        width:100%;

    }

    .clients-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .statistics-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        text-align:center;

    }

}

/* ==========================================================================
   <= 576px
   ========================================================================== */

@media (max-width:576px){

    :root{

        --container-padding:16px;

    }

    .section-header{

        margin-bottom:var(--space-10);

    }

    .hero-features{

        flex-direction:column;

        align-items:flex-start;

        width:100%;

    }

    .hero-features li{

        width:100%;

    }

    .price-card{

        padding:var(--space-8);

    }

    .contact-form{

        padding:var(--space-6);

    }

    .stat-card{

        padding:var(--space-6);

    }

    .card{

        padding:var(--space-6);

    }

}

/* ==========================================================================
   <= 480px
   ========================================================================== */

@media (max-width:480px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.75rem;

    }

    h3{

        font-size:1.35rem;

    }

    p{

        font-size:.95rem;

    }

    .button{

        width:100%;

        min-height:48px;

        padding-inline:20px;

    }

    .hero-actions{

        gap:var(--space-3);

    }

    .clients-grid{

        grid-template-columns:1fr;

    }

    .client-logo{

        padding:var(--space-4);

    }

    .price{

        font-size:2.4rem;

    }

    .price small{

        font-size:.85rem;

    }

    .whatsapp-button{

        width:54px;

        height:54px;

        right:16px;

        bottom:16px;

    }

}

/* ==========================================================================
   LARGE SCREENS
   ========================================================================== */

@media (min-width:1600px){

    :root{

        --container-width:1320px;

    }

}