/* EVENTS HERO */

.events-hero{
position:relative;
width:100%;
height:60vh;
min-height:420px;
overflow:hidden;

display:flex;
align-items:center;
justify-content:center;
text-align:center;

background:url("/assets/images/business-event-planning-goa.webp") center/cover no-repeat;

color:white;
}

/* OVERLAY */

.events-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
}

/* CONTENT */

.events-hero-content{
position:relative;
z-index:2;
padding:0 20px;
}

/* MAIN TITLE (same as services page) */

.events-hero-content h1{
font-family:'Playfair Display', serif;
font-size:70px;
font-weight:300;
letter-spacing:10px;
margin:0;
}

/* SUBTITLE */

.hero-subtitle{
font-family:'Montserrat', sans-serif;
margin-top:15px;
font-size:14px;
letter-spacing:4px;
}

@media (max-width:900px){

.events-hero{
height:50vh;
}

.events-hero-content h1{
font-size:50px;
letter-spacing:6px;
}

}

@media (max-width:600px){

.events-hero{
height:45vh;
}

.events-hero-content h1{
font-size:36px;
letter-spacing:4px;
}

.hero-subtitle{
font-size:12px;
letter-spacing:2px;
}

}

.events-showcase{
padding:80px 8%;
background:#fff;
}

.events-container{
max-width:1200px;
margin:auto;
display:grid;
gap:70px;
}

/* CARD */

.event-card{
display:grid;
grid-template-columns:420px 1fr;
gap:60px;
align-items:center;
}

/* IMAGE SLIDER */

.event-slider{
position:relative;
width:100%;
height:520px;
max-width:420px;
overflow:hidden;
margin:auto;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
display:none;
}

.slide.active{
display:block;
}

/* ARROWS */

.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:28px;
padding:8px 14px;
cursor:pointer;
}

.arrow.left{
left:10px;
}

.arrow.right{
right:10px;
}

/* TEXT */

.event-text h3{
font-family:'Playfair Display', serif;
font-size:34px;
margin-bottom:10px;
}

.event-text p{
font-family:'Montserrat', sans-serif;
font-size:15px;
line-height:1.7;
color:#555;
max-width:520px;
margin-top:15px;
}

@media (max-width:900px){

.event-card{
grid-template-columns:1fr;
text-align:center;
}

.event-text p{
margin:auto;
}

}

.event-slider{
position:relative;
width:100%;
height:420px;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
display:none;
}

.slide.active{
display:block;
}

/* ARROWS */


.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.6);
  color: white;

  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  font-size: 22px;
  cursor: pointer;
  z-index: 10;

  transition: all 0.3s ease; /* smooth hover */
}

/* LEFT */
.arrow-left {
  left: 20px;
}

/* RIGHT */
.arrow-right {
  right: 20px;
}

/* HOVER EFFECT WITHOUT POP */
.arrow:hover {
  background: white;
  color: black;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border-color: white;
}

/* CLICK EFFECT */
.arrow:active {
  transform: translateY(-50%); /* no scaling */
}

@media (max-width:900px){

.event-card{
grid-template-columns:1fr;
text-align:center;
}

.event-slider{
max-width:100%;
height:420px;
}

.event-card p{
margin:15px auto 0;
}

}