/* ================================
   ROCK AESTHETICS - style.css
   earm bludsh ;peach  Pastel Theme
   ================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary: #c97b63;        /* peach */
  --primary-light: #e8a999;  /* soft peach */
  --primary-bg: #fdf3ef;     /* light nude background */

  --accent: #d8a48f;         /* warm blush */
  --accent-soft: #f3d6cb;

  --cream: #fff7f4;
  --white: #ffffff;

  --dark: #3a2b2b;           /* soft brown */
  --mid: #7a5c58;
  --light: #f9ebe6;

  --font-h: 'Playfair Display', serif;
  --font-b: 'DM Sans', sans-serif;
}
  

html { scroll-behavior:smooth; }
body {
  font-family: var(--font-b);
  background: var(--white);
  color: var(--dark);
  font-size: 18px; 
  line-height: 1.6;
}
 /*body { font-family:var(--font-b); background:var(--white); color:var(--dark); overflow-x:hidden; }*/

/* ===== CUSTOM CURSOR ===== */

body {
  cursor: none; 
}

/* small dot */
.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
}

/* big circle */
.cursor-circle {
  width: 30px;
  height: 30px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: all 0.15s ease;
}
/* ===== PRELOADER FULL SCREEN ===== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.loader-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo {
  width: 40vw;
  max-width: 500px;
  min-width: 200px;
  height: auto;

  animation: zoomIn 1.5s ease-in-out;
}

/* smooth zoom */
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }

}

#preloader {
  transition: all 0.5s ease;
} 
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #c97b63;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

.cursor-circle {
  width: 30px;
  height: 30px;
  border: 1px solid #c97b63;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: 0.1s ease;
}
.cta-btn {
  background: #c97b63;  /* stronger peach */
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(201, 123, 99, 0.3);
  transition: all 0.3s ease;
}
.cta-btn:hover {
  background: #b66a54;
  transform: translateY(-2px);
}
.secondary-btn {
  border: 2px solid #c97b63;
  color: #c97b63;
  background: transparent;
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: 600;
}

.secondary-btn:hover {
  background: #c97b63;
  color: #fff;
}
/* SMOOTH ZOOM EFFECT */
@keyframes zoomIn {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }

}

@keyframes fadeZoom {
  0% {
    opacity: 0.6;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

body {
  font-family: var(--font-b);
  background: var(--white);
  color: var(--dark);
  font-size: 17px;   
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: var(--font-h);
  font-weight: 600;   
  letter-spacing: 0.5px;
}
/* ---- POPUP ---- */
.popup-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(30,45,61,0.5); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.4s;
}
.popup-overlay.show { opacity:1; pointer-events:all; }
.popup-box {
  background:var(--white); border-radius:22px; overflow:hidden;
  display:flex; max-width:840px; width:92%;
  box-shadow:0 28px 80px rgba(30,45,61,0.22); position:relative;
}
.popup-close {
  position:absolute; top:16px; right:18px; z-index:10;
  background:rgba(255,255,255,0.95); border:none; border-radius:50%;
  width:34px; height:34px; font-size:1.1rem; cursor:pointer; color:var(--mid);
  display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.popup-close:hover { background:var(--blue); color:white; }
.popup-form-side { flex:1.1; padding:48px 40px; overflow-y:auto; }
.popup-tag { font-size:0.65rem; letter-spacing:0.24em; color:var(--blue); margin-bottom:10px; display:block; }
.popup-form-side h2 { font-family:var(--font-h); font-size:2rem; font-weight:600; line-height:1.25; margin-bottom:10px; color:var(--dark); }
.popup-form-side h2 em { color:var(--rose); font-style:italic; }
.popup-sub { font-size:0.85rem; color:var(--mid); margin-bottom:26px; font-weight:300; }
#popupForm { display:flex; flex-direction:column; gap:12px; }
#popupForm input, #popupForm select {
  border:1.5px solid #d4e4f0; border-radius:10px; padding:13px 16px;
  font-family:var(--font-b); font-size:0.88rem; color:var(--dark);
  background:var(--blue-bg); outline:none; transition:border-color 0.2s;
}
#popupForm input:focus, #popupForm select:focus { border-color:var(--blue); }
.popup-success { display:none; text-align:center; padding:24px 0; }
.popup-success.show { display:block; }
.success-icon { width:60px; height:60px; border-radius:50%; background:var(--blue); color:white; font-size:1.6rem; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.popup-success h3 { font-family:var(--font-h); font-size:1.5rem; margin-bottom:8px; color:var(--dark); }
.popup-success p { font-size:0.85rem; color:var(--mid); }
.popup-img-side { flex:1; position:relative; min-height:340px; }
.popup-img-side img { width:100%; height:100%; object-fit:cover; }
.popup-img-tag {
  position:absolute; bottom:20px; left:16px; right:16px;
  background:rgba(255,255,255,0.93); border-radius:14px; padding:16px 20px;
  font-family:var(--font-h); font-size:1.1rem; font-weight:600; color:var(--dark);
}
.popup-img-tag em { color:var(--rose); font-style:italic; }
.popup-img-tag small { display:block; font-family:var(--font-b); font-size:0.72rem; color:var(--mid); font-weight:400; margin-top:4px; }

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: rgb(83, 29, 29);
  font-family: var(--font-b);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 14px 28px;   
  border-radius: 40px;  
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(216, 108, 75, 0.3);
}

.btn-primary:hover {
  background: var(--primary-light);

  font-size:0.72rem; letter-spacing:0.14em; font-weight:500;
  padding:14px 28px; border-radius:40px; border:none; cursor:pointer;
  text-decoration:none; display:inline-block; transition:all 0.25s;
}
.btn-primary:hover { background:var(--blue-l); transform:translateY(-2px); box-shadow:0 8px 24px rgba(58,111,168,0.3); }
/* EXPLORE BUTTON */
.btn-ghost {
  background: #ffffff;              
  color: #c97b63;                  
  border: 2px solid #c97b63;
  padding: 13px 28px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* subtle depth */
}
.btn-ghost:hover { background:white; color:var(--blue); border-color:white; }
.btn-nav-book {
  background:var(--blue); color:white; font-size:0.7rem;
  letter-spacing:0.14em; font-weight:500; padding:10px 22px;
  border-radius:30px; text-decoration:none; transition:background 0.2s;
}
.btn-nav-book:hover { background:var(--blue-l); }

/* ---- NAVBAR ---- */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 52px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(58,111,168,0.12);
  transition:padding 0.3s, box-shadow 0.3s;
}
.navbar.scrolled { padding:13px 52px; box-shadow:0 2px 20px rgba(30,45,61,0.08); }
.nav-logo { display:flex; flex-direction:column; }
.logo-main { font-family:var(--font-h); font-size:1.3rem; font-weight:600; color:var(--dark); }
.logo-sub { font-size:0.58rem; letter-spacing:0.2em; color:var(--blue); margin-top:2px; }
.nav-links { display:flex; list-style:none; gap:30px; }
/* ===== NAVBAR LINKS - PREMIUM STYLE ===== */
.nav-links a {
  font-size: 0.85rem;
  font-weight: 700;                 /* bold */
  letter-spacing: 0.08em;
  color: #1e2d3d;                   /* darker = visible */
  text-decoration: none;
  padding: 6px 10px;
  position: relative;
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.nav-links a:hover {
  color: #b8860b;                   /* gold highlight */
  transform: translateY(-2px);      /* slight lift */
}

/* UNDERLINE ANIMATION */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #b8860b;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
} 
.navbar {
  display: flex;
  align-items: left;
  justify-content: space-between;
  padding: 12px 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

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

}
.hamburger { display:none; background:none; border:none; font-size:1.4rem; color:var(--dark); cursor:pointer; }

/* ---- HERO ---- */
.hero { position:relative; height:100vh; min-height:580px; overflow:hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.9s ease; }
.hero-slide.active { opacity:1; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg, rgba(255,255,255,0.92) 35%, rgba(255,255,255,0.15) 100%); }
.hero-content {
  position:relative; z-index:2; padding:0 80px;
  height:100%; display:flex; flex-direction:column; justify-content:center;
  max-width:620px; padding-top:80px;
}
.hero-tag { font-size:0.68rem; letter-spacing:0.24em; color:var(--blue); margin-bottom:16px; display:block; }
.hero-content h1 { font-family:var(--font-h); font-size:clamp(3rem,5.5vw,5rem); font-weight:600; line-height:1.1; color:var(--dark); margin-bottom:18px; }
.hero-content h1 em { color:var(--rose); font-style:italic; }
.hero-content p { font-size:0.98rem; color:var(--mid); line-height:1.75; font-weight:300; max-width:420px; margin-bottom:34px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.hero-nav { position:absolute; bottom:100px; right:60px; z-index:5; display:flex; align-items:center; gap:14px; }
.hero-nav button { width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(58,111,168,0.35); background:white; color:var(--blue); cursor:pointer; font-size:1rem; transition:all 0.2s; }
.hero-nav button:hover { background:var(--blue); color:white; border-color:var(--blue); }
.hero-dots { display:flex; gap:8px; }
.hdot { width:24px; height:3px; background:rgba(58,111,168,0.2); border-radius:2px; cursor:pointer; transition:background 0.3s; }
.hdot.active { background:var(--blue); }

/* Ticker */
.hero-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  background: linear-gradient(90deg, #c97b63, #e8a999); /* peach gradient */
  padding: 12px 0;

  z-index: 10;
  overflow: hidden;
}
.ticker-inner span::after {
  content: " ✦ ";
  margin: 0 14px;
  opacity: 0.7;
}.ticker-inner { display:flex; gap:36px; white-space:nowrap; animation:ticker 30s linear infinite; }
.ticker-inner span { font-size:0.7rem; letter-spacing:0.18em; color:rgba(255,255,255,0.9); font-weight:500; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== STATS ===== */
.popup-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.stats {
  display: flex;
  flex-direction: row;          /*  horizontal */
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  width: 100%;
  background: #fdf3ef; /* soft peach background */
  border-bottom: 1px solid #d4e4f0;
  flex-wrap: nowrap; 
  .stats { display:flex !important; flex-wrap:nowrap !important; }        
}

/* EACH ITEM */
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  position: relative;
}

/* DIVIDER LINE */
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: #c4d8ea;
}

/* NUMBER */
.stat-item strong {
  font-size: 28px;
  font-weight: 700;
  color: #5a3e36; /* warm brown */

}

/* TEXT */
.stat-item span {
  font-size: 12px;
  letter-spacing: 1px;
  color: #555;
  text-transform: uppercase;
}

/* ---- SECTION COMMON ---- */
.section-head { text-align:center; margin-bottom:60px; }
.sec-tag { font-size:0.65rem; letter-spacing:0.28em; color:var(--blue); margin-bottom:12px; display:block; }
.section-head h2 { font-family:var(--font-h); font-size:clamp(2rem,3.5vw,3rem); font-weight:600; color:var(--dark); }
.section-head h2 em { color:var(--rose); font-style:italic; }
.sec-sub { font-size:0.88rem; color:var(--mid); max-width:500px; margin:14px auto 0; line-height:1.7; font-weight:300; }

/* ---- SERVICES ---- */
.services { padding:100px 60px; background:var(--white); }
.services {
  padding: 100px 60px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.svc-card {
  border-radius: 20px;
  background: #fff6f2;
  box-shadow: 0 10px 30px rgba(201,123,99,0.15);
  padding: 20px;
  transition: 0.3s;
}


.svc-card:hover {
  transform: translateY(-8px);
}

.card {
  width: 100%;
  max-width: 260px;   
  height: 340px;     
  margin: 0 auto;
  perspective: 1000px;

}
.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keep this */
  border-radius: 20px;
}

/* MOBILE */
@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
/* ---- HIGHLIGHT (FACIALS) ---- */
.hl-section {
  display:flex; align-items:center; gap:80px;
  padding:100px 80px; background:linear-gradient(135deg,var(--blue-bg),#f5fbf9);
}
.hl-text { flex:1.2; }
.hl-text .sec-tag { text-align:left; }
.hl-text h2 { font-family:var(--font-h); font-size:clamp(2rem,3.5vw,2.8rem); font-weight:600; line-height:1.2; color:var(--dark); margin-bottom:16px; }
.hl-text h2 em { color:var(--rose); font-style:italic; }
.hl-text p { font-size:0.9rem; color:var(--mid); line-height:1.8; font-weight:300; margin-bottom:28px; max-width:430px; }
.hl-pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.hl-pills span {
  font-size:0.75rem; background:white; border:1.5px solid #c4d8ea;
  color:var(--dark); padding:7px 18px; border-radius:30px; font-weight:400;
  transition:all 0.2s; cursor:default;
}
.hl-pills span:hover { background:var(--blue); color:white; border-color:var(--blue); }
/* ===== IMAGE LAYOUT ===== */

.hl-imgs {
  flex: 1;
  position: relative;
  width: 420px;
  max-width: 100%;
}

/* BIG IMAGE */
.hl-imgs .hi1 {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

/* SMALL IMAGE */
.hl-imgs .hi2 {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 150px;
  height: auto;
  border-radius: 15px;
  border: 5px solid #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  object-fit: cover;
}
/* ---- GALLERY ---- */
.gallery-sec { padding:100px 60px; background:var(--white); }
.gal-filters { display:flex; justify-content:center; gap:12px; margin-bottom:48px; flex-wrap:wrap; }
.gf { font-size:0.72rem; letter-spacing:0.12em; padding:9px 24px; border-radius:30px; border:1.5px solid #c4d8ea; background:white; color:var(--mid); cursor:pointer; transition:all 0.25s; font-family:var(--font-b); }
.gf.active,.gf:hover { background:var(--blue); border-color:var(--blue); color:white; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; max-width:1100px; margin:0 auto; }
.gi { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.gi img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.gi:hover img { transform:scale(1.07); }
.gi-label { position:absolute; bottom:0; left:0; right:0; padding:18px; background:linear-gradient(transparent,rgba(30,45,61,0.65)); color:white; font-size:0.85rem; font-family:var(--font-h); opacity:0; transition:opacity 0.3s; }
.gi:hover .gi-label { opacity:1; }

/* REELS */

.insta-reels {
  padding: 80px 20px;
  text-align: center;
  background: #fff;
}

.insta-reels h2 {
  font-size: 28px;
  margin-bottom: 40px;
}

/* GRID */
.reels-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

/* EACH REEL CARD */
.reel {
  background: #faf7f5;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.reel:hover {
  transform: translateY(-5px);
}

/*  INSTAGRAM SIZE */
.reel iframe,
.reel blockquote {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* FORCE HEIGHT CONSISTENCY */
.instagram-media {
  min-height: 480px !important;
}

/* MOBILE */
@media (max-width: 900px) {
  .reels-container {
    grid-template-columns: 1fr;
  }
}

/* BEFORE AFTER STYLE */

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.before-after img {
  width: 100%;
  height: 180px;   
  object-fit: contain;  
  background: #fff;     
  border-radius: 12px;

}

.gi-label {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #5a3e36;
}

/*  TESTIMONIALS  */
#reviews{background:var(--white);}
.rev-header{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:48px;}
.rev-big{font-family:var(--serif);font-size:64px;font-weight:700;color:var(--gold);line-height:1;}
.rev-info p{color:var(--grey);font-size:12px;}
.rev-stars{font-size:20px;color:#f59e0b;letter-spacing:2px;}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;}
.rc{padding:26px;border:1px solid var(--border);border-radius:12px;background:var(--cream);transition:all .3s;position:relative;}
.rc:hover{border-color:var(--gold3);transform:translateY(-4px);box-shadow:0 10px 28px rgba(184,134,11,.1);}
.rc::before{content:'"';font-family:var(--serif);font-size:80px;color:var(--gold3);opacity:.15;position:absolute;top:-10px;left:14px;line-height:1;}
.rc-stars{color:#f59e0b;font-size:11px;letter-spacing:3px;margin-bottom:12px;}
.rc-text{font-size:12px;color:var(--grey);line-height:1.85;font-style:italic;margin-bottom:18px;}
.rc-au{display:flex;align-items:center;gap:10px;}
/*  REVIEWER AVATARS */

.rca{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--white);flex-shrink:0;}
.rc-name{font-size:13px;font-weight:700;color:var(--dark);}
.rc-role{font-size:10px;color:var(--grey);}



/* ===== REVIEWS ===== */

#reviews {
text-align: center;
}
.reviews-sec {
  padding: 100px 60px;
  background: #fff6f2;
}

/* GRID */
.rv-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 40px;
}

/* CARD */
.rv-card {
  background: #fdf3ef;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.rv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

/* TEXT */
.rv-stars {
  color: #c97b63;
  font-size: 1rem;
  margin-bottom: 10px;
}

.rv-card p {
  font-size: 0.9rem;
  color: #5a3e36;
  line-height: 1.6;
  margin-bottom: 10px;
  font-style: italic;
}

.rv-card span {
  font-size: 0.75rem;
  color: #a06f5f;
  font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .rv-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .rv-wrap {
    grid-template-columns: 1fr;
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .rv-wrap.grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .rv-wrap.grid {
    grid-template-columns: 1fr;
  }
}
/* ========= FAQ PREMIUM ========= */

.faq-sec {
  padding: 100px 60px;
  background: linear-gradient(180deg, #fff6f2, #fff);
}

.faq-wrap {
  max-width: 820px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-answer {
  display: none;
  padding-top: 10px;
  color: #555;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-question {
  cursor: pointer;
  font-weight: 600;
  padding: 15px;
} 

.faq-a {
  display: none;
  transition: all 0.3s ease;
}

.faq-item.active .faq-a {
  display: block;
}
/* CARD STYLE */
.faq-item {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #efd6cd;
  box-shadow: 0 8px 24px rgba(201, 123, 99, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(201, 123, 99, 0.12);
}

/* QUESTION */
.faq-q {
  padding: 20px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #3e2b26;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ICON */
.faq-q span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3d2c7;
  color: #c97b63;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
}

/* ACTIVE STATE */
.faq-item.active .faq-q span {
  transform: rotate(45deg);
  background: #c97b63;
  color: white;
}

/* ANSWER */
.faq-a {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  font-size: 13px;
  color: #6b4b43;
  line-height: 1.7;
}

/* OPEN */
.faq-item.active .faq-a {
  padding: 16px 24px 22px;
  max-height: 200px;
}

/* MOBILE */
@media (max-width: 768px) {
  .faq-sec {
    padding: 60px 20px;
  }

  .faq-q {
    font-size: 14px;
  }
}
/* ---- CONTACT ---- */
.contact-sec { padding:100px 60px; background:white; }
.contact-wrap {
  display: flex;
  justify-content: center;   /* center layout */
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin: auto;
}
@media (max-width: 900px) {
  .contact-wrap {
    flex-direction: column;
    gap: 30px;
  }
}.contact-info { flex:1; min-width:240px; display:flex; flex-direction:column; gap:28px; }
.ci { display:flex; gap:16px; align-items:flex-start; }
.ci span { font-size:1.3rem; }
.ci div { font-size:0.88rem; color:var(--mid); line-height:1.7; font-weight:300; }
.ci strong { display:block; color:var(--dark); font-weight:500; margin-bottom:3px; }
.btn-wa {
  display: inline-block;
  background: #c78b73;   /* soft peach tone */
  color: white;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: 0.3s ease;
}
.btn-wa {
  background: linear-gradient(135deg, #c78b73, #e0a58c);
}

.btn-wa:hover {
  background: #b3745e;   /* darker on hover */
}
.contact-form input,.contact-form select,.contact-form textarea {
  border:1.5px solid #e6947b; border-radius:12px; padding:14px 18px;
  font-family:var(--font-b); font-size:0.88rem; color:var(--dark);
  background:var(--blue-bg); outline:none; transition:border-color 0.2s; font-weight:300;
}
.contact-form {
  flex: 1;
  max-width: 420px;
  width: 100%;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}.contact-form textarea { resize:vertical; }
.form-note { font-size:0.72rem; color:#aab; text-align:center; margin-top:-4px; }

/* ---- FOOTER ---- */
.footer { background:var(--dark); padding:64px 80px 0; }
.footer-inner { display:flex; gap:60px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand { flex:2; min-width:200px; }
.footer-brand .logo-main { font-family:var(--font-h); font-size:1.3rem; color:white; display:block; margin-bottom:4px; }
.footer-brand .logo-sub { font-size:0.58rem; letter-spacing:0.2em; color:var(--blue-l); display:block; margin-bottom:14px; }
.footer-brand p { font-size:0.82rem; color:rgba(255,255,255,0.45); line-height:1.7; font-weight:300; max-width:280px; }
.footer-col { flex:1; min-width:130px; display:flex; flex-direction:column; gap:10px; }
.footer-col h4 { font-family:var(--font-h); font-size:1rem; color:white; margin-bottom:6px; }
.footer-col a { font-size:0.8rem; color:rgba(255,255,255,0.45); text-decoration:none; font-weight:300; transition:color 0.2s; }
.footer-col a:hover { 
  color: #c97b63;   /* your peach theme */
}.footer-bottom { text-align:center; padding:20px; }
.footer-bottom p { font-size:0.73rem; color:rgba(255,255,255,0.25); }

.social-links {
  position: static;    
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* styling  same */
.social-links a {
  width: 45px;
  height: 45px;
  background: #c97b63;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s ease;
}

.social-links a:hover {
  background: #a8644f;
  transform: scale(1.1);
}

/* ---- SCROLL ANIMATION ---- */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.55s ease, transform 0.55s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* Prevent sections from blocking */
.contact-sec,
.footer,
.contact-wrap {
  position: relative;
  z-index: 1;
}

/* Fix overlay blocking */
#preloader {
  pointer-events: none;
}

.popup-overlay {
  pointer-events: none;
}

.popup-overlay.show {
  pointer-events: all;
}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .navbar{padding:16px 24px;}
  .nav-links,.btn-nav-book{display:none;}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:white;padding:24px;gap:16px;box-shadow:0 8px 24px rgba(0,0,0,0.1);}
  .hamburger{display:block;}
  .hero-content{padding:80px 28px 0;}
  .hl-section{flex-direction:column;padding:64px 28px;gap:48px;}
  .hl-imgs{min-height:280px;width:100%;}
  .services,.gallery-sec,.reviews-sec,.contact-sec{padding:72px 24px;}
  .stats{padding:28px 16px;}
  .stat-divider{display:none;}
  .stat-item{padding:10px 18px;}
  .footer{padding:48px 28px 0;}
  .popup-img-side{display:none;}
  .hero-nav{bottom:90px;right:20px;}
}
@media(max-width:600px){
  .service-grid{grid-template-columns:1fr;}
  .contact-wrap{gap:40px;}
  .rv-wrap{flex-direction:column;}
}


/* Desktop */
.hero-bg {
  background-size: cover;
  background-position: center;
}


@media (max-width: 768px) {
  .hero-bg {
    height: 420px; /* adjust if needed */
    background-size: cover;
    background-position: 80% center; 
  }
  /* ===== MOBILE ===== */
@media (max-width: 768px) {

  /* HERO TEXT FIX */
  .hero-content {
    padding: 20px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 14px;
  }

  /* BUTTON FIX */
  .hero-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-btns a {
    width: 100%;
  }

  /* IMAGE POSITION (VERY IMPORTANT) */
  .hero-bg {
    background-position: 85% center !important;
  }

  /* STATS FIX */
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
  }

  .stat-item {
    padding: 10px;
  }

}

}