:root{
  --clr-dark: #0c2b22;
  --clr-dark-2: #123529;
  --clr-gold: #c9a24b;
  --clr-gold-light: #e6c877;
  --clr-cream: #faf5e9;
  --clr-cream-2: #f2ead6;
  --clr-text: #2c2c2c;
  --clr-text-light: #6b6b6b;
  --font-head: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --radius: 14px;
  --section-py: 5.5rem;
}

body{
  font-family: var(--font-body);
  color: var(--clr-text);
  background: #fff;
}
main{
  width:100%;
  overflow-x:hidden;
}
h1,h2,h3,h4, .font-head{
  font-family: var(--font-head);
}

.section{
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

.eyebrow{
  color: var(--clr-gold);
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-gold{
  background: linear-gradient(180deg, var(--clr-gold-light), var(--clr-gold));
  color: #2b1e00;
  font-weight: 600;
  border: none;
  padding: .75rem 1.75rem;
  border-radius: 50px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201,162,75,.35);
  color: #2b1e00;
}

.btn-outline-cream{
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: 50px;
  padding: .7rem 1.6rem;
  font-weight: 500;
  background: transparent;
  transition: all .2s ease;
}
.btn-outline-cream:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

.btn-whatsapp{
  background: #25D366 !important;
  color: #fff;
  border-radius: 50px;
  padding: .75rem 1.75rem;
  font-weight: 600;
  border: none;
  transition: transform .2s ease;
}
.btn-whatsapp:hover{ transform: translateY(-2px); color:#fff; }

/* ===== Top bar / Navbar ===== */
.topbar{
  background: var(--clr-dark);
  color: #eee;
  font-size: .85rem;
}
.navbar-custom{
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.navbar-custom .navbar-brand{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--clr-dark);
  line-height: 1.1;
}
.navbar-custom .navbar-brand .accent{ color: var(--clr-gold); }
.navbar-custom .navbar-brand small{
  display:block;
  font-family: var(--font-body);
  font-size: .8rem;
  text-align:center;
  letter-spacing: 1px;
  color: var(--clr-text-light);
  font-weight: 500;
  text-transform: uppercase;
}
.navbar-custom .nav-link{
  color: var(--clr-text) !important;
  font-weight: 500;
  margin: 0 .6rem;
  position: relative;
}
.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover{
  color: var(--clr-gold) !important;
}
.navbar-custom .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: var(--clr-gold);
}
.call-pill{
  background: var(--clr-cream-2);
  border-radius: 50px;
  padding: .5rem 1.1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration: none;
}
.call-pill i{ color: var(--clr-gold); font-size: 1.1rem; }
.call-pill .lbl{ font-size:.65rem; color: var(--clr-text-light); line-height:1; display:block;}
.call-pill .num{ font-weight:600; font-size:.9rem; color: var(--clr-dark); }

/* ===== HERO (Home) ===== */
.hero{
  position: relative;
  background-image: url('../images/banner-bg.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-top: 4.5rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.30) 60%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
.hero > * { position: relative; z-index: 2; }
.hero h1{
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: .5rem;
}
.hero h1 .accent{ color: var(--clr-gold-light); }
.hero .sub-title{
  font-size: 1.15rem;
  color: #e8e2cf;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.exp-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border: 1px solid rgba(201,162,75,.5);
  background: rgba(201,162,75,.08);
  color: var(--clr-gold-light);
  padding: .5rem 1.2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .5px;
  margin-bottom: 1.5rem;
}
.hero .lead-text{
  color: #cfd6d0;
  max-width: 480px;
  margin-bottom: 1.5rem;
}
.hero .feature-list{
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: .7rem;
  column-gap: 1rem;
  max-width: 460px;
}
.hero .feature-list li{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size: .85rem;
  color: #e9e6d8;
}
.hero .feature-list i{ color: var(--clr-gold-light); }

.hero-portrait-col{ position: relative; display:flex; justify-content:center; }
.hero-portrait-wrap{ position: relative; width: 100%; max-width: 430px; }
.hero-portrait-wrap img{ width: 100%; display: block; border-radius: var(--radius); }

.stat-strip{
  background: rgba(8,26,20,.85);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  padding: 1.6rem 1rem; 
}
.stat-strip .stat-item{ text-align:center; padding: 0 .5rem; }
.stat-strip .stat-item i{ font-size: 1.6rem; color: var(--clr-gold-light); margin-bottom: .5rem; display:block; }
.stat-strip .stat-item .num{ font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: #fff; line-height: 1; }
.stat-strip .stat-item .lbl{ font-size: .8rem; color: #cfd6d0; margin-top: .3rem; }

/* ===== Page hero (inner pages) ===== */
.page-hero{
  position: relative;
  background: linear-gradient(90deg, rgba(12,43,34,.94) 0%, rgba(12,43,34,.46) 100%), url('../images/banner-bg2.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 5.5rem 0 4rem 0;
  text-align: center;
}
.page-hero h1{
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  margin-bottom: .6rem;
}
.page-hero h1 .accent{ color: var(--clr-gold-light); }
.page-hero .breadcrumb-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  color: #cfd6d0;
}
.page-hero .breadcrumb-row a{ color:#cfd6d0; text-decoration:none; }
.page-hero .breadcrumb-row a:hover{ color: var(--clr-gold-light); }
.page-hero .breadcrumb-row i{ color: var(--clr-gold); font-size:.7rem; }
.page-hero p.lead-sub{
  max-width: 560px;
  margin: 1rem auto 0 auto;
  color: #cfd6d0;
}

/* ===== Trust strip ===== */
.trust-strip{ background: var(--clr-cream); padding: 1.8rem 0; border-bottom: 1px solid #eee0bd; }
.trust-item{ display:flex; align-items:center; gap:.7rem; justify-content:center; text-align:left; }
.trust-item i{ font-size: 1.6rem; color: var(--clr-gold); }
.trust-item .t-title{ font-weight: 600; font-size: .92rem; color: var(--clr-dark); line-height:1.2; }
.trust-item .t-sub{ font-size: .78rem; color: var(--clr-text-light); }

/* ===== About ===== */
#about{ background-image: url(../images/about-bg.webp); }
.about-img-wrap{ position: relative; }
.about-img-wrap img{ width: 100%; border-radius: var(--radius); }
.about-lantern{ max-height: 260px; }
.section-title{ font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--clr-dark); margin-bottom: 1rem; }
.gold-divider{ width: 60px; height: 3px; background: var(--clr-gold); border-radius: 3px; margin-bottom: 1.5rem; }
.about-text{ color: var(--clr-text-light); line-height: 1.8; }
.about-text strong{ color: var(--clr-text); }

.timeline{ display:flex; justify-content: space-between; position: relative; margin-top: 2.5rem; padding-top: 1.5rem; }
.timeline::before{
  content:"";
  position:absolute;
  top: 0; left: 4%; right: 4%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--clr-gold) 0 6px, transparent 6px 12px);
}
.timeline .t-point{ position: relative; text-align:center; flex: 1; }
.timeline .t-point::before{
  content:""; position:absolute; top: -1.5rem; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; background: var(--clr-gold); border-radius: 50%;
}
.timeline .t-year{ font-family: var(--font-head); font-weight: 700; color: var(--clr-dark); font-size: 1.15rem; }
.timeline .t-label{ font-size: .8rem; color: var(--clr-text-light); }

/* ===== Values / mission cards (About page) ===== */
.value-card{
  background: var(--clr-cream);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  height: 100%;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.value-card i{ font-size: 2.1rem; color: var(--clr-gold); margin-bottom: 1rem; display:block; }
.value-card h5{ font-weight: 700; color: var(--clr-dark); margin-bottom: .5rem; }
.value-card p{ color: var(--clr-text-light); font-size: .9rem; margin: 0; }

/* ===== Services ===== */
.services-section{ background: var(--clr-dark); position: relative; color: #fff; }
.services-section .section-title, .services-section .eyebrow{ color: #fff; text-align:center; }
.services-section .eyebrow{ color: var(--clr-gold-light); }
.services-section .sub{ text-align:center; color: #cfd6d0; max-width: 560px; margin: 0 auto 2.5rem auto; }
.service-card{
  background: var(--clr-cream);
  border-radius: var(--radius);
  padding: 1.8rem 1.2rem;
  text-align:center;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid transparent;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.25); border-color: var(--clr-gold); }
.service-card i{ font-size: 2rem; color: var(--clr-gold); margin-bottom: .9rem; display:block; }
.service-card .s-title{ font-weight: 600; color: var(--clr-dark); font-size: .98rem; margin: 0; }

/* Detailed service block (services.php) */
.service-detail{
  background: var(--clr-cream);
  border-radius: var(--radius);
  padding: 2.2rem;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
.service-detail:hover{ box-shadow: 0 14px 30px rgba(0,0,0,.1); transform: translateY(-4px); }
.service-detail .s-icon{
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--clr-dark);
  color: var(--clr-gold-light);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem; margin-bottom: 1.2rem;
}
.service-detail h4{ font-weight: 700; color: var(--clr-dark); font-size: 1.2rem; margin-bottom: .7rem; }
.service-detail p{ color: var(--clr-text-light); font-size: .92rem; line-height: 1.7; margin: 0; }

/* ===== Why choose us / how it works ===== */
.why-card{ background: var(--clr-cream); border-radius: var(--radius); padding: 2.5rem; height: 100%; }
.why-card ul{ list-style:none; padding:0; margin: 1.5rem 0 0 0; }
.why-card ul li{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom: .4rem; color: var(--clr-text); font-size: .96rem; }
.why-card ul li i{ color: var(--clr-gold); margin-top: .2rem; }
.how-card{ background: var(--clr-dark); border-radius: var(--radius); padding: 2.5rem; color: #fff; display: flex; height: 100%; flex-direction: column; justify-content: center; }
.how-steps{ display:flex; justify-content: space-between; gap: .5rem; margin-top: 2rem; flex-wrap: wrap; }
.how-step{ text-align:center; flex: 1; min-width: 90px; }
.how-step .circle{
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--clr-cream); color: var(--clr-dark);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.3rem; margin: 0 auto .7rem auto; position: relative;
}
.how-step .step-num{
  position:absolute; top:-6px; right:-6px; background: var(--clr-gold); color: #2b1e00;
  width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.how-step .step-lbl{ font-size: .82rem; color: #e6e6e6; }

/* ===== Testimonials ===== */
.testimonial-card{ background: var(--clr-cream); border-radius: var(--radius); padding: 1.8rem; height: 100%; }
.testimonial-card .quote-icon{ font-size: 1.6rem; color: var(--clr-gold); }
.testimonial-card .stars{ color: var(--clr-gold); font-size: .85rem; margin: .5rem 0 .8rem 0; }
.testimonial-card p{ color: var(--clr-text); font-size: .93rem; line-height: 1.7; }
.testimonial-author{ display:flex; align-items:center; gap:.8rem; margin-top: 1rem; }
.testimonial-author img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-author .t-name{ font-weight: 600; font-size: .92rem; color: var(--clr-dark); }
.testimonial-author .t-loc{ font-size: .78rem; color: var(--clr-text-light); }
.slider-arrow{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid #ddd; background: #fff;
  display:flex; align-items:center; justify-content:center; color: var(--clr-dark);
}
.slider-arrow:hover{ background: var(--clr-gold); color:#fff; border-color: var(--clr-gold); }

/* Rating summary block (testimonials.php) */
.rating-summary{
  background: var(--clr-dark);
  border-radius: var(--radius);
  padding: 2.5rem;
  color: #fff;
  text-align: center;
}
.rating-summary .big-num{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  color: var(--clr-gold-light);
  line-height: 1;
}
.rating-summary .stars{ color: var(--clr-gold-light); font-size: 1.1rem; margin: .6rem 0; }
.rating-summary p{ color: #cfd6d0; font-size: .88rem; margin:0; }

/* ===== Success Stories ===== */
.story-card{
  background: var(--clr-cream);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.story-card .story-tag{
  display:inline-block;
  background: var(--clr-dark);
  color: var(--clr-gold-light);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 50px;
  margin-bottom: .8rem;
}
.story-card .story-body{ padding: 1.8rem; }
.story-card h5{ font-weight: 700; color: var(--clr-dark); margin-bottom: .6rem; }
.story-card p{ color: var(--clr-text-light); font-size: .92rem; line-height: 1.7; }
.story-card .story-footer{
  display:flex; align-items:center; gap:.6rem;
  padding-top: 1rem; margin-top: 1rem;
  border-top: 1px dashed #ddcfa4;
  font-size: .82rem; color: var(--clr-text-light);
}
.story-card .story-footer i{ color: var(--clr-gold); }

/* ===== Gallery ===== */
.gallery-section{ background: var(--clr-cream); }
.gallery-item{ position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1 / 1; cursor: pointer; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,43,34,0) 40%, rgba(12,43,34,.75) 100%);
  opacity: 0; transition: opacity .3s ease;
}
.gallery-item:hover::after{ opacity: 1; }
.gallery-item .g-icon{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem; opacity: 0; transition: opacity .3s ease;
}
.gallery-item:hover .g-icon{ opacity: 1; }
.gallery-filter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom: 2.5rem;
}
.gallery-filter .filter-btn{
  border: 1px solid #ddcfa4;
  background: #fff;
  color: var(--clr-dark);
  padding: .5rem 1.3rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 500;
  transition: all .2s ease;
}
.gallery-filter .filter-btn.active,
.gallery-filter .filter-btn:hover{
  background: var(--clr-dark);
  color: var(--clr-gold-light);
  border-color: var(--clr-dark);
}

/* ===== FAQ ===== */
.faq-section .accordion-item{
  border: none;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--clr-cream);
}
.faq-section .accordion-button{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--clr-dark);
  background: var(--clr-cream);
  padding: 1.3rem 1.6rem;
  font-size: 1.02rem;
}
.faq-section .accordion-button:not(.collapsed){
  color: var(--clr-gold);
  background: var(--clr-cream);
  box-shadow: none;
}
.faq-section .accordion-button:focus{ box-shadow: none; border-color: transparent; }
.faq-section .accordion-button::after{ filter: sepia(1) saturate(3) hue-rotate(0deg); }
.faq-section .accordion-body{
  color: var(--clr-text-light);
  padding: 0 1.6rem 1.5rem 1.6rem;
  line-height: 1.8;
  font-size: .93rem;
}
.faq-categories .cat-pill{
  display:flex; align-items:center; gap:.7rem;
  padding: .9rem 1.2rem;
  border-radius: 10px;
  margin-bottom: .7rem;
  background: var(--clr-cream);
  color: var(--clr-dark);
  font-weight: 600;
  font-size: .9rem;
  text-decoration:none;
  transition: all .2s ease;
}
.faq-categories .cat-pill i{ color: var(--clr-gold); font-size: 1.1rem; }
.faq-categories .cat-pill:hover{ background: var(--clr-dark); color: var(--clr-gold-light); }
.faq-categories .cat-pill:hover i{ color: var(--clr-gold-light); }

/* ===== Contact / Book Consultation form ===== */
.book-form-wrap{
  background: var(--clr-cream);
  border-radius: var(--radius);
  padding: 2.5rem;
}
.book-form-wrap .form-label{ font-weight: 600; color: var(--clr-dark); font-size: .9rem; }
.book-form-wrap .form-control,
.book-form-wrap .form-select{
  border: 1px solid #e2d6ae;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .92rem;
  background: #fff;
}
.book-form-wrap .form-control:focus,
.book-form-wrap .form-select:focus{
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 .2rem rgba(201,162,75,.15);
}
.contact-info-card{
  background: var(--clr-dark);
  border-radius: var(--radius);
  padding: 2.5rem;
  color: #fff;
  height: 100%;
}
.contact-info-card .info-row{
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom: 1.6rem;
}
.contact-info-card .info-row i{
  width: 44px; height:44px; border-radius:50%;
  background: rgba(201,162,75,.15);
  color: var(--clr-gold-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size: 1.1rem;
}
.contact-info-card .info-row .lbl{ font-size:.78rem; color:#cfd6d0; text-transform:uppercase; letter-spacing:.5px; }
.contact-info-card .info-row .val{ font-weight:600; color:#fff; }

/* ===== CTA strip ===== */
.cta-strip{ background: var(--clr-dark); border-radius: var(--radius); padding: 2.2rem 2.5rem; color:#fff; }
.cta-strip h4{ color: var(--clr-gold-light); font-weight: 700; margin-bottom: .3rem; }
.cta-strip p{ color: #cfd6d0; margin: 0; font-size: .92rem; }
.cta-phone{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size: 1.05rem; color:#fff; }
.cta-phone i{ color: var(--clr-gold-light); }

/* ===== Footer ===== */
.site-footer{ background: var(--clr-dark); color: #cfd6d0; padding-top: 4rem; }
.site-footer h6{ color:#fff; font-weight:600; margin-bottom: 1.2rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .5px; }
.site-footer a{ color: #cfd6d0; text-decoration: none; font-size: .92rem; }
.site-footer .navbar-brand{ font-size: 1.5rem; }
.site-footer .navbar-brand small{ position: relative; top:-5px; }
.site-footer a:hover{ color: var(--clr-gold-light); }
.site-footer ul{ list-style:none; padding:0; }
.site-footer ul li{ margin-bottom: .6rem; }
.footer-social a{
  width: 36px; height:36px; border-radius:50%; border: 1px solid rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem;
}
.footer-social a:hover{ background: var(--clr-gold); border-color: var(--clr-gold); color:#fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.2rem 0; font-size: .82rem; }

/* ===== WhatsApp floating action button ===== */
.wa-fab{
  position: fixed;
  right: 24px; bottom: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.7rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 999;
  transition: transform .2s ease;
}
.wa-fab:hover{ transform: scale(1.08); color:#fff; }

@media (max-width: 991.98px){
  .hero{ text-align:center; padding-top: 2.5rem; }
  .hero .feature-list{ margin-left:auto; margin-right:auto; }
  .hero-portrait-col{ margin-top: 2.5rem; }
  .how-steps{ justify-content:center; }
}