@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background:  #007680;
  color: #fff;
}

::-moz-selection {
  background:  #007680;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #ee626b;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color:  #0076805;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #f35525;
}

.icon-button a:hover i {
  color: #fff;
}

.main-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color:  #007680;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style ( sama semua)
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background:  #007680;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background:  #007680;
  border-radius: 50%;
}



/* =============================================
   HEADER STYLES - PT SATRIA LAKSAMANA SEGORO
   Optimized for brand visibility and responsive design
   ============================================= */

/* Sub-Header (Top Contact Bar) */
.sub-header {
  background-color: #007680; /* corporate green */
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.sub-header ul li {
  display: inline-block;
  vertical-align: middle;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.sub-header ul.social-links li a:hover {
  background-color: #fff; 
  color: #007680; /* hover kebalikan */
  transform: translateY(-2px);
}
/* --- FIX Sub-header Link & Icon --- */
.sub-header a {
  color: #fff !important;     /* link jadi putih */
  text-decoration: none;      /* hilangkan underline */
}

.sub-header a:hover {
  color: #d4f5ef !important;  /* putih kehijauan saat hover */
}


.sub-header ul.info li {
  font-size: 16px;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.3);
  margin-right: 15px;
  padding-right: 15px;
  display: inline-flex;
  align-items: center;
}

.sub-header ul.info li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 18px;
  color: #fff;
  margin-right: 8px;
}

/* Main Header Container */
.header-area {
  position: relative;
  background-color: #fff;
  z-index: 100;
  transition: all 0.5s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);

  display: flex;              /* aktifkan flexbox */
  align-items: center;        /* center vertical */
  min-height: 70px;           /* tinggi minimal */
  padding: 10px 0;            /* biar ada ruang */
}

.background-header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 70px !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease;
}

/* Navigation Container */
.header-area .main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* --- Logo Styling --- */
.header-area .main-nav .logo img.brand-logo {
    max-height: 60px;   /* cukup besar tapi tidak kebesaran */
  width: auto;
}

.background-header .main-nav .logo img.brand-logo {
  max-height: 40px;   /* saat sticky header lebih kecil */
}


/* Navigation Menu */
.header-area .main-nav ul.nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.header-area .main-nav .nav li {
  padding: 0 12px;
  height: 90px;
  display: flex;
  align-items: center;
}

.header-area .main-nav .nav li a {
  display: block;
  padding: 5px 15px;
  font-weight: 500;
  font-size: 15px;
  color: #1e1e1e;
  transition: all 0.3s ease;
  border-radius: 4px;
  text-transform: capitalize;
}

.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
  color: #007680;
}

/* Special Button Style */
.header-area .main-nav .nav li:last-child a {
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 20px;
  padding-left: 15px;
}

.header-area .main-nav .nav li:last-child a i {
  background-color: #007680;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Menu Trigger */
.header-area .main-nav .menu-trigger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 25px;
  background: white;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  position: relative;
  z-index: 9999;
  border: none;
  cursor: pointer;
}

.header-area .main-nav .menu-trigger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #1e1e1e;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Animasi saat aktif */
.header-area .main-nav .menu-trigger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .header-area .main-nav .menu-trigger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .header-area .main-nav .menu-trigger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }


/* Responsive Adjustments */
@media (max-width: 1200px) {
  .header-area .main-nav .logo h1 {
    font-size: 18px;
  }
  
  .header-area .main-nav .nav li {
    padding: 0 8px;
  }
  
  .header-area .main-nav .nav li a {
    font-size: 14px;
    padding: 5px 10px;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  
  .header-area .main-nav .logo .brand-subtext {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area {
    height: 70px;
  }
  
  .header-area .main-nav .logo {
    max-width: 60%;
  }
  
 .header-area .main-nav .logo h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .header-area .main-nav .menu-trigger {
    display: flex !important;
    z-index: 10001; /* Lebih tinggi dari menu */
    position: relative;
  }
  
  .header-area .main-nav ul.nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%; /* tambahkan ini */
  right: auto; /* hapus right:0 */
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
     padding: 20px 10px; /* kurangi padding kanan kiri */
    padding: 20px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-100%); /* Diubah dari -150% ke -100% */
    transition: transform 0.4s ease-in-out;
    z-index: 9998; /* Pastikan di bawah hamburger button */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
  }
  
  
  .header-area .main-nav ul.nav.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }
  
  .header-area .main-nav .nav li {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .header-area .main-nav .nav li a {
    padding: 12px 15px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .header-area .main-nav .nav li:last-child a {
    border-bottom: none;
  }
}
  
  .background-header {
    height: 60px !important;
  }


/* Animation for header on scroll */
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.background-header {
  animation: headerSlideDown 0.3s ease-out;
}

/*tambahan*/
/* Mega Dropdown */
.main-nav ul.nav li.mega-dropdown {
  position: relative;
}

.main-nav ul.nav li.mega-dropdown .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  background: #fff;
  padding: 20px;
  display: flex;
  gap: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
}

.main-nav ul.nav li.mega-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu .mega-column h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #007680;
}

.mega-menu .mega-column ul li a {
  display: block;
  padding: 5px 0;
  color: #333;
  font-size: 14px;
}

.mega-menu .mega-column ul li a:hover {
  color: #007680;
}

.mega-menu .mega-column.view-all {
  display: flex;
  align-items: flex-end;
}

.mega-menu .mega-column.view-all a {
  font-weight: 700;
  color: #007680;
}
/* Pastikan link di mega menu tidak ikut styling 'active' dari nav utama */
.mega-menu .mega-column ul li a,
.mega-menu .mega-column ul li a.active {
  background: transparent !important;
  color: #333 !important;
}

.mega-menu .mega-column ul li a:hover {
  color: #007680 !important;
  background: transparent !important;
}
/* CTA Button di Header */
.header-area .main-nav .nav li.cta a {
  background: #007680 !important;   /* hijau corporate */
  color: #fff !important;           /* teks putih */
  border-radius: 25px;
  padding: 8px 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.header-area .main-nav .nav li.cta a:hover {
  background: #005a55 !important;   /* lebih gelap saat hover */
  color: #fff !important;
}


/*
Tambahkan konten
*/

color: #007680 !important;
  background: transparent !important;
}
/* CTA Button di Header */
.header-area .main-nav .nav li.cta a {
  background: #007680 !important;   /* hijau corporate */
  color: #fff !important;           /* teks putih */
  border-radius: 25px;
  padding: 8px 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.header-area .main-nav .nav li.cta a:hover {
  background: #005a55 !important;   /* lebih gelap saat hover */
  color: #fff !important;
}
:root {
  --wsa-blue: #007680;
}

.robusta-hero {
  padding: 100px 0;
  background: linear-gradient(to right, #ffffff 55%, #f6f9fa 100%);
}

.robusta-hero h1 {
  font-size: 38px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 20px;
}

.robusta-hero .subheadline {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 20px;
}

.robusta-hero .usp {
  font-size: 15px;
  font-weight: 600;
  color: var(--wsa-blue);
  margin-bottom: 25px;
}

.cta-buttons .btn {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  margin-right: 10px;
}

.btn-primary {
  background: var(--wsa-blue);
  border: none;
  color: #fff;
}

.btn-primary:hover {
  background: #005f5f;
}

.btn-outline-primary {
  border: 2px solid var(--wsa-blue);
  color: var(--wsa-blue);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--wsa-blue);
  color: #fff;
}

.hero-media img,
.hero-media .hero-video {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.origin-section {
  background: #fff;
}

.origin-section .section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1e1e1e;
}

.origin-section .section-intro {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
}

.origin-section p {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.origin-facts .fact-box {
  background: #f6f9fa;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.origin-facts .fact-box:hover {
  transform: translateY(-5px);
}

.origin-facts i {
  font-size: 28px;
  color: #007680;
  margin-bottom: 10px;
}

.origin-facts h6 {
  font-size: 16px;
  font-weight: 600;
  color: #1e1e1e;
}

.origin-facts p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

.map-graphic {
  max-width: 400px;
  margin-top: 20px;
}
.people-section {
  background: #f9fafa;
}

.people-section .section-title {
  font-size: 30px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 20px;
}

.people-section .section-intro {
  font-size: 16px;
  color: #444;
  margin-bottom: 20px;
  line-height: 1.7;
}

.people-section p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.people-slider img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Impact Numbers */
.impact-box {
  background: #fff;
  border-radius: 8px;
  padding: 15px 10px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

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

.impact-box h3 {
  font-size: 22px;
  font-weight: 700;
  color: #007680;
  margin-bottom: 5px;
}

.impact-box p {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin: 0;
}
.process-section {
  background: #f9fafa;
}

.process-section .section-title {
  font-size: 30px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 15px;
}

.process-section .section-intro {
  font-size: 16px;
  color: #555;
  max-width: 750px;
  margin: 0 auto 40px auto;
  line-height: 1.7;
}

.step-box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

.step-box h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #007680;
}

.step-box p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.flavor-section {
  background: #fff;
}

.flavor-section .section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 20px;
}

.flavor-section .section-intro {
  font-size: 16px;
  color: #444;
  margin-bottom: 25px;
  line-height: 1.7;
}

.flavor-notes {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
  gap: 20px;
}

.flavor-item {
  flex: 0 0 45%;
  background: #f5fafa;
  border-left: 4px solid #007680;
  padding: 12px 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease;
}

.flavor-item:hover {
  transform: translateY(-4px);
}

.flavor-item .icon {
  font-size: 20px;
}

.flavor-item p {
  margin: 0;
  font-size: 14px;
  color:#007680;
}

.btn-flavor {
  display: inline-block;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #007680;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-flavor:hover {
  background: #005f5f;
}
.sustain-section {
  background: #f8fafa;
}

.sustain-section .section-title {
  font-size: 28px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 15px;
}

.sustain-section .section-subtitle {
  font-size: 16px;
  font-style: italic;
  color: #007680;
  margin-bottom: 25px;
  line-height: 1.6;
}

.sustain-section p {
  font-size: 15px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 18px;
}

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: #ffffff;
  border-left: 5px solid #007680;
  padding: 18px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

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

.info-card .icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: #007680;
}

.info-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1e1e1e;
  margin-bottom: 6px;
}

.info-card p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .info-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }
  .info-card {
    flex: 1 1 calc(50% - 10px);
  }
}
/* --- Technical Snapshot --- */
.tech-snapshot {
  background: #f9fbfc;
}

.tech-snapshot .section-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1e1e1e;
}

.tech-snapshot .subtitle {
  font-size: 15px;
  color: #555;
  margin-bottom: 25px;
}

.snapshot-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 25px 20px;
}

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

.snapshot-list li {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.snapshot-list li .icon {
  font-size: 18px;
  margin-right: 10px;
  color: #007680;
}
/*selesai konten
*/


/*
footer
*/
.footer {
  background: #007680; /* biru WSA */
  color: #fff;
  padding: 60px 0 30px;
  font-size: 14px;
}

.footer-logo {
  max-width: 150px;
}

.footer h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

.footer p {
  color: #f2f2f2;
  line-height: 1.6;
}

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

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #f2f2f2;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #ffd700; /* aksen kuning emas */
}

.social-icons a {
  font-size: 18px;
  margin-right: 12px;
  color: #fff;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #ffd700;
}

/* Newsletter */
.newsletter-form {
  margin-top: 15px;
}

.newsletter-form input {
  padding: 10px 15px;
  border: none;
  border-radius: 4px 0 0 4px;
  width: 250px;
  max-width: 70%;
}

.newsletter-form button {
  padding: 10px 20px;
  border: none;
  background: #ffd700;
  color: #007680;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background: #ffc107;
}

/* Copyright */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
  font-size: 13px;
  color: #ddd;
}

/* =============================================
   MOBILE DROPDOWN STYLES - FIX OUR COFFEES ISSUE
   ============================================= */

/* Mobile dropdown trigger */
.dropdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-toggle .fa-angle-down {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

/* Mobile specific dropdown styles */
@media (max-width: 767px) {
  /* Reset mega menu untuk mobile */
  .main-nav ul.nav li.mega-dropdown .mega-menu {
    position: static;
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 10px;
  }

  /* Tampilkan mega menu saat active di mobile */
  .main-nav ul.nav li.mega-dropdown.active .mega-menu {
    display: block;
  }

  /* Rotate arrow when active */
  .main-nav ul.nav li.mega-dropdown.active .dropdown-toggle .fa-angle-down {
    transform: rotate(180deg);
  }

  /* Style untuk dropdown items di mobile */
  .mega-menu .mega-column {
    width: 100%;
  }

  .mega-menu .mega-column h4 {
    font-size: 14px;
    color: #007680;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #007680;
  }

  .mega-menu .mega-column ul {
    background: rgba(0, 118, 128, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
  }

  .mega-menu .mega-column ul li {
    margin-bottom: 8px;
    height: auto !important;
    display: block !important;
  }

  .mega-menu .mega-column ul li:last-child {
    margin-bottom: 0;
  }

  .mega-menu .mega-column ul li a {
    padding: 10px 15px !important;
    color: #333 !important;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: block;
    border: none !important;
  }

  .mega-menu .mega-column ul li a:hover {
    background: #007680 !important;
    color: #fff !important;
  }

  /* Pastikan nav item tidak terpengaruh styling desktop */
  .main-nav ul.nav li.mega-dropdown {
    flex-direction: column;
    align-items: flex-start;
    height: auto !important;
    padding: 0 !important;
  }

  .main-nav ul.nav li.mega-dropdown > a {
    width: 100%;
    padding: 12px 15px !important;
    border-bottom: 1px solid #f0f0f0;
  }
}

/* Desktop styles tetap sama */
@media (min-width: 768px) {
  .main-nav ul.nav li.mega-dropdown .mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 600px;
    background: #fff;
    padding: 20px;
    display: flex;
    gap: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
  }

  .main-nav ul.nav li.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-toggle .fa-angle-down {
    font-size: 12px;
  }
}
/* =============================================
   DROPDOWN FIX - PREVENT NAVIGATION CONFLICT
   ============================================= */

/* Style untuk dropdown trigger yang non-navigational */
a[href="javascript:void(0);"] {
  cursor: pointer;
}

/* Pastikan dropdown items yang sebenarnya bisa diklik */
.mega-menu .mega-column ul li a[href*=".html"] {
  cursor: pointer;
}

/* Mobile dropdown states */
@media (max-width: 767px) {
  .main-nav ul.nav li.mega-dropdown.active > a {
    background: rgba(0, 118, 128, 0.1);
    color: #007680 !important;
    font-weight: 600;
  }
  
  .main-nav ul.nav li.mega-dropdown.active .dropdown-toggle .fa-angle-down {
    transform: rotate(180deg);
    color: #007680;
  }
}

/* =============================================
   ADDITIONAL FIXES - ENHANCE MOBILE EXPERIENCE
   ============================================= */

@media (max-width: 767px) {
  /* Pastikan link di dropdown mobile memiliki cursor pointer */
  .mega-menu .mega-column ul li a {
    cursor: pointer !important;
  }
  
  /* Improve touch targets untuk mobile */
  .mega-menu .mega-column ul li a {
    min-height: 44px; /* Minimum touch target size */
    display: flex;
    align-items: center;
  }
  
  /* Pastikan tidak ada background conflict */
  .mega-menu .mega-column ul li a[href*=".html"] {
    background: transparent !important;
  }
  
  .mega-menu .mega-column ul li a[href*=".html"]:hover {
    background: #007680 !important;
    color: #fff !important;
  }
}

/* =============================================
   NAVBAR ALIGNMENT FIX - MAKE IT BEAUTIFUL!
   ============================================= */

/* FIX: Perfect vertical alignment untuk semua navbar items */
.header-area .main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px; /* Tinggi konsisten */
}

/* FIX: Logo alignment */
.header-area .main-nav .logo {
  display: flex;
  align-items: center;
  height: 80px; /* Match navbar height */
}

.header-area .main-nav .logo img.brand-logo {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

/* FIX: Nav items perfect alignment */
.header-area .main-nav .nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 80px; /* Match navbar height */
}

.header-area .main-nav .nav li {
  display: flex;
  align-items: center;
  height: 80px; /* Semua items sama tinggi */
  margin: 0;
  padding: 0 10px;
}

.header-area .main-nav .nav li a {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 15px;
  color: #1e1e1e;
  transition: all 0.3s ease;
  border-radius: 6px;
  height: 40px; /* Consistent button height */
  white-space: nowrap;
}

/* FIX: CTA button alignment */
.header-area .main-nav .nav li.cta a {
  background: #007680 !important;
  color: #fff !important;
  border-radius: 25px;
  padding: 8px 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px; /* Sedikit lebih tinggi untuk emphasis */
}

/* FIX: Dropdown arrow alignment */
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown-toggle .fa-angle-down {
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* FIX: Active state alignment */
.header-area .main-nav .nav li a.active,
.header-area .main-nav .nav li a:hover {
  color: #007680;
  background: rgba(0, 118, 128, 0.05);
}

/* FIX: Mobile responsive alignment */
@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding: 0 8px;
  }
  
  .header-area .main-nav .nav li a {
    font-size: 14px;
    padding: 8px 12px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li a {
    font-size: 13px;
    padding: 8px 10px;
  }
  
  .header-area .main-nav .logo img.brand-logo {
    max-height: 45px;
  }
}

/* FIX: Pastikan tidak ada floating/positioning issues */
.header-area .container {
  position: relative;
}

.header-area .row {
  align-items: center;
}

.header-area .col-12 {
  display: flex;
  align-items: center;
}

/* =============================================
   MOBILE MENU FIX - HAMBURGER KE BAWAH
   ============================================= */

@media (max-width: 767px) {
  /* PASTIKAN menu turun ke bawah di mobile */
  .header-area .main-nav .nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
    z-index: 9998;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
  }
  
  .header-area .main-nav .nav.active {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Reset semua styling desktop */
  .header-area .main-nav .nav li {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  
  .header-area .main-nav .nav li a {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #f0f0f0;
    height: auto !important;
    display: block !important;
  }
  
  /* Hilangkan flex alignment di mobile */
  .header-area .main-nav .nav,
  .header-area .main-nav .nav li,
  .header-area .main-nav .nav li a {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  
  /* CTA button mobile styling */
  .header-area .main-nav .nav li.cta a {
    background: #007680 !important;
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    margin-top: 10px;
  }
}
/* =============================================
   MOBILE MENU FIX - FULL SCREEN DISPLAY
   ============================================= */

@media (max-width: 767px) {
  /* FIX: Mobile menu full screen display */
  .header-area .main-nav .nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 70px);
    background: #fff;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-100%);
    transition: all 0.4s ease-in-out;
    z-index: 9998;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    display: flex !important; /* Pastikan display flex */
  }
  
  .header-area .main-nav .nav.active {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important; /* Pastikan tetap flex saat aktif */
  }
  
  /* FIX: Pastikan menu items terlihat jelas */
  .header-area .main-nav .nav li {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  
  .header-area .main-nav .nav li a {
    width: 100% !important;
    padding: 15px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #f0f0f0;
    height: auto !important;
    display: block !important;
    text-align: left;
  }
  
  /* FIX: Dropdown styling untuk mobile */
  .main-nav ul.nav li.mega-dropdown.active .mega-menu {
    display: block !important;
    width: 100%;
    background: rgba(0, 118, 128, 0.05);
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px;
  }
  
  /* FIX: CTA button mobile styling */
  .header-area .main-nav .nav li.cta {
    margin-top: 15px;
  }
  
  .header-area .main-nav .nav li.cta a {
    background: #007680 !important;
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    margin-top: 10px;
    justify-content: center;
  }
}

/* FIX: Overlay untuk background gelap */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* FIX: No scroll ketika menu aktif */
body.no-scroll {
  overflow: hidden;
}

/* =============================================
   DROPDOWN ARROW FIX - HILANGKAN DOUBLE ARROW
   ============================================= */

/* FIX: Hilangkan arrow bawaan browser */
.dropdown-toggle::after {
  display: none !important;
}

/* FIX: Style untuk custom arrow */
.dropdown-toggle .fa-angle-down {
  margin-left: 5px;
  font-size: 12px;
  transition: transform 0.3s ease;
  display: inline-block !important;
}

/* FIX: Rotate arrow ketika active */
.main-nav ul.nav li.mega-dropdown.active .dropdown-toggle .fa-angle-down {
  transform: rotate(180deg);
}

/* =============================================
   DROPDOWN CLICK FIX - PERBAIKI EVENT HANDLING
   ============================================= */

/* FIX: Pastikan dropdown trigger bisa diklik */
.dropdown-toggle {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* FIX: Style untuk dropdown items agar jelas bisa diklik */
.mega-menu .mega-column ul li a {
  cursor: pointer !important;
  transition: all 0.3s ease;
}

.mega-menu .mega-column ul li a:hover {
  background: #007680 !important;
  color: #fff !important;
  transform: translateX(5px);
}

/* =============================================
   MOBILE DROPDOWN VISIBILITY FIX
   ============================================= */

@media (max-width: 767px) {
  /* FIX: Pastikan dropdown terlihat di mobile */
  .main-nav ul.nav li.mega-dropdown.active .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
    background: rgba(0, 118, 128, 0.05) !important;
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px;
    box-shadow: none !important;
  }

  /* FIX: Style untuk dropdown items di mobile */
  .mega-menu .mega-column {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .mega-menu .mega-column:last-child {
    margin-bottom: 0;
  }

  .mega-menu .mega-column h4 {
    font-size: 14px;
    color: #007680;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #007680;
    font-weight: 600;
  }

  .mega-menu .mega-column ul {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0;
  }

  .mega-menu .mega-column ul li {
    margin-bottom: 8px;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
  }

  .mega-menu .mega-column ul li:last-child {
    margin-bottom: 0;
  }

  .mega-menu .mega-column ul li a {
    padding: 12px 15px !important;
    color: #333 !important;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: block;
    border: none !important;
    background: transparent !important;
  }

  .mega-menu .mega-column ul li a:hover {
    background: #007680 !important;
    color: #fff !important;
  }
}

/* =============================================
   OVERLAY FIX - HILANGKAN ATAU PERBAIKI OVERLAY
   ============================================= */

/* OPSI 1: Hapus overlay sama sekali */
.nav-overlay {
  display: none !important;
}

/* ATAU OPSI 2: Perbaiki overlay agar tidak menghalangi */
.nav-overlay {
  position: fixed;
  top: 70px !important; /* Mulai dari bawah header */
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  background: rgba(0, 0, 0, 0.5);
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none; /* Biarkan klik tembus */
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* Aktifkan hanya ketika perlu */
}

/* =============================================
   MOBILE MENU Z-INDEX FIX
   ============================================= */

@media (max-width: 767px) {
  .header-area .main-nav .nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff;
    flex-direction: column !important;
    padding: 20px 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateX(-100%); /* Ubah dari translateY ke translateX */
    transition: transform 0.3s ease-in-out;
    z-index: 9999 !important; /* Pastikan z-index lebih tinggi */
    overflow-y: auto;
    display: flex !important;
  }
  
  .header-area .main-nav .nav.active {
    transform: translateX(0) !important; /* Slide dari kiri */
  }

  /* FIX: Pastikan menu items bisa diklik */
  .header-area .main-nav .nav li {
    width: 100% !important;
  }
  
  .header-area .main-nav .nav li a {
    padding: 15px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer !important;
  }
}

/* --- Closing CTA --- */
.closing-cta {
  position: relative;
  background: url('assets/images/green-beans.jpg') center/cover no-repeat;
  padding: 80px 20px;
  color: #fff;
}

.closing-cta .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 118, 128, 0.8);
  z-index: 1;
}

.closing-cta .container {
  position: relative;
  z-index: 2;
}

.closing-cta h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
}

.closing-cta p {
  font-size: 16px;
  margin-bottom: 25px;
}

.btn-cta {
  display: inline-block;
  padding: 12px 28px;
  margin: 5px;
  color: #fff;
  background: #00a7b5;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-cta:hover {
  background: #005f6b;
}

.btn-cta-outline {
  display: inline-block;
  padding: 12px 28px;
  margin: 5px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-cta-outline:hover {
  background: #fff;
  color: #007680;
}

.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center; align-items: center;
}
.video-modal-content {
  position: relative;
  background: #000;
  width: 90%; max-width: 800px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
}
.video-close {
  position: absolute; top: 10px; right: 15px;
  color: #fff; font-size: 30px; cursor: pointer;
}
#videoFrame { width:100%; height:100%; border:0; }

.video-thumbnail {
  position: relative;
  display: inline-block;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button svg {
  width: 40px;
  height: 40px;
}

/* =============================================
   MAINTENANCE PAGE STYLE
   ============================================= */
.maintenance-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  text-align: center;
  padding: 100px 20px;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 1s ease-out;
}

.maintenance-section img {
  max-width: 220px;
  margin-bottom: 30px;
  opacity: 0.95;
  animation: float 3s ease-in-out infinite;
}

.maintenance-section h1 {
  font-size: 34px;
  font-weight: 700;
  color: #007680;
  margin-bottom: 15px;
}

.maintenance-section p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 25px;
}

.maintenance-section .btn {
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  background-color: #007680;
  color: #fff;
  border: none;
  transition: all 0.3s ease;
}

.maintenance-section .btn:hover {
  background-color: #005f5f;
  transform: translateY(-2px);
}

/* Animasi floating untuk icon/gambar */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Video Modal Improvements */
.video-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

.video-modal-content {
  position: relative;
  margin: 2% auto;
  padding: 0;
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-modal-content iframe {
  width: 100%;
  height: 500px;
  display: block;
}

.video-close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Improve video thumbnail clickability */
.video-thumbnail {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.video-thumbnail:hover {
  transform: scale(1.02);
}

.video-thumbnail:hover .play-button {
  background: rgba(0, 118, 128, 0.8);
  transform: scale(1.1);
}

.play-button {
  transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-modal-content {
    width: 95%;
    margin: 10% auto;
  }
  
  .video-modal-content iframe {
    height: 300px;
  }
  
  .video-close {
    top: 10px;
    right: 15px;
    font-size: 25px;
    width: 35px;
    height: 35px;
  }
}