/* ===================================================================
TOC (TABLE OF CONTENTS)
======================================================================
1.  RESET & GLOBAL STYLES
    - CSS Reset
    - Global Body & Font Styles
2.  ANIMATIONS
    - @keyframes Definitions
3.  UTILITY & HELPER CLASSES
    - Buttons
    - Section Heading
4.  MAJOR COMPONENTS (LAYOUT)
    4.1. Header Area
    4.2. Banner Section
    4.3. Services Section
    4.4. Our Courses Section
    4.5. CTA Section
    4.6. Contact Us & Footer Section
5.  RESPONSIVE STYLES (MEDIA QUERIES)
    - @media (max-width: 1240px)
    - @media (max-width: 1200px)
    - @media (max-width: 992px)
    - @media (max-width: 767px)
    - @media (max-width: 576px)
=================================================================== */

/* ---------------------------------------------
1. RESET & GLOBAL STYLES
--------------------------------------------- */

/* --- CSS Reset --- */
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;
}

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

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

* {
  box-sizing: border-box;
}

/* --- Global Body & Font Styles --- */
html, body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
  padding-top: 80px; /* Compensate for fixed header on desktop */
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

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

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

::selection {
  background: #1E88E5;
  color: #fff;
}

section {
  margin-top: 140px;
}

/* ---------------------------------------------
2. ANIMATIONS
--------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(78, 115, 223, 0.3); }
  50% { box-shadow: 0 0 30px rgba(78, 115, 223, 0.6); }
}

@keyframes slideDown {
  from { transform: translateY(-100%) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes headerSlideIn {
  from { transform: translateY(-20px); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}

/* @keyframes menuPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255, 179, 0, 0); }
} */

/* ---------------------------------------------
3. UTILITY & HELPER CLASSES
--------------------------------------------- */

/* --- Global Transition --- */
* {
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* --- Buttons --- */
.main-button-gradient a {
  font-size: 13px;
  color: #fff;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D);
  background-size: 300% 300%;
  animation: shimmer 3s ease-in-out infinite;
  padding: 15px 35px;
  display: inline-block;
  border-radius: 25px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.main-button-gradient a i,
.main-blue-button-hover a i,
.text-button a i,
form#contact button i {
  margin-right: 8px;
  transition: all 0.3s ease;
}

.main-button-gradient a:hover i,
.main-blue-button-hover a:hover i,
.text-button a:hover i {
  transform: scale(1.1);
}

.main-button-gradient a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.main-button-gradient a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 179, 0, 0.4);
}

.main-button-gradient a:hover::before {
  left: 100%;
}

.text-button a {
  font-size: 14px;
  font-weight: 600;
  color: #1E88E5;
  text-decoration: none !important;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.text-button a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(45deg, #1E88E5, #FFB300);
  transition: width 0.3s ease;
}

.text-button a:hover::after {
  width: 100%;
}

.text-button a:hover {
  color: #FFB300!important;
  transform: translateY(-2px);
}

/* --- Section Heading --- */
.section-heading {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 60px;
  animation: fadeInUp 0.8s ease-out;
}

.section-heading h6 {
  font-size: 13px;
  text-transform: uppercase;
  color: #7a7a7a;
  font-weight: 600;
  position: relative;
  animation: fadeInLeft 0.6s ease-out;
}

.section-heading h6::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D);
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 28px;
  font-weight: 900;
  text-transform: capitalize;
  color: #111;
  animation: fadeInRight 0.6s ease-out 0.2s both;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-heading h4 em {
  font-style: normal;
  color: #1E88E5;
}

.section-heading p {
  margin-top: 30px;
}

/* ---------------------------------------------
4. MAJOR COMPONENTS (LAYOUT)
--------------------------------------------- */

/* --- 4.1. Header Area ---
*/
.header-area {
  background-image: url(../../images/hero/header-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 35px;
  margin-right: 0px;
  background-color: transparent;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 30px;
  padding-right: 30px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
  color: #fff;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.header-area .main-nav .nav li a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform: translateX(-50%);
}

.header-area .main-nav .nav li:hover a::before,
.header-area .main-nav .nav li a.active::before {
  width: 100%;
}

.header-area .main-nav .nav li:hover a {
  transform: translateY(-2px);
  color: #FFB300!important;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
  transition: all 0.3s ease;
}

.header-area .main-nav .nav li.has-sub:hover:after {
  transform: rotate(180deg);
  color: #FFB300;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 160px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  top: 40px;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform: translateY(10px);
  visibility: hidden;
  z-index: -1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 100;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: rgba(255, 255, 255, 0.95);
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
  background: rgba(255,255,255,0.95);
  color: #FFB300 !important;
  padding-left: 25px;
  transform: none;
}

/* Scrolled / Sticky State */
.header-area.background-header {
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.95), rgba(244, 67, 54, 0.95), rgba(30, 136, 229, 0.95), rgba(0, 46, 93, 0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  height: 90px;
  transform: translateY(0) scale(1);
  animation: slideDown 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.header-area.background-header .main-nav .logo {
  line-height: 90px;
  transform: scale(0.9);
}

.header-area.background-header .main-nav .nav {
  margin-top: 25px;
}

.header-area.background-header .main-nav .nav li a {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-area.background-header .main-nav .nav li:hover a {
  color: #FFB300 !important;
  transform: translateY(-2px) scale(1.05);
}

/* Mobile Menu Trigger */
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: none; /* Hidden on desktop */
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
  width: 75%;
}

.header-area .main-nav .menu-trigger span { top: 16px; }
.header-area .main-nav .menu-trigger span:before { top: -10px; }
.header-area .main-nav .menu-trigger span:after { top: 10px; }


/* --- 4.2. Banner Section (Hero) ---
*/
.main-banner {
  background-image: url(../../images/hero/banner-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;

  /* === PERUBAHAN UTAMA DI SINI === */
  padding: 80px 0; /* 1. Padding atas-bawah dibuat seimbang & cukup untuk header */
  min-height: 90vh; /* 2. Tinggi banner minimal 90% dari tinggi layar, SANGAT PENTING untuk konsistensi vertikal */
  display: flex; /* 3. Aktifkan Flexbox */
  align-items: center; /* 4. Ini akan menengahkan seluruh konten (kiri & kanan) secara vertikal dengan sempurna */
}

.main-banner:after {
  content: '';
  background-image: url(../../images/hero/yes.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  pointer-events: none;
  
  /* Membuat posisi & ukuran elemen dekoratif menjadi fluid */
  left: clamp(0px, 2vw, 20px);
  top: clamp(40px, 10vh, 80px);
  width: clamp(150px, 14vw, 267px);
  
  /* Menjaga rasio aspek elemen dekoratif */
  height: auto;
  aspect-ratio: 267 / 532; 
  z-index: 2;
}

.main-banner .owl-dots {
  position: relative;
  z-index: 10;
}

.main-banner .banner-right-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* Membuat posisi & lebar gambar menjadi fluid namun terkontrol */
  right: clamp(20px, 4vw, 80px); 
  width: clamp(450px, 42vw, 819px);
  
  /* PENTING: Menjaga rasio aspek gambar agar tidak terdistorsi */
  height: auto; 
  z-index: 1;
}

.main-banner .banner-right-image video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-banner .item {
  margin-right: 45px;
  padding: 20px 0;
  /* min-height: 400px; Kita hapus karena penyejajaran vertikal sudah diatur oleh .main-banner */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-banner .item h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #ff695f;
  margin-bottom: 15px;
}

.main-banner .item h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .item h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .item h2 span {
  color: #ff695f;
}

.main-banner .item p {
  margin: 20px 0px;
}

.main-banner .item .down-buttons {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.main-banner .item .down-buttons .main-blue-button-hover a {
  background: linear-gradient(45deg, #1E88E5, #166bb8);
  color: #fff;
  padding: 15px 30px;
  border-radius: 25px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
  white-space: nowrap;
}

.main-banner .item .down-buttons .main-blue-button-hover a:hover {
  background: linear-gradient(45deg, #166bb8, #1565c0);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4);
}

.main-banner .item .down-buttons .call-button a {
  color: #ff695f;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  white-space: nowrap;
}

.main-banner .item .down-buttons .call-button i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff695f, #ff5449);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 4px 15px rgba(255, 105, 95, 0.3);
}

.main-banner .item .down-buttons .call-button:hover i {
  background: linear-gradient(45deg, #ff5449, #ff1744);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 105, 95, 0.4);
}

.main-banner .item .down-buttons .call-button:hover a {
  color: #ff5449;
  transform: translateX(5px);
}

.main-banner .owl-dots {
  margin-top: 60px;
  counter-reset: dots;
}

.main-banner .owl-dot:before {
  counter-increment:dots;
  content: counter(dots);
  font-size: 20px;
  font-weight: 500;
  margin-left: 10px;
  color: #2a2a2a;
  width: 15px;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: all .5s;
}

.main-banner .active:before {
  color: #ff685f;
  border-bottom: 3px solid #ff685f;
}

/* --- 4.3. Services Section ---
*/
.services .item {
  border-radius: 20px;
  text-align: center;
  padding: 40px 30px;
  margin: 15px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.services .item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(30, 136, 229, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.services .item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

.services .item:hover::before {
  opacity: 1;
}

.services .item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  margin-bottom: 20px;
}

.services .item .icon img {
  max-width: 65px;
  max-height: 65px;
  width: auto;
  height: auto;
}

.services .item:hover .icon {
  transform: scale(1.1) rotate(5deg);

}

.services .item h4 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 800;
  color: #111;
}

.services .item:hover h4 {
  color: #1E88E5;
}

.services .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.services .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0px 4px;
}

.services .owl-dots .active {
  background-color: #1E88E5;
}

/* --- 4.4. Our Courses Section ---
*/
section.our-courses {
  position: relative;
}

section.our-courses .section-heading p {
  padding: 0px 60px;
}

section.our-courses:before {
  position: absolute;
  content: '';
  background-image: url(../../images/hero/our-courses-left-dec.png);
  left: 45px;
  top: -140px;
  width: 291px;
  height: 231px;
  z-index: 1;
}

section.our-courses:after {
  position: absolute;
  content: '';
  background-image: url(../../images/hero/our-courses-right-dec.png);
  right: 45px;
  top: -140px;
  width: 291px;
  height: 231px;
  z-index: 1;
}

section.our-courses .naccs {
  position: relative;
}

section.our-courses .naccs .menu div {
  padding: 20px 35px;
  text-align: center;
  border-radius: 15px !important;
  margin-bottom: 40px;
  font-size: 18px;
  color: #1E88E5;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  font-weight: 700;
  border: 2px solid rgba(30, 136, 229, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

section.our-courses .naccs .menu div::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.1), transparent);
  transition: left 0.5s;
}

section.our-courses .naccs .menu div:hover::before {
  left: 100%;
}

section.our-courses .naccs .menu div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 136, 229, 0.2);
}

section.our-courses .naccs .menu div.active {
  color: #fff;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D);
  border: 2px solid #FFB300;
  box-shadow: 0 8px 25px rgba(255, 179, 0, 0.3);
  transform: scale(1.05);
}

section.our-courses ul.nacc {
  margin-left: 100px !important;
  position: relative;
  min-height: 100%;
}

section.our-courses ul.nacc li {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateX(20px);
  pointer-events: none;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding-right: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

section.our-courses ul.nacc li.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
  animation: slideInRight 0.6s ease-out;
}

section.our-courses ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.our-courses ul.nacc li .left-image img {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  transition: all 0.4s ease;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

section.our-courses ul.nacc li:hover .left-image img {
  transform: scale(1.05);
}

section.our-courses ul.nacc li .right-content {
  padding: 40px 0px;
  margin-left: 350px;
}

section.our-courses ul.nacc li .right-content h4 {
  font-size: 20px;
  color: #111;
  margin-bottom: 25px;
  font-weight: 800;
}

section.our-courses ul.nacc li .right-content span {
  font-size: 14px;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 2px solid #111;
}

section.our-courses ul.nacc li .right-content .last-span {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

section.our-courses ul.nacc li .right-content p {
  margin-bottom: 20px;
}

section.our-courses ul.nacc li .right-content .text-button {
  margin-top: 20px;
}

section.our-courses ul.nacc li {
  border-right: 3px solid #1E88E5; /* Diubah dari 'border' menjadi 'border-right' */
}

/* 2. Mengubah warna teks HANYA untuk judul paket (h4) */
section.our-courses ul.nacc li .right-content h4 {
  color: #1E88E5; /* Mengganti target dari 'span' ke 'h4' */
}



/* --- 4.5. CTA Section (Call to Action) ---
*/
section.simple-cta {
  background-image: url(../../images/hero/cta-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 180px 0px;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h6 {
  font-size: 17px;
  color: #fff;
}

section.simple-cta h4 {
  font-size: 62px;
  font-weight: 900;
  color: #fff;
  line-height: 74px;
  margin-top: 20px;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}

/* --- 4.6. Contact Us & Footer Section ---
*/
#contact-section {
  padding-top: 20px;
}

section.contact-us {
  background-image: url(../../images/hero/footer-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 80px;
  position: relative;
}

section.contact-us:after {
  position: absolute;
  content: '';
  background-image: url(../../images/hero/footer-left-dec.png);
  left: 0px;
  top: 60px;
  width: 267px;
  height: 396px;
  z-index: 1;
}

section.contact-us .section-heading {
  text-align: left;
  margin-bottom: 40px;
}

section.contact-us #map {
  margin-top: -180px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

form#contact {
  margin-left: -100px;
  margin-top: -60px;
  position: relative;
  z-index: 3;
  background-color: #ffffff;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 60px 120px;
  border-radius: 20px;
}

form#contact input,
form#contact textarea {
  width: 100%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(30, 136, 229, 0.2);
  outline: none;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 35px;
}

form#contact input {
  height: 46px;
}

form#contact textarea {
  min-height: 120px;
  resize: vertical;
  padding: 20px;
}

form#contact input:focus,
form#contact textarea:focus {
  border-color: #1E88E5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

form#contact input::placeholder,
form#contact textarea::placeholder {
  color: #afafaf;
}

form#contact button {
  display: inline-block;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D);
  background-size: 300% 300%;
  animation: shimmer 3s ease-in-out infinite;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  padding: 15px 35px;
  border-radius: 25px;
  border: none;
  outline: none;
  box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

form#contact button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

form#contact button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 136, 229, 0.4);
}

form#contact button:hover::before {
  left: 100%;
}

section.contact-us ul.social-icons {
  text-align: center;
  margin-top: 70px;
}

section.contact-us ul.social-icons li {
  display: inline-block;
  margin: 0px 5px;
}

section.contact-us ul.social-icons li a {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background: linear-gradient(135deg, #0052D4, #4364F7, #6FB1FC);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(255, 179, 0, 0.3);
  font-size: 16px;
}

section.contact-us ul.social-icons li a:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 25px rgba(255, 179, 0, 0.4);
 
}

p.copyright {
  text-align: center;
  color: #fff;
  margin: 40px 0px;
}

p.copyright a {
  font-weight: 700;
  color: #fff;
}

/* Tambahkan kode ini di bagian Contact Us CSS */
section.contact-us .section-heading h6::after {
  display: none;
}

/* ---------------------------------------------
5. RESPONSIVE STYLES (MEDIA QUERIES)
--------------------------------------------- */
@media (max-width: 1240px) {
  .main-banner::before {
    width: 640px;
    height: 526px;
  }
}

@media (max-width: 1200px) {
  /* --- Header --- */
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area {
    background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D) !important;
  }
  /* --- Banner --- */
  .main-banner .item h2 {
    font-size: 62px;
  }
  .main-banner .item .down-buttons .main-blue-button-hover a,
  .main-banner .item .down-buttons .call-button a {
    font-size: 16px;
  }
  .main-banner .item .down-buttons .main-blue-button-hover a {
    padding: 18px 35px;
  }
}

@media (max-width: 991px) {
  /* --- Global --- */
  html, body {
    overflow-x: hidden;
    padding-top: 0 !important; /* Remove padding for mobile */
  }
  .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; }
  .mobile-bottom-fix { margin-bottom: 30px; }
  .mobile-bottom-fix-big { margin-bottom: 60px; }

  /* --- Header --- */
 /* GANTI BLOK HEADER LAMA ANDA DENGAN YANG INI */
/* --- Header --- */
.header-area {
  position: relative !important; /* PENTING: Mengubah posisi header di mobile */
  height: auto !important;
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D) !important;
}
.header-area.header-sticky {
  position: relative !important; /* Pastikan tetap relative bahkan saat class sticky ditambahkan */
  animation: none; /* Hapus animasi slide-in di mobile */
}

/* Mengatur layout flexbox pada navigasi */
.header-area .main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

/* Mengatur ulang posisi logo khusus mobile */
.header-area .main-nav .logo {
  line-height: 1;
}

/* HAPUS padding-top pada body di mobile agar tidak ada spasi kosong */
body {
  padding-top: 0 !important;
}

  /* --- Banner --- */
  .main-banner {
    padding-top: 100px;
    padding-bottom: 80px;
    background-image: none !important;
    background-color: #f0f4f9;
  }
  .main-banner:after,
  .main-banner .banner-right-image {
    display: none;
  }
  .main-banner .item {
    margin-right: 0;
    text-align: center;
    min-height: 250px;
  }
  .main-banner .item h2 { font-size: 36px; line-height: 1.2; }
  .main-banner .item .down-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    justify-content: center;
  }
  .main-banner .item .down-buttons .main-blue-button-hover,
  .main-banner .item .down-buttons .call-button {
    width: 100%;
    text-align: center;
  }
  .main-banner .item .down-buttons .main-blue-button-hover a,
  .main-banner .item .down-buttons .call-button a {
    width: 100%;
    justify-content: center;
  }

  /* --- Services --- */
  .services .owl-service-item.owl-carousel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .services .owl-nav, .services .owl-dots { display: none !important; }
  .services .item {
    padding: 25px 20px;
    margin: 0;
  }
  .services .item .icon img { max-width: 55px; max-height: 55px; }
  .services .item h4 { font-size: 18px; margin-top: 15px; }
  .services .item p { font-size: 13px; line-height: 1.5; }

  /* --- Our Courses (Accordion) --- */
  section.our-courses ul.nacc { margin-left: 0 !important; }
  section.our-courses .naccs .menu {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0;
  }
  section.our-courses .naccs .menu div {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding-right: 50px !important;
    position: relative;
  }
  section.our-courses .naccs .menu div:last-child { border-bottom: none; }
  section.our-courses .naccs .menu div.active {
    transform: none !important;
    box-shadow: none !important;
  }
  section.our-courses .naccs .menu div::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 300;
    color: #888;
    transition: all 0.3s ease;
  }
  section.our-courses .naccs .menu div.active::after {
    content: '−';
    color: #fff;
    transform: translateY(-50%) rotate(180deg);
  }
  /*
  ======================================================
  == KODE PERBAIKAN UNTUK BAGIAN AKORDEON MOBILE ==
  ======================================================
  */

  /* ATURAN LAMA YANG BERMASALAH DIGANTI DENGAN YANG DI BAWAH */
  section.our-courses ul.nacc li {
      position: static !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      width: 100% !important;
      pointer-events: auto !important;
      padding: 0 20px !important; /* Padding atas-bawah 0 saat tertutup */
      border: 1px solid #ddd;
      border-top: none !important;
      border-radius: 0 0 8px 8px !important;
      margin-top: -1px;
      background: #fff;
      /* INI BAGIAN PENTINGNYA: Menggunakan height untuk animasi */
      height: 0;
      overflow: hidden;
      transition: height 0.4s ease, padding 0.4s ease; /* Transisi untuk height dan padding */
  }

  section.our-courses ul.nacc li.active {
      display: block !important;
      padding: 20px !important; /* Mengembalikan padding saat aktif */
  }

  /* KODE BARU UNTUK MEMPERBAIKI TATA LETAK KONTEN */
  section.our-courses ul.nacc li > div {
    display: flex;
    flex-direction: column; /* Paksa item tersusun ke bawah */
    align-items: center;    /* Pusatkan item secara horizontal */
  }
  
  section.our-courses ul.nacc li .left-image {
    position: static !important;
    transform: none !important;
    margin: 0 0 20px 0 !important;
    width: 100%;
    max-width: 450px; /* Batasi lebar gambar agar terlihat bagus */
  }
  
  section.our-courses ul.nacc li .right-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100%; /* Pastikan konten teks mengambil lebar penuh */
    text-align: center; /* Tengahkan teks agar serasi dengan gambar */
  }
  
  section.our-courses ul.nacc li .right-content span {
    display: block;
    margin-bottom: 15px;
    border-right: none;
    padding-right: 0;
  }

  /* --- CTA --- */
  section.simple-cta { text-align: center; padding: 100px 0px;}
  section.simple-cta .left-image { margin-bottom: 40px; }
  section.simple-cta h4 { font-size: 42px; line-height: 1.25; }
  section.simple-cta h6 { font-size: 16px; }
  section.simple-cta p { font-size: 15px; }

  /* --- Contact Us --- */
  section.contact-us {
    padding: 80px 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  section.contact-us:after { display: none; }
  section.contact-us .section-heading { text-align: center; }
  section.contact-us #map {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    text-align: center;
  }
  form#contact {
    margin-left: 0px !important;
    margin-top: 0px !important;
    padding: 40px 30px !important;
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* --- Banner --- */
  .main-banner .item .down-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .main-banner .item .down-buttons .main-blue-button-hover a {
    padding: 18px 25px;
  }

  /* --- Services --- */
  .services .owl-service-item.owl-carousel {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .services .item h4 { font-size: 19px; }
  .services .item p { font-size: 14px; }
}

@media (max-width: 576px) {
    .main-banner .item h2 { font-size: 28px; line-height: 36px; }
    .main-banner .item h6 { font-size: 14px; }
}

/* --- Perbaikan efek ghosting Owl Carousel --- */
.owl-carousel .owl-stage-outer {
  overflow: hidden !important;
}

.main-banner .owl-carousel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* .owl-carousel .owl-item.cloned {
  opacity: 0 !important;
  pointer-events: none !important;
}
 */
/* Perbaikan ghosting Owl Carousel dengan selector lebih spesifik */
.main-banner .owl-carousel .owl-stage-outer {
  overflow: hidden !important;
}

.main-banner .owl-carousel {
  position: relative;
}

.main-banner .owl-carousel::before,
.main-banner .owl-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0 px; /* Sesuaikan jika perlu */
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: #fff; /* Sesuaikan dengan background banner */
}

.main-banner .owl-carousel::before {
  left: 0;
}

.main-banner .owl-carousel::after {
  right: 0;
}

.main-banner .item {
  padding-left: 24px;
  padding-right: 24px;
}

/* ============================================================= */
/* ▼▼▼ CSS FINAL & LENGKAP UNTUK HAMBURGER & MENU MOBILE ▼▼▼     */
/* ============================================================= */

/* 1. Reset Tampilan Tombol Hamburger agar Sesuai Dashboard */
#hamburger-button {
  background-color: transparent !important;
  border: none !important;
  padding: 8px !important; /* Memberi sedikit area klik */
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
#hamburger-button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
#hamburger-button svg {
  stroke: #fff;
  width: 28px;
  height: 28px;
}

/* 2. Style untuk Kontainer Menu Mobile Utama */
#mobile-menu {
  background: linear-gradient(to right, #FFB300, #F44336, #1E88E5, #002E5D) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
#mobile-menu.is-open {
  max-height: 100vh;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 3. Style untuk SEMUA link di dalam menu mobile */
#mobile-menu a,
#mobile-menu .mobile-submenu-trigger {
  display: flex !important; /* PENTING: Membuat item jadi block dan sejajar */
  align-items: center !important;
  width: 100%;
  padding: 12px 16px !important;
  border-radius: 6px;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: white !important;
  text-align: left;
  transition: background-color 0.2s ease;
}
#mobile-menu a:hover,
#mobile-menu .mobile-submenu-trigger:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
#mobile-menu a i,
#mobile-menu .mobile-submenu-trigger i {
  width: 24px;
  margin-right: 12px;
  text-align: center;
}
#mobile-menu .border-t { /* Meniru class tailwind */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 8px;
    margin-bottom: 8px;
}

/* 4. Style untuk Akordeon "Latihan Soal" */
.mobile-submenu-trigger {
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-submenu-trigger .chevron-icon {
  transition: transform 0.3s ease;
  width: 20px; /* Atur lebar sesuai keinginan Anda */
  height: 20px; /* Atur tinggi sesuai keinginan Anda */
}
.mobile-submenu-trigger.is-open .chevron-icon {
  transform: rotate(180deg);
}

/* 5. Style untuk Konten Submenu (Daftar Prodi) */
#mobile-menu .mobile-submenu-content {
    display: none;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    margin-top: 4px;
    padding-left: 0; /* Reset padding pada kontainer */
}

/* Style untuk setiap link di dalam submenu */
#mobile-menu .mobile-submenu-content a {
    display: block !important; /* Paksa link menjadi block */
    position: relative !important; /* Wajib untuk posisi ikon */
    width: 100%;
    font-size: 0.95rem !important;
    padding: 10px 16px 10px 35px !important; /* Padding: Atas-Bawah | Kanan | Kiri */
}

/* Style untuk ikon ">" dengan selector yang lebih kuat */
#mobile-menu .mobile-submenu-content a::before {
    content: '>' !important; /* 'content' adalah properti untuk menampilkan ikon */
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
/* 6. Pastikan class .md:hidden bekerja dengan baik */
@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
}


/* ==================================================
        == FLOATING WHATSAPP BUTTON
        ==================================================
        */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 100px; /* Posisi 100px dari bawah */
            right: 30px;   /* Posisi 30px dari kanan, sejajar dengan tombol back-to-top */
            background-color: #25D366; /* Warna hijau khas WhatsApp */
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none; /* Menghilangkan garis bawah */
            transition: all 0.3s ease-in-out;
        }

        .whatsapp-float:hover {
            transform: scale(1.1); /* Sedikit membesar saat disentuh mouse */
            box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
            color: #FFF; /* Memastikan ikon tetap putih */
        }