/* =====================================================
   OSITronix - responsive.css
   Responsive Layout
   Version 2.1
   Autor  : Luís Veiga
   ===================================================== */

/* =====================================================
   UltraWide (>= 1920px)
   ===================================================== */

@media (min-width:1920px){

    section{
        max-width:1500px;
    }

    .company-logo{
        width:560px;
    }

    .hero-scope{
        font-size:1.10rem;
        margin-right:12%;
        white-space:nowrap;
    }

}

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

@media (max-width:1440px){

    section{
        width:min(1200px,92%);
    }

    .company-logo{
        width:500px;
    }

    .hero-scope{
        font-size:1rem;
        margin-right:10%;
        white-space:nowrap;
    }

}

/* =====================================================
   Notebook
   ===================================================== */

@media (max-width:1200px){

    .company-logo{
        width:440px;
    }

    .hero-scope{
        font-size:.95rem;
        margin-right:8%;
        letter-spacing:.09em;
        white-space:nowrap;
    }

    .cards,
    .tech-grid{

        grid-template-columns:
            repeat(auto-fit,minmax(240px,1fr));

    }

}

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

@media (max-width:992px){

    .navbar{
        padding:18px 5%;
    }

    #menu{
        gap:18px;
    }

    .hero{
        padding-top:120px;
        min-height:90vh;
    }

    .company-logo{
        width:360px;
    }

    .hero-scope{
        font-size:.90rem;
        margin-right:4%;
        letter-spacing:.08em;
        max-width:560px;
        white-space:nowrap;
    }

    section{
        padding:70px 0;
    }

}

/* =====================================================
   Smartphone
   ===================================================== */

@media (max-width:768px){

    #menu-toggle{
        display:block;
    }

    #menu{

        position:absolute;

        top:72px;
        right:0;
        left:auto;

        width:min(78vw,300px);

        display:flex;

        flex-direction:column;

        transform:translateX(110%);

        visibility:hidden;

        opacity:0;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            opacity .28s ease,
            visibility 0s linear .28s;

        background:var(--bg-secondary);

        border-left:1px solid var(--border);
        border-bottom:1px solid var(--border);

        box-shadow:-8px 12px 30px rgba(0,0,0,.45);

        border-radius:0 0 0 12px;

        padding:22px 26px;

        text-align:right;

        gap:20px;

    }

    #menu.active{

        transform:translateX(0);

        visibility:visible;

        opacity:1;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            opacity .28s ease,
            visibility 0s linear 0s;

    }

    #menu a{

        display:block;

        border:1px solid transparent;

        border-radius:8px;

        padding:14px 18px;

        transition:
            border-color .25s ease,
            background-color .25s ease,
            color .25s ease;

    }

    #menu a:hover,
    #menu a:focus-visible{

        border-color:var(--gold);

        background-color:rgba(214,163,32,.08);

        color:var(--gold-hover);

    }

    .hero{
        min-height:85vh;
        padding:
            110px
            20px
            40px;

    }

    .company-logo{
        width:280px;
    }

    .hero-scope{

        font-size:.82rem;

        margin-right:0;

        letter-spacing:.05em;

        max-width:100%;

        white-space:normal;

        text-wrap:balance;

        line-height:1.35;

        text-align:center;

    }

    .button-primary{

        width:100%;

        max-width:300px;

    }

    .cards,
    .tech-grid{

        grid-template-columns:1fr;

    }

}

/* =====================================================
   Smartphones Pequenos
   ===================================================== */

@media (max-width:480px){

    .brand a{
        font-size:1.45rem;
    }

    .company-logo{
        width:220px;
    }

    .hero{
        padding-top:95px;
    }

    .hero-scope{

        font-size:.72rem;

        letter-spacing:.04em;

        line-height:1.40;

        margin-right:0;

    }

    section{

        width:94%;

        padding:55px 0;

    }

    footer{

        padding:25px 12px;

        font-size:.85rem;

    }

}

/* =====================================================
   Smartphones Muito Pequenos
   ===================================================== */

@media (max-width:360px){

    .company-logo{
        width:180px;
    }

    .hero-scope{

        font-size:.66rem;

        letter-spacing:.02em;

    }

    .button-primary{

        max-width:260px;

        font-size:.9rem;

    }

}