/*

TemplateMo 565 Onix Digital

https://templatemo.com/tm-565-onix-digital

------------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio
------------------------------------------------ */

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

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

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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;
  font-weight: 400;
  background-color: #fff;
  -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 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

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

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/

html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
  margin-bottom: -5px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #ff695f;
  font-weight: 700;
  opacity: 1;
  text-transform: capitalize;
}

.section-heading span {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: #ff695f;
  opacity: 0.15;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-blue-button-hover a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-blue-button-hover a:hover {
  background-color: #ff695f;
}

.main-red-button a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button-hover a {
  display: inline-block;
  background-color: #ff695f;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
}

.main-red-button-hover a:hover {
  background-color: #03a4ed;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #ff695f;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* ============================================================
   HEADER FINAL – NIRWANA MITRA (Desktop + Mobile)
   ============================================================ */

/* ============ BASE HEADER ============ */
.header-area {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 90px;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all .3s ease;
}

.header-area .container {
  width: 100%;
}

.header-area .main-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* LOGO kiri — MENU kanan */
}

/* Logo */
.header-area .main-nav .logo img {
  height: 80px;
  width: auto;
}

/* ============ DESKTOP NAV ============ */
.header-area .main-nav .nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-area .main-nav .nav li a {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  padding: 8px 0;
  transition: .2s;
}

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

/* ===== SUBMENU (DESKTOP) ===== */
.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 12px;
}

.header-area .main-nav .nav li.submenu:after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  top: 40px;
  left: 0;
  min-width: 180px;
  padding: 6px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .2s;
}

.header-area .main-nav .nav li.submenu:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-area .main-nav .nav li.submenu ul li a {
  padding: 6px 16px;  /* jarak lebih lega vertikal & horizontal */
  font-size: 14px;
  display: block;
  border-bottom: 1px solid #eee;   /* garis pembatas antar submenu */
}

/* ============================================================
   MOBILE MODE  (MAX 991px)
   ============================================================ */

@media (max-width: 991px){

  .header-area {
    height: 70px;
    padding: 0 18px;
  }

  /* === Burger Menu === */
  .menu-trigger {
    display: block;
    position: absolute;
    right: 16px;
    top: 18px;
    width: 32px; 
    height: 32px;
    cursor: pointer;
  }

  .menu-trigger span,
  .menu-trigger span:before,
  .menu-trigger span:after {
    content: "";
    position: absolute;
    width: 26px;
    height: 2px;
    background: #111;
    left: 0;
    transition: .3s;
  }

  .menu-trigger span { top: 14px; }
  .menu-trigger span:before { top: 6px; }
  .menu-trigger span:after { top: 22px; }

  .menu-trigger.active span { background: transparent; }
  .menu-trigger.active span:before {
    top: 14px;
    transform: rotate(45deg);
  }
  .menu-trigger.active span:after {
    top: 14px;
    transform: rotate(-45deg);
  }

  /* === NAV MOBILE === */
  .header-area .main-nav .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 85vh;
    overflow-y: auto;
  }

  .header-area .main-nav .nav.open {
    display: flex;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .header-area .main-nav .nav li a {
    padding: 16px 0;
    text-align: center; /* MODE MOBILE 2: Menu rata tengah */
    font-size: 16px;
    width: 100%;
    display: block;
  }

}
/* Fix menu trigger - hamburger rapi */
.menu-trigger {
  display: none;
}

@media (max-width: 991px) {

  .menu-trigger {
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    width: 30px;
    height: 24px;
    cursor: pointer;
  }

  .menu-trigger span,
  .menu-trigger span::before,
  .menu-trigger span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #111;
    transition: 0.3s;
  }

  /* garis tengah */
  .menu-trigger span {
    top: 50%;
    transform: translateY(-50%);
  }

  /* garis atas & bawah */
  .menu-trigger span::before {
    top: -7px;
  }

  .menu-trigger span::after {
    top: 7px;
  }

  /* saat aktif (jadi X) */
  .menu-trigger.active span {
    background: transparent;
  }

  .menu-trigger.active span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-trigger.active span::after {
    top: 0;
    transform: rotate(-45deg);
  }
}
.main-banner {
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 60px !important;
  position: relative;
}

.main-banner .banner-right-image img {
  width: 100%;
  max-width: 560px;   /* ukuran default template */
  border-radius: 26px; /* opsional */
  object-fit: cover;
  text-align: center;
  margin-top: -20px;
}

.main-banner .owl-banner .item {
  min-height: 280px;
}

.main-banner .header-text h6 {
  color: #ff4d4d;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .header-text h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 65px;
  margin-bottom: 25px;
}

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

.main-banner .header-text h2 span {
  color: #ff685f;
}

.main-banner .down-buttons .call-button a {
  background: #fff;
  border-radius: 50px;
  padding: 12px 25px;
  color: #ff685f;
  font-weight: 600;
  display:_inline-block;
}

.down-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}



/* ===== FIX BANNER MOBILE ===== */
@media (max-width: 767px) {

  .main-banner .header-text h6 {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .main-banner .header-text h2 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 15px;
  }

  .main-banner .header-text h2 em,
  .main-banner .header-text h2 span {
    font-size: 28px;
  }

  .main-banner p {
    font-size: 14px;
    line-height: 22px;
  }

  .main-banner .down-buttons {
    margin-top: 10px;
  }

  .main-banner {
    padding-top: 120px !important;  /* turunkan sedikit biar pas HP */
  }
}
/* HILANGKAN GAMBAR BANNER DI MOBILE */
@media (max-width: 767px) {
  .banner-right-image {
    display: none !important;
  }
}
/* ============================
   FIX PORTFOLIO TERTUTUP BANNER
   ============================ */

/* 1. KECILKAN background banner biar tidak nutup section lain */

/* 2. Pastikan portfolio MUNCUL DI ATAS background */
.our-portfolio,
.our-portfolio.section,
#portfolio,
section.portfolio {
  position: relative !important;
  z-index: 10 !important;
}

/* 3. Pastikan gambar banner tidak melebar kebawah */
.banner-right-image img {
  width: 130% !important;   /* KEMBALIKAN KE NORMAL */
  max-width: 560px;
  height: auto;
  margin-bottom: 0;
}
/* ==== PORTFOLIO – STYLE MIRIP TEMPLATE ASLI ==== */

.our-portfolio .item {
  position: relative;
}

.our-portfolio .item .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.our-portfolio .hover-effect {
  position: absolute;
  bottom: 20px;
  right: 20px;                  /* >>> kotak geser ke kanan */
  width: 58%;                   /* >>> ukuran kotak seperti template */
  background: linear-gradient(135deg, #ff735c, #ff4d6d);
  border-radius: 25px;          /* >>> radius besar mirip template */
  padding: 25px 20px;
  text-align: left !important;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all .35s ease-in-out;
}

.our-portfolio .item:hover .hover-effect {
  opacity: 1;
  transform: translateY(0);
}

.our-portfolio .hover-effect h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.our-portfolio .hover-effect span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: left !important;
}

/* Hilangkan kotak teks default template */
.our-portfolio .item .info {
  display: none !important;
}
@media (max-width: 576px) {
  .our-portfolio .hover-effect {
    width: 55% !important;          /* <<< DIPERKECIL */
    padding: 12px 10px !important;  /* <<< padding ikut kecil */
    right: 15px !important;         /* tetap di kanan */
    border-radius: 18px !important; /* tetap estetik */
  }

  .our-portfolio .hover-effect h4 {
    font-size: 15px !important;
  }

  .our-portfolio .hover-effect span {
    font-size: 12px !important;
    line-height: 17px !important;
  }
}
/* ====== FIX JUDUL PORTFOLIO AGAR CENTER (DESKTOP + MOBILE) ====== */
#portfolio .section-heading {
  text-align: center !important;
  width: 100% !important;
}

#portfolio .section-heading h2 {
  text-align: center !important;
  line-height: 1.3 !important;
  font-size: 32px;
}

#portfolio .section-heading span {
  display: block;
  text-align: center !important;
  margin-top: 8px;
}
@media (max-width: 576px) {
  #portfolio .section-heading h2 {
    font-size: 22px !important;
    line-height: 1.4 !important;
  }

  #portfolio .section-heading span {
    font-size: 18px !important;
    opacity: 0.5 !important; /* seperti template aslinya */
  }
}
.owl-dots,
.owl-nav {
  display: none !important;
}
/* ================================
   LEGALITAS SECTION - MIRIP PORTFOLIO
   ================================ */

/* Card harga legalitas */
.pricing-tables .item {
  background: #ffffff;
  border-radius: 30px;
  padding: 40px 20px 40px;  /* kiri-kanan dipersempit */
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  margin-bottom: 40px;
  position: relative;
  overflow: visible !important;
  text-align: left;
}

/* Judul layanan */
.pricing-tables .item h4 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 10px;      /* normal lagi (bukan 80px) */
  margin-bottom: 8px;
  text-align: center;
}

/* Harga coret */
.pricing-tables em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  text-decoration: line-through;
  color: #999;
  font-size: 15px;
  text-align: center !important;
}

/* Harga promo */
.pricing-tables > .container span,
.pricing-tables .item > span {
  font-size: 26px;
  font-weight: 700;
  color: #ff5656;
  display: block;
  margin-bottom: 18px;
  text-align: center !important;
}

/* List benefit */
.pricing-tables ul li {
  margin-bottom: 6px;
  font-size: 13px;
  color: #333;
  text-align: center !important;
  width: 100% !important;
}

/* Tombol */
.pricing-tables .item .main-blue-button-hover a {
  margin-top: 18px;
  
}

/* ================================
   LEGALITAS CARD – FINAL RAPIH
================================ */

.pricing-tables .item {
  background: #ffffff;
  border-radius: 30px;
  padding: 40px 25px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  margin-bottom: 30px;
  text-align: center;
}

/* Judul */
.pricing-tables .item h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: -10px;
}

/* Harga coret */
.pricing-tables em {
  display: block;
  font-style: normal;
  text-decoration: line-through;
  color: #999;
  margin-bottom: 5px;
}

/* Harga promo */
.pricing-tables .item > span {
  font-size: 26px;
  font-weight: 700;
  color: #ff5656;
  margin-bottom: 45px;
  display: block;
}

/* List benefit */
.pricing-tables ul {
  padding: 0 10px;       /* memberi ruang kiri-kanan */
}

.pricing-tables ul li {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
  word-break: break-word;
  white-space: normal;
}

/* CTA Button wrapper */
.pricing-tables .item .main-blue-button-hover {
  text-align: center;
  margin-top: 15px;
}

/* MOBILE */
@media (max-width: 576px) {
  .pricing-tables .item {
    padding: 30px 20px 35px;
  }

  .pricing-tables .item h4 {
    font-size: 19px;
  }

  .pricing-tables ul li {
    font-size: 14px;
    line-height: 20px;
  }
}
/* Jarak antara portfolio → legalitas */
#legalitas {
  margin-top: 70px !important;
}
/* ===== TAMBAHKAN JARAK HEADER → PORTFOLIO ===== */
#portfolio {
  margin-top: 120px !important;   /* Abi bisa sesuaikan */
}
/* ===== FIX HEADER MENUTUP JUDUL ===== */
#legalitas {
  scroll-margin-top: 100px !important; /* Sesuaikan dengan tinggi header */
}
html {
  scroll-padding-top: 120px;
}
/* ================================
   MOBILE SUBMENU FIX – SMOOTH DROPDOWN
================================ */

@media (max-width: 991px) {

  /* Submenu container */
  .header-area .nav li.submenu ul {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 90% !important;
    margin: 6px auto 10px auto !important;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: none; /* default tertutup */
  }

  /* Saat submenu dibuka */
  .header-area .nav li.submenu ul.mobile-open {
    display: block !important;
  }

  /* Item dalam submenu */
  .header-area .nav li.submenu ul li a {
    padding: 14px 0 !important;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 15px !important;
  }

  /* Hilangkan arrow fontawesome pada mobile */
  .header-area .nav li.submenu:after {
    display: none !important;
  }
}
/* ===== FIX MENU MOBILE AGAR LURUS & SEJAJAR ===== */
@media (max-width: 991px) {

  /* Set tinggi & alignment baris */
  .header-area .main-nav .nav li {
    width: 100% !important;
     padding: 0 !important;  /* INI MENGATUR JARAK MENU */
    margin: 0 !important;
    text-align: center !important;
    border-bottom: 1px solid #eee;
  }

  /* Set posisi teks tepat di tengah */
  .header-area .main-nav .nav li a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 18px 0 !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Submenu mobile biar ikut sejajar juga */
  .header-area .main-nav .nav li.submenu ul li a {
    padding: 15px 0 !important;
    text-align: center !important;
  }

  /* Hilangkan sisa left padding default dari desktop */
  .header-area .main-nav .nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ==========================================================
   WEBSITE SECTION – PREMIUM CARD VERSION (BARU & BERSIH)
   ========================================================== */


.website-section .web-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 25px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  text-align: center;
  height: 100%;
  transition: 0.3s ease;
  border: 1px solid #eee;
}

.website-section .web-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* Medal Logo */
.website-section .web-card .medal {
  width: 100px;
  height: auto;
  margin: 0 auto 15px;
  display: block;
}

/* Harga */
.website-section .web-card .price {
  font-size: 28px;
  font-weight: 700;
  color: #ff5656;
  margin: 10px 0 12px;
}

/* Deskripsi */
.website-section .web-card .desc {
  font-size: 16px;
  color: #555;
  margin-bottom: 8px !important;
  line-height: 22px;
}

/* Tombol Booking */
.website-section .web-card .btn-booking {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 25px;
  font-weight: 600;
  margin: 10px 0;
  color: #fff;
}

/* Perpanjangan */
.website-section .web-card .renew {
  margin-top: 4px !important;
  margin-bottom: 10px !important;
  font-size: 10px;
  color: #666;
  font-style: italic;
}

/* Fitur List */
.website-section .web-card .fitur-list {
  margin-top: 18px;
  padding-left: 18px;
  text-align: left;
}

.website-section .web-card .fitur-list li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 20px;
  color: #444;
}

/* ==========================
      RESPONSIVE MOBILE
   ========================== */
@media (max-width: 768px) {
  .website-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .website-section .web-card {
    padding: 25px 20px;
  }

  .website-section .web-card .medal {
    width: 110px;
  }

  .website-section .web-card .price {
    font-size: 24px;
  }
}
#website .item p {
  margin-bottom: 8px !important;
  margin-top: 8px !important;
}
/* Tombol Fitur */
.fitur-toggle {
  width: 100%;
  background: #007bff;
  color: #fff;
  padding: 10px 0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 10px;
  transition: 0.3s;
}

.fitur-toggle:hover {
  background: #005fcc;
}

/* Kotak accordion */
.fitur-accordion {
  display: none;
  padding: 10px;
  border-radius: 12px;
  background: #f8f8f8;
  margin-bottom: 15px;
}

.fitur-accordion ul li {
  font-size: 15px;
  margin-bottom: 6px;
}
.web-card {
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-align: center;
  position: relative;
  overflow: hidden; /* <<< WAJIB! supaya isi tidak keluar */
}

.web-card .fitur-btn {
  background: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}

.web-card .fitur-content {
  display: none;
  margin-top: 15px;
  text-align: left;
}

.web-card .fitur-content ul {
  padding-left: 20px;
}

.web-card .fitur-content.open {
  display: block;
}
/* BUTTON ACCORDION */
.accordion-btn {
  background: #007bff;
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  margin-top: 15px;
  transition: 0.3s;
  width: 50%;
  margin: 0 auto;
}

.accordion-btn:hover {
  background: #005fcc;
}

/* CONTENT */
.accordion-content {
  display: none;
  margin-top: 15px;
  padding-left: 0;
}

.accordion-content li {
  margin-bottom: 8px;
  font-size: 14px;
  list-style: none;
}
.pricing-tables .item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
    transition: 0.3s ease;
}
.pricing-tables .item {
    transition: 0.3s ease;
}
.section-title h2 .blue-text {
  color: #1e73ff !important;
}
/* SECTION BRANDING = SAMA DENGAN WEBSITE */
#branding .web-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.08);
  padding: 30px 25px;
  text-align: center;
  transition: 0.3s ease;
}

#branding .web-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

#branding .medal {
  width: 100px;
  height: auto;
  margin: 0 auto 15px;
}

#branding .price {
  font-size: 26px;
  font-weight: 700;
  color: #ff5656;
  margin-bottom: 12px;
}

#branding .desc {
  font-size: 16px;
  color: #444;
  margin-bottom: 15px;
}

/* ACCORDION */
#branding .accordion-btn {
  background: #007bff;
  color: white;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  width: 100%;
  margin-top: 10px;
  transition: 0.3s;
}

#branding .accordion-btn:hover {
  background: #005fcc;
}

#branding .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  margin-top: 10px;
}

#branding .accordion-content ul li {
  font-size: 14px;
  margin-bottom: 6px;
}
/* ================================
   BRANDING – MOBILE VERSION (A)
   Minimalis, simple, tidak ganggu desktop
   ================================ */

@media (max-width: 576px) {

  /* Card mengecil sedikit */
  #branding .web-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  /* Medal lebih kecil */
  #branding .medal {
    width: 85px;
    margin-bottom: 12px;
  }

  /* Judul harga */
  #branding .price {
    font-size: 22px;
    margin-bottom: 10px;
  }

  /* Deskripsi diperkecil */
  #branding .desc {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 12px;
  }

  /* Tombol accordion */
  #branding .accordion-btn {
    padding: 8px 14px;
    font-size: 1px;
    border-radius: 8px;
  }

  /* Isi fitur */
  #branding .accordion-content ul li {
    font-size: 13px;
    margin-bottom: 6px;
  }
}

/* ============================
   PAYMENT SECTION – FOLLOW WEBSITE STYLE
   ============================ */

#payment .web-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 25px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  text-align: center;
  height: 100%;
  transition: 0.3s ease;
  border: 1px solid #eee;
}

#payment .web-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* Logo */
#payment .web-card .medal {
  width: 100px;
  height: auto;
  margin: 0 auto 15px;
  display: block;
}

/* Harga */
#payment .web-card .price {
  font-size: 28px;
  font-weight: 700;
  color: #ff5656;
  margin: 10px 0 12px;
}

/* Deskripsi */
#payment .web-card .desc {
  font-size: 16px;
  color: #555;
  margin-bottom: 8px !important;
  line-height: 22px;
}

/* Accordion button di payment ikut global .fitur-btn */

/* Isi fitur */
#payment .fitur-content ul {
  padding-left: 18px;
}

#payment .fitur-content ul li {
  font-size: 16px;
  margin-bottom: 7px;
  line-height: 20px;
  color: #444;
}

/* Mobile */
@media (max-width: 576px) {
  #payment .web-card {
    padding: 25px 20px;
  }

  #payment .web-card .medal {
    width: 85px;
  }

  #payment .web-card .price {
    font-size: 24px;
  }
}
#payment .section-title {
    text-align: center !important;
}

#payment .section-title h2 {
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

#payment .section-title p {
    text-align: center !important;
}
/* ================================
   BRANDING MOBILE - FIX SUPER SPESIFIK
   ================================ */
@media (max-width: 576px) {

  #branding .web-card li,
  #branding .accordion-content li,
  #branding .accordion-content ul li,
  #branding .fitur-content li,
  #branding .fitur-list li {
    font-size: 14px !important;
    line-height: 16px !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
  }
}
/* ========================================
   WEBSITE – MOBILE VERSION (SAMA DENGAN BRANDING)
   ======================================== */
@media (max-width: 576px) {

  /* Card */
  #website .web-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  /* Medal / gambar */
  #website .medal {
    width: 85px !important;
    margin-bottom: 12px !important;
  }

  /* Harga */
  #website .price {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }

  /* Deskripsi */
  #website .desc {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 12px !important;
  }

  /* Tombol accordion */
  #website .accordion-btn {
    padding: 8px 14px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    margin-top: 12px !important;
  }

  /* List fitur dalam card */
  #website .fitur-list li,
  #website .fitur-content ul li,
  #website .fitur-content li,
  #website .web-card li {
    font-size: 12.5px !important;
    line-height: 17px !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
  }

  /* Kurangi padding kiri list */
  #website .fitur-list,
  #website .fitur-content ul {
    padding-left: 12px !important;
  }
}
/* ==== FIX RASIO REELS 9:16 DAN LEBAR CARD ==== */
.reels-card {
  max-width: 450px !important;      /* Lebarin card */
  width: 100% !important;
}

.reels-video-box {
  width: 100% !important;
  max-width: 450px !important;      /* Lebarin video */
  aspect-ratio: 9 / 16 !important;  /* KUNCI RASIO */
  margin: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #000 !important;
}

.reels-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}
.reels-video-box {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.reels-video {
  width: 100%;
  display: block;
  border-radius: 14px;
}

.reels-video-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.reels-play-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 85px;
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 42px;
  color: white;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);      /* efek kaca */
  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.25); /* garis premium */
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);

  cursor: pointer;
  transition: 0.25s ease;
}

.reels-play-center:hover {
  background: rgba(255,255,255,0.20);
  transform: translate(-50%, -50%) scale(1.07);
}
.reels-title-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 9999;
  transition: opacity 0.25s ease; /* smooth hilang / muncul */
}

.reels-title-overlay h3 {
  margin: 0;
  padding: 4px 10px;
  font-size: 23px;
  font-weight: 650;
  color: white;
  border-radius: 8px;
}
.reels-desc {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}
/* ============================
   CONTACT SECTION MOBILE FIX
   ============================ */
@media (max-width: 576px) {

  /* Judul Utama */
  .alamat-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 6px !important;
  }

  /* Subjudul */
  .alamat-sub {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  /* Box Contact */
  .contact-box {
    padding: 16px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  /* Item Contact */
  .contact-item {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  /* Icon Contact */
  .contact-item img {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 4px !important;
  }

  /* Teks Contact */
  .contact-text {
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Google Maps */
  #map iframe {
    height: 250px !important;
    border-radius: 14px !important;
  }

  /* Container spacing */
  #contact.contact-us.section {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }
}
@media (max-width: 576px) {

  /* Item tetap center */
  #contact .contact-box .contact-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }

  /* Ikon tetap center */
  #contact .contact-box .contact-item img {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
  }

  /* Ukuran teks lebih kecil dan rapih */
  #contact .contact-box .contact-text {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    font-size: 15px !important;   /* ← dari 17px → turun ke 15px */
    line-height: 1.32 !important;
  }

  /* Judul Contact Us juga kecil sedikit */
  #contact .contact-box .contact-title {
    font-size: 20px !important;   /* sebelumnya 24px */
  }
}
.contact-text .sub-text {
  display: block;
  font-size: 15px;
  margin-top: -2px;
}
/* ============================
   FOOTER BOX – NIRWANA MITRA
   ============================ */

footer.footer-box {
  background: #f7f9fc; /* warna premium soft */
  padding: 60px 25px 30px !important;
  width: 100%;
  border-top: 1px solid #e4e7eb;
  border-radius: 40px 40px 0 0; /* lengkungan premium */
  box-shadow: 0 -6px 25px rgba(0,0,0,0.06); /* bayangan mewah */
  position: relative;
  z-index: 2;
}

/* Footer item umum */
.footer-box .footer-item {
  margin-bottom: 30px;
}

.footer-box .footer-item h4 {
  text-align: center !important;
  width: 100%;
  margin-bottom: 12px;
}

/* Logo footer */
.footer-box .about .logo img {
  width: 190px;
  height: auto;
  margin-bottom: 10px;
}

.footer-box .about a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #1d1d1d;
}

/* Social icons */
.footer-box .about ul {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.footer-box .about ul li a {
  font-size: 18px;
  color: #007bff;
  transition: 0.3s;
}

.footer-box .about ul li a:hover {
  color: #ff695f;
}

/* List link */
.footer-box .footer-item ul li {
  margin-bottom: 8px;
}

.footer-box .footer-item ul li a {
  color: #0066cc;
  font-size: 15px;
  transition: 0.25s;
}

.footer-box .footer-item ul li a:hover {
  color: #ff695f;
  padding-left: 4px;
}

/* Subscribe */
.footer-box .subscribe-newsletters p {
  font-size: 15px;
  margin-bottom: 10px;
  color: #444;
}

/* Form email */
.footer-box .subscribe-newsletters form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-box .subscribe-newsletters input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.footer-box .subscribe-newsletters button {
  background: #007bff;
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  transition: 0.3s;
}

.footer-box .subscribe-newsletters button:hover {
  background: #005fcc;
}

/* Copyright */
.footer-box .copyright {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.footer-box .copyright p {
  font-size: 15px;
  margin: 0;
  line-height: 22px;
}

.footer-box .copyright a {
  color: #007bff;
  font-weight: 600;
}

.footer-box .copyright a:hover {
  color: #ff695f;
}

/* Footer Brand Alignment Fix */
.footer-box .about {
  text-align: center;
}

.footer-box .about .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.footer-box .about .logo img {
  width: 190px;      /* ukuran besar & simetris */
  height: auto;
  display: block;
}

.footer-box .about a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin: 8px 0 18px;
  text-align: center;
}

/* Social icons sejajar rapi */
.footer-box .about ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.footer-box .about ul li {
  list-style: none;
}

.footer-box .about ul li a {
  font-size: 20px;
  color: #007bff;
}
/* Kembalikan Info Berlangganan ke kiri */
.footer-box .subscribe-newsletters h4,
.footer-box .subscribe-newsletters p,
.footer-box .subscribe-newsletters form {
  text-align: left !important;
}
.footer-box .copyright {
  background: #dce1e5;  /* abu-abu lebih gelap */
  padding: 18px 10px;
  border-top: none;
}

@media (max-width: 768px) {

  /* Kurangi jarak keseluruhan footer */
  footer.footer-box {
    padding-top: 10px !important; /* dari 30–50px → 10px saja */
  }

  /* Jarak logo ke judul */
  .footer-box .about .logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Jarak nama brand */
  .footer-box .about h4 {
    margin: 5px 0 !important;
  }

  /* Jarak sosmed */
  .footer-box .about ul {
    margin: 5px 0 5px !important;
  }

  /* Jarak heading "Services" */
  .footer-box .footer-item h4 {
    margin: 10px 0 5px !important;
  }

  /* Jarak antar item list */
  .footer-box .footer-item ul li {
    margin: 3px 0 !important;
  }

  /* Jarak antar section (misal Services → Community) */
  .footer-box .footer-item {
    margin: 10px 0 !important;
  }

}
@media (max-width: 768px) {

  .subscribe-newsletters h4,
  .subscribe-newsletters p {
    display: block !important;
    width: 100% !important;
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

}
.footer-box .footer-item {
  text-align: center !important;
}
@media (max-width: 768px) {

  .footer-box .subscribe-newsletters h4,
  .footer-box .subscribe-newsletters p {
    text-align: center !important;
  }

}
/* ================================
   MOBILE BACKGROUND WRAPPER FIX
================================ */
@media (max-width: 768px) {

  /* Wrapper pembungkus seluruh section */
  .mobile-bg-wrapper {
    background-image: url('../images/background-pink.webp'); 
    background-size: cover;           /* Tetap halus dan tidak pecah */
    background-position: center top;  /* Fokus kiri & kanan */
    background-repeat: no-repeat;
    padding-top: 20px;
    padding-bottom: 40px;
    border-radius: 22px;
    overflow: hidden;                 /* Hilangkan garis pembatas */
  }

  /* Hilangkan margin/padding antar section agar menyatu */
  #website,
  #branding,
  #payment,
  #video-legalitas,
  #contact {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Hilangkan padding container bootstrap */
  .mobile-bg-wrapper .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Judul tidak terlalu renggang */
  .section-title {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
  }

  /* Card tetap putih */
  .web-card,
  .reels-card,
  .info-box {
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  }

  /* Rapikan jarak antar card */
  .mb-4 {
    margin-bottom: 20px !important;
  }

  /* Video */
  #video-legalitas {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}
/* ============================
   WEB-CARD WITH SOFT BG + WHITE LAYER
============================ */
.web-card {
    position: relative;
    background: none; /* hilangkan putih default */
    overflow: hidden;
}

/* Background asli */
.web-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/background-kotak.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.9;              /* 90% biar terlihat */
    z-index: 1;
}

/* Isi card tetap di atas */
.web-card > * {
    position: relative;
    z-index: 3;
}
/* ================================
   BACKGROUND + GLOSSY CARD LEGALITAS
================================ */

#legalitas .item.thumb .inner-content {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 25px;
    background: transparent !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.10);
}

/* Background utama */
#legalitas .item.thumb .inner-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/background-kotak.webp');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
}
/* Semua isi card tetap di atas overlay */
#legalitas .item.thumb .inner-content > * {
    position: relative;
    z-index: 3;
}

/* Shine glossy soft */
#legalitas .item.thumb .inner-content::after {
    background: linear-gradient(
        to bottom right,
        rgba(255,255,255,0.65),
        rgba(255,255,255,0.40)
    );
    backdrop-filter: blur(8px);
}
/* ================================
   CONTACT SECTION CARD BACKGROUND
================================ */
#contact .info-box {
  background: transparent !important; /* Buang background inline */
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* CARD SEBENARNYA ADA DI .contact-box */
#contact .contact-box {
  position: relative;
  background: transparent !important;
  border-radius: 22px;
  padding: 30px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 5;
}

/* Background gambar */
#contact .contact-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/background-kotak.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  z-index: -2;
}

/* Isi card tetap di atas */
#contact .contact-item,
#contact .contact-text {
  position: relative;
  z-index: 10;
}
/* ===== Cek Nama PT Style ===== */
#cek-nama-pt {
  padding: 40px 0;
}

.search-wrapper {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 50px;
  padding: 10px 20px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.search-input {
  flex: 1;
  border: none;
  font-size: 17px;
  outline: none;
  padding: 8px;
}

.search-btn {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 480px) {

  /* Kecilkan tombol */
  .search-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Kecilkan ICON IMG (override inline style) */
  .search-btn img {
    width: 16px !important;
    height: 16px !important;
  }

  /* Kecilkan input biar lebih lega */
  .search-input {
    font-size: 14px !important;
    padding: 6px 8px !important;
  }

  /* Kecilkan wrapper */
  .search-wrapper {
    padding: 8px 12px !important;
  }
}
@media (max-width: 480px) {

  /* Judul utama */
  #cek-nama-pt .section-title h2 {
    font-size: 24px !important;
    line-height: 26px !important;
  }

  /* Subjudul / paragraf kecil */
  #cek-nama-pt .section-title p {
    font-size: 15px !important;
    line-height: 20px !important;
    padding: 0 10px !important;
  }
}
/* === DESKTOP: Besarkan teks paragraf banner === */
.main-banner p {
  font-size: 18px !important;
  line-height: 30px !important;
}
.website-section .web-card .renew {
  font-size: 14px !important;
  line-height: 18px !important;
}
/* === MOBILE: Paket Website Deskripsi & Perpanjangan === */
@media (max-width: 576px) {

  /* Deskripsi paket */
  #website .web-card .desc {
    font-size: 17px !important;
    line-height: 18px !important;
    margin-bottom: 16px !important;
  }

  /* Perpanjangan */
  #website .web-card .renew {
    font-size: 15px !important;
    line-height: 17px !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;
  }
}

 /* ========== MOBILE SECTION TITLE FIX (Semua Section) ========== */
@media (max-width: 576px) {

  /* JUDUL semua section (Website, Branding, Payment, dll) */
  .section-title h2 {
    font-size: 25px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* SUBJUDUL semua section */
  .section-title p {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: 5px !important;
    padding: 0 10px !important; /* biar lebih rapi */
  }
}
/* ========== MOBILE FIX: Branding fitur list (setelah tombol) ========== */
@media (max-width: 576px) {

  #branding .accordion-content ul li,
  #branding .fitur-list li,
  #branding .web-card li {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 9px !important;
    letter-spacing: 0;
    padding: 0 !important;
    text-align: center !important;
  }
}
/* ========== MOBILE FIX: PAYMENT fitur list (setelah tombol) ========== */
@media (max-width: 576px) {

  #payment .accordion-content ul li,
  #payment .fitur-list li,
  #payment .web-card li {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 9px !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }
}
@media (max-width: 576px) {
  .reels-desc {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 0 10px !important;
  }
}
/* Wrapper tombol cek NPWP */
.btn-cek-npwp {
    width: 100%;
    margin-top: 18px;
    padding: 14px 20px;
    border-radius: 50px;       /* Biar sama bulatnya seperti input */
    background: #111;          /* Warna hitam elegan seperti tema Abi */
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: 0.25s ease;
}

/* Hover */
.btn-cek-npwp:hover {
    background: #000;
    transform: translateY(-1px);
}
/* FIX MUTLAK POSISI WA BUBBLE DI KANAN */
.wa-widget,
#waBubble {
    position: fixed !important;
    left: auto !important;
    right: 30px !important;
    bottom: 30px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 99999999 !important;
}
/* FIX POPUP WA JUGA BIKIN IKUT KE KANAN */
#waPopup {
    position: fixed !important;
    left: auto !important;
    right: 30px !important;
    bottom: 95px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 999999999 !important;
}
/* ============================= */
/*     FIX SIZE FOOTER AREA      */
/* ============================= */

/* Kotak copyright */
.copyright {
  padding: 10px 0 !important;
}

.copyright p {
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Kotak abu-abu copyright */
.footer-box .copyright {
  background: #e9e9e9 !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

/* Box berlangganan agar sedikit mengecil */
.subscribe-newsletters p {
  font-size: 14px !important;
}

.subscribe-newsletters input {
  height: 38px !important;
  font-size: 14px !important;
}

.subscribe-newsletters button {
  height: 38px !important;
  width: 42px !important;
  font-size: 15px !important;
}