.highlight-overlay{


position:fixed;

top:0;

left:0;

inset: 0;

background:rgba(15,23,42,0.75);

backdrop-filter:blur(8px);

display:flex;

justify-content:center;

align-items:center;

z-index:9999;

transition:0.5s ease;
animation:fadeIn 0.6s ease;


}




.highlight-popup{

width:90%;

max-width:1200px;

min-height:520px;

display:flex;

background:white;

border-radius:30px;

overflow:hidden;

display:flex;

position:relative;

box-shadow:0 25px 60px rgba(0,0,0,0.35);

animation:popupScale 0.5s ease;

}



.highlight-image{

width:35%;

height:450px;

padding:30px;
}


.highlight-image img{


width:100%;

height:100%;

object-fit:cover;
border-radius:25px;


}

.image-slider{

width:100%;

height:100%;

position:relative;

overflow:hidden;

border-radius:25px;

}



.slide{


width:100%;

height:100%;

object-fit:cover;

position:absolute;

opacity:0;

transition:0.8s ease;


}



.slide.active{

opacity:1;

}



.slider-btn{


position:absolute;

top:50%;

transform:translateY(-50%);


width:45px;

height:45px;


border-radius:50%;


border:none;


background:rgba(15,23,42,0.7);


color:white;


font-size:22px;


cursor:pointer;


z-index:5;


}



.prev{

left:15px;

}



.next{

right:15px;

}



.slider-btn:hover{


background:#f4c542;

color:#0f172a;


}




.highlight-content{

width:65%;

padding:70px 60px;

display:flex;

flex-direction:column;

justify-content:center;

}



.highlight-category{

background:#f4c542;

color:#0f172a;

padding:10px 22px;

border-radius:30px;

font-weight:bold;

width:max-content;

}




.highlight-content h2{

font-size:45px;

font-weight:800;

color:#0f172a;

}



.highlight-content p{


font-size:17px;

line-height:1.7;

color:#475569;


}



.highlight-date{


margin-top:20px;

color:#64748b;


}






.highlight-close{

position:absolute;

right:25px;

top:25px;

z-index:10;

border:none;

background:white;

color:#0f172a;

font-size:28px;

width:50px;

height:50px;

border-radius:50%;

cursor:pointer;

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

transition:0.3s;

}


.highlight-close:hover{

transform:rotate(90deg);

}


@keyframes popupScale{


from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}


}



@keyframes fadeIn{


from{

opacity:0;

}

to{

opacity:1;

}

}

@media(max-width:768px){


.highlight-popup{

display:block;

width:92%;

}



.highlight-image{

width:100%;

height:280px;

padding:20px;

}



.highlight-content{

width:100%;

padding:30px;

}



.highlight-content h2{

font-size:28px;

}


}