/* ===========================
   LASER TAG PAGE
=========================== */

body{
    background:#050505;
    color:#fff;
    font-family:'Inter',sans-serif;
}

/* HERO */

.laser-hero{
    min-height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:120px 10% 80px;

    background:
    linear-gradient(rgba(5,5,5,.72),rgba(5,5,5,.82)),
    url("../assets/laser-tag/hero.jpg");

    background-size:cover;
    background-position:center;
}

.hero-content{
    max-width:800px;
}

.hero-content span{
    color:#1EDCFF;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}

.hero-content h1{

    font-family:'Barlow Condensed',sans-serif;
    font-size:200px;
    line-height:1;
    text-shadow:
    0 0 15px #1EDCFF,
    0 0 35px rgba(201,67,255,.5);
}

/* ===========================
   GALLERY
=========================== */

.arena-gallery{

    padding:100px 8% 50px;
}

.arena-gallery p{

    color:#d4d4d4;
    font-size:1rem;
    margin:20px 0 30px;
    text-align:center; 
}

.arena-gallery h1{

    text-align:center;

    font-size:3.5rem;

    font-family:'Barlow Condensed';

    
    text-shadow:
    0 0 15px #1EDCFF,
    0 0 35px rgba(201,67,255,.5);
}

.gallery{

    display:grid;

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

    gap:20px;
}

.gallery img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;

    cursor:pointer;
}

.gallery img:hover{

    transform:scale(1.05);

    box-shadow:

    0 0 20px rgba(30,220,255,.4),

    0 0 45px rgba(201,67,255,.25);
}

/* ===========================
   EQUIPMENT
=========================== */


.equipment h2{

    text-align:center;

    margin-bottom:20px;

    font-family:'Barlow Condensed';

    font-size:3.5rem;
}

.equipment-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));

    gap:30px;

    margin: 0 20px 20px
}

.equipment-card{

    background:#0d0d10;

    border-radius:20px;

    padding:40px;

    text-align:center;

    border:1px solid rgba(30,220,255,.25);

    transition:.35s;
}

.equipment-card:hover{

    transform:translateY(-8px);

    border-color:#C943FF;

    box-shadow:

    0 0 20px rgba(201,67,255,.35);
}

.equipment-card i{

    font-size:3rem;

    color:#C943FF;

    margin-bottom:20px;
}

.equipment-card h3{

    font-family:'Barlow Condensed';

    font-size:2rem;

    margin-bottom:10px;
}

.equipment-card p{

    color:#bfbfbf;

    line-height:1.8;
}

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

.cta-section{

    text-align:center;

    padding:120px 8%;

    background:
    radial-gradient(circle,#221133 0%,#050505 75%);
}

.cta-section h2{

    font-family:'Barlow Condensed';

    font-size:4rem;

    margin-bottom:20px;
}

.cta-section p{

    color:#cfcfcf;

    margin-bottom:40px;
}

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

@media(max-width:992px){

.experience{

grid-template-columns:1fr;

text-align:center;
}

.stats{

flex-direction:column;
}

.gallery{

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

}

@media(max-width:768px){
    .arena-gallery{
        padding:96px 16px 32px;
    }

    .arena-gallery h1{
        font-size:clamp(2.2rem, 10vw, 3.2rem);
    }

    .arena-gallery p{
        font-size:.95rem;
        line-height:1.65;
    }

    .gallery{
        grid-template-columns:1fr;
        gap:12px;
    }

    .equipment{
        padding:28px 16px 56px;
    }

    .equipment-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .game-modes h2,
    .equipment h2,
    .arena-gallery h2,
    .cta-section h2,
    .experience-content h2{
        font-size:clamp(1.8rem, 8vw, 2.4rem);
    }
}

@media (max-width:480px){
    .arena-gallery{
        padding:88px 12px 28px;
    }

    .equipment-card{
        padding:18px 14px;
    }
}