/* =====================================================
   MASTER CSS – TAMBAK SARI GROUP
   Author  : Emma Suriana
   Purpose : Corporate / GLC Website
   Version : Premium Build 2026
===================================================== */

/* =====================================================
   GLOBAL RESET & BASE
===================================================== */
@font-face {
  font-family: 'Neue Haas Display';
  src: url('font/NeueHaasDisplayRoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Display';
  src: url('font/NeueHaasDisplayMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Haas Display';
  src: url('font/NeueHaasDisplayBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================
   GLOBAL BACKGROUND – PREMIUM CORPORATE BROWN
===================================================== */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;

  background: radial-gradient(
    circle at top center,
    #3a2f2d 0%,
    #312726 55%,
    #241c1a 100%
  );

  color: #222;
}


.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ===============================
   COMPANY STATS – CORPORATE
=============================== */
.company-stats{
  padding:70px 0 60px;
  background:#ffffff;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  text-align:center;
}

.stat-item h3{
  font-size:42px;
  font-weight:800;
  color:#111;
  margin-bottom:10px;
  letter-spacing:-0.5px;
}

.stat-item p{
  font-size:15px;
  font-weight:500;
  color:#666;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

/* Responsive */
@media(max-width:900px){
  .stats-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
}


/* =====================================================
   TYPOGRAPHY SYSTEM (CORPORATE STANDARD)
===================================================== */
h1{
  font-size:clamp(36px,4.8vw,56px);
  font-weight:800;
  letter-spacing:-0.6px;
  line-height:1.15;
}

h2{
  font-size:clamp(30px,3.6vw,38px);
  font-weight:700;
  letter-spacing:-0.4px;
}

h3{
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.3px;
}

p{
  font-size:15px;
  font-weight:400;
  line-height:1.85;
  color:#444;
}

/* =========================
   HEADER – CLEAN & STABLE
========================= */
/* =========================
   HEADER – CLEAN & STABLE (FINAL)
========================= */
/* HEADER WRAPPER */
.site-header{
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  z-index: 999;

  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 999px;
  padding: 18px 28px;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* CONTENT DALAM HEADER (CONSTRAIN) */
.header-content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;   /* ⬅️ jarak kiri kanan DALAM pill */
  
  
}


/* CONNECT WITH US – FORCE VISIBILITY */
.site-header .connect-btn{
  background:#000 !important;
  color:#fff !important;
  opacity:10 !important;

  padding:12px 30px;
  border-radius:999px;

  font-size:14px;
  font-weight:600;
  letter-spacing:0.4px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}


.site-header.scrolled{
  background: rgba(12,12,12,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.site-header .header-inner{
  background: rgba(230,233,226,0.55);   /* 🔥 asal 0.78 → 0.55 */
  backdrop-filter: blur(8px);            /* 🔥 asal 14px → 8px */
  -webkit-backdrop-filter: blur(8px);

  border-radius: 999px;
  padding: 16px 28px;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.35);
}
.site-header .container{
  max-width: 1500px;   /* bagi ruang lebih luas */
}

/* LOGO */

.site-logo{
  display:flex;
  align-items:center;
  gap:-0.30px;
}

.site-logo img{
  height:38px;           /* kecilkan sikit = mahal */
}

/* NAMA SYARIKAT */
.site-logo strong {
  font-family: 'Neue Haas Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.05px;
  line-height: 1.05;
  color: white;
  display: block;
}

/* GROUP OF COMPANIES */
.site-logo span {
  font-family: 'Neue Haas Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;          /* 🔥 ini kunci "mahal" */
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.0;
  color: #1a1a1a;
  opacity: 0.85;
  display: block;
}


/* NAV */
.site-nav{
  display:flex;
  align-items:center;
  gap:28px; /* icon + menu + button */
}


.site-header nav a{
  font-size:15.5px;
  font-weight:500;
  letter-spacing:0.2px;
  color:#1a1a1a;
}

.site-header nav a:hover{
  color:#000;
}

.site-header .contact-btn{
  background:#000;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
}

.site-header .dropdown-menu {
  background: #fff;
  border-radius: 16px;
  padding: 14px 0;
  min-width: 240px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border: none;
  margin-top: 28px;      
}
.site-header .dropdown-menu a {
  display: block;
  padding: 12px 20px;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #1a1a1a;

  text-decoration: none;
}
.site-header .dropdown-menu a:hover {
  background: #f5f5f5;
  border-radius: 10px;
}


/* BUTTON */
.nav-btn {
  padding: 8px 18px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing:.8px;
}

/* =========================
   DROPDOWN
========================= */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 130%;
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  display: none;
  z-index: 200;
}

.dropdown-menu a {
  display: block;
  padding: 14px 18px;
  color: #222;
  font-size: 13px;
  border-bottom: 1px solid #f1f1f1;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.dropdown-menu a:hover {
  background: #f7f7f7;
}

/* SHOW DROPDOWN */
.dropdown-menu {
  display: none;
}
/* =========================
   DROPDOWN CLICK MODE
========================= */

.nav-dropdown.open .dropdown-menu {
  display: block;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .site-nav {
    display: none;
  }
}



/* =====================================================
   WELCOME BANNER
===================================================== */
/* =====================================================
   ABOUT US – PREMIUM GLC
===================================================== */
.welcome-banner{
  position:relative;
  min-height:65vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:url('../images/kulai1.jpg') center/cover no-repeat;
  overflow:hidden;
}
.welcome-banner::before,
.welcome-top-line,
.welcome-title::after{
  display:none !important;
  content:none !important;
}

/* dark luxury overlay */
.welcome-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(20,14,8,.78) 0%,
      rgba(43,27,14,.85) 55%,
      rgba(28,18,9,.92) 100%
    );
  backdrop-filter: blur(1px);
}

/* content card */
.welcome-content{
  position:relative;
  z-index:2;
  max-width:820px;
  padding:70px 40px;
  color:#ffffff;
}

/* small tag */
.welcome-tag{
  display:inline-block;
  margin-bottom:16px;
  font-size:15px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

/* main title */
.welcome-title{
  font-size:clamp(30px,4.8vw,52px);
  font-weight:600;
  letter-spacing:1.0px;
  margin-bottom:22px;
  color:#ffffff;
}

/* underline accent */
.welcome-title::after{
  content:"";
  display:block;
  width:90px;
  height:3px;
  margin:22px auto 0;
  background:linear-gradient(
    90deg,
    #B08D3C,
    #1F6F6A
  );
}

/* description */
.welcome-desc{
  margin:28px auto 44px;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.82);
  max-width:720px;
}

/* button */
.welcome-btn{
  display:inline-block;
  padding:14px 34px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.6px;
  text-decoration:none;
  color:#ffffff;
  border:1.6px solid rgba(255,255,255,.55);
  border-radius:50px;
  transition:all .35s ease;
}

/* button hover */
.welcome-btn:hover{
  background:linear-gradient(
    135deg,
    rgba(245,166,35,.28),
    rgba(245,166,35,.12)
  );
  border-color:#f5a623;
  transform:translateY(-3px);
}

/* subtle top & bottom shadow (premium depth) */
.welcome-banner::before,
.welcome-banner::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:80px;
  pointer-events:none;
}

.welcome-banner::before{
  top:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
}

.welcome-banner::after{
  bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent);
}


/* =====================================================
   BUSINESS PANELS (BOUSTEAD – PREMIUM CORPORATE)
===================================================== */
.business-panels{
  display:flex;
  width:100%;
  height:80vh;
  min-height:520px;
  overflow:hidden;
}

/* PANEL ITEM */
.panel-item{
  flex:1;
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  background-size:cover;
  background-position:center;
  transition:flex .6s ease;
}

/* OVERLAY BASE */
.panel-item::before{
  content:"";
  position:absolute;
  inset:0;
  transition:opacity .45s ease;
  background-blend-mode: multiply;
  pointer-events: none; /* ✅ INI SAHAJA */
  box-shadow: inset 0 -80px 120px rgba(0,0,0,.25);
}
.panel-item:hover::before{
  filter: brightness(1.05);
}



/* BACKGROUND IMAGES */
.panel-item.road{
  background-image:url("../images/asri42.jpg");
}
.panel-item.pothole{
  background-image:url("../images/jcb.jpg");
}
.panel-item.premix{
  background-image:url("../images/plant5.jpg");
}
.panel-item.infra{
  background-image:url("../images/thermo.png");
}


/* =====================================================
   OVERLAY COLORS – PREMIUM NAVY / BURGUNDY / ESPRESSO
===================================================== */

/* ROAD MAINTENANCE – DEEP NAVY */
.panel-item.road::before{
  background: linear-gradient(
    rgba(15,31,58,.78),
    rgba(15,31,58,.92)
  );
}

/* JCB POTHOLE PRO – BURGUNDY */
.panel-item.pothole::before{
  background: linear-gradient(
    rgba(122,31,43,.78),
    rgba(122,31,43,.92)
  );
}

/* ASPHALT PREMIX – CHARCOAL NAVY */
.panel-item.premix::before{
  background: linear-gradient(
    rgba(28,47,79,.78),
    rgba(28,47,79,.92)
  );
}

/* THERMOPLASTIC – ESPRESSO BROWN (PREMIUM) */
.panel-item.infra::before{
  background: linear-gradient(
    rgba(58,42,26,.80),
    rgba(58,42,26,.95)
  );
}



/* =====================================================
   CONTENT
===================================================== */
.panel-inner{
  position:relative;
  z-index:2;
  padding:48px 48px 40px;
  margin-top:40px;
  max-width:420px;
  color:#ffffff;
}

.panel-inner h3{
  font-size:30px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:18px;
  letter-spacing:.3px;
  text-shadow:0 4px 12px rgba(0,0,0,.35);
}

.panel-inner span{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  margin-right:18px;
  margin-top:6px;
  opacity:.9;
}

.panel-inner p,
.panel-inner span{
  display:none;
  margin-top:14px;
  color:rgba(255,255,255,.95);
}

/* =====================================================
   ACTIVE STATE
===================================================== */
.panel-item.active{
  flex:2.6;
}

.panel-item.active::before{
  opacity:.25;   /* jangan hilang terus – premium depth */
}

.panel-item.active .panel-inner p,
.panel-item.active .panel-inner span{
  display:block;
}

/* INACTIVE */
.panel-item:not(.active){
  flex:.8;
}

/* =====================================================
   FOOTER
===================================================== */
.footer{
  background:#000;
  color:#aaa;
  text-align:center;
  padding:20px;
}

/* =====================================================
   ANIMATION
===================================================== */
@keyframes zoomHero{
  from{ transform:scale(1); }
  to{ transform:scale(1.05); }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px){
  .site-nav{ display:none; }

  .business-panels{
    flex-direction:column;
    height:auto;
  }

  .panel-item,
  .panel-item.active,
  .panel-item:not(.active){
    flex:1;
    min-height:280px;
  }
}

/* =====================================================
   GET IN TOUCH – PREMIUM FINAL
===================================================== */

.get-in-touch {
  position: relative;
  text-align: center;
  padding: 90px 0;
  color: #eae6df;
  background: linear-gradient(145deg, #2b1b0e 0%, #1c1209 100%);
}

/* TOP ACCENT LINE */
.get-in-touch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, #B08D3C, #1F6F6A);
}

/* SHADOW (MATCH FOOTER – LIGHTER) */
.get-in-touch.premium-shadow {
  box-shadow:
    0 -12px 24px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* HEADING */
.get-in-touch h2 {
  color: #f5a623;
  font-size: 36px;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

/* SUB TEXT */
.get-in-touch .sub {
  font-size: 15px;
  color: rgba(255,255,255,.68);
  max-width: 620px;
  margin: 0 auto 50px;
}

/* ICON ROW */
.contact-icons {
  display: flex;
  justify-content: center;
  gap: 46px;
  flex-wrap: wrap;
}

/* ICON BOX */
.icon-box {
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  transition: transform .35s ease;
}

.icon-box i {
  width: 82px;
  height: 82px;
  border: 1.6px solid rgba(255,255,255,.65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: all .35s ease;
}

/* ICON HOVER */
.icon-box:hover i {
  border-color: #ffffff;
  background: rgba(255,255,255,.06);
  transform: translateY(-4px);
}

/* LABEL */
.icon-box span {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  color: rgba(255,255,255,.85);
  position: relative;
}

/* LABEL UNDERLINE */
.icon-box span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #B08D3C;
  transform: translateX(-50%);
  transition: .3s;
}

.icon-box:hover span::after {
  width: 22px;
}

/* =====================================================
   MARKET MAP – JOHOR (PBT COVERAGE)
===================================================== */
body{
  background:#f3f2f0;
}

.market-map{
  background:#f3f2f0;   /* sama tone map */
  
}
.market-map .container{
  background:transparent;
}


.market-map h2{
  font-size:38px;
  font-weight:800;
  margin-bottom:12px;
}

.market-desc{
  max-width:720px;
  color:#555;
  margin-bottom:30px;
}

/* MAP CONTAINER */
.map-container{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:18px;   /* ⬅️ penting */
}

.base-map{
  width:100%;
  display:block;
  opacity:.95;
}

/* =====================================================
   MARKET MAP – FINAL (CLEAN & PREMIUM)
===================================================== */

.market-map{
  background:#f3f2f0;          /* ✅ sama dengan background map */
  padding:90px 0 110px;
}

.market-map .container{
  background:transparent;
  max-width:1200px;
}

/* TITLE */
.market-map h2{
  font-size:30px;
  font-weight:800;
  margin-bottom:18px;
}

/* DESCRIPTION */
.market-desc{
  max-width:1200px;
  line-height:1.7;
  color:#444;
  margin-bottom:34px;
}

/* MAP CONTAINER */
.map-container{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:32px;
  background:#f3f2f0;     /* 🔑 sama dengan background */
  border-radius:18px;
  box-shadow:none;
}

/* MAP IMAGE */
.base-map{
  width:100%;
  display:block;
}


/* TOP ACCENT LINE */
.map-container::before{
  content:"";
  position:absolute;
  top:0;
  left:48px;
  right:48px;
  height:3px;
  background:linear-gradient(
    90deg,
    #B08D3C,
    #1F6F6A
  );
  border-radius:3px;
}

/* MAP IMAGE */
.base-map{
  width:100%;
  display:block;
  margin:0 auto;
}
/* ===============================
   MAIN PREMIX PLANT POSITION
================================ */

/* Premix Plant Kulai */
.kulai-plant{
  top:60%;
  left:54%;
}

/* Premix Plant Pagoh */
.pagoh-plant{
  top:48%;
  left:12%;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .market-map{
    padding:60px 0 80px;
  }

  .market-map h2{
    font-size:30px;
  }

  .market-desc{
    max-width:100%;
    margin-bottom:40px;
  }

 .map-container{
  position: relative;
}


  .map-container::before{
    left:20px;
    right:20px;
  }
}

/* ===============================
   PIN WRAP
================================ */
.pin-wrap{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  pointer-events:none;
}

/* ===============================
   PIN DOT
================================ */
.pin{
  width:9px;
  height:9px;
  background:#B08D3C; /* muted gold */
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(176,141,60,.18);
}
/* ===============================
   BLINK / PULSE – MAIN PLANT
================================ */
.main-pin .marker{
  width:14px;
  height:14px;
  background:#C62828;
  border-radius:50%;
  position:relative;

  animation:pulseRed 1.4s infinite;
}

@keyframes pulseRed{
  0%{
    box-shadow:0 0 0 0 rgba(198,40,40,.6);
  }
  70%{
    box-shadow:0 0 0 12px rgba(198,40,40,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(198,40,40,0);
  }
}


/* ===============================
   LABEL (ALWAYS VISIBLE)
================================ */
.label{
  font-size:11.5px;
  font-weight:600;
  color:#666;

  background:rgba(245,245,245,.9);
  padding:2px 7px;
  border-radius:5px;
  white-space:nowrap;
  line-height:1.2;

  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* ❌ BUANG KESAN HOVER */
.pin-wrap:hover .label{
  opacity:1;
  visibility:visible;
}
/* ===============================
   MAIN PREMIX PLANT PIN
================================ */
.main-pin{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:5;
}

/* Marker icon */
.main-pin .marker{
  width:14px;
  height:14px;
  background:#C62828; /* premium red */
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(198,40,40,.25);
}

/* Label */
.main-pin .marker-label{
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:#C62828;
  padding:4px 10px;
  border-radius:14px;
  white-space:nowrap;
}


/* =====================================================
   PULSE ANIMATION (SUBTLE)
===================================================== */
@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(176,141,60,.45);
  }
  70%{
    box-shadow:0 0 0 10px rgba(176,141,60,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(176,141,60,0);
  }
}

/* =====================================================
   PIN POSITIONS (ADJUST IF NEEDED)
===================================================== */
.pin-wrap.jb{ top:67%; left:65%; }        /* Johor Bahru */
.pin-wrap.pengerang{ top:68%; left:85%; }        /* Johor Bahru */
.pin-wrap.kotatinggi{ top:50%; left:70%; }/* Kota Tinggi */
.pin-wrap.pontian{ top:64%; left:47%; }   /* Pontian */
.pin-wrap.kulai{ top:60%; left:58%; }     /* Kulai */
.pin-wrap.batupahat{ top:53%; left:30%; } /* Batu Pahat */
.pin-wrap.muar{ top:45%; left:18%; }      /* Muar */
.pin-wrap.tangkak{ top:40%; left:12%; }   /* Tangkak */
.pin-wrap.kluang{ top:45%; left:50%; }    /* Kluang */
.pin-wrap.simpang{ top:50%; left:47%; }    /* simpang */
.pin-wrap.segamat{ top:30%; left:25%; }   /* Segamat */
.pin-wrap.labis{ top:36%; left:35%; }   /* Labis */
.pin-wrap.mersing{ top:42%; left:70%; }   /* Mersing */

/* ===============================
   BLINK / PULSE – DISTRICT PIN
================================ */
.pin{
  width:9px;
  height:9px;
  background:#B08D3C;
  border-radius:50%;
  position:relative;

  animation:pulseGold 1.8s infinite;
}

@keyframes pulseGold{
  0%{
    box-shadow:0 0 0 0 rgba(176,141,60,.55);
  }
  70%{
    box-shadow:0 0 0 8px rgba(176,141,60,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(176,141,60,0);
  }
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .market-map{
    padding:60px 0;
  }

  .market-map h2{
    font-size:28px;
  }

  .label{
    font-size:12px;
  }
}
.map-container{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  padding:32px;
  background:#f3f2f0;     /* 🔑 sama dengan background */
  border-radius:18px;
  box-shadow:none;
}

.map-container::before{
  content:"";
  position:absolute;
  top:0;
  left:40px;
  right:40px;
  height:3px;
  background:linear-gradient(
    90deg,
    #B08D3C,
    #1F6F6A
  );
  border-radius:2px;
}
.map-legend{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:40px;
  font-size:16px;
  color:#666;
}

.legend-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}

.legend-dot.plant{
  background:#C62828;
}

.legend-dot.district{
  background:#B08D3C;
}


.site-footer {
  background: linear-gradient(145deg, #2b1b0e 0%, #1c1209 100%);
  color: #ddd;
  padding: 70px 0 0;
  font-size: 14px;
}

.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(245,166,35,0.35),
    transparent
  );
}

/* =====================================================
   FOOTER – PREMIUM FINAL
===================================================== */

.site-footer {
  background: linear-gradient(145deg, #2b1b0e 0%, #1c1209 100%);
  color: #ddd;
  padding: 70px 0 0;
  font-size: 14px;
  position: relative;
   box-shadow: 
    0 -12px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* subtle premium divider */
.site-footer::before {
  background: linear-gradient(
    to right,
    transparent,
    rgba(245,166,35,0.22),
    transparent
  );
}


/* GRID */
.footer-container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 60px;
}

/* HEADINGS */
.footer-col h4 {
  font-size: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #d9a441;
  margin-bottom: 20px;
}

/* TEXT */
.footer-col p {
  line-height: 1.7;
  margin-bottom: 10px;
  color: #e0e0e0;
}

/* BRAND */
.footer-col.brand img {
  height: 42px;
  margin-bottom: 22px;
}

.footer-col.brand p {
  max-width: 320px;
  line-height: 1.8;
  color: #e5ddd2;
}

/* STRONG LABELS (P : E : W :) */
.footer-col strong {
  color: #d9a441;
  font-weight: 600;
}

/* LOCATIONS */
.footer-col.locations {
  align-self: flex-start;
}

.footer-col.locations p {
  line-height: 1.9;
}

/* LINK – PREMIUM UNDERLINE */
.footer-link {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  color: #f5a623;
  font-size: 13px;
  text-decoration: none;
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: #f5a623;
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* BOTTOM */
.footer-bottom {
  margin-top: 50px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 18px 0;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #aaa;
}

/* MOBILE */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* =========================
   HAMBURGER MENU
========================= */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 2px;
  background: #ffffff;
  transition: all .35s ease;
}

/* active (X) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px,-5px);
}
.hamburger{
  position:relative;
}

.site-nav.show ~ .hamburger{
  position:fixed;
  top:26px;
  right:28px;
}

/* =========================
   MOBILE NAV
========================= */
@media (max-width: 992px){

  /* HAMBURGER */
  .hamburger{
    display:flex;
    z-index:1001;
  }

  /* FULL OVERLAY NAV */
  .site-nav{
    position:fixed;
    inset:0;
    height:100vh;
    width:100vw;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;

    background:
      linear-gradient(145deg, rgba(43,27,14,.98) 0%, rgba(28,18,9,.98) 100%);

    backdrop-filter: blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 30px 60px rgba(0,0,0,.55);
  }

  .site-nav.show{
    opacity:1;
    pointer-events:auto;
  }

  .site-nav a{
    font-size:18px;
    letter-spacing:.8px;
    color:#ffffff;
  }

  /* CONTACT BUTTON */
  .site-nav .nav-btn{
    margin-top:12px;
    padding:12px 32px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:30px;
  }

  /* SOCIAL ICONS */
  .site-nav .social-icons{
    margin-top:30px;
  }

  /* DROPDOWN – MOBILE */
  .nav-dropdown .dropdown-menu{
    position:static;
    background:transparent;
    box-shadow:none;
    margin-top:8px;
    text-align:center;
  }

  .nav-dropdown .dropdown-menu a{
    font-size:15px;
    opacity:.85;
  }
}
/* =========================
   MOBILE COMPANIES DROPDOWN FIX
========================= */
@media (max-width: 992px){

  .nav-dropdown{
    width:100%;
    text-align:center;
  }

  .nav-dropdown > a{
    font-size:18px;
    color:#ffffff;
  }

  .nav-dropdown .dropdown-menu{
    margin-top:12px;
    padding:14px 0;
    background:rgba(255,255,255,0.04);
    border-radius:14px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
  }

  .nav-dropdown .dropdown-menu a{
    display:block;
    padding:12px 0;
    font-size:15px;
    color:#ffffff !important;
    opacity:0.9;
    background:transparent !important;
    border:none !important;
  }

  .nav-dropdown .dropdown-menu a:hover{
    opacity:1;
    background:rgba(255,255,255,0.06) !important;
  }

  /* REMOVE STRAY DIVIDER / GREY BLOCK */
  .nav-dropdown .dropdown-menu a::before,
  .nav-dropdown .dropdown-menu a::after{
    display:none !important;
    content:none !important;
  }
}
@media (max-width: 992px){

  /* dropdown container */
  .nav-dropdown .dropdown-menu{
    background:rgba(255,255,255,0.035);
    border-radius:16px;
    padding:6px 0;
  }

  /* dropdown item */
  .nav-dropdown .dropdown-menu a{
    padding:12px 0;
    margin:2px 14px;
    border-radius:10px;
    transition:all .25s ease;
  }

  /* hover / tap effect */
  .nav-dropdown .dropdown-menu a:hover{
    background:rgba(245,166,35,0.12) !important;
    color:#ffffff;
  }
}
@media (max-width: 992px){

  /* dropdown wrapper */
  .nav-dropdown .dropdown-menu{
    background:rgba(255,255,255,0.035);
    border-radius:18px;
    padding:10px 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 12px 28px rgba(0,0,0,.35);
  }

  /* item */
  .nav-dropdown .dropdown-menu a{
    margin:4px 18px;
    padding:12px 0;
    border-radius:12px;
    font-weight:500;
    letter-spacing:.4px;
    transition:all .25s ease;
  }

  /* hover / tap */
  .nav-dropdown .dropdown-menu a:hover{
    background:linear-gradient(
      135deg,
      rgba(245,166,35,.18),
      rgba(245,166,35,.08)
    ) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
}
/* =========================
   MOBILE ACCORDION – COMPANIES
========================= */
@media (max-width: 992px){

  .accordion .accordion-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:18px;
  }

  .accordion .arrow{
    transition:transform .35s ease;
    font-size:14px;
  }

  .accordion.active .arrow{
    transform:rotate(180deg);
  }

  .accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease;
    margin-top:12px;
  }

  .accordion.active .accordion-content{
    max-height:260px;
  }

  .accordion-content{
    background:rgba(255,255,255,0.035);
    border-radius:18px;
    padding:10px 0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 14px 28px rgba(0,0,0,.35);
  }

  .accordion-content a{
    margin:4px 18px;
    padding:12px 0;
    border-radius:12px;
    text-align:center;
    font-weight:500;
    transition:.25s;
  }

  .accordion-content a:hover{
    background:linear-gradient(
      135deg,
      rgba(245,166,35,.18),
      rgba(245,166,35,.08)
    );
  }
}
/* =========================
   ABOUT GROUP – GLC PREMIUM
========================= */

.about-section {
  background: #ffffff;
  border-radius: 18px;
  padding: 40px 10px;        /* ✅ KECILKAN kiri kanan */
  margin-top: 8px !important;   
  max-width: 1200px;
  box-sizing: border-box;   /* ✅ PENTING: kira padding dalam width */

  box-shadow: 0 30px 70px rgba(0,0,0,0.30);
}

.about-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Title ===== */

.about-section h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 45px;
  color: #111;
  position: relative;
}

.about-section h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #b90000;   /* corporate red */
  margin-top: 16px;
}

/* ===== Intro Paragraph ===== */

.about-section > .container > p {
  font-size: 18px;
  line-height: 1.9;
  color: #333;
  max-width: 1100px;
  margin-bottom: 22px;
  text-align: justify;
}

/* =========================
   DIVISION GRID
========================= */

.division-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 80px auto 120px;   /* ✅ auto kiri kanan = center */
  max-width: 1000px;        /* ✅ kawal lebar supaya betul-betul tengah */
  text-align: center;
  justify-items: center;    /* ✅ setiap card center dalam kolum */
}

.division-item {
  padding: 0 15px;
}

.division-item img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.division-item img:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.division-item h4 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  color: #111;
}

.division-item p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  text-align: center;
  max-width: 230px;
  margin: 0 auto;
}

/* =========================
   TEXT BLOCKS (BOTTOM SECTIONS)
========================= */

.about-text-block {
  max-width: 1200px;
  margin-top: 60px;
  padding-top: 30px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid #e5e5e5;
  background: transparent;   /* ❗ buang block background */
}


.about-text-block h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;   /* dari 30 → 18 */
  letter-spacing: -0.1px;
  color: #111;
}


.about-text-block p {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  margin-bottom: 12px;
}

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

@media (max-width: 992px) {
  .division-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .division-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   ABOUT PAGE – PREMIUM FINAL
========================= */

/* Background full page sama dengan Get In Touch */
.about-page {
  background: linear-gradient(135deg, #3a2416, #5a3a26);
}

/* Panel putih besar */
.about-section {
  background: #ffffff;
  border-radius: 18px;
  padding: 90px 80px;

  /* ❌ BUANG */
  /* margin: 140px auto 120px; */

  /* ✅ GANTI DENGAN INI */
  margin: 0 auto 120px;

  max-width: 1200px;
}




/* Container dalam – center kemas */
.about-section .container {
  max-width: 1200px;     /* besarkan sikit */
  margin: 0 auto;
  padding-left: 0;      /* ❗ buang extra kiri */
  padding-right: 0;    /* ❗ buang extra kanan */
}

/* Tajuk utama */
.about-section h2 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 45px;
  color: #111;
  position: relative;
}

/* Garis merah bawah tajuk */
.about-section h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #b90000;
  margin-top: 16px;
}

/* Intro paragraph */
.about-section > .container > p {
  font-size: 18px;
  line-height: 1.9;
  color: #333;
  max-width: 1000px;
  margin-bottom: 24px;
}

/* =========================
   DIVISION GRID – PREMIUM
========================= */

.division-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin: 80px auto 110px;     /* ❗ auto kiri kanan → center */
  max-width: 1000px;          /* ❗ kawal lebar grid */
  text-align: center;

  justify-items: center;      /* ❗ setiap card center */
}


.division-item img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 22px;

  border: 6px solid #ffffff;              /* ring putih */
  box-shadow:
    0 8px 20px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.08);             /* outer fine ring */

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.division-item:hover img {
  transform: scale(1.04);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,0,0,0.12);
}


.division-item h4 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #111;
}

.division-item p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  max-width: 230px;
  margin: 0 auto;
}
.division-item {
  width: 100%;
  max-width: 240px;           /* ❗ semua card sama lebar */
  padding: 35px 25px 40px;
  border-radius: 14px;
  background: #fafafa;

  border: 1px solid #eeeeee;
  transition: all 0.4s ease;

  display: flex;
  flex-direction: column;
  align-items: center;       /* ❗ content dalam card center */
}


.division-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.18);
  background: #ffffff;
}


/* =========================
   TEXT BLOCKS – FLOW PREMIUM
========================= */

.about-text-block {
  max-width: 1000px;
  margin-top: 40px;
}

.about-text-block h3 {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #111;
}

.about-text-block p {
  font-size: 17px;
  line-height: 1.85;
  color: #333;
  margin-bottom: 18px;
  text-align: justify;
}

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

@media (max-width: 992px) {
  .about-section {
    padding: 70px 40px;
	max-width: 900px;
  }

  .division-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.about-section-clean{
  max-width: 900px;
  margin-right: auto;
}
@media (max-width: 576px) {
  .about-section {
    padding: 50px 25px;
    margin: 60px 20px;
  }

  .division-grid {
    grid-te
  }
  
}
/* ===== FIX CENTER DIVISION GRID (FINAL) ===== */

.about-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.about-section .container {
  max-width: 1200px;
  margin: 0 auto !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box;
}

.division-grid {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: 1000px;     /* kawal lebar grid */
  justify-content: center;
}

/* =========================
   TSSB PAGE – PREMIUM
========================= */

.about-page {
  background: linear-gradient(135deg, #3a2416, #5a3a26);
  padding: 120px 0;
  padding-bottom: 0px;   /* 🔥 BUANG RUANG BAWAH */
}

/* Panel putih besar */
/* =====================================================
   WHITE MAIN PANEL – PREMIUM FLOATING CARD
===================================================== */
.company-panel {
  background: #ffffff;
  border-radius: 28px;

  max-width: 1400px;   /* 🔥 BESAR */
  width: 92%;

  margin: 80px auto 140px;
  padding: 100px 90px;

  box-shadow:
    0 40px 90px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.15);
}

/* ===== HERO (ABOUT PAGE ONLY) ===== */

.company-hero {
  position: relative;
  background: url('images/office-bg.jpg') center/cover no-repeat;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 60px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* overlay khas untuk about page */
.hero-overlay1 {
  background: linear-gradient(
    to right,
    rgba(58,36,22,0.92),
    rgba(58,36,22,0.75)
  );
  padding: 70px 70px;
  color: #ffffff;
}

.hero-overlay1 h1 {
  font-size: 52px;
  font-weight: 900;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
}

.hero-overlay1 h1 span {
  color: #f0a43c;
}
.hero-full-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.35) 100%
    );
  z-index:0;
  pointer-events:none;
}
.hero-text h1{
  text-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);
}

.hero-text p{
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* kotak teks premium */
.about-box {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  padding: 35px 40px;
  border-radius: 14px;
  max-width: 900px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
  border-left: 4px solid #f0a43c;
}

.about-box p {
  line-height: 1.9;
  font-size: 16px;
  margin-bottom: 16px;
  color: #f5f5f5;
}


/* ===== COMPANY INFO ===== */

.company-info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  margin-bottom: 100px;
  margin-top:60px;
}
.company-info-grid h2 {
  font-size: 38px;              /* sikit lebih besar */
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-bottom: 40px;
  position: relative;
}

.company-info-grid h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #f0a43c;
  margin-top: 12px;
  border-radius: 2px;
}



.info-left h2 {
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 40px;
}

.info-left h2 span {
  color: #f0a43c;
}

.info-list {
  list-style: none;
  padding: 0;
}

.info-list li {
  margin-bottom: 25px;
  line-height: 1.7;
  font-size: 16px;
}

.company-name-box {
  background: linear-gradient(135deg, #f3a73f, #e08b22);
  border-radius: 16px;          /* 🔥 dari 20px → 16px */

  padding: 40px 35px;          /* 🔥 dari 55x45 → 40x35 */

  font-size: 28px;             /* 🔥 dari 32px → 28px */
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.3;

  color: #ffffff;
  text-align: left;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.12),
    0 26px 50px rgba(0,0,0,0.08);

  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}


/* subtle highlight overlay */
.company-name-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.0)
  );
  transform: skewX(-15deg);
}



/* =====================================================
   MISSION & VISION – STANDARD COMPANY STYLE
   Digunakan oleh SEMUA page
===================================================== */

.mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 980px;
  margin: 80px auto 100px;
  align-items: stretch;
  
}

/* Kad umum */
.mission-box,
.vision-box{
  background: #ffffff;
  border-radius: 18px;
  padding: 45px 50px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    0 40px 80px rgba(0,0,0,0.06);
  border: 1px solid #f1f1f1;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Tajuk */
.mission-box h4,
.vision-box h4{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 22px;
  color: #111;
}

/* Mission list */
.mission-box ul{
  padding-left: 18px;
}

.mission-box li{
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 14px;
  color: #333;
}

/* Vision text – simple corporate */
.vision-box blockquote{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: #333;
  font-style: normal;
  border-left: 3px solid #f0a43c;
  padding-left: 16px;
}


/* ===== SERVICES TSSB  ===== */

.services-section h2 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 70px;
}

.services-section h2 span {
  color: #f0a43c;
}

.service-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
}

.service-item.reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}

.service-item.reverse > * {
  direction: ltr;
}

.service-text h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 20px;
}

.service-text p {
  line-height: 1.8;
  font-size: 16px;
}

.service-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* =====================================================
   SERVICES – PREMIUM UPGRADE (GLC SAFE OVERRIDE)
   ❗ TAMBAH SAHAJA – JANGAN BUANG CSS ASAL
===================================================== */

/* Center & spacing section */
.services-section {
  max-width: 1100px;
  margin: 120px auto 140px;
  padding: 0 20px;
}

/* Upgrade title */
.services-section h2 {
  text-align: center;
  letter-spacing: -0.5px;
  position: relative;
}

.services-section h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #B08D3C, #1F6F6A);
  margin: 18px auto 0;
  border-radius: 2px;
}

/* Upgrade setiap service row jadi card premium */
.service-item {
  background: #ffffff;
  border-radius: 22px;
  padding: 55px 60px;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    0 40px 80px rgba(0,0,0,0.08);

  transition: transform .4s ease, box-shadow .4s ease;
}

/* Hover mahal */
.service-item:hover {
  transform: translateY(-8px);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.16),
    0 60px 120px rgba(0,0,0,0.12);
}

/* Upgrade tajuk servis */
.service-text h3 {
  font-size: 28px;          /* dari 26 → 28 */
  font-weight: 900;        /* lebih korporat */
  letter-spacing: -0.3px;
  color: #111;
}

/* Upgrade perenggan */
.service-text p {
  font-size: 17px;         /* dari 16 → 17 */
  line-height: 1.85;
  color: #333;
  max-width: 520px;
}

/* Upgrade gambar */
.service-image img {
  width: 100%;
  border-radius: 18px;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    0 30px 60px rgba(0,0,0,0.12);

  transition: transform .4s ease, box-shadow .4s ease;
}

.service-image img:hover {
  transform: scale(1.03);
  box-shadow:
    0 20px 45px rgba(0,0,0,0.25),
    0 45px 90px rgba(0,0,0,0.18);
}

/* FORCE TSSB HERO ikut style TSPREMIX */
.tssb-hero {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}

.tssb-hero-content {
  padding: 60px 70px;
}


.tssb-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(58,36,22,0.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;
  color: #ffffff;
}

.tssb-hero-overlay h1 {
  font-size: 54px;
  font-weight: 900;
  margin-bottom: 15px;
}

.tssb-hero-overlay h1 span {
  color: #f0a43c;
}

.tssb-hero-overlay p {
  font-size: 18px;
  max-width: 520px;
}
.info-block {
  padding-left: 10px;
  border-left: 3px solid rgba(240,164,60,0.25);  /* 🔥 subtle accent line */
  margin-bottom: 26px;
}


.info-block h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f0a43c;          /* emas korporat */
  margin-bottom: 6px;
}

.info-block p {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 28px;    /* 🔥 jarak antar blok */
}


.company-photo {
  border-radius: 20px;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.12),
    0 25px 60px rgba(0,0,0,0.10);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.company-photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 15px 35px rgba(0,0,0,0.18),
    0 35px 70px rgba(0,0,0,0.12);
}


.premium-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 50px 45px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.18);
}

.vision-dark {
  background: #5a3a26;
  color: #ffffff;
}

.vision-dark h3 {
  color: #f0a43c;
}
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 120px;
}

.service-row.reverse {
  direction: rtl;
}

.service-row.reverse > * {
  direction: ltr;
}

.service-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.30);
}

.service-text h3 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
}

.service-text p {
  font-size: 17px;
  line-height: 1.85;
}
/* =========================
   OUR SERVICES – PREMIUM
========================= */

.service-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  margin: 80px 0;
}

.service-block.reverse {
  grid-template-columns: 1.2fr 1fr;
}

.service-block.reverse .service-image {
  order: 2;
}

.service-image img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.service-content h4 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 18px;
  color: #111;
}

.service-content p {
  font-size: 17px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  max-width: 520px;
}

/* Section title */
.our-services-title {
  font-size: 32px;
  font-weight: 900;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #111;
}

.our-services-title span {
  color: #f5a623;  /* warna orange corporate */
}
/* =========================
   MISSION & VISION – GLC GLASS PREMIUM
========================= */

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin: 80px auto 100px;
  max-width: 1000px;
}

/* Shared card style */
.premium-card {
  position: relative;
  padding: 45px 45px 50px;
  border-radius: 18px;

  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition: all 0.4s ease;
}

.premium-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 35px 80px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* ================= MISSION ================= */
.mission-box {
  padding: 40px 42px;
}

.mission-box h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
}

.mission-box ul li {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 16px;   /* 🔥 jarak bullet lebih selesa */
  color: #333;
}


/* ================= VISION – DARK PREMIUM ================= */
.vision-box {
  padding: 56px 50px;
  border-radius: 22px;
  text-align: center;              /* 🔥 center statement */
  background: #ffffff;
}

/* Tajuk Vision */
.vision-box h3 {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 32px;
  color: #222;
  letter-spacing: -0.3px;
  position: relative;
}

/* Garis kecil bawah tajuk (signature GLC style) */
.vision-box h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: #f0a43c;
  margin: 14px auto 0;
  border-radius: 2px;
}

/* Ayat Vision */
.vision-box blockquote {
  font-size: 19px;                /* 🔥 lebih besar dari Mission */
  line-height: 1.8;
  font-weight: 500;
  color: #333;
  margin: 28px auto 0;
  max-width: 320px;              /* 🔥 fokus statement */
}
/* ===== PREMIUM SERVICES STYLE (EXTEND ONLY) ===== */

.services-section {
  max-width: 1100px;
  margin: 0 auto 120px;
  padding: 0 40px;
}

.our-services-title {
  text-align: center;
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 80px;
}

.our-services-title span {
  color: #f0a43c;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 120px;
}

.service-row.reverse {
  direction: rtl;
}

.service-row.reverse > * {
  direction: ltr;
}

/* IMAGE */
.service-image img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  transition: transform .4s ease;
}

.service-image img:hover {
  transform: scale(1.02);
}

/* TEXT */
.service-text h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 25px;
  color: #222;
}

.service-text p {
  font-size: 16.5px;
  line-height: 1.9;
  color: #555;
  text-align: justify;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-row.reverse {
    direction: ltr;
  }
}

/* ===== TSPREMIX  ===== */

.tspremix-wrapper {
  padding: 120px 0;
}

.about-hero-premix {
  padding-bottom: 120px;
}

.about-overlay-box {
  max-width: 900px;
  margin: 0 auto 80px;
  color: #222;
  text-align: left;
}

.about-overlay-box h2 span {
  color: #f0a43c;
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.company-info-section {
  padding: 120px 0;
}

.company-info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.company-info-left h2 span {
  color: #f0a43c;
}

.company-tag-box {
  background: linear-gradient(135deg,#f0a43c,#e8901c);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  padding: 70px 50px;
  border-radius: 20px;
  line-height: 1.25;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.services-premix-section {
  padding: 120px 0 140px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 70px;
  align-items: flex-start;
}

.services-left h2 span {
  color: #f0a43c;
}

.products-list {
  columns: 2;
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.products-list li {
  margin-bottom: 8px;
  font-weight: 500;
}
/* =====================================================
   TSPREMIX – SAFE SCOPED OVERRIDE ONLY
   ❗ HANYA AKTIF DALAM .tspremix-wrapper
===================================================== */

.tspremix-wrapper .services-premix-section {
  padding: 120px 0 140px;
}

.tspremix-wrapper .service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 120px;
}

.tspremix-wrapper .service-row.reverse {
  direction: rtl;
}

.tspremix-wrapper .service-row.reverse > * {
  direction: ltr;
}

/* IMAGE */
.tspremix-wrapper .service-image img {
  width: 40%;
  border-radius: 20px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25),
    0 40px 80px rgba(0,0,0,0.15);
  transition: transform .4s ease, box-shadow .4s ease;
}

.tspremix-wrapper .service-image img:hover {
  transform: scale(1.03);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.30),
    0 60px 120px rgba(0,0,0,0.20);
}

/* TEXT */
.tspremix-wrapper .service-text h3 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #111;
}

.tspremix-wrapper .service-text p {
  font-size: 17px;
  line-height: 1.85;
  color: #333;
  max-width: 520px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .tspremix-wrapper .service-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tspremix-wrapper .service-row.reverse {
    direction: ltr;
  }
}
/* =========================
   TSPREMIX HERO – PREMIUM
========================= */

.tspremix-wrapper .tssb-hero {
  height: 260px;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(40,25,18,0.75) 0%,
      rgba(40,25,18,0.55) 30%,
      rgba(40,25,18,0.25) 55%,
      rgba(40,25,18,0.05) 70%,
      rgba(40,25,18,0.00) 80%
    ),
    url('images/tspremix-hero.jpg') center/cover no-repeat;

  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.tspremix-wrapper .tssb-hero-overlay {
  padding-left: 80px;
  color: #ffffff;
}

.tspremix-wrapper .tssb-hero-overlay h1 {
  font-size: 52px;
  font-weight: 900;
  margin-bottom: 12px;
}

.tspremix-wrapper .tssb-hero-overlay h1 span {
  color: #f0a43c;
}

.tspremix-wrapper .tssb-hero-overlay p {
  font-size: 18px;
  max-width: 520px;
  color: rgba(255,255,255,0.92);
}
/* =========================
   TSPREMIX TOP IMAGE – PREMIUM HERO
========================= */

.tspremix-top-image {
  position: relative;
  height: 220px;
  margin: -60px -80px 60px;   /* tarik keluar dari panel putih */
  border-radius: 20px 20px 0 0;
  overflow: hidden;

  background:
    linear-gradient(
      to right,
      rgba(58,36,22,0.75),
      rgba(58,36,22,0.35),
      rgba(58,36,22,0.05)
    ),
    url('images/quarry.jpg') center/cover no-repeat;

  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* Overlay content */
.tspremix-top-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 80px;
  color: #ffffff;
}

.tspremix-top-overlay h1 {
  font-size: 52px;
  font-weight: 900;
  margin-bottom: 12px;
}

.tspremix-top-overlay h1 span {
  color: #f0a43c;
}

.tspremix-top-overlay p {
  font-size: 18px;
  max-width: 520px;
  color: rgba(255,255,255,0.9);
}

/* MOBILE */
@media (max-width: 768px) {
  .tspremix-top-image {
    height: 240px;
    margin: -40px -25px 40px;
  }

  .tspremix-top-overlay {
    padding-left: 30px;
  }

  .tspremix-top-overlay h1 {
    font-size: 36px;
  }
}
/* ================================
   TSPREMIX – ABOUT & COMPANY INFO
   SAFE OVERRIDE
================================ */

/* ABOUT US BLOCK */
.about-block {
  margin-top: 40px;
  margin-bottom: 60px;
}

.about-block h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 16px;
}

.about-block p {
  font-size: 17px;
  line-height: 1.85;
  color: #333;
  max-width: 880px;
}

/* COMPANY INFO SECTION */
.company-info-block {
  margin-top: 70px;
  margin-bottom: 100px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.company-info-block h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 30px;
}

/* GRID 2 COLUMN */
.info-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

/* LEFT INFO STYLE */
.info-left p {
  padding-left: 14px;
  border-left: 3px solid rgba(240,164,60,0.25);
  margin-bottom: 24px;
  line-height: 1.7;
}

.info-left strong {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f0a43c;
  margin-bottom: 6px;
}

/* RIGHT TAG BOX */
.company-tag-box {
  background: linear-gradient(135deg, #f0a43c, #e18b1f);
  color: #ffffff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.5px;
  line-height: 1.25;
  padding: 26px 28px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  text-align: left;
  width: 100%;
  position: relative;
}
.quarry-image-box {
  margin-top: 26px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);

  max-width: 360px;      /* ❗ HAD LEBAR */
}

.quarry-image-box img {
  width: 100%;
  height: 220px;        /* ❗ HAD TINGGI */
  object-fit: cover;   /* ❗ POTONG CANTIK, TAK STRETCH */
  display: block;
}

/* Bagi efek corporate */
.company-tag-box::after {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 14px;
  width: 40px;
  height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
}


/* RESPONSIVE */
@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .company-tag-box {
    text-align: center;
  }
}
/* =====================================================
   TSPREMIX – MISSION & VISION (PREMIUM CARD)
   SAFE: hanya untuk .tspremix-wrapper
===================================================== */

.tspremix-wrapper .mv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  max-width: 980px;
  margin: 70px auto 90px;
  align-items: stretch;
}

/* Card base */
.tspremix-wrapper .mv-grid > div{
  background:#ffffff;
  border-radius: 18px;
  padding: 38px 40px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    0 40px 80px rgba(0,0,0,0.06);
  border: 1px solid #f1f1f1;
}

/* Mission title */
.tspremix-wrapper .mission-box h4,
.tspremix-wrapper .vision-box h4{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color:#111;
  position: relative;
}

/* underline premium */
.tspremix-wrapper .mission-box h4::after,
.tspremix-wrapper .vision-box h4::after{
  content:"";
  display:block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg,#f0a43c,#d97f10);
  border-radius: 2px;
}

/* Mission list kemas */
.tspremix-wrapper .mission-box ul{
  margin-top: 18px;
  padding-left: 18px;
}

.tspremix-wrapper .mission-box li{
  margin-bottom: 12px;
  line-height: 1.75;
  color:#333;
  font-size: 15.5px;
}

/* Vision – jadi statement premium (tak nampak kosong) */
.tspremix-wrapper .vision-box{
  background: linear-gradient(135deg, #2a1b12, #3a2418);
  color: #ffffff;
  border-radius: 18px;
  padding: 40px 45px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.tspremix-wrapper .vision-box h4{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #f0a43c;
}

.tspremix-wrapper .vision-box blockquote{
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.95);
  font-style: italic;
  margin: 0;
}


/* quote accent line */
.tspremix-wrapper .vision-box blockquote{
  padding-left: 16px;
  border-left: 3px solid rgba(240,164,60,0.75);
}

/* Responsive */
@media (max-width: 900px){
  .tspremix-wrapper .mv-grid{
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 50px auto 70px;
  }
}
.tspremix-wrapper .mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin: 100px 0;
}

.tspremix-wrapper .mission-box,
.tspremix-wrapper .vision-box{
  background: #ffffff;
  border-radius: 20px;
  padding: 45px 50px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.tspremix-wrapper .mission-box h4,
.tspremix-wrapper .vision-box h4{
  font-size: 22px;
  font-weight: 800;
  color: #f0a43c;
  margin-bottom: 20px;
  position: relative;
}

.tspremix-wrapper .mission-box h4::after,
.tspremix-wrapper .vision-box h4::after{
  content: "";
  width: 40px;
  height: 3px;
  background: #f0a43c;
  display: block;
  margin-top: 10px;
}

.tspremix-wrapper .mission-box li{
  margin-bottom: 14px;
  line-height: 1.7;
  color: #333;
}

.tspremix-wrapper .vision-box blockquote{
  font-size: 18px;
  line-height: 1.8;
  color: #333;   /* 🔥 ini penting – jangan putih */
  font-style: italic;
  margin: 0;
}
/* ================= HARDWARE HERO ================= */

.hardware-hero {
  height: 60vh;
  min-height: 420px;
  background: linear-gradient(
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.35)
    ),
    url("../images/hardware-hero.jpg") center/cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hardware-hero h1 {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
}

.hardware-hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.9);
}
/* =====================================================
   ABOUT BLOCK – HARDWARE / PREMIX TEMPLATE
===================================================== */

.about-block {
  margin-bottom: 50px;
}

.about-block h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111;
}

.about-block p {
  font-size: 15px;
  line-height: 1.85;
  color: #333;
  max-width: 820px;     /* 🔥 kawal lebar supaya premium */
}
/* =====================================================
   GENERIC COMPANY PAGE UPGRADE
   Diguna oleh: TSSB, TSPREMIX, HARDWARE
===================================================== */

/* ===== TOP IMAGE HERO (STANDARD) ===== */
.tspremix-top-image{
  height: 240px;
  margin: -60px -80px 60px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.tspremix-top-overlay{
  padding-left: 80px;
}

.tspremix-top-overlay h1{
  font-size: 48px;
  font-weight: 900;
}

.tspremix-top-overlay p{
  font-size: 18px;
}

/* ===== ABOUT BLOCK (STANDARD PREMIUM) ===== */
.about-block{
  margin-top: 40px;
  margin-bottom: 70px;
  max-width: 900px;
}

.about-block h3{
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111;
}

.about-block{
  font-size: 16.5px;
  line-height: 1.9;
  color: #333;
}

/* ===== COMPANY INFO (STANDARD) ===== */
.company-info-block{
  margin-top: 80px;
  margin-bottom: 110px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.info-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}

.info-left p{
  padding-left: 14px;
  border-left: 3px solid rgba(240,164,60,0.25);
  margin-bottom: 26px;
  line-height: 1.7;
}

.info-left strong{
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f0a43c;
  margin-bottom: 6px;
}

/* Right side */
.company-tag-box{
  font-size: 22px;
  padding: 28px 30px;
  border-radius: 16px;
}

.quarry-image-box{
  margin-top: 26px;
  max-width: 360px;
}

.quarry-image-box img{
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* ===== MISSION & VISION (STANDARD CARD) ===== */
.mv-grid{
  max-width: 980px;
  margin: 90px auto 110px;
  gap: 60px;
}

.mission-box,
.vision-box{
  background: #ffffff;
  border-radius: 18px;
  padding: 45px 50px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    0 40px 80px rgba(0,0,0,0.06);
  border: 1px solid #f1f1f1;
}

.mission-box h4,
.vision-box h4{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

.mission-box li{
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}

/* Vision highlight */
.vision-box{
  background: linear-gradient(135deg, #2a1b12, #3a2418);
  color: #ffffff;
}

.vision-box h4{
  color: #f0a43c;
}

.vision-box blockquote{
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.95);
  padding-left: 16px;
  border-left: 3px solid rgba(240,164,60,0.75);
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

  .tspremix-top-image{
    margin: -40px -25px 40px;
    height: 240px;
  }

  .tspremix-top-overlay{
    padding-left: 30px;
  }

  .info-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mv-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* =========================
   REMOVE EXTRA BOTTOM SPACE (ALL PAGES)
========================= */

body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.company-panel {
  
 padding-bottom: 80px; /* ruang dalam kotak putih */
margin-bottom: 80px; /* ruang antara panel & footer */
}

.site-footer {
  margin-bottom: 0 !important;
}

html {
  overflow-x: hidden;
}
/* FIX: FORCE DARK VISION FOR TS PREMIX */
.tspremix-wrapper .vision-box.vision-dark {
  background: linear-gradient(135deg, #3a2416, #5a3a26);
  color: #ffffff;
}

.tspremix-wrapper .vision-box.vision-dark h4 {
  color: #f5a623;
}

.tspremix-wrapper .vision-box.vision-dark blockquote {
  color: #ffffff;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.service-card {
  padding: 40px 35px;
  text-align: left;
}

.service-card i {
  font-size: 34px;
  color: #f0a43c;
  margin-bottom: 18px;
}

.service-card h4 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #111;
}

.service-card p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #333;
}

.work-list {
  padding-left: 20px;
}

.work-list li {
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.7;
}
/* =====================================================
   WHAT WE DO – MAIN PANEL
===================================================== */

.whatwedo-wrapper .company-panel {
  margin: 10px auto 120px;
  max-width: 1200px;
  padding: 90px 80px;

  /* 🔥 BUANG background gambar & gradient */
  background: #ffffff;

  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}


/* Container inside panel */
.whatwedo-wrapper .company-panel .container {
  max-width: 1320px;
  padding-left: 0;
  padding-right: 0;
}

/* Hero panel shadow */
.whatwedo-wrapper .tspremix-top-image {
  margin-bottom: 40px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* =====================================================
   SERVICES GRID
===================================================== */

.services-section {
  margin-top: 80px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

/* =====================================================
   SERVICE CARD – PREMIUM VERSION
===================================================== */

.service-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-radius: 20px;
  padding: 60px 50px;
  text-align: center;
  position: relative;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.10),
    0 5px 15px rgba(0,0,0,0.05);

  transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 35px 80px rgba(0,0,0,0.18),
    0 10px 25px rgba(0,0,0,0.08);
}

/* Accent gradient bar on top */
.service-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, #f2a23a, #b97a2b);
}

/* =====================================================
   CIRCLE IMAGE
===================================================== */

.circle-img {
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.service-card:hover .circle-img img {
  transform: scale(1.08);
}

/* =====================================================
   TEXT STYLING
===================================================== */

.service-card h4 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
  color: #1f2a33;
  letter-spacing: -0.3px;
}

.service-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto;
}

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

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

  .whatwedo-wrapper .company-panel {
    padding: 70px 30px;
  }
}
/* =====================================================
/* values  */
.values-list li i{
  color:#8c2f2b;
  margin-right:6px;
}
.about-text-block h3{
  margin-top:40px;
}

.about-text-block h3::after{
  content:"";
  display:block;
  width:50px;
  height:3px;
  background:#8c2f2b;
  margin:10px 0 20px;
}
.values-layout{
  display:flex;
  gap:40px;
  align-items:center;
}

.values-text{
  flex:1.3;
}

.values-image{
  flex:1;
}
.values-list li{
  color:#333;   /* 🔥 INI YANG HILANG */
}


.values-image img{
  width:100%;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  margin-top:40px;
  filter: contrast(1.05) saturate(0.95);
  
 
}
.values-list{
  list-style:none;
  padding-left:0;
}

.values-list li{
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
}

.values-list li::before{
  content:"\f058"; /* fa-check-circle */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#8c2f2b;
  position:absolute;
  left:0;
  top:2px;
  font-size:14px;
}

/* Mobile */
@media(max-width:768px){
  .values-layout{
    flex-direction:column;
  }
}
/* cert...............................*/
.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-top:50px;
}

.cert-card{
  background:#ffffff;
  border-radius:18px;
  padding:32px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
  transition:.3s ease;
}

.cert-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}

.cert-card h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
}

.cert-list{
  list-style:none;
  padding:0;
  margin:0;
}

.cert-list li{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  font-size:15px;
}

.cert-list i{
  color:#8c2f2b;
  margin-top:3px;
}

.cert-note{
  display:block;
  margin-top:18px;
  font-size:13px;
  color:#666;
}
.cert-list a{
  color:#222;
  text-decoration:none;
  font-weight:500;
}

.cert-list a:hover{
  color:#8c2f2b;
  text-decoration:underline;
}
.cert-list a{
  color:#222;
  text-decoration:none;
  font-weight:500;
}

.cert-list a:hover{
  color:#8c2f2b;
  text-decoration:underline;
}
/* ================= CERT VIEWER ================= */

/* ================= CERT VIEW MODAL ================= */
.cert-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:9999;
}

.cert-modal-content{
  position:relative;
  width:90%;
  max-width:900px;
  height:90vh;
  margin:3vh auto;
  background:#111;
  border-radius:12px;
  overflow:hidden;
}

.cert-modal iframe{
  width:100%;
  height:100%;
  border:none;
}

.cert-close{
  position:absolute;
  top:12px;
  right:18px;
  font-size:32px;
  color:#fff;
  cursor:pointer;
  z-index:10;
}

.cert-watermark{
  position:absolute;
  bottom:10px;
  right:20px;
  font-size:12px;
  color:rgba(255,255,255,0.6);
  z-index:5;
}

/* DISABLE PRINT */
@media print{
  body{ display:none !important; }
}
/* ===============================
   COMPANY HERO WITH RIGHT IMAGE
================================ */

.company-hero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 70px 60px;
  background: linear-gradient(
    to right,
    rgba(130,115,105,0.95) 0%,
    rgba(160,145,135,0.95) 45%,
    rgba(255,255,255,0.78) 100%
  );
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* GAMBAR KANAN */
.company-hero::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:48%;
  height:100%;
  background:
    linear-gradient(
      to left,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.35),
      rgba(255,255,255,0)
    ),
    url("../images/hq.png"); /* ⬅️ tukar gambar sini */
  background-size: cover;
  background-position: center;
  filter: grayscale(20%) contrast(1.05);
  box-shadow: inset -40px 0 60px rgba(0,0,0,0.35);
}

/* CONTENT KEKAL ATAS */
.company-hero-content{
  position: relative;
  z-index: 2;
  max-width: 55%;
}

.company-hero h1{
  font-size: 42px;
  font-weight: 800;
  color: #fff;
}

.company-hero h1 span{
  color:#f4a22e;
}

.company-hero p{
  color:#f2f2f2;
  margin-top:12px;
  font-size:16px;
}

/* =========================
   DROPDOWN – SMALL PANEL (PUBLIC FRIENDLY)
========================= */

.nav-dropdown {
  position: relative;
}

/* PANEL */
.dropdown-menu {
  position: absolute;
  top: 130%;
  left: 0;

  width: 260px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);

  padding: 10px;
  display: none;
  z-index: 999;
}

/* ITEM */
.dropdown-menu a {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s ease;
}

.dropdown-menu a:hover {
  background: #f3f3f3;
}

/* OPEN STATE */
.nav-dropdown.open .dropdown-menu {
  display: block;
}

/* ARROW ROTATE */
.nav-dropdown.open .arrow {
  transform: rotate(180deg);
}
/* =========================
   HERO – FINAL & STABLE
========================= */
.hero-full{
  position: relative;
  width: 100%;

  min-height: 80vh;        /* jangan terlalu tinggi */
  margin-top: -40px;        /* 🔥 TURUNKAN SELURUH KOTAK COKLAT */
  padding-top: 90px;       /* jarak teks dari atas hero */

  background: url("images/plant5.jpg") center/cover no-repeat;
  overflow: hidden;
}

/* overlay gelap */
.hero-full::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index:1;
}


/* =========================
   HERO TEXT
========================= */
.tspremix-top-overlay{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 40px 0;
  color: #fff;
}

.tspremix-top-overlay h1{
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
}

.tspremix-top-overlay h1 span{
  color: #f5a623;
}

.tspremix-top-overlay p{
  margin-top: 14px;
  font-size: 16px;
  opacity: .9;
}

/* =========================
   FLOATING CARDS (BOTTOM RIGHT)
========================= */
.hero-cards{
  position: absolute;
  right: 50px;
  bottom: 40px;
  display: flex;
  gap: 18px;
  z-index: 3;
}

.hero-card{
  width: 240px;
  height: 135px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .3s ease;
}

.hero-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.25),
    rgba(0,0,0,0)
  );
}

.hero-card span{
  position:absolute;
  bottom:14px;
  left:16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  color:#fff;
}

.hero-card:hover{
  transform: translateY(-6px);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){
  .tspremix-top-overlay h1{
    font-size: 40px;
  }
}

@media (max-width: 768px){
  .tspremix-top-overlay{
    padding: 120px 24px 0;
  }

  .hero-cards{
    display: none; /* ikut design asal Emma */
  }
}
/* =====================================================
   HERO FULL IMAGE – FINAL PREMIUM
===================================================== */
.hero-full-image{
  position: relative;
  background: url("../images/hero-main.jpg") center / cover no-repeat;
  overflow: hidden;

  /* naik rapat ke header */
  margin-top: -120px;
  padding-top: 160px;

  height: calc(110vh - 80px);
}

/* dark premium overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    rgba(0,0,0,.55),
    rgba(60,35,20,.88)
  );
  z-index:1;
}

/* =====================================================
   HERO TEXT (LEFT)
===================================================== */
.hero-text{
  position: relative;
  z-index:2;
  max-width:1200px;
  margin:auto;
  padding: 80px 40px 0;
  color:#fff;
}

.hero-text h1{
  font-size:48px;
  font-weight:700;
  margin:0;
  text-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);
}

.hero-text h1 span{
  color:#f5a623;
}

.hero-text p{
  position: relative;
  margin-top:14px;
  padding-bottom:18px;
  font-size:15px;
  font-weight:400;
  opacity:.85;
}

/* premium divider */
.hero-text p::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:2px;
  background: rgba(255,255,255,.75);
}

/* =====================================================
   HERO SLIDER (BOTTOM RIGHT)
===================================================== */
.hero-slider{
  position:absolute;
  right:40px;
  bottom:40px;
  display:flex;
  align-items:center;
  gap:16px;
  z-index:3;
}

/* arrows */
.hero-nav{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background: rgba(255,255,255,.18);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  backdrop-filter: blur(6px);
}

.hero-nav:hover{
  background: rgba(255,255,255,.32);
}

/* viewport – 2 kad sahaja */
.hero-viewport{
  width:640px;
  overflow:hidden;
}

/* sliding track */
.hero-track{
  display:flex;
  gap:18px;
  transition: transform .45s ease;
  will-change: transform;
}

/* =====================================================
   HERO CARD – FLAT PREMIUM
===================================================== */
.hero-card{
  flex:0 0 311px;
  height:175px;
  position:relative;
  overflow:hidden;
  text-decoration:none;

  border-radius:0; /* FLAT */
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}

.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* soft gradient overlay */
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.15),
    transparent
  );
}

/* card title – NORMAL (tak bold) */
.hero-card span{
  position:absolute;
  top:14px;
  left:16px;
  font-size:14px;
  font-weight:400;
  letter-spacing:.3px;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* =====================================================
   MOBILE
===================================================== */
@media(max-width:768px){
  .hero-slider{
    display:none;
  }

  .hero-text{
    padding:60px 24px 0;
  }

  .hero-text h1{
    font-size:36px;
  }
}
/* =====================================================
   WHAT WE DO – PAGE POLISH (FINAL)
===================================================== */

/* PANEL PUTIH TENGAH */
.company-panel{
  background: transparent;
  padding: 120px 0;
}

.company-panel > .container{
  background:#ffffff;
  border-radius:16px;
  padding:70px 70px 80px;
  box-shadow:0 40px 90px rgba(0,0,0,.25);
}

/* =====================================================
   HERO TITLE
===================================================== */
.whatwedo-wrapper h1{
  font-size:38px;
  font-weight:700;
  margin-bottom:8px;
  color:#1c1c1c;
}

.whatwedo-wrapper h1 span{
  color:#c98b2c; /* gold premium */
}

.whatwedo-wrapper > section .container > p{
  font-size:15px;
  color:#555;
}

/* =====================================================
   SECTION BLOCKS
===================================================== */
.about-block{
  margin-top:60px;
}

.about-block h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
  position:relative;
}

.about-block h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:60px;
  height:3px;
  background:#c98b2c;
}

.about-block p,
.work-list li{
  font-size:14.8px;
  line-height:1.75;
  color:#444;
}

/* =====================================================
   WHAT WE DO GRID (PREMIUM)
===================================================== */
.whatwedo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  margin-top:50px;
}

/* CARD */
.whatwedo-card{
  background:#fff;
  border:1px solid #e2e2e2;
  padding:36px 34px;
  min-height:260px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  box-shadow:0 14px 30px rgba(0,0,0,.12);
  transition:.3s ease;
}

.whatwedo-card h4{
  font-size:17px;
  font-weight:700;
  margin-bottom:14px;
  color:#0f1e2d;
}

.whatwedo-card p{
  font-size:14.5px;
  line-height:1.7;
  color:#555;
}

/* HOVER */
.whatwedo-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.18);
}

/* IMAGE CARD */
.whatwedo-card.image{
  padding:0;
  overflow:hidden;
}

.whatwedo-card.image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:.5s ease;
}

.whatwedo-card.image:hover img{
  transform:scale(1);
}

/* =====================================================
   HOW WE WORK
===================================================== */
.work-list{
  margin-top:18px;
  padding-left:18px;
}

.work-list li{
  margin-bottom:10px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:1100px){
  .company-panel > .container{
    padding:60px 40px;
  }

  .whatwedo-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .company-panel{
    padding:90px 0;
  }

  .company-panel > .container{
    padding:40px 24px;
    border-radius:12px;
  }

  .whatwedo-grid{
    grid-template-columns:1fr;
  }

  .whatwedo-wrapper h1{
    font-size:30px;
  }
}
/* =====================================================
   WHAT WE DO – CARD LINE (PREMIUM)
===================================================== */
.whatwedo-card{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  position:relative;
}

.whatwedo-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:#c98b2c; /* gold line */
  opacity:.9;
}

/* =====================================================
   IMAGE STACK (3 IMAGES)
===================================================== */
.whatwedo-card.image-stack{
  padding:0;
  border:none;
  box-shadow:none;
}

.image-large{
  width:100%;
  height:260px;
  overflow:hidden;
}

.image-large img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-small-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.image-small-grid img{
  width:100%;
  height:140px;
  object-fit:cover;
}

/* soft shadow around image block */
.image-large,
.image-small-grid img{
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:768px){
  .image-large{
    height:200px;
  }

  .image-small-grid img{
    height:120px;
  }
}
/* =========================
   CORE FOCUS – ALIGNED & PREMIUM
========================= */
.core-focus{
  margin-top: 40px;
}

.core-focus h3{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 40px;
  
}

/* wrapper text – PANJANGKAN KE KANAN */
.core-focus .focus-content{
  margin-left: 36px;          /* kekalkan offset */
  max-width: 980px;           /* ❗panjangkan */
}

/* paragraph style */
.core-focus .focus-content p{
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 18px;
}

/* paragraph pertama – sedikit emphasis */
.core-focus .focus-content p:first-child{
  font-weight: 500;
  color: #222;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.35)
  );
}
.hero-home{
  width:100%;
  height:100vh;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
  animation: zoomHero 18s infinite alternate;
}
/* === STANDARD PAGE FRAME (SATU SAHAJA) === */
.company-panel{
  background:#ffffff;
  border-radius:28px;
  margin:140px auto;
  padding:80px 0;
  box-shadow:0 35px 90px rgba(0,0,0,0.28);
}
.company-panel{
  background:#ffffff;
  border-radius:28px;
  margin:30px auto;
  padding:80px 90px;   /* ⬅️ INI PENTING */
  max-width:1200px;    /* ⬅️ kawal lebar supaya tak terlalu luas */
  box-shadow:0 35px 90px rgba(0,0,0,0.28);
}
.about-layout{
  display:grid;
  grid-template-columns: 1.3fr 1fr; /* kiri besar, kanan kecil */
  gap:80px;
  align-items:start;
}
.about-section-clean{
  max-width: none;        /* ⛔ buang had lama */
}

.about-text p{
  line-height:1.8;
  color:#444;
  margin-bottom:18px;
}
@media (max-width: 900px){
  .about-layout{
    grid-template-columns:1fr;
    gap:50px;
  }
}

/* ===== HEADER TEXT COLOR ===== */
.site-header,
.site-header a,
.site-header nav a {
  color: #111 !important;   /* hitam lembut, premium */
}
/* BUANG SEMUA LINE / UNDERLINE MENU */
.site-header nav a,
.site-header nav a:hover,
.site-header nav a:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}

.site-header nav a::after {
  display: none !important;
  content: none !important;
}
body.dropdown-open::before {
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 10;
}
/* FIX CONNECT WITH US BUTTON */
.connect-btn{
  background: #000;
  color: #fff !important;

  padding: 14px 28px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;

  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 1 !important;
  position: relative;
  z-index: 9999;

  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.connect-btn:hover{
  background: #111;
}
/* SEARCH ICON */
.search-btn{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  text-decoration:none;

  color:#111;
  font-size:15px;

  transition:all .25s ease;
}

.search-btn:hover{
  background:rgba(0,0,0,0.08);
  transform:scale(1.05);
}
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
  z-index: -1;
}

body::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), transparent);
}

body::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
}