/* ═══════════════════════════════════════════════════
   sections.css  –  All Page Sections Styles
   د. وسام ميسر – عيادة الأسنان
═══════════════════════════════════════════════════ */

/* ════════════════════════════
   HERO SECTION
════════════════════════════ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,200,232,0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0,150,199,0.07) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(0,100,180,0.04) 0%, transparent 40%);
  animation: mesh-shift 12s ease-in-out infinite alternate;
}
@keyframes mesh-shift {
  0%   { filter: hue-rotate(0deg);  }
  100% { filter: hue-rotate(30deg); }
}

/* floating orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orb-float ease-in-out infinite alternate;
}
@keyframes orb-float {
  from { transform: translateY(0) scale(1);    }
  to   { transform: translateY(-30px) scale(1.08); }
}

/* rings */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 200, 232, 0.15);
  animation: ring-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ring-breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.5;  }
  50%     { transform: translate(-50%,-50%) scale(1.06); opacity: 0.25; }
}

/* particle field */
.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle-field span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--accent);
  animation: pfloat linear infinite;
  opacity: 0;
}
@keyframes pfloat {
  0%   { transform: translateY(110vh) translateX(0);   opacity: 0;   }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.3; }
  100% { transform: translateY(-10vh) translateX(30px); opacity: 0;  }
}

/* badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--glass2);
  border: 1px solid var(--border-accent);
  backdrop-filter: blur(12px);
  border-radius: 40px;
  padding: 8px 20px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 700;
  animation: fadeInDown 0.8s ease both;
  margin-bottom: 22px;
}
.hero-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* title */
.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
  animation: fadeInUp 0.9s 0.1s ease both;
}
.hero-title .grad {
  background: linear-gradient(135deg, var(--text-h) 20%, var(--accent) 60%, var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.hero-title .line2 {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  color: var(--text-p);
  font-weight: 600;
  margin-top: 6px;
}

.hero-desc {
  font-size: 15px;
  color: var(--text-p);
  line-height: 1.9;
  max-width: 500px;
  margin-bottom: 36px;
  animation: fadeInUp 0.9s 0.25s ease both;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: fadeInUp 0.9s 0.4s ease both;
}

/* mini stats row */
.hero-mini-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 44px;
  animation: fadeInUp 0.9s 0.55s ease both;
}
.mini-stat .num { font-size: 24px; font-weight: 900; color: var(--accent); }
.mini-stat .lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.mini-stat-sep  { width: 1px; background: var(--border); align-self: stretch; }

/* image card */
.hero-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInRight 1s 0.2s ease both;
}
.hero-img-card {
  width: min(380px, 90%);
  aspect-ratio: 3/4;
  border-radius: 32px 32px 80px 32px;
  background: linear-gradient(145deg, rgba(0,200,232,0.12), rgba(10,30,60,0.55));
  border: 1px solid var(--border-accent);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: card-tilt 6s ease-in-out infinite alternate;
}
@keyframes card-tilt {
  from { transform: perspective(800px) rotateY(-3deg) rotateX(2deg);  }
  to   { transform: perspective(800px) rotateY(3deg)  rotateX(-2deg); }
}
.hero-img-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,200,232,0.06), transparent 50%);
  pointer-events: none;
}
/* shimmer */
.hero-img-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: rotate(20deg);
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { left:-60%; } 50% { left:130%; } }

.hero-placeholder-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.hero-placeholder-icon i {
  font-size: 90px;
  opacity: 0.35;
  animation: icon-pulse 3s ease-in-out infinite;
}
@keyframes icon-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.hero-placeholder-icon p     { font-size:14px; color:var(--text-muted); font-weight:700; }
.hero-placeholder-icon small { font-size:11px; color:var(--text-muted); }

/* floating stat cards */
.float-card {
  position: absolute;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.float-card.fc1 { bottom:60px; left:-60px; animation: fc-float1 4s   ease-in-out infinite; }
.float-card.fc2 { top:60px;    right:-55px; animation: fc-float2 4.5s ease-in-out infinite; }
.float-card.fc3 { top:45%;     left:-70px;  animation: fc-float3 5s   ease-in-out infinite; }
@keyframes fc-float1 { 0%,100%{transform:translateY(0);}            50%{transform:translateY(-12px);} }
@keyframes fc-float2 { 0%,100%{transform:translateY(-6px);}         50%{transform:translateY(6px);} }
@keyframes fc-float3 { 0%,100%{transform:translateY(0)rotate(-2deg);}50%{transform:translateY(-8px)rotate(2deg);} }

.fc-icon {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fc-icon i { font-size:18px; color:#fff; }
.fc-num    { font-size:20px; font-weight:900; color:var(--text-h); }
.fc-lbl    { font-size:11px; color:var(--text-muted); }

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  animation: bounce-y 2.5s ease-in-out infinite;
}
@keyframes bounce-y {
  0%,100% { transform: translateX(-50%) translateY(0);  }
  50%     { transform: translateX(-50%) translateY(8px); }
}
.scroll-hint .mouse {
  width:24px; height:38px; border-radius:12px;
  border:2px solid var(--border);
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-hint .mouse-dot {
  width:3px; height:8px; border-radius:2px;
  background:var(--accent);
  animation: mouse-scroll 2s ease-in-out infinite;
}
@keyframes mouse-scroll { 0%{transform:translateY(0);opacity:1;} 100%{transform:translateY(12px);opacity:0;} }


/* ════════════════════════════
   ABOUT SECTION
════════════════════════════ */
#about { position:relative; overflow:hidden; }
#about::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,0.06),transparent 70%);
  top:-150px; right:-100px; pointer-events:none;
}

.about-img {
  position:relative; border-radius:28px; overflow:hidden;
  background:linear-gradient(145deg,var(--bg-card),var(--bg-3));
  border:1px solid var(--border-accent);
  aspect-ratio:4/5; max-width:430px; margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.5s;
}
.about-img:hover {
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 40px 100px rgba(0,0,0,0.3), var(--shadow-accent);
}
.about-img-badge {
  position:absolute; bottom:24px; right:24px;
  background:var(--bg-nav); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:18px;
  padding:14px 22px; text-align:center; box-shadow:var(--shadow);
}
.about-img-badge .bn { font-size:30px; font-weight:900; color:var(--accent); }
.about-img-badge .bl { font-size:12px; color:var(--text-muted); }


/* ════════════════════════════
   SERVICES SECTION
════════════════════════════ */
.srv-card {
  background:var(--glass2); border:1px solid var(--border);
  backdrop-filter:blur(14px); border-radius:24px;
  padding:32px 24px; height:100%;
  transition:all 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
  position:relative; overflow:hidden; cursor:pointer;
}
.srv-card::before {
  content:''; position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(135deg,rgba(0,200,232,0.1),transparent 60%);
  opacity:0; transition:opacity 0.4s;
}
.srv-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent3));
  transform:scaleX(0); transition:transform 0.45s;
}
.srv-card:hover {
  transform:translateY(-12px) scale(1.02);
  border-color:var(--border-accent);
  box-shadow:0 24px 60px rgba(0,0,0,0.3), var(--shadow-accent);
}
.srv-card:hover::before { opacity:1; }
.srv-card:hover::after  { transform:scaleX(1); }

.srv-icon {
  width:72px; height:72px; border-radius:20px;
  background:linear-gradient(135deg,rgba(0,200,232,0.15),rgba(10,30,60,0.4));
  border:1px solid rgba(0,200,232,0.2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; transition:all 0.45s; position:relative; overflow:hidden;
}
.srv-icon::after {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  opacity:0; transition:opacity 0.4s;
}
.srv-card:hover .srv-icon { box-shadow:0 8px 30px rgba(0,200,232,0.4); }
.srv-card:hover .srv-icon::after { opacity:1; }

.srv-icon i {
  color:var(--accent); font-size:30px;
  transition:all 0.4s; position:relative; z-index:1;
}
.srv-card:hover .srv-icon i { color:#fff; transform:scale(1.15) rotate(-5deg); }
.srv-card h4 { font-size:17px; font-weight:800; color:var(--text-h); margin-bottom:10px; }
.srv-card p  { font-size:13.5px; color:var(--text-p); line-height:1.78; }

.srv-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,200,232,0.1); border:1px solid rgba(0,200,232,0.2);
  color:var(--accent); border-radius:20px; padding:4px 12px;
  font-size:11.5px; font-weight:700; margin-top:14px; transition:all 0.3s;
}
.srv-card:hover .srv-tag {
  background:rgba(0,200,232,0.2);
  border-color:rgba(0,200,232,0.4);
}


/* ════════════════════════════
   STATS SECTION
════════════════════════════ */
#stats {
  padding:80px 0;
  background:linear-gradient(135deg,rgba(0,200,232,0.08),rgba(0,100,180,0.06)), var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.stat-block { text-align:center; padding:28px 16px; position:relative; }
.stat-block::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,0.08),transparent 70%);
  animation:stat-glow 3s ease-in-out infinite;
}
@keyframes stat-glow {
  0%,100% { transform:translate(-50%,-50%) scale(1);   }
  50%     { transform:translate(-50%,-50%) scale(1.3); }
}

.stat-icon-wrap {
  width:60px; height:60px; border-radius:16px;
  background:linear-gradient(135deg,rgba(0,200,232,0.15),rgba(0,100,180,0.2));
  border:1px solid rgba(0,200,232,0.25);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; transition:all 0.4s;
}
.stat-block:hover .stat-icon-wrap {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  transform:scale(1.1) rotate(5deg);
}
.stat-block:hover .stat-icon-wrap i { color:#fff; }
.stat-icon-wrap i { color:var(--accent); font-size:24px; transition:color 0.4s; }

.stat-number {
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--text-h),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:8px;
}
.stat-label { font-size:14px; color:var(--text-p); font-weight:600; }


/* ════════════════════════════
   GALLERY SECTION
════════════════════════════ */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:240px 240px;
  gap:16px;
}

.g-item {
  border-radius:20px; overflow:hidden; position:relative;
  background:linear-gradient(145deg,var(--bg-card),var(--bg-3));
  border:1px solid var(--border); cursor:pointer;
  transition:all 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
}
.g-item:first-child { grid-row:span 2; }
.g-item:hover {
  transform:scale(1.03);
  border-color:var(--border-accent);
  box-shadow:0 20px 60px rgba(0,0,0,0.4), var(--shadow-accent);
  z-index:2;
}

.g-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,200,232,0.2) 100%);
  opacity:0; transition:opacity 0.4s;
  display:flex; align-items:center; justify-content:center;
}
.g-item:hover .g-overlay { opacity:1; }

.g-overlay-content {
  text-align:center; color:#fff;
  transform:translateY(10px); transition:transform 0.4s;
}
.g-item:hover .g-overlay-content { transform:translateY(0); }
.g-overlay-content i    { font-size:32px; margin-bottom:8px; display:block; }
.g-overlay-content span { font-size:13.5px; font-weight:700; }

.g-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--text-muted);
}
.g-placeholder i    { font-size:38px; color:var(--accent); opacity:.45; transition:all 0.4s; }
.g-item:hover .g-placeholder i { opacity:.8; transform:scale(1.2); }
.g-placeholder span { font-size:13px; font-weight:600; }


/* ════════════════════════════
   TESTIMONIALS SECTION
════════════════════════════ */
.test-card {
  background:var(--glass2); border:1px solid var(--border);
  backdrop-filter:blur(14px); border-radius:24px;
  padding:30px 26px; height:100%; transition:all 0.4s;
  position:relative; overflow:hidden;
}
.test-card::before {
  content:'"'; position:absolute; top:-5px; right:20px;
  font-size:120px; color:rgba(0,200,232,0.06);
  font-family:Georgia,serif; line-height:1; pointer-events:none; transition:color 0.4s;
}
.test-card:hover::before { color:rgba(0,200,232,0.12); }
.test-card:hover {
  transform:translateY(-7px);
  border-color:var(--border-accent);
  box-shadow:var(--shadow-accent);
}

.stars      { color:#f4c430; font-size:15px; margin-bottom:12px; letter-spacing:2px; }
.test-text  { font-size:14px; color:var(--text-p); line-height:1.9; font-style:italic; margin-bottom:22px; }
.test-author{ display:flex; align-items:center; gap:12px; }

.author-av {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#fff;
  box-shadow:0 4px 14px rgba(0,200,232,0.3);
}
.author-name  { font-size:14px; font-weight:800; color:var(--text-h); }
.author-since { font-size:12px; color:var(--text-muted); }


/* ════════════════════════════
   BOOKING SECTION
════════════════════════════ */
#booking {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,200,232,0.1), transparent 60%),
    var(--bg-base);
}

.booking-wrap {
  background:var(--glass2); border:1px solid var(--border);
  backdrop-filter:blur(20px); border-radius:28px;
  padding:44px 40px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.booking-wrap::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,200,232,0.08),transparent);
  pointer-events:none;
}

.flabel {
  font-size:13px; font-weight:700; color:var(--text-p);
  margin-bottom:7px; display:block;
}
.finput {
  width:100%; background:var(--input-bg);
  border:1px solid var(--border); border-radius:13px;
  padding:13px 16px; color:var(--text-h);
  font-family:inherit; font-size:14px; outline:none; transition:all 0.35s;
}
.finput:focus {
  border-color:var(--accent);
  background:rgba(0,200,232,0.06);
  box-shadow:0 0 0 4px rgba(0,200,232,0.1);
}
.finput::placeholder { color:var(--text-muted); }
.finput option       { background:var(--bg-2); color:var(--text-h); }

.btn-submit {
  width:100%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none; border-radius:14px; padding:16px;
  color:#fff; font-size:16px; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:0 6px 28px rgba(0,200,232,0.4); transition:all 0.35s;
  display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
}
.btn-submit::before {
  content:''; position:absolute; top:0; right:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:right 0.6s;
}
.btn-submit:hover::before { right:120%; }
.btn-submit:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,200,232,0.55);
}

.info-tile {
  background:var(--glass2); border:1px solid var(--border);
  border-radius:18px; padding:18px 20px;
  display:flex; align-items:center; gap:16px;
  margin-bottom:14px; transition:all 0.3s;
}
.info-tile:hover { border-color:var(--border-accent); transform:translateX(-4px); }

.info-icon-w {
  width:48px; height:48px; border-radius:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 4px 18px rgba(0,200,232,0.28);
}
.info-icon-w i { color:#fff; font-size:19px; }
.info-lbl { font-size:11px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.info-val { font-size:15px; color:var(--text-h); font-weight:700; }


/* ════════════════════════════
   CONTACT SECTION
════════════════════════════ */
.c-card {
  background:var(--glass2); border:1px solid var(--border);
  border-radius:18px; padding:20px 22px;
  display:flex; align-items:center; gap:16px;
  margin-bottom:14px; transition:all 0.35s;
}
.c-card:hover {
  border-color:var(--border-accent);
  transform:translateX(-5px);
  box-shadow:var(--shadow-accent);
}
.c-icon {
  width:52px; height:52px; border-radius:15px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 4px 18px rgba(0,200,232,0.3); transition:all 0.4s;
}
.c-card:hover .c-icon { transform:rotate(8deg) scale(1.1); }
.c-icon i { color:#fff; font-size:21px; }
.c-lbl    { font-size:11px; color:var(--text-muted); font-weight:700; }
.c-val    { font-size:15px; color:var(--text-h); font-weight:700; }

.map-wrap {
  border-radius:22px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow); transition:box-shadow 0.4s;
}
.map-wrap:hover { box-shadow:var(--shadow-accent); }

.map-ph {
  height:360px; background:var(--map-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  cursor:pointer; transition:background 0.3s; position:relative; overflow:hidden;
}
.map-ph::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(0,200,232,0.08),transparent 60%);
  animation:map-pulse 3s ease-in-out infinite;
}
@keyframes map-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
.map-ph:hover { background:rgba(0,200,232,0.1); }
.map-ph i     { font-size:52px; color:var(--accent); animation:pin-bounce .8s ease-in-out infinite alternate; }
@keyframes pin-bounce { from{transform:translateY(0);} to{transform:translateY(-8px);} }
.map-ph span  { font-size:15px; font-weight:700; color:var(--text-p); }
.map-ph small { font-size:12px; color:var(--text-muted); }


/* ════════════════════════════
   FOOTER
════════════════════════════ */
footer {
  background:var(--bg-base);
  border-top:1px solid var(--border);
  padding:70px 0 32px;
  position:relative;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.footer-logo        { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.footer-logo-ico {
  width:58px; height:58px; border-radius:17px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(0,200,232,0.35); transition:all 0.4s;
}
.footer-logo-ico:hover { transform:rotate(10deg) scale(1.1); }
.footer-logo-ico i { color:#fff; font-size:27px; }

.footer-name     { font-size:17px; font-weight:900; color:var(--text-h); }
.footer-name-sub { font-size:12px; color:var(--accent); font-weight:600; }
.footer-desc     { color:var(--text-muted); font-size:14px; line-height:1.8; margin-bottom:22px; max-width:320px; }

/* social icons */
.socials { display:flex; gap:10px; flex-wrap:wrap; }
.soc {
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--glass2); border:1px solid var(--border);
  transition:all 0.35s; cursor:pointer;
}
.soc:hover { transform:translateY(-5px) scale(1.1); }
.soc.fb { color:#1877f2; } .soc.fb:hover { background:#1877f2; color:#fff; border-color:#1877f2; }
.soc.ig { color:#e1306c; } .soc.ig:hover { background:linear-gradient(135deg,#f09433,#dc2743,#bc1888); color:#fff; border-color:#e1306c; }
.soc.wa { color:#25d366; } .soc.wa:hover { background:#25d366; color:#fff; border-color:#25d366; }
.soc.tw { color:#1da1f2; } .soc.tw:hover { background:#1da1f2; color:#fff; border-color:#1da1f2; }
.soc.yt { color:#ff0000; } .soc.yt:hover { background:#ff0000; color:#fff; border-color:#ff0000; }
.soc.sn { color:#fffc00; } .soc.sn:hover { background:#fffc00; color:#000; border-color:#fffc00; }
.soc.tk { color:#ff0050; } .soc.tk:hover { background:#ff0050; color:#fff; border-color:#ff0050; }

.footer-links-title { font-size:15px; font-weight:900; color:var(--text-h); margin-bottom:18px; }
.footer-link {
  display:flex; align-items:center; gap:8px;
  color:var(--text-muted); font-size:14px; padding:5px 0; transition:all 0.3s;
}
.footer-link i { font-size:10px; color:var(--accent); transition:transform 0.3s; }
.footer-link:hover { color:var(--accent); padding-right:6px; }
.footer-link:hover i { transform:translateX(-4px); }

.footer-bottom {
  border-top:1px solid var(--border); margin-top:50px; padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-copy  { color:var(--text-muted); font-size:13px; }
.footer-heart { color:var(--accent); }


/* ════════════════════════════
   KEYFRAMES (shared)
════════════════════════════ */
@keyframes fadeInUp    { from{opacity:0;transform:translateY(35px);}  to{opacity:1;transform:translateY(0);} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(45px);}  to{opacity:1;transform:translateX(0);} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-45px);} to{opacity:1;transform:translateX(0);} }


/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width:991px) {
  .hero-img-wrap { margin-top:40px; }
  .float-card.fc1, .float-card.fc2, .float-card.fc3 { display:none; }
  .gallery-grid  { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gallery-grid .g-item:first-child { grid-row:span 1; }
}

@media (max-width:767px) {
  .booking-wrap { padding:28px 20px; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .hero-title   { font-size:2.1rem; }
}

@media (max-width:480px) {
  .gallery-grid { grid-template-columns:1fr; }
}