/* ======================================================
   FIREVIK SUPLEMENTOS
   responsive.css
====================================================== */

/* ==========================
   NOTEBOOKS
========================== */

@media (max-width:1200px){

    .container{
        width:92%;
    }

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

    .hero-content{
        gap:50px;
    }

    .hero-image img{
        width:360px;
    }

}

/* ==========================
   TABLETS
========================== */

@media (max-width:992px){

    header{

        position:relative;

    }

    header .container{

        flex-direction:column;
        height:auto;
        padding:20px 0;

    }

    nav{

        margin:20px 0;

    }

    nav ul{

        flex-wrap:wrap;
        justify-content:center;
        gap:18px;

    }

    .hero{

        min-height:auto;
        padding:80px 0;

    }

    .hero-content{

        grid-template-columns:1fr;
        text-align:center;

    }

    .hero p{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin-top:50px;

    }

    .hero-image img{

        width:320px;

    }

    .about-grid{

        grid-template-columns:1fr;
        text-align:center;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================
   CELULARES
========================== */

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .hero{

        padding:60px 0;

    }

    .hero h1{

        font-size:42px;
        line-height:1.2;

    }

    .hero p{

        font-size:16px;

    }

    section h2{

        font-size:32px;

    }

    .page-banner{

        padding:90px 0 70px;

    }

    .page-banner h1{

        font-size:36px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .future-grid{

        grid-template-columns:1fr;

    }

    .contact-buttons{

        flex-direction:column;
        align-items:center;

    }

    .contact-buttons a{

        width:100%;
        max-width:320px;
        text-align:center;

    }

    .newsletter-form{

        flex-direction:column;

    }

    .newsletter-form button{

        width:100%;

    }

}

/* ==========================
   CELULARES PEQUENOS
========================== */

@media (max-width:480px){

    .container{

        width:94%;

    }

    .logo img{

        height:55px;

    }

    nav ul{

        gap:12px;
        font-size:15px;

    }

    .hero h1{

        font-size:34px;

    }

    .subtitle{

        font-size:12px;
        letter-spacing:2px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary,
    .btn-menu,
    button{

        width:100%;
        text-align:center;

    }

    input,
    textarea{

        font-size:15px;

    }

}

/* ==========================
   TELAS MUITO GRANDES
========================== */

@media (min-width:1600px){

    .container{

        max-width:1400px;

    }

    .hero h1{

        font-size:78px;

    }

    .hero p{

        font-size:22px;

    }

    section h2{

        font-size:54px;

    }

    .hero-image img{

        width:520px;

    }

}

/* ==========================
   AJUSTES DE ACESSIBILIDADE
========================== */

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

    *{

        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;

    }

}