/**
* Template Name: Gp
* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
* Updated: Oct 2025 (custom merge Services + Portfolio)
* Author: BootstrapMade.com + Custom
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif; /* dipakai juga untuk Services */
}

/* Global Colors */
:root {
  --background-color: #fff;
  --default-color: #444444;
  --heading-color: #ffffff;
  --accent-color: #3E1E04;
  --surface-color: #ffffff;
  --contrast-color: #312f2f;
}

/* Nav Menu Colors */
:root {
  --nav-color: rgba(255, 255, 255, 0.905);
  --nav-hover-color: #ffc451;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #212529;
  --nav-dropdown-hover-color: #ffc451;
}

/* Color Presets */
.light-background { --background-color: #f9f9f9; --surface-color: #ffffff; }
.dark-background  { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #252525; --contrast-color: #2a2727; }

/* Smooth scroll */
:root { scroll-behavior: smooth; }

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); }
a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
p { color: var(--surface-color); }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { color: var(--heading-color); font-family: var(--heading-font); }

/* Reusable button (dipakai Services/Portfolio) */
.btn-outline-gold{
  --gold-border:#DDAB35; --gold-text:#91660C; --gold-hover:#91660C; --gold-active:#553d0f;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; font-weight:600; font-size:16px; line-height:1;
  color:var(--gold-text) !important; background:transparent !important;
  border:1.5px solid var(--gold-border) !important; text-decoration:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-outline-gold:hover,.btn-outline-gold:focus-visible{ background:var(--gold-hover) !important; border-color:var(--gold-hover) !important; color:#fff !important; box-shadow:0 0 0 3px rgba(145,102,12,.18); }
.btn-outline-gold:active{ background:var(--gold-active) !important; border-color:var(--gold-active) !important; color:#fff !important; }

/* PHP Email Form Messages */
.php-email-form .error-message{ display:none; background:#df1529; color:#fff; text-align:left; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .sent-message{ display:none; color:#fff; background:#059652; text-align:center; padding:15px; margin-bottom:24px; font-weight:600; }

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.8);
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}
.header .logo{ line-height:1; }
.header .logo img{ max-height:36px; margin-right:8px; }
.header .logo h1{ font-size:32px; margin:0; font-weight:700; color:var(--heading-color); }
.header .logo span{ color:var(--accent-color); font-size:32px; }
.header .btn-getstarted,.header .btn-getstarted:focus{
  color:var(--contrast-color); font-size:14px; padding:8px 30px; margin:0 0 0 30px; border-radius:4px; transition:.3s; border:2px solid var(--accent-color);
}
.header .btn-getstarted:hover,.header .btn-getstarted:focus:hover{ color:var(--default-color); background:var(--accent-color); }
@media (max-width:1200px){
  .header .logo{ order:1; }
  .header .btn-getstarted{ order:2; margin:0 15px 0 0; padding:6px 15px; }
  .header .navmenu{ order:3; }
}
.scrolled .header{ box-shadow:0 0 18px rgba(0,0,0,.1); }
.index-page .header{}
.index-page.scrolled .header{ --background-color: rgba(0,0,0,0.8); }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop */
@media (min-width:1200px){
  .navmenu{ padding:0; }
  .navmenu ul{ margin:0; padding:0; display:flex; list-style:none; align-items:center; }
  .navmenu li{ position:relative; }
  .navmenu a,.navmenu a:focus{
    color:var(--nav-color); padding:18px 15px; font-size:16px; font-family:var(--nav-font); font-weight:400;
    display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition:.3s;
  }
  .sitename{ letter-spacing:.01em; }
  .navmenu a i,.navmenu a:focus i{ font-size:12px; line-height:0; margin-left:5px; transition:.3s; }
  .navmenu li:last-child a{ padding-right:0; }
  .navmenu li:hover>a,.navmenu .active,.navmenu .active:focus{ color:var(--nav-hover-color); }

  .navmenu .dropdown ul{
    margin:0; padding:10px 0; background:var(--nav-dropdown-background-color);
    display:block; position:absolute; visibility:hidden; left:14px; top:130%;
    opacity:0; transition:.3s; border-radius:0; z-index:99; box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .navmenu .dropdown ul li{ min-width:200px; }
  .navmenu .dropdown ul a{ padding:10px 20px; font-size:15px; text-transform:none; color:var(--nav-dropdown-color); }
  .navmenu .dropdown ul a i{ font-size:12px; }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a{ background-color:var(--nav-dropdown-hover-color); }
  .navmenu .dropdown:hover>ul{ opacity:1; top:100%; visibility:visible; }
  .navmenu .dropdown .dropdown ul{ top:0; left:-90%; visibility:hidden; }
  .navmenu .dropdown .dropdown:hover>ul{ opacity:1; top:0; left:-100%; visibility:visible; }
}
/* Mobile */
@media (max-width:1199px){
  .mobile-nav-toggle{ color:var(--nav-color); font-size:28px; line-height:0; margin-right:10px; cursor:pointer; transition: color .3s; }
  .navmenu{ padding:0; z-index:9997; }
  .navmenu ul{
    display:none; list-style:none; position:absolute; inset:60px 20px 20px 20px;
    padding:10px 0; margin:0; border-radius:6px; background:var(--nav-mobile-background-color);
    overflow-y:auto; transition:.3s; z-index:9998; box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .navmenu a,.navmenu a:focus{
    color:var(--nav-dropdown-color); padding:10px 20px; font-family:var(--nav-font);
    font-size:17px; font-weight:500; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition:.3s;
  }
  .navmenu a i,.navmenu a:focus i{
    font-size:12px; line-height:0; margin-left:5px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%;
    transition:.3s; background:color-mix(in srgb, var(--accent-color), white 90%);
  }
  .navmenu a i:hover,.navmenu a:focus i:hover{ background:color-mix(in srgb, var(--accent-color), white 90%); }
  .navmenu a:hover,.navmenu .active,.navmenu .active:focus{ background:var(--nav-dropdown-hover-color); }
  .navmenu .active i,.navmenu .active:focus i{ transform:rotate(180deg); }
  .navmenu .dropdown ul{
    position:static; display:none; z-index:99; padding:10px 0; margin:10px 20px; background:var(--nav-dropdown-background-color);
    border:1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow:none; transition:all .5s ease-in-out;
  }
  .navmenu .dropdown ul ul{ background-color: rgba(33,37,41,0.1); }
  .navmenu .dropdown>.dropdown-active{ display:block; background-color: rgba(33,37,41,0.03); }
  .mobile-nav-active{ overflow:hidden; }
  .mobile-nav-active .mobile-nav-toggle{ color:#fff; position:absolute; font-size:32px; top:15px; right:15px; margin-right:0; z-index:9999; }
  .mobile-nav-active .navmenu{ position:fixed; overflow:hidden; inset:0; background:rgba(33,37,41,0.8); transition:.3s; }
  .mobile-nav-active .navmenu>ul{ display:block; }
}

/* ================= Footer ================= */
#footer{
  --bg:#000000; --text:#e9e9e9; --muted:#bfbfbf; --gold:#DDAB35; --gold-deep:#91660C;
  background:#000; color:var(--text); font-size:14px;
}
#footer .footer-top{ background:var(--bg); padding:48px 0 36px; }
#footer .sitename{ font-size:28px; font-weight:800; color:#fff; letter-spacing:.5px; }
#footer .about-text{ color:#dcdcdc; max-width:26rem; }
#footer .social-inline,#footer .social-links{ display:flex; gap:14px; align-items:center; }
#footer .social-inline a,#footer .social-links a{ color:var(--gold); font-size:20px; line-height:1; transition: transform .15s ease, color .15s ease; }
#footer .social-inline a:hover,#footer .social-links a:hover{ transform: translateY(-2px); color:#f1c85a; }
#footer h4{ color:#fff; font-weight:700; font-size:18px; margin:0 0 12px; }
#footer .footer-links ul{ list-style:none; padding:0; margin:0; }
#footer .footer-links li{ display:flex; gap:8px; align-items:center; padding:6px 0; }
#footer .footer-links li i{ color: var(--gold); font-size:12px; }
#footer .footer-links a,#footer .contact-list a,#footer .footer-legal a,#footer .footer-contact a,#footer .credits a{
  color:#ffffff !important; text-decoration:none; transition: color .15s ease;
}
#footer .footer-links a:hover,#footer .footer-links a:focus,#footer .footer-links a:active,
#footer .contact-list a:hover,#footer .footer-legal a:hover,#footer .footer-contact a:hover,#footer .credits a:hover{ color:var(--gold) !important; }
#footer .contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
#footer .contact-list li{ display:flex; gap:10px; align-items:flex-start; }
#footer .contact-list i{ color: var(--gold); margin-top:2px; }
#footer .footer-divider{ height:1px; background: rgba(255,255,255,.2); }
#footer .footer-bottom{ background:var(--bg); padding:14px 0 22px; text-align:center; }
#footer .footer-bottom .sitename{ color: var(--gold); font-weight:800; font-size:16px; }
#footer .footer-legal{ list-style:none; display:flex; gap:24px; padding:0; margin:0; }
@media (min-width:768px){ #footer .footer-about{ padding-right:24px; } }
@media (max-width:575px){ #footer .social-inline a{ font-size:16px; } #footer .footer-legal{ gap:14px; flex-wrap:wrap; justify-content:center; } }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
/* #preloader{ position:fixed; inset:0; z-index:999999; overflow:hidden; background:#FDFAF6; transition: all .6s ease-out; }
#preloader:before{
  content:""; position:fixed; top:calc(50% - 30px); left:calc(50% - 30px);
  border:6px solid #fff; border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius:50%; width:60px; height:60px; animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader{ 0%{ transform:rotate(0deg);} 100%{ transform:rotate(360deg);} } */

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top{ position:fixed; visibility:hidden; opacity:0; right:15px; bottom:15px; z-index:99999; background:var(--accent-color); width:40px; height:40px; border-radius:4px; transition: all .4s; }
.scroll-top i{ font-size:24px; color:var(--contrast-color); line-height:0; }
.scroll-top:hover{ background: color-mix(in srgb, var(--accent-color), transparent 20%); color:var(--contrast-color); }
.scroll-top.active{ visibility:visible; opacity:1; }

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width:768px){ [data-aos-delay]{ transition-delay:0 !important; } }

/*--------------------------------------------------------------
# Page Titles
--------------------------------------------------------------*/
.page-title{ color:var(--default-color); background:var(--background-color); position:relative; }
.page-title .heading{ padding:80px 0; border-top:1px solid color-mix(in srgb, var(--accent-color)); }
.page-title .heading h1{ color:var(--accent-color); font-size:38px; font-weight:700; letter-spacing:.02em; }
.page-title .heading p{ color:var(--accent-color); }
.page-title nav{ background: color-mix(in srgb, var(--accent-color), transparent 95%); padding:20px 0; }
.page-title nav ol{ display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:16px; font-weight:400; }
.page-title nav ol li+li{ padding-left:10px; color:var(--accent-color); }
.page-title nav ol li a{ color:#444; }
.page-title nav ol li+li::before{ content:"/"; display:inline-block; padding-right:10px; color:var(--default-color); }

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,.section{ color:var(--default-color); background:var(--background-color); padding:60px 0; scroll-margin-top:80px; overflow:clip; }
@media (max-width:1199px){ section,.section{ scroll-margin-top:58px; } }

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title{ padding-bottom:60px; position:relative; }
.section-title h2{ font-size:14px; font-weight:500; padding:0; line-height:1px; margin:0; letter-spacing:1.5px; text-transform:uppercase; color:#3E1E04; position:relative; }
.section-title h2::after{ content:""; width:120px; height:1px; display:inline-block; background:var(--accent-color); margin:4px 10px; }
.section-title p{ color:#3E1E04; margin:0; font-size:36px; font-weight:700; text-transform:uppercase; }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero{ width:100%; min-height:100vh; position:relative; padding:120px 0 80px; display:flex; align-items:center; justify-content:center; }
.hero img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero:before{ content:""; background: color-mix(in srgb, var(--background-color), transparent 30%); position:absolute; inset:0; z-index:2; }
.hero .container{ position:relative; z-index:3; }
.hero h2{ margin:0; font-size:56px; font-weight:700; font-family:var(--nav-font); }
.hero h2 span{ background: radial-gradient(circle, #DDAB35, #91660C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent; }
.hero p{ margin:10px 0 0 0; font-size:24px; color: color-mix(in srgb, var(--default-color), transparent 30%); }
.hero .icon-box{ padding:30px 20px; transition:ease-in-out .3s; border:1px solid color-mix(in srgb, var(--default-color), transparent 70%); height:100%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero .icon-box i{ font-size:32px; line-height:1; color:#DDAB35; }
.hero .icon-box h3{ font-weight:700; margin:10px 0 0; padding:0; line-height:1; font-size:20px; line-height:26px; }
.hero .icon-box h3 a{ color: color-mix(in srgb, var(--default-color), transparent 20%); transition:.3s; }
.hero .icon-box:hover{ border-color:#DDAB35; }
.hero .icon-box:hover h3 a{ color:#DDAB35; }
@media (max-width:768px){ .hero h2{ font-size:32px; } .hero p{ font-size:18px; } }

/* --------------------------------------------------------------
# About (Pilates)
--------------------------------------------------------------*/
.about-pilates{ --brand-brown:#91660C; --brand-gold:#DDAB35; --ink:#3E1E04; --card-w:clamp(220px,28%,390px); --card-h:70px; }
#about.about.section{ padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(40px,6vw,80px); }
#about.about.section + footer,#about.about.section + .footer{ margin-top:0 !important; }
#about .container > :last-child{ margin-bottom:0 !important; }
#about .row{ margin-bottom:0 !important; }
.about-pilates .about-copy .about-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:16px; color:var(--brand-brown); margin-bottom:8px; }
.about-pilates .about-copy .about-eyebrow::after{ content:""; width:120px; height:2px; background:#c8b085; border-radius:2px; }
.about-pilates .about-title{ font-size:38px; line-height:1.2; font-weight:800; color:var(--ink); margin:8px 0 16px; }
.about-pilates .about-title span{ color:var(--ink); }
.about-pilates .about-lead{ color:var(--ink); opacity:.9; margin-bottom:18px; font-size:14px; line-height:1.6; }
.about-pilates .about-bullets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; list-style:none; padding:0; margin:14px 0 24px; }
.about-pilates .about-bullets li{ color:var(--ink); font-size:14px; display:flex; align-items:center; gap:10px; }
.about-pilates .about-bullets i{ color:var(--brand-brown); font-size:18px; }
.about-pilates .about-cta{ display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:6px; background:linear-gradient(90deg,var(--brand-gold),var(--brand-brown)); color:#fff; font-weight:700; box-shadow:0 6px 16px rgba(145,102,12,.25); transition:transform .2s ease; }
.about-pilates .about-cta:hover{ transform:translateY(-1px); }
.about-pilates .col-lg-6:last-child{ display:flex; justify-content:center; position:relative; z-index:1; }
.about-pilates .about-visual{ position:relative; isolation:isolate; width:min(720px,100%); min-height:560px; margin-inline:auto; margin-top:clamp(16px,4vw,72px); overflow:visible; }
.about-pilates .main-photo{ position:absolute; right:0; top:0; z-index:1; width:100%; height:82%; }
.about-pilates .main-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.about-pilates .main-photo .fg-badge{ position:absolute; z-index:60; left:-35px; bottom:40px; background:#8A6A2B; color:#fff; padding:6px 65px 6px 12px; line-height:1.1; border-radius:5px; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.about-pilates .main-photo .fg-badge strong{ font-size:37px; font-weight:800; display:block; letter-spacing:.5px; }
.about-pilates .main-photo .fg-badge span{ font-size:13px; opacity:.95; }
.about-pilates .feature-card{ position:absolute; right:-20px; z-index:50; width:var(--card-w); height:var(--card-h); display:flex; align-items:center; gap:12px; padding:12px 18px; background:#fff; border-radius:5px; transform:translateX(20px); transition:transform .2s ease, box-shadow .2s ease; }
.about-pilates .feature-card:hover{ transform:translateX(0); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.about-pilates .feature-card img{ width:28px; height:28px; flex:0 0 28px; object-fit:contain; }
.about-pilates .feature-card .fc-title{ font-size:15px; font-weight:700; color:#3f2f15; line-height:1.2; }
.about-pilates .feature-card .fc-sub{ font-size:12px; color:#6b6b6b; line-height:1.25; }
.about-pilates .feature-card.fc-1{ top:22%; }
.about-pilates .feature-card.fc-2{ top:calc(22% + var(--card-h) + 30px); }
.about-pilates .feature-card.fc-3{ top:calc(22% + (var(--card-h) + 30px) * 2); }
@media (min-width:1200px){ .about-pilates .about-visual{ width:min(780px,100%);} .about-pilates .main-photo{ width:100%; height:84%; } }
@media (max-width:1199.98px){
  .about-pilates{ --card-w: clamp(260px,48%,480px); --card-h:78px; }
  .about-pilates .about-visual{ min-height:540px; }
  .about-pilates .feature-card.fc-1{ top:18%; }
  .about-pilates .feature-card.fc-2{ top:calc(18% + var(--card-h) + 10px); }
  .about-pilates .feature-card.fc-3{ top:calc(18% + (var(--card-h) + 10px) * 2); }
}
@media (max-width:991.98px){
  .about-pilates .about-title{ font-size:32px; }
  .about-pilates .about-visual{ width:min(720px,100%); min-height:unset; padding-bottom:0; margin-top:24px; }
  .about-pilates .main-photo{ position:relative; right:auto; width:100%; height:auto; aspect-ratio: 4/3; }
  .about-pilates .main-photo img{ height:100%; }
  .about-pilates .main-photo .fg-badge{ left:8px; bottom:8px; padding:4px 12px 6px; border-radius:10px; }
  .about-pilates .main-photo .fg-badge strong{ font-size:32px; }
  .about-pilates .main-photo .fg-badge span{ font-size:12px; }
  .about-pilates .feature-card{ position:static; right:auto; top:auto; width:clamp(240px,92%,520px); height:auto; min-height:var(--card-h); margin:10px auto 0; border-radius:16px; z-index:auto; }
}
@media (max-width:575.98px){ .about-pilates .about-bullets{ grid-template-columns:1fr; } .about-pilates .feature-card{ width:94%; padding:12px 14px; gap:10px; } }

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .swiper-slide img{ opacity:.5; transition:.3s; filter:grayscale(100); }
.clients .swiper-slide img:hover{ filter:none; opacity:1; }
.clients .swiper-wrapper{ height:auto; }
.clients .swiper-pagination{ margin-top:20px; position:relative; }
.clients .swiper-pagination .swiper-pagination-bullet{ width:12px; height:12px; opacity:1; background: color-mix(in srgb, var(--default-color), transparent 80%); }
.clients .swiper-pagination .swiper-pagination-bullet-active{ background:var(--accent-color); }

/* -------------------------------------------------------------
# SERVICES (merged from services/index.blade.php)
------------------------------------------------------------- */
/* Pakai Poppins untuk seluruh section services */
.services, .services * { font-family: var(--nav-font); }
.services{ --gold-1:#DDAB35; --gold-2:#91660C; }

/* Card */
.services .service-item{
  position:relative; overflow:hidden; background:#fff; text-align:center;
  border:1px solid color-mix(in srgb, #000, transparent 88%);
  border-radius:14px; padding:80px 24px; height:100%; min-height:360px;
  transition:all .35s ease-in-out;
}
.services .service-content{ position:relative; z-index:2; }

/* Background image layer */
.services .service-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity .35s ease, transform .45s ease;
}
.services .service-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(145,102,12,.58), rgba(221,171,53,.42));
}

/* Background sources (NEW class names) */
.services .bg-flex    { background-image:url("/assets/img/services/cardio_bast.png"); }
.services .bg-posture { background-image:url("/assets/img/services/strength.png"); }
.services .bg-core    { background-image:url("/assets/img/services/fatburn.png"); }
.services .bg-balance { background-image:url("/assets/img/About/stressrelief.jpg"); }

/* Backward-compatible aliases (OLD class names) */
.services .bg-cardio   { background-image:url("/assets/img/services/cardio_bast.png"); }
.services .bg-strength { background-image:url("/assets/img/services/strength.png"); }
.services .bg-fatburn  { background-image:url("/assets/img/services/fatburn.png"); }

/* Icon PNG (NEW names) */
.services .service-item .icon{
  width:72px; height:72px; margin:0 auto 20px;
  background:center / contain no-repeat var(--icon-src);
  transition:.3s;
}
.services .icon-flex    { --icon-src:url("/assets/img/About/flexibility_gold.png"); }
.services .icon-posture { --icon-src:url("/assets/img/About/postur_gold.png"); }
.services .icon-core    { --icon-src:url("/assets/img/About/core_gold.png"); }
.services .icon-balance { --icon-src:url("/assets/img/About/stresrelief_gold.png"); }

/* Backward-compatible aliases (OLD icon names) */
.services .icon-cardiology   { --icon-src:url("/assets/img/About/flexibility_gold.png"); }
.services .icon-weightlifting{ --icon-src:url("/assets/img/About/postur_gold.png"); }
.services .icon-fire         { --icon-src:url("/assets/img/About/core_gold.png"); }

/* Title & text */
.services .service-item h3{ font-weight:800; margin:12px 0 14px; font-size:24px; line-height:1.25; color:#111 !important; transition:.3s; }
.services .service-item p{ line-height:26px; font-size:16px; margin-bottom:0; color:#4a4a4a !important; transition:.3s; }

/* Hover states */
.services .service-item:hover{ box-shadow:0 12px 35px rgba(0,0,0,.12); transform:translateY(-10px); border-color:transparent; }
.services .service-item:hover .service-bg{ opacity:1; transform:scale(1); }
/* swap icon -> white on hover (NEW) */
.services .service-item:hover .icon-flex    { --icon-src:url("/assets/img/About/flexibility_putih.png"); }
.services .service-item:hover .icon-posture { --icon-src:url("/assets/img/About/postur_putih.png"); }
.services .service-item:hover .icon-core    { --icon-src:url("/assets/img/About/core_putih.png"); }
.services .service-item:hover .icon-balance { --icon-src:url("/assets/img/About/stresrelief_putih.png"); }
/* swap icon -> white on hover (OLD aliases) */
.services .service-item:hover .icon-cardiology   { --icon-src:url("/assets/img/About/flexibility_putih.png"); }
.services .service-item:hover .icon-weightlifting{ --icon-src:url("/assets/img/About/postur_putih.png"); }
.services .service-item:hover .icon-fire         { --icon-src:url("/assets/img/About/core_putih.png"); }
/* text to white when bg shows */
.services .service-item:hover h3,.services .service-item:hover p{ color:#fff !important; }

/* disable stretched link inside services cards (if any) */
#services .stretched-link{ pointer-events:none; cursor:default; }
#services .stretched-link:focus{ outline:0; }

/* Responsive tweaks */
@media (max-width:575px){
  .services .service-item{ padding:56px 18px; min-height:320px; }
  .services .service-item h3{ font-size:22px; }
  .services .service-item p{ font-size:14px; line-height:22px; }
}

/*--------------------------------------------------------------
# Call To Action
--------------------------------------------------------------*/
.call-to-action{ padding:80px 0; position:relative; clip-path: inset(0); }
.call-to-action img{ position:fixed; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; z-index:1; }
.call-to-action:before{ content:""; background: color-mix(in srgb, var(--background-color), transparent 50%); position:absolute; inset:0; z-index:2; }
.call-to-action .container{ position:relative; z-index:3; }
.call-to-action h3{ font-size:28px; font-weight:700; color:var(--default-color); }
.call-to-action p{ color:var(--default-color); }
.call-to-action .cta-btn{
  font-family:var(--heading-font); font-weight:500; font-size:16px; letter-spacing:1px;
  display:inline-block; padding:12px 40px; border-radius:5px; transition:.5s; margin:10px;
  border:2px solid var(--default-color); color:var(--default-color);
}
.call-to-action .cta-btn:hover{ background:var(--accent-color); color:var(--background-color); border:2px solid var(--accent-color); }
.custom-btn{ background:#3E1E04; color:#fff; border-radius:30px; font-weight:600; border:none; transition: background-color .3s ease, color .3s ease; }
.custom-btn:hover{ background:#d16d1c; color:#fff; }

/* ============================================================
   PORTFOLIO / FACILITY (Masonry + Filters)
   ============================================================ */
#portfolio{ --gold:#DDAB35; --brown:#91660C; --brown-dark:#6f4b07; --card-radius:8px; }

/* Heading (optional helpers) */
.facility-heading .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.08em; color:#7b622a; }
.facility-heading .eyebrow::after{ content:""; width:90px; height:2px; background:#c7aa64; border-radius:2px; }
.facility-heading h2{ margin:6px 0 0; font-weight:900; line-height:1.1; font-size:34px; letter-spacing:.01em; color:#6e4f10; text-transform:uppercase; }
@media (max-width:575.98px){ .facility-heading h2{ font-size:26px; } }

/* Items */
.portfolio .portfolio-item{ position:relative; overflow:hidden; border-radius:var(--card-radius); isolation:isolate; background:transparent; line-height:0; }
.portfolio .portfolio-item img{ display:block; width:100%; height:auto; border-radius:inherit; vertical-align:middle; transition:transform .45s ease, filter .45s ease; }

/* Overlay info */
.portfolio .portfolio-item .portfolio-info{
  position:absolute; left:0; right:0; bottom:0; top:auto;
  padding:20px 24px 26px; border-bottom-left-radius:inherit; border-bottom-right-radius:inherit;
  background:linear-gradient(180deg, rgba(145,102,12,0) 0%, rgba(145,102,12,.70) 70%, rgba(145,102,12,1) 100%) !important;
  color:#fff; display:flex; flex-direction:column; gap:6px; text-align:left; opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease; z-index:2; pointer-events:none;
}
.portfolio .portfolio-item .portfolio-info h4{ margin:0; font-size:22px; line-height:1.25; font-weight:800; color:#fff; }
.portfolio .portfolio-item .portfolio-info p{ margin:2px 56px 0 0; font-size:14px; line-height:1.45; color:#fff; }

/* Zoom button */
.portfolio .portfolio-item .preview-link{
  position:absolute; right:16px; bottom:18px; width:46px; height:46px; border-radius:999px; display:grid; place-items:center;
  background:rgba(0,0,0,.25) !important; border:2px solid rgba(255,255,255,.9) !important;
  padding:0; pointer-events:auto; z-index:3; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.portfolio .portfolio-item .preview-link i{ font-size:22px; color:#fff !important; line-height:1; }
.portfolio .portfolio-item .preview-link:hover,.portfolio .portfolio-item .preview-link:focus-visible{ transform:translateY(-1px) scale(1.04); filter:brightness(1.05); box-shadow:0 12px 26px rgba(0,0,0,.34); }

/* Hover */
.portfolio .portfolio-item:hover img{ transform:scale(1.02); filter:brightness(.92) sepia(.05) hue-rotate(-10deg) saturate(1.1); }
.portfolio .portfolio-item:hover .portfolio-info{ opacity:1; transform:translateY(0); }

/* Accessibility */
.portfolio .portfolio-item a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45) inset; border-radius:inherit; }

/* Filters */
#portfolio .isotope-layout{ text-align:center; }
#portfolio .portfolio-filters{
  display:inline-flex; gap:40px; align-items:center;
  margin:0 auto 28px; padding:12px 24px; background:#f6f1e6;
  border-radius:9999px; list-style:none; max-width:max-content;
}
#portfolio .portfolio-filters li{
  padding:12px 22px !important; border-radius:9999px; background:transparent; color:#7a6230;
  font-weight:600; cursor:pointer; transition:all .25s ease;
}
#portfolio .portfolio-filters li:hover{ color:#af8626; transform:translateY(-1px); }
#portfolio .portfolio-filters li.filter-active{ color:#fff !important; background:linear-gradient(135deg,#e2c266,#b0841e) !important; box-shadow:0 4px 12px rgba(0,0,0,.2); }

/* Mobile: filters full-width (sejajar foto) */
@media (max-width:575.98px){
  section.portfolio .filters-wrap{ width:100% !important; margin:0 0 14px 0 !important; padding:0 !important; }
  section.portfolio .filters-wrap > ul.portfolio-filters{
    width:100% !important; max-width:none !important; box-sizing:border-box !important;
    display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:10px 8px !important;
    margin:0 !important; padding:10px !important; border-radius:16px !important;
    background:#F6F1E6 !important; border:1px solid #F6F1E6 !important; box-shadow:0 6px 16px rgba(16,24,40,.06) !important;
    overflow:visible !important; white-space:normal !important;
  }
  section.portfolio .filters-wrap > ul.portfolio-filters li{
    width:100% !important; flex:unset !important; padding:12px 10px !important; font-size:13px !important; font-weight:600 !important; line-height:1 !important;
    text-align:center !important; color:#374151 !important; background:#f9fafb !important; border:1px solid #eef2f7 !important; border-radius:999px !important;
    transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease !important;
  }
  section.portfolio .filters-wrap > ul.portfolio-filters li:active{ transform:scale(.98) !important; }
  section.portfolio .filters-wrap > ul.portfolio-filters li:hover{ background:#f3f4f6 !important; }
  section.portfolio .filters-wrap > ul.portfolio-filters .filter-active{ background:linear-gradient(135deg, var(--gold), var(--brown)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(145,102,12,.25) !important; }
}
/* Very small phones: 2 columns */
@media (max-width:359.98px){ section.portfolio .filters-wrap > ul.portfolio-filters{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }

/* Special tall card */
.grid-sizer{ visibility:hidden; }
@media (min-width:992px){
  .isotope-container > .portfolio-item.tall-2x{ height:545px !important; }
  .isotope-container > .portfolio-item.tall-2x img{ width:100%; height:100% !important; object-fit:cover; object-position:center; display:block; }
}
@media (max-width:991.98px){
  .isotope-container > .portfolio-item.tall-2x{ height:auto !important; }
  .isotope-container > .portfolio-item.tall-2x img{ height:auto !important; object-fit:contain; }
}

/* Small spacing */
@media (max-width:575.98px){
  .portfolio .section-title{ padding-top:16px !important; }
  .portfolio .isotope-container{ row-gap:16px !important; }
  .portfolio .portfolio-item .portfolio-info{ padding:14px 16px 18px; }
  .portfolio .portfolio-item .portfolio-info h4{ font-size:18px; }
  .portfolio .portfolio-item .preview-link{ width:40px; height:40px; right:12px; bottom:14px; }
  .portfolio .portfolio-item .preview-link i{ font-size:20px; }
}

/*--------------------------------------------------------------
# Stats
--------------------------------------------------------------*/
.stats .stats-item{ padding:10px; }
.stats .stats-item i{ font-size:44px; color:var(--accent-color); line-height:0; margin-right:15px; }
.stats .stats-item .purecounter{ color:var(--heading-color); font-size:40px; display:block; font-weight:700; line-height:40px; }
.stats .stats-item p{ color: color-mix(in srgb, var(--default-color), transparent 40%); padding:15px 0 0 0; margin:0; font-family:var(--heading-font); font-size:14px; }

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials{ padding:80px 0; position:relative; }
.testimonials .testimonials-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.testimonials::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.65); z-index:2; }
.testimonials .container{ position:relative; z-index:3; }
#testimonials{ --heading-color:#fff; --default-color:#fff; }
#testimonials .section-title::before,#testimonials .section-title::after,#testimonials .section-title h2::before,#testimonials .section-title h2::after{ content:none !important; display:none !important; }
#testimonials .section-title{ display:block !important; text-align:center !important; color:#fff !important; opacity:1 !important; mix-blend-mode:normal !important; }
#testimonials .section-title .title-clients,#testimonials .section-title h2.title-clients{
  color:#fff !important; font-weight:800; letter-spacing:.2px; margin:0 0 28px; text-transform:none; position:relative; z-index:3;
  text-shadow:0 2px 6px rgba(0,0,0,.45); font-size:clamp(24px,3vw,40px);
}
#testimonials .section-title .title-accent{ display:none !important; }
#testimonials .title-clients .u-accent{ position:relative; display:inline-block; padding-bottom:20px; }
#testimonials .title-clients .u-accent::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:6px; background:#DDAB35; border-radius:999px; }
.testimonial-card{ max-width:900px; margin:0 auto; background:#2e2e2e; color:#fff; border-radius:18px; padding:28px 32px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
@media (min-width:992px){ .testimonial-card{ padding:36px 44px; } }
.t-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.avatar{ width:48px; height:48px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,.25); }
.name{ font-size:16px; font-weight:700; margin:0; color:#fff; }
.role{ font-size:13px; margin:0; color:rgba(255,255,255,.65); }
.quote{ margin:6px 0 14px; line-height:1.6; color:rgba(255,255,255,.9); }
.stars i{ color:#ffc107; margin-right:2px; }
.testimonials .swiper-wrapper{ height:auto; }
.testimonials .swiper-pagination{ margin-top:18px; position:relative; }
.testimonials .swiper-pagination .swiper-pagination-bullet{ width:10px; height:10px; background:rgba(255,255,255,.45); opacity:.7; }
.testimonials .swiper-pagination .swiper-pagination-bullet-active{ background:#DDAB35; opacity:1; }

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .team-member{ background:var(--surface-color); overflow:hidden; border-radius:5px; box-shadow:0 2px 15px rgba(0,0,0,.1); height:100%; }
.team .team-member .member-img{ position:relative; overflow:hidden; }
.team .team-member .social{ position:absolute; left:0; bottom:30px; right:0; opacity:0; transition:ease-in-out .3s; text-align:center; }
.team .team-member .social a{
  background: color-mix(in srgb, var(--contrast-color), transparent 25%); color: color-mix(in srgb, #ffffff, transparent 20%);
  margin:0 3px; border-radius:4px; width:36px; height:36px; transition:ease-in-out .3s; display:inline-flex; justify-content:center; align-items:center;
}
.team .team-member .social a:hover{ color:var(--contrast-color); background:var(--accent-color); }
.team .team-member .social i{ font-size:18px; line-height:0; }
.team .team-member .member-info{ padding:25px 15px; }
.team .team-member .member-info h4{ font-weight:700; margin-bottom:5px; font-size:18px; color:var(--contrast-color); }
.team .team-member .member-info span{ display:block; font-size:13px; font-weight:400; color: color-mix(in srgb, var(--default-color), transparent 40%); }
.team .team-member:hover .social{ opacity:1; bottom:15px; }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-item i{ color:#fff; background:var(--accent-color); font-size:20px; width:44px; height:44px; display:flex; justify-content:center; align-items:center; border-radius:4px; transition: all .3s ease-in-out; margin-right:15px; }
.contact .info-item h3{ padding:0; font-size:18px; font-weight:700; margin-bottom:5px; color:#3E1E04; }
.contact .info-item p{ padding:0; margin-bottom:0; font-size:14px; color:#3E1E04; }

/*--------------------------------------------------------------
# Service Details
--------------------------------------------------------------*/
.service-details .service-box{ background:var(--surface-color); padding:20px; box-shadow:0 2px 20px rgba(0,0,0,.1); }
.service-details .service-box+.service-box{ margin-top:30px; }
.service-details .service-box h4{ font-size:20px; font-weight:700; border-bottom:2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom:15px; margin-bottom:15px; }
.service-details .services-list{ background:var(--surface-color); }
.service-details .services-list a{
  color: color-mix(in srgb, var(--default-color), transparent 20%); background: color-mix(in srgb, var(--default-color), transparent 96%);
  display:flex; align-items:center; padding:12px 15px; margin-top:15px; transition:.3s;
}
.service-details .services-list a:first-child{ margin-top:0; }
.service-details .services-list a i{ font-size:16px; margin-right:8px; color:var(--accent-color); }
.service-details .services-list a.active{ color:var(--contrast-color); background:var(--accent-color); }
.service-details .services-list a.active i{ color:var(--contrast-color); }
.service-details .services-list a:hover{ background: color-mix(in srgb, var(--accent-color), transparent 95%); color:var(--accent-color); }
.service-details .download-catalog a{ color:var(--default-color); display:flex; align-items:center; padding:10px 0; transition:.3s; border-top:1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.service-details .download-catalog a:first-child{ border-top:0; padding-top:0; }
.service-details .download-catalog a:last-child{ padding-bottom:0; }
.service-details .download-catalog a i{ font-size:24px; margin-right:8px; color:var(--accent-color); }
.service-details .download-catalog a:hover{ color:var(--accent-color); }
.service-details .help-box{ background:var(--accent-color); color:var(--contrast-color); margin-top:30px; padding:30px 15px; }
.service-details .help-box .help-icon{ font-size:48px; }
.service-details .help-box h4,.service-details .help-box a{ color:var(--contrast-color); }
.service-details .services-img{ margin-bottom:20px; }
.service-details h3{ font-size:26px; font-weight:700; }
.service-details p{ font-size:15px; }
.service-details ul{ list-style:none; padding:0; font-size:15px; }
.service-details ul li{ padding:5px 0; display:flex; align-items:center; }
.service-details ul i{ font-size:20px; margin-right:8px; color:var(--accent-color); }

/*--------------------------------------------------------------
# Starter Section
--------------------------------------------------------------*/
.starter-section{}