* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --transition-fast: 0.6s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    color: #1f1f1f;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: #19263B;
}


/* ===============================
   OVERLAY
================================ */

.menu-overlay{

    position:fixed;
    inset:0;

     background: rgba(255,255,255,.95);

    z-index:9999;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

}

.menu-overlay.active{

    opacity:1;
    visibility:visible;

}


/* ===============================
   LOGO
================================ */

.menu-logo{

    position:absolute;

    top:40px;
    left:60px;

    width:210px;
    height:auto;

}


/* ===============================
   CLOSE
================================ */

.menu-close{

    position:absolute;

    top:40px;
    right:60px;

    border:0;
    background:none;

    font-size:34px;

    cursor:pointer;

    color:#081322;

}


/* ===============================
   MENU
================================ */

.menu-nav{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:18px;

}

.menu-nav a{

    text-decoration:none;

    color:#081322;

    font-size:3.3rem;
    font-weight:700;

    transition:.25s;

}

.menu-nav a:hover{

    color:#EA3D3D;

}


/* ===============================
   CTA
================================ */

.btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:280px;
    height:60px;

    padding:0 32px;

    border-radius:999px;

    background:#24C13A;

    color:#FFF;
    font-size:1rem;
    font-weight:700;
    text-decoration:none;

    transition:all .3s ease;

    box-shadow:0 12px 30px rgba(36,193,58,.18);

}

.btn-primary:hover{

    background:#1FB336;

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(36,193,58,.28);

}

.btn-primary:active{

    transform:translateY(0);

    box-shadow:0 8px 18px rgba(36,193,58,.20);

}

.menu-cta{

    margin-top:55px;

}


/* ===============================
   SOCIAL
================================ */

.menu-social{

    margin-top:35px;

    display:flex;

    gap:20px;

}

.menu-social a{

    font-size:1.8rem;

    color:#081322;

    transition:.25s;

}

.menu-social a img{
    width: 31px;
    height: 31px;
}

.menu-social a:hover{

    color:#EA3D3D;

}


/* ===============================
   MOBILE
================================ */

@media(max-width:768px){

    .menu-logo{

        width:160px;

        left:25px;
        top:25px;

    }

    .menu-close{

        right:25px;
        top:25px;

    }

    .menu-nav a{

        font-size:2.4rem;

    }

}


/*==================================
FOOTER PAYMENT
===================================*/

.footer-payment{

    position:relative;

    background-color:#09121f;

    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.05);

    padding:70px 0;

}

.footer-payment .container{

    max-width:1650px;
    margin:0 auto;
    padding:0 60px;

    display:grid;
    grid-template-columns:auto auto auto;
    justify-content:center;
    
    column-gap:90px;
}



/*=====================*/

.payment-title h3{

    font-size:2.2rem;
    line-height:1.15;
    color:#FFF;
    font-weight:700;

}

/*=====================*/

.payment-method{

    display:flex;
    flex-direction:column;

}

.payment-label{

    color:#FFF;
    opacity:.85;

    font-size:1.2rem;
    font-weight:500;

    margin-bottom:22px;

}

/*=====================*/

.payment-pix img{

    width:170px;
    height:auto;

}

.payment-pix span{
    margin-bottom: 8px;
}


/*=====================*/

.cards-list{

    display:flex;

    align-items:center;
    gap:28px;

    flex-wrap:wrap;

}

.cards-list img{

    height:42px;
    width:auto;

    transition:.3s;

    opacity:.95;

}

.cards-list img:hover{

    transform:translateY(-3px);
    opacity:1;

}

@media (max-width: 960px){

    .footer-payment .container{
        grid-template-columns:1fr;
        gap:45px;
        text-align:center;
    }

    .payment-method{
        align-items:center;
    }

    .payment-cards{
        align-items:center;
    }

    .cards-list{
        display:grid;
        grid-template-columns:repeat(3, auto);
        justify-content:center;
        align-items:center;
        gap:20px 24px;
    }

    .cards-list img{
        height:32px;
        width:auto;
    }

}