/*====================================================
NEWS & EVENTS
====================================================*/

.latest-news-carousel .item{
padding:10px;
}

.latest-news-carousel .owl-stage{
display:flex;
}

.latest-news-carousel .owl-item{
display:flex;
}

.news-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

height:430px;

transition:.35s;

}

.news-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.news-image{
position:relative;

width:100%;

height:230px;

overflow:hidden;

border-radius:18px 18px 0 0;
}

.news-image img{

width:100%;

height:100%;

object-fit:contain;

background:#fff;

}

.news-card:hover .news-image img{
transform:scale(1.08);
}

.news-date{
position:absolute;
left:18px;
bottom:18px;
background:rgba(28,70,125,.95);
color:#fff;
padding:8px 16px;
border-radius:25px;
font-size:13px;
font-weight:600;
}

.news-body{

padding:22px;

display:flex;

flex-direction:column;

flex:1;

}

.news-body h4{
font-size:22px;
font-weight:700;
overflow:hidden;
}

.news-body p{

flex:1;

font-size:15px;

line-height:1.7;

color:#666;

margin-bottom:0;

overflow:hidden;

}

/*====================================================
EVENTS
====================================================*/

.event-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
height:100%;
transition:.35s;
}

.event-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.event-image{
width:100%;
height:260px;
object-fit:cover;
display:block;
transition:.5s;
}

.event-card:hover .event-image{
transform:scale(1.05);
}

.event-date-box{
position:absolute;
top:18px;
left:18px;
background:#fff;
padding:10px 14px;
border-radius:14px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.event-date-box .day{
display:block;
font-size:24px;
font-weight:700;
color:var(--primary);
line-height:1;
}

.event-date-box .month{
display:block;
margin-top:4px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#666;
}

.event-body{
padding:26px;
display:flex;
flex-direction:column;
flex:1;
}

.event-category{
display:inline-block;
margin-bottom:15px;
padding:8px 18px;
background:#eef4ff;
color:var(--primary);
font-size:13px;
font-weight:600;
border-radius:30px;
}

.event-body h4{
font-size:22px;
font-weight:700;
margin-bottom:15px;
color:#222;
line-height:1.4;
}

.event-duration{
margin-bottom:18px;
font-size:15px;
color:#666;
}

.event-body p{
font-size:15px;
line-height:1.8;
color:#666;
margin-bottom:25px;
flex:1;
}

.event-body .btn{
align-self:flex-start;
}

.event-info-box{
background:#f8f9fa;
border-radius:12px;
padding:18px;
height:100%;
}

.event-info-title{
font-size:14px;
font-weight:700;
color:#444;
margin-bottom:8px;
}

.event-description{
font-size:16px;
line-height:1.9;
color:#555;
}

/*====================================================
EVENT MODAL
====================================================*/

#eventModal .modal-content{
border:none;
border-radius:20px;
overflow:hidden;
}

#eventModal .modal-header{
background:#f8f9fa;
}

#eventModal .modal-body{
padding:35px;
}

/*====================================================
OWL
====================================================*/

.latest-news-carousel .owl-dots{
margin-top:25px;
text-align:center;
}

.latest-news-carousel .owl-dot span{
width:12px;
height:12px;
margin:5px;
background:#d7d7d7;
transition:.3s;
}

.latest-news-carousel .owl-dot.active span{
background:var(--primary);
width:28px;
border-radius:20px;
}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:991px){

.news-image img{
height:210px;
}

.event-image{
height:220px;
}

}

@media(max-width:767px){

.news-body{
padding:20px;
}

.news-body h4{
font-size:20px;
}

.event-body{
padding:20px;
}

.event-body h4{
font-size:20px;
}

#eventModal .modal-body{
padding:20px;
}

}