/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:#fff4f8;
  color:#333;
}

/* ================= HEADER ================= */
.top-header{
  background:linear-gradient(135deg,#b71c5c,#880e4f);
  color:#fff;
  text-align:center;
  padding:18px;
  letter-spacing:0.5px;
}

.top-header h1{
  font-size:28px;
}

.top-header p{
  font-size:14px;
  opacity:0.9;
}

/* ================= SLIDER ================= */
.slider{
  position:relative;
  height:80vh;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.2s ease, transform 6s ease;
}

/* Active slide */
.slide.active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

/* Dark gradient overlay */
.slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.6),
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.05)
    );
}

/* ================= BANNER TEXT ================= */
.overlay{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  max-width:520px;
  animation:textFade 1.3s ease forwards;
}

.overlay h2{
  font-size:48px;
  line-height:1.1;
  margin-bottom:12px;
}

.overlay p{
  font-size:18px;
  line-height:1.6;
  opacity:0.95;
}

/* Text animation */
@keyframes textFade{
  from{
    opacity:0;
    transform:translate(-20px,-50%);
  }
  to{
    opacity:1;
    transform:translate(0,-50%);
  }
}

/* ================= SEARCH BOX (GLASS EFFECT) ================= */
.search-box{
  position:relative;
  margin:-60px auto 40px;
  width:90%;
  max-width:900px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(12px);
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
  border-radius:16px;
  padding:25px;
  z-index:5;
}

.search-box form{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  justify-content:center;
}

.search-box select,
.search-box button{
  padding:14px 16px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:15px;
  min-width:220px;
}

.search-box select{
  background:#fff;
}

.search-box button{
  background:linear-gradient(135deg,#b71c5c,#880e4f);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}

.search-box button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(183,28,92,0.4);
}

/* ================= SLIDER DOTS ================= */
.slider-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}

.slider-dots span{
  width:12px;
  height:12px;
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  cursor:pointer;
  transition:background .3s, transform .3s;
}

.slider-dots span.active{
  background:#fff;
  transform:scale(1.3);
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){
  .overlay h2{font-size:36px}
}

@media(max-width:768px){
  .slider{height:65vh}
  .overlay{
    left:5%;
    right:5%;
    max-width:100%;
  }
  .overlay h2{font-size:28px}
  .overlay p{font-size:15px}
  .search-box{margin-top:-40px}
}

@media(max-width:480px){
  .overlay h2{font-size:22px}
  .overlay p{font-size:14px}
  .search-box select,
  .search-box button{
    width:100%;
  }
}