/* =====================================================
   TIRTA DUA PUTRI — style.css
   Theme  : Modern Green Water
   Stack  : TailwindCSS CDN + FontAwesome + custom
   ===================================================== */

/* ---------- Root Variables ---------- */
:root {
  --gDarkest : #041c10;
  --gDark    : #0a5c36;
  --gMid     : #1a8a54;
  --gLight   : #2ecc71;
  --gPale    : #d4f5e9;
  --gGlass   : rgba(10,92,54,.12);
  --aqua     : #4ecdc4;
  --aquaD    : #2da68a;
  --white    : #ffffff;
  --tDark    : #132219;
  --tGray    : #4a6a58;
  --shadow   : 0 20px 60px rgba(10,92,54,.15);
  --r        : 14px;
  --rLg      : 22px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Nunito',sans-serif; color:var(--tDark);
       overflow-x:hidden; background:#fff; }
img  { display:block; max-width:100%; }
a    { text-decoration:none; }
ul   { list-style:none; }

/* ---------- Scroll-bar ---------- */
::-webkit-scrollbar          { width:5px; }
::-webkit-scrollbar-track    { background:var(--gPale); }
::-webkit-scrollbar-thumb    { background:var(--gDark); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gMid); }

/* ---------- Scroll-progress bar ---------- */
#scrollBar {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--gMid),var(--aqua));
  width:0%; z-index:9999; transition:width .1s;
  box-shadow:0 0 8px var(--aqua);
}

/* ---------- Container ---------- */
.container { max-width:1140px; margin:0 auto; padding:0 20px; }

/* =====================================================
   TOPBAR
   ===================================================== */
#topbar {
  background:var(--gDarkest);
  padding:8px 20px; font-size:13px; font-weight:700;
  position:relative; z-index:200;
}
.tb-inner {
  max-width:1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
}
.tb-contacts { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.tb-contacts a {
  display:flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.8); transition:color .3s;
}
.tb-contacts a:hover { color:var(--aqua); }
.tb-contacts i { color:var(--aqua); font-size:12px; }
.tb-social { display:flex; gap:6px; }
.tb-social a {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.65); font-size:13px;
  border:1px solid rgba(255,255,255,.15); transition:all .3s;
}
.tb-social a:hover { background:var(--aqua); color:var(--gDarkest); border-color:var(--aqua); }

/* =====================================================
   HEADER / NAVBAR
   ===================================================== */
#header {
  position:sticky; top:0; z-index:999;
  background:#fff; padding:13px 20px;
  box-shadow:0 2px 20px rgba(10,92,54,.1);
  transition:all .35s;
}
#header.scrolled { padding:9px 20px; box-shadow:0 4px 30px rgba(10,92,54,.18); }
.nav-inner {
  max-width:1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo */
.logo { display:flex; align-items:center; gap:11px; }
.logo img {
  width:44px; height:44px; border-radius:10px;
  object-fit:cover; border:2px solid var(--gLight);
}
.logo span {
  font-family:'Playfair Display',serif;
  font-weight:700; font-size:17px; color:var(--gDark);
  letter-spacing:.4px;
}

/* Nav links */
.nav-list { display:flex; align-items:center; gap:32px; }
.nav-link {
  font-weight:800; font-size:13.5px; color:var(--tDark);
  position:relative; padding-bottom:3px; transition:color .3s;
  letter-spacing:.3px;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; border-radius:2px;
  background:var(--gMid); transition:width .3s;
}
.nav-link:hover,.nav-link.active { color:var(--gMid); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }

/* CTA nav button */
.nav-cta {
  background:var(--gDark); color:#fff !important;
  padding:9px 22px; border-radius:30px;
  transition:all .3s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  background:var(--gMid) !important;
  box-shadow:0 8px 22px rgba(10,92,54,.35);
  transform:translateY(-2px);
}

/* Mobile toggle */
#mobile-toggle {
  display:none; background:none; border:none;
  font-size:22px; color:var(--gDark); cursor:pointer;
}

/* Mobile menu */
#mobile-menu {
  display:none; background:#fff; border-top:2px solid var(--gPale);
  padding:6px 0; position:absolute; left:0; right:0; top:100%;
  box-shadow:0 8px 24px rgba(10,92,54,.12);
}
.mob-link {
  display:flex; align-items:center; gap:10px;
  padding:13px 24px; color:var(--tDark); font-weight:700;
  font-size:14.5px; transition:all .25s;
  border-left:3px solid transparent;
}
.mob-link:hover {
  background:var(--gPale); color:var(--gDark);
  border-left-color:var(--gMid);
}
.mob-link i { color:var(--gMid); width:18px; text-align:center; }

/* =====================================================
   HERO SECTION
   ===================================================== */
#hero {
  position:relative; height:100vh; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* Slides */
.hero-slides { position:absolute; inset:0; z-index:0; }
.hslide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease, transform 9s ease;
  transform:scale(1.06);
}
.hslide.active { opacity:1; transform:scale(1); }

/* Overlay */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    145deg,
    rgba(4,28,16,.88) 0%,
    rgba(10,92,54,.62) 55%,
    rgba(4,28,16,.80) 100%
  );
}

/* Particles layer */
#heroParticles {
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.hparticle {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,
    rgba(78,205,196,.55), rgba(78,205,196,.05));
  animation:hpFloat linear infinite;
}
@keyframes hpFloat {
  0%   { transform:translateY(105vh) scale(.3); opacity:0; }
  10%  { opacity:.7; }
  90%  { opacity:.4; }
  100% { transform:translateY(-120px) scale(1.3); opacity:0; }
}

/* Content */
.hero-content {
  position:relative; z-index:3; text-align:center;
  color:#fff; max-width:820px; padding:0 20px;
  animation:hcFadeIn 1s .2s both;
}
@keyframes hcFadeIn {
  from { opacity:0; transform:translateY(36px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(78,205,196,.15);
  border:1px solid rgba(78,205,196,.45);
  color:var(--aqua); padding:8px 22px; border-radius:30px;
  font-size:12px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:26px;
  backdrop-filter:blur(10px);
  animation:badgePulse 3s ease infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(78,205,196,.3); }
  50%      { box-shadow:0 0 0 10px rgba(78,205,196,0); }
}

/* Headline */
.hero-h1 { font-family:'Playfair Display',serif; margin-bottom:20px; line-height:1.18; }
.h1-main {
  display:block; font-size:clamp(34px,6vw,72px);
  font-weight:900; color:#fff;
  animation:lineSlideDown .8s .3s both;
}
.h1-sub {
  display:block; font-size:clamp(18px,3.2vw,38px);
  font-weight:400; font-style:italic; color:var(--aqua);
  animation:lineSlideDown .8s .5s both;
}
@keyframes lineSlideDown {
  from { opacity:0; transform:translateY(-28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Paragraph */
.hero-p {
  font-size:15px; line-height:1.85;
  color:rgba(255,255,255,.85); margin-bottom:36px;
  animation:lineSlideUp .8s .7s both;
}
@keyframes lineSlideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Buttons */
.hero-actions {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  animation:lineSlideUp .8s .9s both;
}
.btn-green {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gMid); color:#fff; padding:14px 32px;
  border-radius:50px; font-weight:800; font-size:14.5px;
  transition:all .3s; box-shadow:0 8px 24px rgba(26,138,84,.4);
}
.btn-green:hover {
  background:var(--gDark); color:#fff;
  transform:translateY(-3px); box-shadow:0 14px 36px rgba(26,138,84,.5);
}
.btn-glass {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,.38); color:#fff;
  padding:14px 32px; border-radius:50px;
  font-weight:800; font-size:14.5px; transition:all .3s;
}
.btn-glass:hover {
  background:#25d366; border-color:#25d366; color:#fff;
  transform:translateY(-3px); box-shadow:0 14px 36px rgba(37,211,102,.45);
}

/* Slider nav */
.slide-nav {
  position:absolute; bottom:90px; left:50%;
  transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:14px;
}
.snav-btn {
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.snav-btn:hover { background:var(--gMid); border-color:var(--gMid); }
.sdots { display:flex; gap:7px; }
.sdot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.38); cursor:pointer; transition:all .3s;
}
.sdot.active { background:var(--aqua); width:22px; border-radius:4px; }

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:34px; left:50%;
  transform:translateX(-50%); z-index:4;
}
.mouse {
  width:24px; height:40px; border:2px solid rgba(255,255,255,.5);
  border-radius:12px; display:flex; justify-content:center;
  padding-top:7px;
  animation:mouseAnim 2s ease-in-out infinite;
}
.mouse-wheel {
  width:4px; height:9px; background:var(--aqua);
  border-radius:2px; animation:wheelScroll 2s ease infinite;
}
@keyframes mouseAnim {
  0%,100% { opacity:.8; } 50% { opacity:.4; }
}
@keyframes wheelScroll {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(14px); opacity:0; }
}

/* Hero wave */
.hero-wave-wrap {
  position:absolute; bottom:0; left:0; width:100%;
  z-index:3; line-height:0; overflow:hidden; height:80px;
}
.hero-wave-svg { width:200%; height:100%; animation:wavePan 10s linear infinite; }
.hw1 { fill:#fff; opacity:.9; }
.hw2 { fill:rgba(255,255,255,.5); }
@keyframes wavePan {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* =====================================================
   ABOUT SECTION
   ===================================================== */
.section-about { padding:100px 0 80px; background:#fff; }
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}

/* Image */
.img-frame { position:relative; }
.about-photo {
  width:90%; border-radius:20px;
  box-shadow:0 30px 80px rgba(10,92,54,.2);
  position:relative; z-index:2;
}
.img-badge {
  position:absolute; bottom:-18px; right:10px;
  background:var(--gDark); color:#fff;
  padding:14px 22px; border-radius:12px; z-index:3;
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:13px;
  box-shadow:0 10px 28px rgba(10,92,54,.4);
}
.img-badge i { color:var(--aqua); font-size:18px; }
.deco-ripple {
  position:absolute; border-radius:50%;
  border:2px solid var(--gLight); z-index:0;
  top:50%; left:45%; transform:translate(-50%,-50%);
  animation:dRipple 4.5s ease-in-out infinite;
}
.r1 { width:90px;  height:90px;  opacity:.35; animation-delay:0s; }
.r2 { width:180px; height:180px; opacity:.22; animation-delay:1.5s; }
.r3 { width:280px; height:280px; opacity:.12; animation-delay:3s; }
@keyframes dRipple {
  0%   { transform:translate(-50%,-50%) scale(.6); opacity:.5; }
  100% { transform:translate(-50%,-50%) scale(1.6); opacity:0; }
}

/* Text */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--gMid); font-weight:800; font-size:12.5px;
  text-transform:uppercase; letter-spacing:2px; margin-bottom:14px;
}
.center-ey { justify-content:center; width:100%; }
.white-ey  { color:rgba(255,255,255,.75); }

.section-h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,3.6vw,42px); font-weight:700;
  color:var(--gDarkest); line-height:1.25; margin-bottom:18px;
}
.section-h2 em { color:var(--gMid); font-style:italic; }
.white-h2 { color:#fff !important; }

.body-text { color:var(--tGray); font-size:15px; line-height:1.88; }

.service-chips { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0; }
.chip {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gPale); color:var(--gDark);
  padding:8px 16px; border-radius:25px;
  font-weight:800; font-size:12.5px; transition:all .3s; cursor:default;
}
.chip:hover { background:var(--gDark); color:#fff; transform:translateY(-2px); }
.chip i { color:var(--gMid); font-size:11px; }
.chip:hover i { color:var(--aqua); }

.stats-row {
  display:flex; align-items:center; gap:28px;
  margin-top:30px; padding-top:24px;
  border-top:2px solid var(--gPale);
}
.stat { text-align:center; }
.stat-n {
  font-family:'Playfair Display',serif;
  font-size:42px; font-weight:900; color:var(--gDark); line-height:1;
}
.stat sup { font-size:22px; vertical-align:super; }
.stat p { font-size:11.5px; color:var(--tGray); font-weight:800;
           text-transform:uppercase; letter-spacing:.9px; margin-top:4px; }
.stat-div { width:1px; height:48px; background:var(--gPale); }

/* =====================================================
   WAVE DIVIDER (About → Water)
   ===================================================== */
.wave-div-wrap {
  background:#fff; line-height:0; overflow:hidden; height:72px;
}
.wave-div-svg {
  width:200%; height:100%;
  animation:wavePan 8s linear infinite;
}
.wd-p1 { fill:var(--gDark); opacity:.9; }
.wd-p2 { fill:var(--gMid);  opacity:.6; }

/* =====================================================
   LAKE / WATER ANIMATION SECTION
   ===================================================== */
.lake-section {
  position:relative; height:340px; overflow:hidden;
  background:var(--gDark);
}
#lakeCanvas {
  position:absolute; inset:0; width:100%; height:100%;
}

/* Bubbles */
.bubbles-wrap { position:absolute; inset:0; pointer-events:none; z-index:2; }
.bbl {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.38), rgba(78,205,196,.06));
  border:1px solid rgba(255,255,255,.25);
  animation:bblRise ease-in infinite;
}
.bbl:nth-child(1){ width:18px; height:18px; left:8%;  animation-duration:7s;  animation-delay:0s; }
.bbl:nth-child(2){ width:11px; height:11px; left:22%; animation-duration:9s;  animation-delay:1.2s; }
.bbl:nth-child(3){ width:28px; height:28px; left:38%; animation-duration:6s;  animation-delay:2.5s; }
.bbl:nth-child(4){ width:14px; height:14px; left:55%; animation-duration:8s;  animation-delay:.6s; }
.bbl:nth-child(5){ width:22px; height:22px; left:68%; animation-duration:5.5s;animation-delay:1.8s; }
.bbl:nth-child(6){ width:9px;  height:9px;  left:80%; animation-duration:7.5s;animation-delay:3.2s; }
.bbl:nth-child(7){ width:16px; height:16px; left:90%; animation-duration:6.5s;animation-delay:.3s; }
.bbl:nth-child(8){ width:12px; height:12px; left:47%; animation-duration:9.5s;animation-delay:4s; }
@keyframes bblRise {
  0%   { bottom:-50px; opacity:0; transform:scale(.5) translateX(0); }
  15%  { opacity:.85; }
  85%  { opacity:.55; }
  100% { bottom:110%; opacity:0; transform:scale(1.2) translateX(25px); }
}

/* Rain drops */
.drops-wrap { position:absolute; top:0; width:100%; pointer-events:none; z-index:2; }
.drp {
  position:absolute; width:5px; height:13px;
  background:rgba(78,205,196,.6);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:drpFall linear infinite;
}
.drp:nth-child(1){ left:12%; animation-duration:2.2s; animation-delay:0s; }
.drp:nth-child(2){ left:30%; animation-duration:2.7s; animation-delay:.8s; }
.drp:nth-child(3){ left:52%; animation-duration:1.9s; animation-delay:.4s; }
.drp:nth-child(4){ left:70%; animation-duration:2.4s; animation-delay:1.1s; }
.drp:nth-child(5){ left:87%; animation-duration:3.0s; animation-delay:.6s; }
@keyframes drpFall {
  0%   { top:-20px; opacity:1; }
  80%  { opacity:.7; }
  100% { top:100%;  opacity:0; }
}

/* Centre text */
.lake-text {
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%;
  text-align:center; color:#fff; padding:0 20px;
}
.lake-icon {
  font-size:52px; color:var(--aqua); margin-bottom:14px;
  animation:iconBob 3s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(78,205,196,.6));
}
@keyframes iconBob {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}
.lake-text h3 {
  font-family:'Playfair Display',serif;
  font-size:clamp(18px,2.8vw,30px); font-weight:700;
  margin-bottom:10px; text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.lake-text p { font-size:14.5px; color:rgba(255,255,255,.78); margin-bottom:20px; }
.btn-order {
  display:inline-flex; align-items:center; gap:8px;
  background:#25d366; color:#fff; padding:12px 28px;
  border-radius:30px; font-weight:800; font-size:14px;
  transition:all .3s; box-shadow:0 8px 22px rgba(37,211,102,.35);
}
.btn-order:hover {
  background:#128c7e; color:#fff;
  transform:translateY(-3px); box-shadow:0 14px 32px rgba(18,140,126,.45);
}

/* =====================================================
   SERVICES / PORTFOLIO
   ===================================================== */
.section-services { padding:100px 0 80px; background:#fff; }
.sec-header { margin-bottom:10px; }
.sec-sub  { font-size:17px; font-weight:800; color:var(--gDark); margin-bottom:8px; }
.sec-desc { color:var(--tGray); font-size:14.5px; margin-bottom:36px; }

/* Filter */
.filter-wrap {
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:40px;
}
.f-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:30px;
  border:2px solid var(--gPale); background:#fff;
  color:var(--tGray); font-weight:800; font-size:13px;
  cursor:pointer; transition:all .3s; font-family:'Nunito',sans-serif;
}
.f-btn:hover { border-color:var(--gMid); color:var(--gMid); transform:translateY(-2px); }
.f-btn.active {
  background:var(--gDark); border-color:var(--gDark); color:#fff;
  box-shadow:0 8px 22px rgba(10,92,54,.3);
}

/* Grid */
.port-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}

.port-card {
  border-radius:var(--r); overflow:hidden;
  box-shadow:0 6px 28px rgba(10,92,54,.1);
  background:#fff; transition:all .4s ease;
}
.port-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(10,92,54,.2);
}
.port-card.pc-hidden { display:none; }

.port-img-wrap { position:relative; overflow:hidden; height:215px; }
.port-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.port-card:hover .port-img-wrap img { transform:scale(1.09); }

.port-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(4,28,16,.75), rgba(26,138,84,.5));
  opacity:0; transition:opacity .4s;
  display:flex; align-items:center; justify-content:center;
}
.port-card:hover .port-overlay { opacity:1; }

.port-zoom {
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.38); color:#fff;
  font-size:19px; display:flex; align-items:center; justify-content:center;
  transition:all .3s; transform:scale(.45);
}
.port-card:hover .port-zoom { transform:scale(1); }
.port-zoom:hover { background:var(--aqua); border-color:var(--aqua); }

.port-info { padding:16px 18px; }
.port-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:var(--gMid);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:7px;
}
.port-info h4 { font-weight:800; font-size:14.5px; color:var(--tDark); line-height:1.3; }

/* =====================================================
   CONTACT SECTION
   ===================================================== */
.section-contact {
  background:linear-gradient(135deg, var(--gDark) 0%, var(--gMid) 100%);
  position:relative; padding-bottom:80px;
}
.ct-wave-top { line-height:0; }
.ct-wave-top svg { width:100%; height:80px; display:block; }
.ct-body { padding-top:20px; }

.ct-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-top:38px;
}
.ct-card {
  background:rgba(255,255,255,.1); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--rLg);
  padding:42px 28px; text-align:center; color:#fff;
  transition:all .35s;
}
.ct-card:hover {
  background:rgba(255,255,255,.2);
  transform:translateY(-7px);
  box-shadow:0 22px 50px rgba(0,0,0,.15);
}
.ct-icon {
  width:68px; height:68px; border-radius:50%; margin:0 auto 18px;
  background:rgba(78,205,196,.18); border:2px solid rgba(78,205,196,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:27px; color:var(--aqua); transition:all .35s;
}
.ct-card:hover .ct-icon {
  background:var(--aqua); border-color:var(--aqua);
  color:#fff; transform:scale(1.1) rotate(8deg);
}
.ct-card h3 {
  font-family:'Playfair Display',serif;
  font-size:19px; font-weight:700; margin-bottom:10px;
}
.ct-card p,.ct-card a {
  color:rgba(255,255,255,.82); font-size:14px; line-height:1.75;
  transition:color .3s;
}
.ct-card a:hover { color:var(--aqua); }

/* =====================================================
   MAP
   ===================================================== */
.map-wrap { line-height:0; }
.map-wrap iframe {
  display:block; width:100%;
  filter:saturate(.8) hue-rotate(8deg);
}

/* =====================================================
   FOOTER
   ===================================================== */
#footer { background:var(--gDarkest); color:#fff; }
.ft-wave { background:var(--gMid); line-height:0; }
.ft-wave svg { width:100%; height:55px; display:block; }
.ft-body { padding:50px 0 28px; }
.ft-inner { text-align:center; margin-bottom:30px; }
.ft-logo {
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.ft-logo img {
  width:48px; height:48px; border-radius:10px;
  object-fit:cover; border:2px solid var(--gMid);
}
.ft-logo span {
  font-family:'Playfair Display',serif;
  font-size:21px; font-weight:700; color:#fff;
}
.ft-tagline { color:rgba(255,255,255,.55); font-size:14px; margin-bottom:8px; }
.ft-area { color:rgba(255,255,255,.4); font-size:13px; margin-bottom:22px; }
.ft-area i { color:var(--gLight); margin-right:4px; }
.ft-social { display:flex; gap:10px; justify-content:center; }
.ft-social a {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65); display:flex; align-items:center;
  justify-content:center; font-size:15px; transition:all .3s;
}
.ft-social a:hover {
  background:var(--gMid); border-color:var(--gMid);
  color:#fff; transform:translateY(-3px);
}
.ft-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:22px; text-align:center;
  color:rgba(255,255,255,.4); font-size:13px;
}
.ft-bottom strong { color:var(--aqua); }

/* =====================================================
   FLOATING BUTTONS
   ===================================================== */
/* WhatsApp */
.wa-btn {
  position:fixed; bottom:88px; right:22px; z-index:998;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:27px; box-shadow:0 8px 24px rgba(37,211,102,.5);
  transition:all .3s;
}
.wa-btn:hover {
  background:#128c7e; color:#fff;
  transform:scale(1.12) translateY(-3px);
  box-shadow:0 14px 36px rgba(18,140,126,.5);
}
.wa-ring {
  position:absolute; inset:0; border-radius:50%;
  background:#25d366; animation:waRing 2.2s ease infinite; z-index:-1;
}
@keyframes waRing {
  0%   { transform:scale(1); opacity:.7; }
  100% { transform:scale(1.9); opacity:0; }
}
.wa-tip {
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--gDarkest); color:#fff;
  padding:7px 14px; border-radius:8px; font-size:12px;
  font-weight:800; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.wa-tip::after {
  content:''; position:absolute; right:-6px; top:50%;
  transform:translateY(-50%);
  border:6px solid transparent; border-left-color:var(--gDarkest);
  border-right:none;
}
.wa-btn:hover .wa-tip { opacity:1; }

/* Back to top */
.btt-btn {
  position:fixed; bottom:22px; right:22px; z-index:998;
  width:46px; height:46px; border-radius:50%;
  background:var(--gDark); color:#fff; border:none; cursor:pointer;
  font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(10,92,54,.4);
  opacity:0; transform:translateY(18px); transition:all .35s;
}
.btt-btn.show { opacity:1; transform:translateY(0); }
.btt-btn:hover { background:var(--gMid); transform:translateY(-3px); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1024px) {
  .about-grid  { grid-template-columns:1fr; gap:50px; }
  .about-photo { width:80%; margin:0 auto; }
  .port-grid   { grid-template-columns:repeat(2,1fr); }
  .ct-cards    { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-list     { display:none; }
  #mobile-toggle{ display:block; }
  #header       { position:sticky; }
  .port-grid    { grid-template-columns:repeat(2,1fr); }
  .ct-cards     { grid-template-columns:1fr; }
  .stats-row    { gap:16px; flex-wrap:wrap; justify-content:center; }
  .section-about{ padding:70px 0 60px; }
  .section-services { padding:70px 0 60px; }
  .hero-actions { flex-direction:column; align-items:center; }
  .tb-contacts  { flex-direction:column; gap:5px; align-items:flex-start; }
}
@media (max-width:480px) {
  .port-grid { grid-template-columns:1fr; }
  .filter-wrap { justify-content:flex-start; overflow-x:auto; flex-nowrap:nowrap; }
  .lake-section { height:280px; }
}