/* ======================
   COMPLETE style.css
   - Includes hero fade slider, arrow fixes
   - Includes mobile menu / close button and all sections
====================== */

/* ---------- Variables & base ---------- */
:root{
  --yellow:#FFD500;
  --black:#111;
  --red:#C8102E;
  --white:#fff;
}

*{box-sizing:border-box;}
body{margin:0;padding:0;font-family:Arial,sans-serif;color:var(--black);background:#fff;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ===========================
   NAVBAR
=========================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1100;
  background: transparent; /* starts transparent */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
  background-color: #111 !important; /* solid dark background on scroll */
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

header .brand img{height:50px;display:block;}
.desktop {display:flex;align-items:center;gap:6px;}
.desktop a{color:var(--white);margin:0 12px;font-weight:500;}
header .cta{background:var(--yellow);padding:8px 14px;color:var(--black) !important;border-radius:6px;font-weight:600;}
header .cta1{background:var(--red);padding:8px 14px;border-radius:6px;font-weight:600;}

/* Hamburger for mobile */
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;align-items:flex-end;}
.hamburger span{height:3px;background:var(--white);border-radius:2px;width:25px;display:block;}

/* ===========================
   MOBILE MENU
=========================== */
.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  transform:translateY(-100%);
  transition:transform .28s ease;
  z-index:1200;
  padding:40px 20px;
}

/* when open */
.mobile-menu.open{transform:translateY(0);}

/* links inside mobile menu */
.mobile-menu a{color:var(--white);font-size:22px;display:block;padding:8px 12px;}
.mobile-menu .cta, .mobile-menu .cta1{display:inline-block;padding:10px 18px;border-radius:8px;}

/* mobile close button (top-right) */
#mobileClose{
  position:absolute;
  top:18px;
  right:18px;
  background:transparent;
  color:var(--white);
  border:0;
  font-size:28px;
  cursor:pointer;
  z-index:1300;
  line-height:1;
  padding:8px;
}

/* ===========================
   HERO SECTION (FADE SLIDER)
   - For Bootstrap carousel-fade
=========================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ensures carousel takes full height */
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero .hero-slide-img {
  width:100%;
  height:100vh;
}

/* image styles */
.hero-slide-img {
  width:100%;
  height:100vh;
  object-fit:cover;
  object-position:center;
  filter:brightness(70%);
  display:block;
}

/* overlay for readability */
.hero-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:2;
}

/* hero text block */
.hero-content {
  position:absolute;
  z-index:3;
  color:var(--white);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0; /* start hidden for animation */
  max-width:1100px;
  padding:0 20px;
}

/* text animation */
.carousel-item.active .hero-content {
  animation: heroTextIn 1s forwards;
}
.carousel-item:not(.active) .hero-content {
  opacity:0;
}

/* hero text styling */
.hero-content h1{font-weight:700;margin:0 0 12px;}
.hero-content h1 span{color:var(--yellow);}
.hero-content p{margin:0 0 18px;font-size:18px;}

/* CTA */
/* Book Now button effects */
.btn-yellow {
  background: var(--yellow);
  color: var(--black);
  border: none;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: btnBlink 2s infinite; /* blinking effect */
}

/* Slight grow on hover */
.btn-yellow:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Blinking / fade animation */
@keyframes btnBlink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.7; }
}


/* carousel fade transition */
.carousel-fade .carousel-item { transition: opacity 1s ease-in-out; }

/* ensure slide images fill viewport */
.carousel-item img { width:100%; height:100vh; object-fit:cover; }

/* Controls (arrows) */
.carousel-control-prev, .carousel-control-next {
  width:60px;
  height:60px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255,255,255,0.85);
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius:50%;
  width:45px;
  height:45px;
  display:inline-block;
  filter:none !important;
}

/* arrow hover */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{
  background-color: rgba(255,255,255,0.95);
}

/* If icons are still invisible due to default SVG, fallback: draw arrow shapes via pseudo-element */
.carousel-control-prev-icon:empty::after{
  content:'';
  display:block;
  width:16px;
  height:16px;
  border-top:3px solid var(--black);
  border-right:3px solid var(--black);
  transform:rotate(-135deg);
  margin:12px auto;
}
.carousel-control-next-icon:empty::after{
  content:'';
  display:block;
  width:16px;
  height:16px;
  border-top:3px solid var(--black);
  border-right:3px solid var(--black);
  transform:rotate(45deg);
  margin:12px auto;
}

/* hero text animation */
@keyframes heroTextIn {
  0% { opacity:0; transform:translate(-50%,-45%); }
  100% { opacity:1; transform:translate(-50%,-50%); }
}

/* ===========================
   ABOUT SECTION
=========================== */
.about-section {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: url('img/about.jpg') no-repeat center center/cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  padding: 100px 20px;
  box-sizing: border-box;
}

.about-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); z-index:1; }
.about-content { position:relative; z-index:2; max-width:1000px; padding:20px;}
.about-content h2{font-size:36px;margin-bottom:20px;}
.about-content p{font-size:18px;margin-bottom:30px;}
.about-content .btn-yellow{font-size:18px;padding:12px 25px;}

/* responsive about */
@media(max-width:768px){
  .about-section{background-attachment:scroll;padding:50px 15px;}
  .about-content h2{font-size:28px;}
  .about-content p{font-size:16px;}
}

/* ===========================
   SECTION LAYOUT and UTILITIES
=========================== */
.highlight-red{color:var(--red);}
.highlight-yellow{color:var(--yellow);}

.section-light{padding:70px 20px;background:#f8f8f8;}
.section-gray{padding:10px 10px;background:#5f5e5e;}
.section-dark{padding:70px 20px;background:var(--black);}
.section-red{padding:70px 20px;background:var(--red);color:var(--white);}
.grid{display:grid;gap:20px;}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

/* ===========================
   SERVICES
=========================== */
.service-card{background:#222;padding:20px;border-radius:12px;color:var(--yellow);}
.feature{background:rgba(0,0,0,0.3);padding:20px;border-radius:12px;margin:10px;}
.icon-large{font-size:36px;margin-bottom:10px;}

.service-intro { margin-bottom:40px; font-size:1.1rem; color:#ffd500; }

.service-grid .service-card {
  background:#222;
  padding:30px 20px;
  border-radius:15px;
  transition:transform .3s, box-shadow .3s;
}
.service-grid .service-card:hover{ transform:translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.4); }

.icon-circle{
  background:var(--yellow);
  color:var(--black);
  display:inline-block;
  font-size:36px;
  width:80px;height:80px;line-height:80px;border-radius:50%;
  margin-bottom:15px;
}

/* ===========================
   WHY CHOOSE US (animated gradient)
=========================== */
#whyus {
  background: linear-gradient(270deg, #C8102E, #FF5733, #900C3F, #C8102E);
  background-size: 800% 800%;
  animation: gradientAnimation 15s ease infinite;
  color: var(--white);
  padding: 70px 20px;
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.feature-grid .feature {
  background: rgba(0,0,0,0.25);
  padding: 25px 15px;
  border-radius: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.feature-grid .feature:hover{ transform:translateY(-8px); box-shadow:0 10px 20px rgba(0,0,0,0.4); }

.feature-icon {
  background: var(--yellow);
  color: var(--black);
  font-size:36px;width:70px;height:70px;line-height:70px;border-radius:50%;margin:0 auto 15px;
}

/* ===========================
   FULL WIDTH IMAGE SECTION
=========================== */
.image-section{position:relative;text-align:center;padding:0;}
.fullwidth-img{width:100%;height:500px;object-fit:cover;}
.image-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:1;}
.image-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);z-index:2;padding:20px;max-width:1000px;}

/* ===========================
   BOOKING FORM
=========================== */
.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  align-items:center;
  padding:10px 20px;
}
.booking-img img{width:100%;height:100%;object-fit:cover;border-radius:10px;}
.booking-form{ text-align:center; background:#fff; padding:30px; border-radius:12px; }
.booking-form h2{ color:var(--red); padding:10px; font-weight:700; text-transform:uppercase; }
.booking-form h2 span{ background:var(--red); color:#fff; border-radius:10px; padding:5px; }

input[type="text"], input[type="date"]{ padding:12px; border-radius:6px; border:1px solid #ccc; width:100%; box-sizing:border-box; }
button{font-weight:700;}

/* booking responsive */
@media(max-width:992px){
  .booking-grid{ grid-template-columns:1fr; gap:40px; }
  .booking-img, .booking-form { order: 0; }
  .booking-form { padding:20px; }
}

/* ===========================
   VIDEO EMBED
=========================== */
.video-container{ position:relative; width:100%; padding-bottom:56.25%; margin-top:20px; }
.video-container iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:12px; }

/* ===========================
   FOOTER
=========================== */
footer{ padding:20px; background:var(--black); color:var(--white); text-align:center; }

/* ===========================
   GO TO TOP
=========================== */
#goTop{ position:fixed; bottom:25px; right:25px; background:var(--yellow); color:var(--black); border:none; padding:12px 16px; border-radius:50%; cursor:pointer; display:none; z-index:1500; }

/* ===========================
   RESPONSIVE ADJUSTMENTS
=========================== */
@media(max-width:768px){
  .desktop{display:none;}
  .hamburger{display:flex;}
  .about-img,.about-text{flex:0 0 100%; max-width:100%; padding:20px;}
  .grid.cols-3{grid-template-columns:1fr;}
  .icon-circle, .feature-icon {width:60px; height:60px; line-height:60px; font-size:28px;}
  .hero-slide-img{height:70vh;}
  .carousel-control-prev, .carousel-control-next { top: auto; bottom: 20px; transform: translateY(0); width:48px; height:48px; }
  .carousel-control-prev { left: 14px; }
  .carousel-control-next { right: 14px; }
  .mobile-menu { padding-top:60px; }
}

/* End of file */