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

--------------------------------------------- */
/* ---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@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: #fe3f40;
  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;
}

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

.section-heading h2 span {
  color: #fe3f40;
}

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

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

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

/* ---------------------------------------------
header
--------------------------------------------- 
*/

.header-area {
    background-color: #d90202f2;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    padding: 15px 0px !important; /* Tinggi header ditentukan oleh padding ini */
    transition: all 0.3s ease;
    box-shadow: none; /* Hilangkan shadow saat belum scroll */
}

.header-area.background-header {
    background-color: #d90202f2 !important;
    position: fixed !important;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 15px 0px !important; /* Padding disamakan agar tidak menyusut */
    height: auto !important; /* Paksa agar tidak mengikuti height bawaan template */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15) !important;
}

.header-area .main-nav {
  min-height: auto; /* Disesuaikan agar isi header rata */
  background: transparent;
}

.header-area .main-nav .logo img {
    max-height: 45px !important;
    width: auto;
    margin-top: 5px !important; /* Disesuaikan agar rata tengah dengan menu */
    transition: all 0.3s ease;
    display: inline-block;
    vertical-align: middle;
}

/* Logo tidak menyusut saat di-scroll */
.header-area.background-header .main-nav .logo img {
    max-height: 45px !important;
    margin-top: 5px !important;
}

.header-area .main-nav .logo {
  line-height: normal; /* Disesuaikan */
  float: left;
}

/* Warna menu tidak berubah jadi gelap saat scroll */
.background-header .main-nav .nav li a {
  color: #fff !important; 
}

.background-header .main-nav .nav li:hover a {
  color: #fe3f40!important;
}

.background-header .nav li a.active {
  color: #fe3f40!important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 0px; /* Disesuaikan agar sejajar dengan logo */
  margin-right: 0px;
  background-color: transparent;
  transition: all 0.3s ease;
  position: relative;
  z-index: 999;
}

.header-area.background-header .main-nav .nav {
    margin-top: 0px !important; /* Menu tidak lompat saat di-scroll */
}

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

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

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #fff; /* Warna default menu diubah jadi putih agar jelas di background merah */
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #1e1e1e !important; /* Warna hover diganti gelap karena background sudah merah */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #1e1e1e !important;
  opacity: 1;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: #fe3f40;
  color: #fff !important;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #fff;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

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

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #d90202f2;
  color: #fff !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fe3f40!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 15px; /* Disesuaikan agar rata tengah di mobile */
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 15px; /* Disesuaikan agar tidak lompat saat scroll di mobile */
}

.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; /* Warna menu hamburger putih agar jelas di background merah */
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.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;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

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

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

.header-area .main-nav .menu-trigger span:before {
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: auto;
}


@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  /* PENYESUAIAN HEADER MOBILE AGAR TIDAK MENYUSUT SAAT SCROLL */
  .header-area {
      padding: 10px 15px !important;
      height: auto !important; 
  }
  .header-area.background-header {
      padding: 10px 15px !important;
  }
  
  .header-area .main-nav .logo img {
      max-height: 35px !important;
      margin-top: 5px !important;
  }
  .header-area.background-header .logo img {
      max-height: 35px !important;
      margin-top: 5px !important;
  }

  .background-header .main-nav .nav {
    margin-top: 60px !important; /* Disesuaikan agar dropdown menu tidak terlalu turun */
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fe3f40!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #d90202f2;
    text-align: left; /* Biarkan logo tetap di kiri */
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #d90202f2;
  }
  .header-area.header-sticky .nav {
    margin-top: 60px; /* Disesuaikan untuk mobile saat menu di klik */
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #d90202f2;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px 20px !important; /* Tambahkan padding agar teks menu tidak menempel ke tepi layar */
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important; /* Menu drop down jadi terang */
  }
  .header-area .main-nav .nav li a:hover {
    background: #d90202f2 !important;
    color: #fff !important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
    align-items: center; /* Memastikan menu berada di tengah vertikal dengan logo */
  }
}

/* ---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    transition: opacity 0.25s ease;
}

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

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

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

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

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fe3f40;
    border-radius: 50%;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    margin-top: 12px;
    margin-left: 31px;
    animation: dots 2.8s infinite;
}

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



/* ---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 180px 0px 20px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 193px;
  height: 467px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/baner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}

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

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

.main-banner .left-content h2 em {
  color: #fe3f40;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #fe3f40;
}

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



/* ---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  margin-top: 10px;
}

.about-us {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  
  /* INI KUNCINYA: Memaksa background melebar 100% dan memanjang 100% menutupi seluruh kotak */
  background-size: 140% 130%;
  
  /* Kita kembalikan padding-nya ke ukuran yang proporsional (tidak terlalu renggang, tidak terlalu mepet) */
  padding: 120px 0px 330px 0px; 
}

.about-us .left-image {
  margin-right: 45px;
  width: 110% !important; /* Gunakan persentase di atas 100% untuk memperbesar dari ukuran asli */
    max-width: none !important; /* Menghilangkan batasan maksimal agar bisa lebih besar */
    margin-left: -06%; /* Opsional: Menggeser sedikit ke kiri jika gambar meluber ke kanan */
}

.about-us .services .item {
  margin-bottom: 30px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #fff;
}


/* ---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  margin-top: 0px;
  padding-top: 120px;
}

.our-services .left-image {
  margin-right: 45px;
}

/* 1. Paksa jarak bawah judul sekecil mungkin */
.section-heading h2 {
    margin-bottom: 10px !important;
    line-height: 1.2 !important; /* Mengecilkan ruang antar baris di dalam judul */
}

/* 2. Paksa jarak atas paragraf hilang dan rapat ke atas */
.section-heading p {
    margin-top: 3px !important;
    padding-top: 3px !important;
    line-height: 1.5 !important;
}
.our-services .progress-skill-bar {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fe3f40;
}

.our-services .first-bar span {
  left: 69%;
}

.our-services .second-bar span {
  left: 81%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.our-services .first-bar .filled-bar {
  width: 71%;
}

.our-services .second-bar .filled-bar {
  width: 83%;
}

.our-services .third-bar .filled-bar {
  width: 90%;
}


/* ---------------------------------------------
Portfolio / Tutorial Style (GRADASI BACKGROUND)
--------------------------------------------- 
*/

#portfolio.our-portfolio {
    background: linear-gradient(135deg, #b71c1c 0%, #fe3f40 50%, #ff7043 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    margin-bottom: 40px !important;
    position: relative;
}

/* Mengubah warna teks judul menjadi putih agar terbaca di atas gradasi */
#portfolio.our-portfolio .section-heading h2,
#portfolio.our-portfolio .section-heading p {
    color: #ffffff !important;
}

/* Mengubah warna kata 'Cuan' agar mencolok namun harmonis */
#portfolio.our-portfolio .section-heading h2 em {
    color: #ffeb3b !important;
    font-style: italic;
}

/* Merapikan kartu tutorial agar menonjol di atas background gradasi */
#portfolio.our-portfolio .step-card {
    background: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    height: 100%;
}

#portfolio.our-portfolio .step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

#portfolio.our-portfolio .step-img { 
    width: 100%; 
    border-radius: 15px; 
    margin-bottom: 15px; 
    border: 1px solid #f0f0f0; 
}

/* Warna dan ukuran nomor urut di tutorial */
#portfolio.our-portfolio .step-number {
    font-size: 30px; 
    font-weight: 800; 
    margin-bottom: 10px; 
    color: #fe3f40 !important;
    opacity: 0.15; 
}


/* Testimonials Section */
.testimonials .testimonial-wrap {
  padding-left: 10px;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px;
  margin: 30px 10px;
  box-shadow: 0px 0 15px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
  border-radius: 10px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  margin-right: 15px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #000;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #009d8b;
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}


/* Pastikan elemen video memiliki posisi relatif */
.testimonial-wrap {
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s;
}

/* Styling untuk Ikon Play */
.testimonial-wrap .play-icon {
    position: absolute;
    top: 50%;        
    left: 50%;       
    transform: translate(-50%, -50%); 
    font-size: 5rem; 
    color: #fff;     
    opacity: 0.9;    
    cursor: pointer; 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    z-index: 5; 
}

/* Efek Hover Opsional pada Video */
.testimonial-wrap:hover .play-icon {
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.1); 
}




/* ---------------------------------------------
Blog
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 80px;
  padding-top: 120px;
}

.our-blog .section-heading h2 {
  margin-right: 180px;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 270px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 75px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .left-image h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
}

.our-blog .right-list ul li {
  display: inline-flex;
  width: 100%;
  margin-bottom: 30px;
}

.our-blog .right-list .left-content {
  margin-right: 45px;
}

.our-blog .right-list .left-content span {
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
}

.our-blog .right-list .left-content span i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}


.our-blog .right-list .right-image img {
  width: 250px;
  border-radius: 20px;
}


.team .member {
  text-align: center;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  overflow: hidden;
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
}

.team .member img {
  border-radius: 10px;
  overflow: hidden;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 20px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 14px;
  color: #6c757d;
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #6c757d;
}

.team .member .social {
  margin-top: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.team .member .social a {
  color: #a2a2a2;
  transition: 0.3s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bbbbbb;
}

.team .member .social a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}


/* GAYA TOMBOL DAFTAR SEKARANG */
.cta-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, #fe3f40 0%, #d32f2f 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(254, 63, 64, 0.3);
    text-decoration: none !important;
    border: none;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(254, 63, 64, 0.5);
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #fff !important;
}

/* Merapikan tampilan kartu member agar tombol terlihat bagus */
.member {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: 0.3s;
    height: 100%;
}

.member:hover {
    border-color: #fe3f40;
}

.small-code-text {
    font-size: 12px;
    color: #777;
    margin-top: 15px;
    font-style: italic;
}


/* ---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding: 160px 0px;
  background-image: url(../images/contact-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #2a2a2a;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 20px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #2a2a2a;
}

form#contact button {
  display: inline-block;
  background-color: #fe3f40;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #fe3f40;
}


/* ---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer p {
  text-align: center;
  margin: 30px 0px 45px 0px;
}

footer p a {
  color: #fe3f40;
}

  .floating-wa {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .floating-wa:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: #FFF;
  }

  /* Animasi berdenyut */
  .floating-wa::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }


/* ---------------------------------------------
FIX TOMBOL DAFTAR (AGEN & PARTNER) SEJAJAR
--------------------------------------------- */

.team-options .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Memaksa kolom kiri & kanan sama tinggi */
}

.team-options .col-6 {
  display: flex; /* Membuat container kolom menjadi flex */
  margin-bottom: 15px;
}

.team-options .btn-team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* Tombol akan selalu mengisi penuh tinggi kolom */
  padding: 15px 10px;
  border-radius: 12px;
  color: #fff !important;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.team-options .btn-team small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 5px;
}

.btn-agen { background: linear-gradient(135deg, #ff9123 0%, #ff7e00 100%) !important; }
.btn-partner { background: linear-gradient(135deg, #fe3f40 0%, #d32f2f 100%) !important; }

.btn-team:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Penyesuaian khusus mobile agar tidak terlalu rapat */
@media (max-width: 767px) {
  .team-options .col-6 {
    padding-left: 5px;
    padding-right: 5px;
  }
}


/* MEMBERIKAN JARAK ANTAR SEKSI */
#testimonials {
    padding-top: 100px !important; 
    padding-bottom: 100px !important; 
}


/* ---------------------------------------------
responsive
--------------------------------------------- 
*/
/* ---------------------------------------------
RESPONSIVE FIX (MENCEGAH TUMPANG TINDIH)
--------------------------------------------- 
*/

@media (max-width: 991px) {
  /* Membuat teks judul, paragraf, dan tombol menjadi rata tengah */
  .main-banner .left-content {
    text-align: center !important;
    margin-right: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center; 
  }

  .main-banner .left-content h2 {
    margin: 0 auto !important;
    text-align: center !important;
  }

  .main-banner .left-content p {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90%; 
  }

  .team-options {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .team-options .row {
    justify-content: center; 
  }
  
  #testimonials {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

@media (max-width: 767px) {
  .about-us .left-image {
    bottom: 0 !important;
    position: relative !important;
  }
  
  .phone-info h4 span {
    display: block;
    margin-top: 15px;
  }
}

@media (max-width: 991px) {
    .about-us .left-image {
        margin-bottom: 50px !important; 
        text-align: center;
    }

    .about-us .left-image img {
        max-width: 90%;
        height: auto;
    }
}

/* =======================================================
   FIX KONSISTENSI HEADER MOBILE (TIDAK BERUBAH UKURAN) 
   ======================================================= */
@media (max-width: 767px) {
    /* 1. Kunci ukuran background merahnya */
    .header-area,
    .header-area.background-header {
        padding: 15px 15px !important;
        height: 70px !important; /* Tinggi dikunci mati di 70px */
        background-color: #d90202f2 !important;
    }

    /* 2. Kunci ukuran logo agar tidak membesar/mengecil */
    .header-area .main-nav .logo img,
    .header-area.background-header .main-nav .logo img {
        max-height: 40px !important;
        margin-top: 0px !important; 
    }

    /* 3. Kunci posisi tombol menu hamburger (garis tiga) agar sejajar logo */
    .header-area .main-nav .menu-trigger,
    .header-area.background-header .main-nav .menu-trigger {
        top: 15px !important;
        right: 20px !important;
    }
}

/* =======================================================
   CUSTOM SUBHEADING CLASS (UNTUK H3 YANG DIBESARKAN) 
   ======================================================= */
.custom-subheading {
    font-size: 26px !important; 
    font-weight: 600; 
    line-height: 36px;
    color: #2a2a2a; 
}

@media (max-width: 767px) {
    .custom-subheading {
        font-size: 22px !important;
        line-height: 32px;
    }
}

/* =======================================================
   UBAH WARNA LINK WHATSAPP DI KONTAK / FOOTER MENJADI MERAH
   ======================================================= */
.phone-info h4 a {
    color: #0e0e0e !important; /* Warna merah MOVA */
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-info h4 a:hover {
    color: #0c0c0c !important; /* Warna merah gelap saat disentuh kursor */
}

/* =======================================================
   BACKGROUND GRADASI MODERN ABSTRAK (SECTION DAFTAR) 
   ======================================================= */
#team.team {
    padding: 80px 0 100px 0 !important;
    /* Efek Gradasi Modern: Campuran merah gelap, merah terang, dan orange */
    background: radial-gradient(circle at 10% 20%, #ff7043 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, #ff4b2b 0%, transparent 40%),
                linear-gradient(135deg, #b71c1c 0%, #fe3f40 50%, #d84315 100%);
    position: relative;
    overflow: hidden;
}

/* Mengubah warna Judul "Daftar dan Dapatkan Bonus..." menjadi putih */
#team.team .section-header h2 {
    color: #ffffff !important;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* Sedikit bayangan agar elegan */
}

/* Mempertebal bayangan pada kartu/kotak pendaftaran agar lebih melayang (pop-out) di atas background merah */
#team.team .member {
    box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
    border: none !important; /* Menghilangkan garis pinggir agar lebih bersih */
}


/* =======================================================
   MEMBUAT SECTION "CARA DAFTAR" CENTER DI MOBILE (HP & TABLET)
   ======================================================= */
@media (max-width: 991px) {
    /* 1. Menengahkah gambar dan memberi jarak bawah */
    .cara-daftar-section .left-image {
        text-align: center;
        margin-bottom: 30px; 
    }

    /* 2. Menengahkah semua teks judul dan paragraf */
    .cara-daftar-section .section-heading {
        text-align: center !important;
    }


    /* 4. Menengahkah area tombol */
    .cara-daftar-section .mt-4 {
        display: flex;
        justify-content: center;
    }
}