/* ================= HERO ================= */

.event-hero{

position:relative;

width:100%;
height:100vh;

overflow:hidden;

}

/* ================= SLIDER ================= */

.event-slider{

position:relative;

width:100%;
height:100%;

}

/* ================= SLIDE ================= */

.event-slide{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

opacity:0;

transition:opacity 1s ease;

}

/* slide aktif */

.event-slide.active{
opacity:1;
z-index:1;
}

/* ================= BACKGROUND ================= */

.event-bg{

width:100%;
height:100%;

object-fit:cover;

}

/* ================= OVERLAY ================= */

.event-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

z-index:1;

}

/* ================= CONTENT ================= */

.event-content{

position:absolute;

top:60%;
left:50%;

transform:translate(-50%,-50%);

text-align:center;

color:white;

max-width:700px;

padding:20px;

z-index:2;

}

/* ================= TITLE ================= */

.event-title{

font-size:48px;

letter-spacing:5px;

margin-bottom:20px;

font-family:calibri;

}

/* ================= DESC ================= */

.event-desc{

font-size:18px;

line-height:1.8;

}

/* ================= BUTTON ================= */

.event-btn{

position:absolute;

bottom:60px;        /* posisi tombol dari bawah */

left:50%;

transform:translateX(-50%);

padding:12px 30px;

background:#1b7f86;

color:white;

text-decoration:none;

font-size:14px;

letter-spacing:1px;

border-radius:4px;

transition:all .3s ease;

z-index:3;

}

/* ================= HOVER ================= */

.event-btn:hover{

background:#16676c;

transform:translateX(-50%) translateY(-2px);

}







/* ================= EVENT LIST ================= */

.event-list{

padding:80px 0;

background:#f5f5f5;

}

/* GRID */

.event-grid{

display:grid;

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

gap:20px;

}

/* CARD */

.event-card{

background:white;

padding-bottom:20px;

}

/* IMAGE */

.event-card-img{

width:100%;
height:220px;

overflow:hidden;

}

.event-card-img img{

width:100%;
height:100%;

object-fit:cover;

display:block;

}

/* TITLE */

.event-card-title{

font-size:20px;

margin:15px 10px 8px;

line-height:1.4;

}

/* META */

.event-meta{

font-size:15px;
margin-left: 10px;
color:#0f7f86;

margin-bottom:10px;

}

/* DESC */

.event-card-desc{

font-size:15px;

line-height:1.7;

color:#555;
margin-left: 10px;

margin-bottom:10px;

}

/* READ MORE */

.event-readmore{
margin-left: 10px;
font-size:14px;

font-weight:600;

text-decoration:none;

color:#333;

}

.event-readmore:hover{

text-decoration:underline;

}



@media (max-width:900px){

.event-grid{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:600px){

.event-grid{

grid-template-columns:1fr;

}

}