/*==================================================
                COUNTRY GATE website
==================================================*/





#website[hidden]{
    display:none !important;
}


@keyframes websiteFade{

from{

    opacity:0;
    transform:translateY(20px);

}

to{

    opacity:1;
    transform:translateY(0);

}

}

#gate{

    opacity:1;
    visibility:visible;

}

#gate.hidden{

    display:none !important;

}

/*==================================================
                COUNTRY GATE
==================================================*/


#gate{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:40px 20px;

    background:linear-gradient(135deg,#07151f,#0f2433,#102b3c);

    overflow-y:auto;

    z-index:999999999;

    transition:.5s ease;

}

#gate.hidden{

    display:none !important;

}

body.gate-open{

    overflow:hidden;

}

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

.gate-logo{

    width:110px;
    height:110px;

    margin: 5px auto 5px;
    display:flex;
    justify-content:center;
    align-items:center;

}

.gate-logo img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

}



/*==================================================
                HEADING
==================================================*/

.board-head{

    width:100%;

    max-width:760px;

    text-align:center;

    margin-bottom:20px;

}

.board-head .eyebrow{

    display:inline-block;

    padding:10px 20px;

    background:rgba(196,242,38,.12);

    border:1px solid rgba(196,242,38,.25);

    border-radius:50px;

    color:#c4f226;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:20px;

}

.board-head h1{

    font-size:clamp(34px,4vw,52px);

    color:#fff;

    line-height:1.2;

    margin-bottom:18px;

    font-weight:700;

}

.board-head p{

    max-width:650px;

    margin:auto;

    color:#c7d0dc;

    font-size:16px;

    line-height:1.8;

}


/*==================================================
                BOARD
==================================================*/

.board{

    width:100%;

    max-width:660px;

    display:grid;

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

    gap:14px;

}


/*==================================================
                COUNTRY CARD
==================================================*/

.flap{

    position:relative;

    background:#15263d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:10px;

    padding:18px 15px;

    cursor:pointer;

    transition:.35s ease;

    overflow:hidden;

}

.flap::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    top:50%;

    height:1px;

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

}

.flap:hover{

    transform:translateY(-5px);

    background:#1b3352;

    border-color:#c4f226;

}

.flap:focus-visible{

    outline:none;

    border-color:#c4f226;

    box-shadow:0 0 0 3px rgba(196,242,38,.25);

}

.flap-code{

    display:block;

    margin-bottom:8px;

    color:#c4f226;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

}

.flap-text{

    display:block;

    color:#fff;

    font-size:15px;

    font-weight:600;

    min-height:20px;

}

.flap.settled .flap-text{

    color:#fff;

}


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

.board-foot{

    margin-top:35px;

    text-align:center;

}

.board-foot button{

    background:none;

    border:none;

    color:#c4f226;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    text-decoration:underline;

    transition:.3s;

}

.board-foot button:hover{

    color:#fff;

}


/*==================================================
            LAPTOP
==================================================*/

@media(max-width:992px){

.board{

max-width:560px;

gap:12px;

}

}


/*==================================================
            TABLET
==================================================*/

@media(max-width:768px){

#gate{

padding:60px 20px;

justify-content:flex-start;

}

.board-head{

margin-bottom:35px;

}

.board-head h1{

font-size:34px;

}

.board-head p{

font-size:15px;

}

.gate-logo{

    width:90px;
    height:90px;

    margin-bottom:20px;

}


.board{

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

max-width:420px;

}

.flap{

padding:18px 10px;

}

}


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

@media(max-width:480px){

#gate{

padding:40px 15px;

}

.gate-logo{

    width:75px;
    height:75px;

    margin-bottom:18px;

}

.board-head{

margin-bottom:28px;

}

.board-head .eyebrow{

font-size:11px;

padding:8px 18px;

}

.board-head h1{

font-size:28px;

}

.board-head p{

font-size:14px;

line-height:1.7;

}

.board{

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

gap:10px;

}

.flap{

padding:15px 8px;

}

.flap-code{

font-size:10px;

}

.flap-text{

font-size:13px;

}

.board-foot{

margin-top:25px;

}

.board-foot button{

font-size:13px;

}

}