/* === Tokens === */
:root{
  --green:#2b8645;
  --orange:#f7941e;
  --text:#333;
  --light:#f8f8f8;
  --glass:rgba(255,255,255,.9);

  /* Header sizing */
  --header-h:80px;           --logo-h:80px;
  --header-h-scrolled:70px;  --logo-h-scrolled:50px;

  /* Mobile header sizing */
  --m-header-h:64px;         --m-logo-h:44px;
  --m-header-h-scrolled:56px;--m-logo-h-scrolled:40px;
}

/* === Base === */
body{font-family:'Inter',sans-serif;background:var(--light);color:var(--text);}
a{text-decoration:none;}

/* === Navbar (transparent → glass on scroll) === */
.navbar{background:transparent!important;transition:all .3s ease;padding:1rem 0;min-height:var(--header-h);}
.navbar .logo{height:var(--logo-h);transition:height .3s ease;}
.navbar.scrolled{background:var(--glass)!important;backdrop-filter:blur(6px);box-shadow:0 4px 10px rgba(0,0,0,.05);min-height:var(--header-h-scrolled);padding:.5rem 0;}
.navbar.scrolled .logo{height:var(--logo-h-scrolled);}

.navbar-brand{font-size:2rem;font-weight:700;color:var(--green)!important;}
.nav-link{color:var(--green)!important;font-weight:600;transition:color .3s ease,text-shadow .3s ease;}
.nav-link:hover{color:var(--orange)!important;}
.navbar:not(.scrolled) .nav-link{text-shadow:0 1px 2px rgba(0,0,0,.35);}
.navbar:not(.scrolled) .nav-link:hover,
.navbar:not(.scrolled) .nav-link:focus{ text-shadow:0 2px 6px rgba(0,0,0,.25);outline:0; }
.dropdown-menu .dropdown-item{text-shadow:none!important;}

/* Mobile header + collapsed menu background */
@media (max-width:767.98px){
  .navbar{min-height:var(--m-header-h);padding:.35rem 0;background:var(--glass)!important;backdrop-filter:blur(6px);}
  .navbar .logo{height:var(--m-logo-h);}
  .navbar.scrolled{min-height:var(--m-header-h-scrolled);}
  .navbar.scrolled .logo{height:var(--m-logo-h-scrolled);}
  .navbar .navbar-brand{display:flex;align-items:center;}
  .navbar .navbar-toggler{padding:.25rem .5rem;border:0;}
  .navbar .navbar-toggler:focus{box-shadow:none;}
  .navbar .navbar-collapse{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
    border-radius:.75rem;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    padding:.75rem;margin-top:.5rem;z-index:1000;
  }
  .navbar .nav-link{padding:.5rem .75rem;border-radius:.5rem;}
  .navbar .nav-link:hover{background:rgba(43,134,69,.08);}
}

/* Hero slider */
.hero-slider{ position:relative; margin-top:0; }
.hero-slide{
  position:relative;
  height:80vh; min-height:420px;
  background: var(--bg) center/cover no-repeat;
}
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.hero-slide .container{ position:relative; z-index:1; padding-bottom:3rem; }
.hero-caption{
  max-width: 720px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-caption h1,
.hero-caption h2{
  font-size: clamp(1.8rem, 3.2vw + 1rem, 3.25rem);
}

/* Make indicators visible on images */
#heroCarousel .carousel-indicators [data-bs-target]{
  width:20px;height:20px;border-radius:50%;
  background: rgba(255,255,255,.8);border: 0;
}
#heroCarousel .carousel-indicators .active{ background:#fff; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .hero-slide{ height:65vh; }
  .hero-slide .container{ padding-bottom:2rem; }
}


@media (max-width:767.98px){ .hero-section{padding-top:var(--m-header-h);} }

.banner-image{height:60vh;}
.banner-image img{width:100%;height:100%;display:block;object-fit:cover;}
@media (min-width:768px){.banner-image{height:70vh;}}
@media (min-width:1200px){.banner-image{height:80vh;}}

/* === Utilities === */
.bg-light-blue{background:#e0f7fa;}
.section-padding{padding:6rem 0;}

/* === Section title === */
.section-title{position:relative;display:inline-block;padding-bottom:.5rem;margin-bottom:2rem;color:var(--green);}
.pay-online .section-title{display:block;}
.section-title::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:60px;height:3px;background:var(--orange);border-radius:9999px;}

/* === Cards / Buttons / Icons === */
.card{border-radius:.5rem;transition:transform .3s ease,box-shadow .3s ease;}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.1);}
.room-card-image{height:250px;width:100%;object-fit:cover;}
.btn-primary-custom{background:var(--orange);border-color:var(--orange);color:#fff;transition:background-color .3s ease,border-color .3s ease;}
.btn-primary-custom:hover{background:#d97706;border-color:#d97706;color:#fff;}
.amenity-icon{font-size:3rem;color:var(--orange);}

/* === Gallery === */
.gallery-item{overflow:hidden;border-radius:.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1);}
.gallery-item img{transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.05);}

/* === Amenities Parallax === */
.amenities{
  position:relative;background-image:url('../images/deluxe-double-room.jpg');
  background-size:cover;background-position:center;background-attachment:fixed;color:#fff;
}
.amenities::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);}
.amenities .container{position:relative;z-index:1;}
.amenities .section-title{color:#fff;}
.amenities .section-title::after{background:var(--orange);}
.amenities .card{background:rgba(255,255,255,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
@media (max-width:991.98px){.amenities{background-attachment:scroll;}}

/* === Testimonials Carousel (multi-item) === */
#testimonialsCarousel .carousel-inner{overflow:hidden;}
#testimonialsCarousel .carousel-item{display:flex;transition:transform .6s ease;}
#testimonialsCarousel .testimonial-col{flex:0 0 100%;padding:0 12px;}
@media (min-width:768px){#testimonialsCarousel .testimonial-col{flex:0 0 50%;}}
@media (min-width:992px){#testimonialsCarousel .testimonial-col{flex:0 0 33.3333%;}}
.testimonial-card{background:#fff;border-radius:.75rem;box-shadow:0 8px 20px rgba(0,0,0,.08);height:100%;}
.testimonial-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;}
.rating i{color:var(--orange);}


/* Affiliates row */
.affiliate-icons{background-color: #a8cca0; padding: 15px 0px;}
.affilated_list { padding: 1.25rem 0; }
.affilated_list ul {list-style: none;margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.affilated_list li { padding: 0 1rem; } 

.affilated_list a.icon {
  display: inline-flex;align-items: center;justify-content: center;text-decoration: none;opacity: .85;transition: transform .2s ease, opacity .2s ease, filter .2s ease;}
.affilated_list a.icon:hover,
.affilated_list a.icon:focus {opacity: 1;transform: translateY(-2px);}
.affilated_list a.icon:focus-visible {outline: 2px dashed #bbb;outline-offset: 4px;}

.affilated_list svg {display: block;        /* remove inline-gap */height: auto;          /* respect given height/width ratio */max-width: 100%;      /* prevent overflow on small screens */pointer-events: none;  /* logos aren't interactive themselves */}
.payment-method{padding-left: 15px;}
/* Spacing tweaks for smaller screens */
@media (max-width: 992px) { .affilated_list li { padding: .5rem 1.25rem; } }
@media (max-width: 576px) {
  .affilated_list li { padding: .4rem .75rem; }
  .affilated_list a.icon svg { max-width: 140px; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .affilated_list a.icon { transition: none; }
}

/* === Footer === */
footer{background:var(--green) url('../images/background.svg') center top repeat;color:#dee2e6;}
footer ul,footer .footer-link,footer .address{margin:0;padding-left:0;list-style:none;}
footer .address{color:#fff;}
footer .address a{color:#fff;}
.footer-link a{
  position:relative;display:block;font-size:15px;line-height:1.6;color:rgba(255,255,255,.7);
  padding:.35rem .25rem .35rem .85rem;transition:color .25s ease,padding-left .25s ease;
}
.footer-link a:hover,.footer-link a:focus{color:var(--orange);padding-left:1.5rem;outline:0;}
.footer-link li a::before{
  content:"";position:absolute;top:50%;left:.25rem;width:6px;height:6px;background:var(--orange);
  border-radius:50%;opacity:0;transform:translate(-6px,-50%) scale(.6);transition:opacity .25s ease,transform .25s ease;
}
.footer-link li a:hover::before,.footer-link li a:focus::before{opacity:1;transform:translate(0,-50%) scale(1);}

/* === Back to top === */
.back-to-top{
  position:fixed;right:15px;bottom:15px;z-index:11;width:40px;height:40px;border-radius:50%;
  background:#22964f;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:background .5s,opacity .25s,transform .25s,visibility .25s;
}
.back-to-top:hover{background:var(--orange);}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* Page hero — uses your brand tokens */
.page-hero{
  --hero-h: 300px; /* desktop height to match 1500x500 image */
  position:relative;
  background: url('../images/banner-bg.jpg') center/cover no-repeat;
  color: #fff;            /* keep if you want white text */
  background-blend-mode: normal;
color: #fff;
  display:flex; align-items:flex-end;
  min-height: var(--hero-h);
  padding: 4rem 0;
  margin-top: 0; /* header is fixed; we rely on your existing top padding for hero pages if needed */

}
.page-hero::before{
  content:""; position:absolute; inset:0;
  /* soft dark overlay for readable text */
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.page-hero__inner{ position:relative; z-index:1; }

/* Heading on image */
.page-hero__title{
  font-size: clamp(1.75rem, 3.2vw + 1rem, 3rem);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin: 0;
}

/* Glass breadcrumb on image */
.glass-bc{
  display:inline-block;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-radius: .5rem;
  padding: .35rem .75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.glass-bc .breadcrumb{
  --bs-breadcrumb-divider: "›";
}
.glass-bc .breadcrumb a{
  color: var(--green); text-decoration: none;
}
.glass-bc .breadcrumb a:hover{
  color: var(--orange);
}

/* Mobile tweaks */
@media (max-width: 991.98px){
  .page-hero{ min-height: 360px; padding: 3rem 0; }
}
@media (max-width: 575.98px){
  .page-hero{ min-height: 300px; padding: 2.25rem 0; }
  .glass-bc{ padding:.3rem .6rem; }
}