body{
font-family:'Poppins',sans-serif;
background:#f9fafc;
margin:0;
}


/* HERO */

.event-hero{

height:45vh;

background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
url('../../assets/image/photo/oss.jpeg');

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

display:flex;
align-items:center;
justify-content:center;

color:white;
text-align:center;

}

.event-hero h1{
font-size:48px;
font-weight:700;
}

.event-hero p{
font-size:18px;
opacity:0.9;
}



/* SECTION */

.section-title{
font-size:36px;
font-weight:700;
margin-bottom:40px;
}



/* UPCOMING EVENTS */

.upcoming-events{
padding:80px 0;
background:white;
}

.upcoming-card{

background:#fff;

padding:35px;

border-radius:12px;

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

text-align:center;

transition:0.3s;

}

.upcoming-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,0.15);

}

.upcoming-card i{

font-size:35px;

color:#ff7a00;

margin-bottom:15px;

}

.upcoming-card span{

display:block;

margin-top:10px;

font-weight:600;

color:#ff7a00;

}



/* EVENTS */

.events-section{
padding:80px 0;
}

.event-card{

background:white;

border-radius:12px;

overflow:hidden;

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

transition:0.3s;

}

.event-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,0.15);

}

.event-img{

position:relative;

overflow:hidden;

}

.event-img img{

width:100%;

height:220px;

object-fit:cover;

transition:0.5s;

}

.event-card:hover img{

transform:scale(1.1);

}

.event-date{

position:absolute;

top:10px;

left:10px;

background:#ff7a00;

color:white;

padding:5px 12px;

font-size:12px;

border-radius:20px;

}

.event-content{

padding:20px;

}

.event-content h4{

margin-bottom:10px;

}



/* HIGHLIGHTS */

.highlight-section{
padding:80px 0;
background:#f4f8ff;
}

.highlight-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.highlight-card i{
font-size:40px;
color:#ff7a00;
margin-bottom:15px;
}

.highlight-card:hover{
transform:translateY(-6px);
}



/* MOBILE */

@media(max-width:768px){

.event-hero h1{
font-size:32px;
}

}