/*=============================
    CACTUS BANJO GAMES
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#101010;

    color:#fff;

    overflow-x:hidden;

    line-height:1.7;

}

/*=============================
    BACKGROUND
==============================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at top left,#2b4419 0%,transparent 35%),

        radial-gradient(circle at bottom right,#33210e 0%,transparent 40%),

        radial-gradient(circle at center,#181818 0%,#101010 80%);

    z-index:-3;

}

.background-glow{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 25% 25%,
    rgba(134,199,58,.12),
    transparent 30%),

    radial-gradient(circle at 75% 80%,
    rgba(255,193,90,.08),
    transparent 30%);

    filter:blur(90px);

    z-index:-2;

}

.cactus-pattern{

    position:fixed;

    inset:0;

    z-index:-1;

    opacity:.05;

    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20260%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23a8d97a%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%22100%22%20cy%3D%22178%22%20r%3D%2228%22/%3E%0A%3Cline%20x1%3D%22100%22%20y1%3D%2270%22%20x2%3D%22100%22%20y2%3D%22200%22/%3E%0A%3Cpath%20d%3D%22M100%20130%20C78%20130%2066%20118%2066%2096%20C66%2079%2078%2071%2088%2074%22/%3E%0A%3Cpath%20d%3D%22M100%20105%20C122%20105%20134%2093%20134%2071%20C134%2056%20124%2048%20114%2051%22/%3E%0A%3Crect%20x%3D%2290%22%20y%3D%2246%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%223%22/%3E%0A%3Cline%20x1%3D%22166%22%20y1%3D%22178%22%20x2%3D%22180%22%20y2%3D%22178%22%20stroke-width%3D%223%22/%3E%0A%3Cline%20x1%3D%2220%22%20y1%3D%22178%22%20x2%3D%2234%22%20y2%3D%22178%22%20stroke-width%3D%223%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");

    background-repeat:repeat;

    background-size:200px 260px;

    pointer-events:none;

}

/*=============================
NAVBAR
==============================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

}

nav{

    width:min(1200px,92%);

    margin:20px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 28px;

    border-radius:20px;

    background:rgba(20,20,20,.70);

    backdrop-filter:blur(18px);

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

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

.logo-small img{

    height:60px;

    width:60px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid #fff;

}

nav ul{

    display:flex;

    gap:35px;

    list-style:none;

}

nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

nav a:hover{

    color:#98d648;

}

/*=============================
HERO
==============================*/

.hero{

    min-height:115vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:220px 20px 180px;

    position:relative;

}

.hero-content{

    max-width:900px;

}

.hero-logo{

    width:min(560px,85%);

    margin-bottom:30px;

    padding:0; /* Removes the padding entirely */

    border:3px solid #fff; /* Keeps the white outline */

    border-radius:28px; /* The rounded rectangle shape */

    box-sizing:border-box;

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

    filter:drop-shadow(0 0 40px rgba(118,194,47,.18));

    /* Forces the image content to mask/clip perfectly to the rounded corners */
    overflow:hidden; 
    object-fit:cover;

}

.hero h1{

    font-family:'Rye',serif;

    font-size:clamp(3rem,7vw,5.8rem);

    line-height:1.1;

    margin-bottom:25px;

    color:#f5ead0;

}

.hero p{

    max-width:700px;

    margin:auto;

    color:#bdbdbd;

    font-size:1.2rem;

}

/*=============================
BUTTONS
==============================*/

.hero-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.button{

    padding:16px 34px;

    border-radius:100px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.primary{

    background:#8cc84c;

    color:#101010;

}

.primary:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(133,205,64,.45);

}

.secondary{

    border:2px solid #8cc84c;

    color:white;

}

.secondary:hover{

    background:#8cc84c;

    color:#111;

}

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    font-size:2rem;

    color:#7dbf42;

    animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,12px);

}

}

/*=============================
SECTIONS
==============================*/

section{

    width:min(1200px,92%);

    margin:auto;

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-family:'Rye',serif;

    font-size:3rem;

    color:#f4e8cb;

}

.section-title p{

    color:#b7b7b7;

    margin-top:10px;

}

/*=============================
GAME CARD
==============================*/

.game-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    background:#171717;

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

    border-radius:30px;

    overflow:hidden;

    transition:.4s;

}

.game-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.4);

}

.game-image{

    padding:60px;

}

.game-image img{

    width:100%;

    display:block;

    border-radius:20px;

}

.game-info{

    padding:55px;

}

.tag{

    display:inline-block;

    background:#8cc84c;

    color:#111;

    font-size:.75rem;

    padding:7px 14px;

    border-radius:100px;

    font-weight:700;

}

.game-info h3{

    margin:20px 0;

    font-family:'Rye';

    font-size:3rem;

    color:#f3e5c6;

}

.game-info p{

    color:#c0c0c0;

}

.game-buttons{

    margin-top:35px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

/*=============================
ABOUT
==============================*/

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

}

.about h3{

    font-family:'Rye';

    margin-bottom:20px;

    font-size:2rem;

}

.stats{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.stat{

    background:#181818;

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

    border-radius:20px;

    padding:30px;

    text-align:center;

}

.stat h4{

    color:#92cf4a;

    font-size:2rem;

    margin-bottom:10px;

}

/*=============================
NEWS
==============================*/

.news-grid{

    display:grid;

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

    gap:30px;

    max-width:500px;

    margin:0 auto;

}

.news article{

    background:#181818;

    padding:35px;

    border-radius:20px;

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

    transition:.35s;

    text-align:center;

}

.news article:hover{

    transform:translateY(-8px);

}

.news h3{

    margin-bottom:15px;

    font-family:'Rye';

}

.news article .button{

    display:inline-block;

    margin-top:20px;

}

/*=============================
CONTACT
==============================*/

.contact{

    text-align:center;

}

.contact h2{

    font-family:'Rye';

    font-size:3rem;

    margin-bottom:20px;

}

.socials{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.social-item{

    position:relative;

    display:inline-flex;

}

.disabled-link{

    opacity:.5;

    cursor:default;

    pointer-events:none;

}

.coming-soon{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    margin-top:8px;

    white-space:nowrap;

    font-size:.75rem;

    color:#8a8a8a;

    letter-spacing:.03em;

}

.socials a{

    text-decoration:none;

    color:white;

    background:#1b1b1b;

    padding:14px 24px;

    border-radius:100px;

    transition:.3s;

}

.socials a:hover{

    background:#8cc84c;

    color:#111;

}

.disabled-link,
.disabled-link:hover,
.disabled-link:focus{

    background:#1b1b1b !important;

    color:#fff !important;

}

/*=============================
TRAILER POPUP
==============================*/

.popup{

    display:none;

    position:fixed;

    inset:0;

    z-index:1000;

    background:rgba(0,0,0,.85);

    align-items:center;

    justify-content:center;

    padding:20px;

}

.popup.active{

    display:flex;

}

.popup-content{

    position:relative;

    width:min(900px,100%);

    aspect-ratio:16/9;

    background:#000;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.6);

}

.popup-content iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}

.close-popup{

    position:absolute;

    top:-45px;

    right:0;

    font-size:2.2rem;

    line-height:1;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

.close-popup:hover{

    color:#8cc84c;

}

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

footer{

    padding:40px;

    text-align:center;

    color:#7e7e7e;

}

/*=============================
RESPONSIVE
==============================*/

@media(max-width:900px){

.game-card{

grid-template-columns:1fr;

}

.about-grid{

grid-template-columns:1fr;

}

.news-grid{

grid-template-columns:1fr;

}

nav{

flex-direction:column;

gap:20px;

}

.hero h1{

font-size:3rem;

}

.hero-logo{

width:100%;

}

}