.calendar-section{

padding:80px 20px;
background:#000;
text-align:center;
font-family:'Montserrat',sans-serif;
color:white;

}

.calendar-title{

font-size:28px;
letter-spacing:3px;
margin-bottom:30px;

}

.calendar-header{

display:flex;
justify-content:center;
align-items:center;
gap:30px;
margin-bottom:20px;

}

.calendar-header button{

background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;

}

.calendar-days{

display:grid;
grid-template-columns:repeat(7,1fr);
max-width:600px;
margin:auto;
font-size:13px;
opacity:0.7;

}

.calendar-dates{

display:grid;
grid-template-columns:repeat(7,1fr);
max-width:600px;
margin:auto;
gap:6px;
margin-top:10px;

}

.calendar-dates div{

height:45px;
display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

border-radius:6px;

transition:0.2s;

}

.calendar-dates div:hover{

background:#111;

}

.today{

border:1px solid white;

}

.event{

color:#7ed6d1;
font-weight:600;

}

/* POPUP */

.event-popup{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

display:none;

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

}

.popup-card{

background:#0a0a0a;
padding:25px;
border-radius:14px;
text-align:center;
width:300px;

}

.popup-image{

width:100%;
border-radius:10px;
margin-bottom:15px;

}

.popup-close{

position:absolute;
margin-left:250px;

background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;

}
/* ================= MOBILE FIX ================= */

@media (max-width:600px){

.calendar-section{
padding:80px 25px;
}

.calendar-days{
padding:0 10px;
}

.calendar-dates{
padding:0 10px;
}

.calendar-dates div{
height:40px;
font-size:14px;
}

.calendar-header{
gap:20px;
}

}

.popup-card h3{
color:white;
font-size:20px;
margin-top:10px;
}

.popup-card p{
color:white;
font-size:14px;
margin-top:8px;
opacity:0.9;
}

.popup-card a{
color:#7ed6d1;
text-decoration:none;
font-weight:600;
}

.popup-card a:hover{
text-decoration:underline;
}