@font-face {
font-family:'sans serif';
src:url('../fonts/abel-regular.ttf') format('opentype');
font-style:normal;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

/* Banner Section */

.hero{
position:relative;
width:100%;
height:100vh;
background-image:url('../images/2400 x 1200_ (1).png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}

/* Overlay */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

/* Age Gate Box */

.age-box{
position:relative;
z-index:2;
background:#00000070;
padding: 18px;
max-width:420px;
width:90%;
text-align:center;
border-radius:10px;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
margin-top: 1.5rem;
}

.age-box h1{
font-size:28px;
margin-bottom:15px;
color :#fff;
}

.age-box p{
font-size:16px;
margin-bottom:25px;
color :#fff;
}

/* Buttons */

.btn-group{
display:flex;
gap:15px;
justify-content:center;
}

.btn{
padding:12px 25px;
border:none;
font-size:16px;
cursor:pointer;
border-radius:5px;
transition:0.3s;
}

.btn-yes{
background:#fff;
color: #000;
}


.btn-no{
background:#fff;
color: #000;
}


.footer{
background:#111;
text-align:center;
padding:20px;
}

.footer a{
color:#fff;
text-decoration:none;
font-size:14px;
font-family:sans-serif;
}


/* Mobile Banner */

@media(max-width:768px){

.hero{
background-image:url('../images/720x1280.png');
height:100vh;
}

.age-box{
padding:30px 20px;
margin-top: 0rem;
}

.age-box h1{
font-size:22px;
}

}