/* Reset */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}


/* Page */
body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:#1f2933;

background-image:url('watermark.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right;
background-color:white;

padding-top:40px;
padding-bottom:40px;
}


/* Layout */
.container{
text-align:center;
max-width:640px;
padding:40px 20px;
}


/* Main logo */
.main-logo{
width:100%;
height:auto;
display:block;
margin-bottom:20px;
}


/* Headings */
h1{
font-size:2.2rem;
margin-bottom:12px;
font-weight:600;
}

p{
font-size:1rem;
color:#6b7280;
margin-bottom:40px;
}


/* Buttons container */
.buttons{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}


/* Logo + Button group */
.button-group{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}


/* Logos */
.btn-logo{
height: 100px;
width:auto;
background:white;
padding:6px;
border-radius:6px;
}


/* Buttons */
.btn{
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;

padding:16px 40px;

border-radius:50px;

font-size:1rem;
font-weight:500;

color:white;

box-shadow:0 10px 25px rgba(0,0,0,0.15);

transition:transform .25s ease, box-shadow .25s ease;
}


.btn:hover{
transform:translateY(-3px);
box-shadow:0 14px 35px rgba(0,0,0,0.2);
}


/* Button gradients */

.btn-events{
background:linear-gradient(135deg,#EC6124,#2A2F91);
}

.btn-business{
background:linear-gradient(135deg,#7CD2F5,#2B6684);
}


/* Slide Animations */

.slide-left{
animation:slideLeft 1s ease forwards;
}

.slide-right{
animation:slideRight 1s ease forwards;
}


@keyframes slideLeft{
from{
transform:translateX(-120px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}


@keyframes slideRight{
from{
transform:translateX(120px);
opacity:0;
}
to{
transform:translateX(0);
opacity:1;
}
}


/* Mobile */
@media(max-width:480px){

h1{
font-size:1.8rem;
}

.buttons{
flex-direction:column;
gap:30px;
}

.btn{
width:220px;
}

.main-logo{
max-width:180px;
margin:auto;
}

}