:root{
  --maroon:#800000;
  --saffron:#ff9933;
  --gold:#ffd700;
  --cream:#fff8f0;
  --ink:#2b2b2b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
}

html {
  scroll-behavior: smooth;
}



/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, #311926, #0d0f1c);
  color: #fff;
  border-bottom: 3px solid #ffd700;
}

.topbar .wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.brand .logo {
  font-size: 24px;
}

.brand .title {
  font-family: 'Merriweather', serif;
  letter-spacing: 0.5px;
}

.nav {
  display: flex;
  gap: 14px;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.logo-img {
  height: 100px;
  width: auto;
}

/* Hamburger hidden on desktop */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  user-select: none;
}

/* Mobile styles */
@media (max-width: 900px) {
  .hamburger {
    display: block;
    z-index: 1001; /* stays above menu overlay */
  }

  .nav {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(255, 0, 0, 0.85); /* translucent red */
    z-index: 1000;
  }

  .nav.active {
    display: flex;
  }

  .nav a {
    margin: 15px 0;
    font-size: 22px;
    color: #fff;
    text-align: center;
  }
}

/* Desktop view */
@media (min-width: 901px) {
  .nav {
    display: flex !important;
    align-items: center;
    position: static;
    background: none;
  }
}



/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  font-weight:700; text-decoration:none; cursor:pointer; border:0;
}
.btn-call{background:#ffd700;color:var(--maroon)}
.btn-gold{background:var(--gold); color:var(--maroon)}
.btn-maroon{background:var(--maroon); color:#fff}
.btn-outline{border:2px solid var(--maroon); color:var(--maroon); background:transparent}
.btn-whatsapp{background:#25d366; color:#fff}
.btn-block{width:100%}

/* Hero carousel */
/* Mobile adjust carousel */
.hero{position:relative}

.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* Keep proper proportions */
  max-height: 600px;     /* Reduce from 500px to 400px */
  overflow: hidden;
}

@media (max-width: 768px) {
  .carousel {
    max-height: 250px;   /* Shorter on phones */
  }
}


.slide {
  position: absolute; /* must stay absolute */
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the container fully */
  object-position: center;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}


/* Remove mobile-specific height */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  /* Remove or comment out these lines: */

}

/* Banner slide */
.banner-slide{
  background:
    radial-gradient(ellipse at top, rgba(255,215,0,.15), transparent 40%),
    linear-gradient(135deg, #6a0000 0%, #a00000 50%, #d35400 100%);
}
.banner-inner{
  text-align:center; color:#fff; padding:20px; max-width:900px;
}
.banner-inner h1{
  font-family:'Merriweather',serif; font-size:46px; margin:0 0 8px;
}
.banner-inner .tag{
  font-size:22px; color:var(--gold); margin:0 0 14px; font-weight:600;
}
.banner-phone{
  display:inline-flex; align-items:center; gap:10px;
  font-size:22px; background:#ffffffde; color:var(--maroon);
  padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:800;
  margin-bottom:14px;
}
.banner-phone .phone-icon{font-size:22px}
.banner-inner .cta-row{display:flex; gap:12px; justify-content:center; margin-top:6px}

/* Carousel controls */
.ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#00000055; color:#fff; border:0; width:42px; height:42px;
  border-radius:50%; cursor:pointer; z-index:2; font-size:26px;
}
.ctrl:hover{background:#00000085}
.ctrl.prev{left:10px}
.ctrl.next{right:10px}
.dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; z-index:3}
.dots button{
  width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:transparent; cursor:pointer;
}
.dots button.active{background:#fff}



/* Sections */
.section{padding:56px 16px}
.wrap{max-width:1100px; margin:0 auto}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
.about h2, .services h2, .testimonials h2, .contact h2{font-family:'Merriweather',serif; color:var(--maroon); font-size:32px}
.about .cta-inline{display:flex; gap:12px; margin-top:16px}
.about-card .frame{border:4px solid var(--gold); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.1)}
.about-card img{width:100%; display:block}

.about .badges {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: block; /* instead of flex */
}

.about .badges li {
  margin-bottom: 6px; /* spacing between lines */
}


/* Divider */
.divider{
  text-align:center; font-size:28px; color:var(--saffron);
  text-shadow:0 0 8px rgba(255,153,51,.55);
}

/* Services */
.services .sub{margin-top:6px; color:#6b6b6b}
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px; margin-top:22px;
}
.card{
  background:#fff; border:2px solid var(--gold); border-radius:16px; padding:16px;
  box-shadow:0 10px 18px rgba(128,0,0,.08); display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.card .icon{font-size:34px; line-height:1}
.card h3{margin:2px 0 0; color:var(--maroon)}
.card p{margin:0 0 8px}


/* Book now button auto size */
.card .btn {
  margin-top: auto;
}

/* Testimonials */
.quotes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:18px}
blockquote{
  margin:0; padding:16px; border-left:6px solid var(--saffron); background:#fff; border-radius:10px; box-shadow:0 6px 14px rgba(0,0,0,.06)
}
cite{display:block; margin-top:8px; color:#666; font-style:normal}

/* Contact */
.contact .contact-list{list-style:none; padding:0; margin:10px 0 18px}
.contact .contact-list li{margin:6px 0}
.map-card iframe{width:100%; height:320px; border:3px solid var(--gold); border-radius:16px}

/* Footer */
.footer{background:var(--maroon); color:#fff; border-top:3px solid var(--gold); padding:14px 0; text-align:center}

/* Popup */
.popup{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:60}
.popup-content{
  width:min(92vw,430px); background:var(--cream); border:3px solid var(--gold); border-radius:18px; padding:18px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.popup-close{position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:24px; cursor:pointer; color:var(--maroon)}
#emailBookingForm input{width:100%; padding:12px 12px; margin:8px 0; border-radius:10px; border:1.5px solid #d7c4a1; background:#fff}
.privacy{font-size:12px; color:#6b6b6b; margin-top:8px; text-align:center}

/* Floating WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
  z-index: 70;
  text-decoration: none;
  animation: pulse 1.8s infinite;
}

.whatsapp-float svg {
  width: 28px;   /* adjust logo size */
  height: 28px;
  fill: white;   /* make sure logo is white */
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70% { transform: scale(1.07); box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { transform: scale(1); }
}

/* Responsive */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .carousel{height:64vh; min-height:360px}
  .banner-inner h1{font-size:34px}
}

/* Mobile-only styling for date input */
@media (max-width: 768px) {
  .popup form input[type="date"] {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }
}

/* Mobile placeholder style for date input */
@media (max-width: 768px) {
  .mobile-date-placeholder {
    position: relative;
    color: transparent;
    height: 44px; /* Make it a nice clickable height */
  }

  .mobile-date-placeholder::before {
    content: attr(placeholder);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
    font-size: 14px;
  }

  /* When user focuses or selects a date, hide the placeholder */
  input[type="date"]:focus,
  input[type="date"]:not(:placeholder-shown) {
    color: #000; /* Show actual date text */
  }
}


/* BUTTON ANIMATION */

/* Booking button animation */
.btn-booking-anim {
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.btn-booking-anim svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  stroke: white;
  stroke-width: 3;
  fill: none;
  width: 20px;
  height: 20px;
  opacity: 0;
}

/* Instant animation state when clicked */
.btn-booking-anim.animating {
  background-color: #ffc107; /* Yellow while sending */
}

.btn-booking-anim.animating span {
  transform: translateX(15px);
  opacity: 0.5;
}

/* Success state */
.btn-booking-anim.success {
  background-color: #28a745;
}

.btn-booking-anim.success svg {
  animation: draw-tick 0.5s forwards, hide-tick 0.5s forwards 0.8s;
  opacity: 1;
}

@keyframes draw-tick {
  0% { stroke-dasharray: 0 30; }
  100% { stroke-dasharray: 30 30; }
}

@keyframes hide-tick {
  to { opacity: 0; }
}

.btn-booking-anim.success span {
  opacity: 0;
}

.btn-booking-anim.success::after {
  content: "Booking Sent";
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  color: white;
  font-weight: bold;
  opacity: 0;
  animation: show-text 0.5s 1s forwards;
}

@keyframes show-text {
  to { opacity: 1; }
}