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

body{
min-height:100vh;
overflow-x:hidden;
}

/* TOP BAR */

.top-bar{
background:#ffcc00;
padding:10px 20px;
font-weight:bold;
}

/* HERO SECTION */

.hero{
min-height:100vh;
width:100%;
background-image:url("../../assets/images/storefront-interior-B30blmiz.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

/* OVERLAY */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
overflow:auto;
}

/* MODAL */

.modal{
background:rgba(255,255,255,0.15);
padding:40px;
border-radius:15px;
text-align:center;
width:90%;
max-width:500px;
color:#fff;
backdrop-filter:blur(15px);
}

.modal h3{
color:#ffcc00;
margin-bottom:30px;
font-size:25px;
}

.modal h1{
font-size:35px;
margin-bottom:35px;
line-height:1.3;
}

/* BUTTONS */

.buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn{
background:#ffcc00;
padding:12px 30px;
border-radius:25px;
font-weight:bold;
cursor:pointer;
transition:0.3s;
text-decoration:none;
color:#000;
display:inline-block;
}

.btn:hover{
background:#e6b800;
}

/* FOOTER */

.footer{
width:100%;
background:#000;
color:#fff;
text-align:center;
padding:15px;
font-size:14px;
}

.footer a{
color:#fff;
text-decoration:none;
}

/* MOBILE RESPONSIVE */

@media (max-width:768px){

.hero{
background-image:url("../../assets/images/mobile common size (2) (1).png");
background-size:cover;
background-position:center;
}

.modal{
padding:30px 20px;
}

.modal h1{
font-size:22px;
}

.modal h3{
font-size:16px;
}
}

@media (max-width:390px){

.modal h1{
font-size:20px;
}

.modal{
padding:25px 15px;
}

.top-bar{
font-size:14px;
}

}