/******************************************************************
  Template Name: Dreams
  Description: Dreams wedding template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10. Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: "Play", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  color: #adadad;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 50px;
}
.section-title.center-title {
  text-align: center;
}
.section-title.center-title h2:after {
  right: 0;
  margin: 0 auto;
}
.section-title span {
  color: #ffffff;
  display: block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-title h2 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}
.section-title h2:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #f8931f;
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 15px;
  font-family: "Play", sans-serif;
  font-weight: 700;
  padding: 14px 32px 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.primary-btn:hover:before {
  height: 100%;
  width: 100%;
}
.primary-btn:hover:after {
  height: 100%;
  width: 100%;
}
.primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 30px;
  border-left: 2px solid #f8931f;
  border-top: 2px solid #f8931f;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}
.primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  border-right: 2px solid #f8931f;
  border-bottom: 2px solid #f8931f;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.site-btn {
  font-size: 15px;
  color: #ffffff;
  background: #f8931f;
  font-family: "Play", sans-serif;
  font-weight: 700;
  border: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 34px 12px;
  width: 100%;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
/*---------------------
  Header (Struktur Asli Anda)
-----------------------*/
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9;
}

.header__logo {
  padding: 30px 0;
}
.header__logo a {
  display: inline-block;
}

.header__nav__option {
  text-align: right;
  padding: 28px 0px;
}

.header__nav__menu {
  display: inline-block;
  margin-right: 45px;
}
.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 45px;
  position: relative;
}
.header__nav__menu ul li.active a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}
.header__nav__menu ul li:last-child {
  margin-right: 0;
}
.header__nav__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 190px;
  background: #ffffff;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
  font-size: 15px;
  color: #111111;
  padding: 8px 20px;
  text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
  display: none;
}
.header__nav__menu ul li a {
  font-size: 17px;
  font-family: "Play", sans-serif;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  font-weight: 500;
}
.header__nav__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #f8931f;
  content: "";
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__nav__social {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}
.header__nav__social:before {
  position: absolute;
  left: 0;
  top: 4px;
  height: 13px;
  width: 1px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}
.header__nav__social a {
  color: #ffffff;
  font-size: 15px;
  margin-right: 18px;
}
.header__nav__social a:last-child {
  margin-right: 0;
}

/* --- REVISI FINAL: PENYELARASAN LABEL MENU MOBILE --- */
.slicknav_menu {
  background: transparent !important;
  display: none; /* Default sembunyi di desktop */
}

/* Tombol hamburger tetap orange di posisi aslinya */
.slicknav_btn {
  position: absolute;
  right: 10px;
  top: 26px;
  padding-left: 0;
  background: #f8931f !important;
}

.slicknav_menutxt {
  display: none !important;
}

.slicknav_menu .slicknav_icon-bar {
  background-color: #ffffff !important;
}

/* Wadah dropdown mobile jadi putih */
.slicknav_nav {
  background: #ffffff !important;
  border-radius: 10px !important;
  margin-top: 15px !important;
  padding: 10px 0 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

/* Reset semua margin/padding bawaan SlickNav */
.slicknav_nav ul, .slicknav_nav li {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- BAGIAN PENTING: Penyelarasan Label Menu Utama --- */
/* (Beranda, Blog, Karier) DAN (Tentang Kami, Portfolio, Layanan) */
.slicknav_nav a, 
.slicknav_nav .slicknav_row {
  padding: 12px 25px !important; /* Gunakan nilai yang sama agar sejajar lurus */
  margin: 0 !important;
  display: block !important;
  color: #111111 !important;
  font-family: "Play", sans-serif;
  font-weight: 600 !important;
  text-transform: uppercase;
  text-decoration: none;
}

/* Label parent (row) dibuat flex agar panah orange ada di ujung kanan */
.slicknav_nav .slicknav_row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* --- BAGIAN PENTING: Hanya sub-menu yang dibuat menjorok --- */
/* (Isi dari Tentang Kami, Portfolio, Layanan) */
/* =========================
   RATKAN MENU UTAMA
========================= */
.slicknav_nav > li > a,
.slicknav_nav > li > .slicknav_row {
  padding: 12px 25px !important;
}

/* =========================
   HANYA SUBMENU YANG MENJOROK
========================= */
.slicknav_nav li ul li a {
  padding-left: 50px !important; /* submenu menjorok */
  font-weight: 500 !important;
  text-transform: capitalize !important;
}



/* Efek Hover */
.slicknav_nav a:hover, 
.slicknav_nav .slicknav_row:hover {
  background: #f8f9fa !important;
  color: #f8931f !important;
}

.slicknav_nav .slicknav_arrow {
  color: #f8931f !important;
}

/* --- LOGO --- */
.logo-header {
    max-width: 120px;
    width: 100%;
    height: auto;
}

.logo-footer {
    max-width: 120px;
    width: 100%;
    height: auto;
}

/* Responsive Logic */
@media only screen and (max-width: 991px) {
    .header__nav__menu, .header__nav__social {
        display: none !important;
    }
    .slicknav_menu {
        display: block;
    }
}
/*---------------------
  Hero Section with Video Background
-----------------------*/
.hero__item {
    height: 684px;
    padding-top: 200px;
    position: relative; /* Wajib untuk posisi video absolute */
    overflow: hidden;
    background: #000; /* Warna dasar jika video gagal dimuat */
}

/* Styling Video Background */
.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Di atas background hitam */
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Overlay Gelap agar teks mudah dibaca */
.hero__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4); /* Kegelapan 40% */
    z-index: 2;
}

/* Memastikan Kontainer Teks di Depan Video & Overlay */
.hero__item .container {
    position: relative;
    z-index: 3;
}

/* --- Animasi Teks (Owl Carousel Active) --- */
.hero__text span {
    color: #ffffff;
    display: block;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.3s;
}

.hero__text h2 {
    color: #ffffff;
    font-size: 60px;
    font-weight: 700;
    line-height: 70px;
    text-transform: uppercase;
    margin-bottom: 38px;
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.5s;
}

.hero__text .primary-btn {
    position: relative;
    top: 100px;
    opacity: 0;
    transition: all 0.7s;
}

/* Trigger Animasi saat Slide Aktif */
.hero__slider.owl-carousel .owl-item.active .hero__text span,
.hero__slider.owl-carousel .owl-item.active .hero__text h2,
.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
    top: 0;
    opacity: 1;
}

/* --- Dots / Navigasi --- */
.hero__slider.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 45px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    z-index: 4; /* Di depan video */
}

.hero__slider.owl-carousel .owl-dots button {
    color: #adadad;
    font-size: 18px;
    font-family: "Play", sans-serif;
    margin-right: 16px;
    position: relative;
    display: inline-block;
    background: transparent;
    border: none;
}

.hero__slider.owl-carousel .owl-dots button.active {
    color: #ffffff;
}

.hero__slider.owl-carousel .owl-dots button:after {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    content: "";
}

.hero__slider.owl-carousel .owl-dots button.active:after {
    background: #ffffff;
    height: 2px;
}
/*---------------------
  Work
-----------------------*/
.work {
  overflow: hidden;
  background: #144c4d;
}

.work__gallery {
  margin-right: -10px;
}

.work__item {
  height: 311px !important;
  width: calc(16.67% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.work__item:hover .work__item__hover {
  bottom: 0;
}
.work__item.large__item {
  height: 633px !important;
  width: calc(33.33% - 10px);
}
.work__item.wide__item {
  width: calc(33.33% - 10px);
  height: 311px !important;
}
/* Keadaan Normal: Bulatan Solid Orange */
.work__item .play-btn {
    display: inline-block;
    background: #f8931f; /* Warna latar belakang orange */
    color: #ffffff !important; /* Warna icon putih */
    font-size: 20px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #f8931f;
    border-radius: 50%;
    transition: all 0.3s ease; /* Biar transisi warnanya halus */
}

/* Keadaan Hover: Berubah jadi Transparan / Outline */
.work__item:hover .play-btn {
    background: transparent !important; /* Latar jadi bening */
    color: #f8931f !important; /* Icon jadi orange */
    border-color: #f8931f; /* Border tetap orange */
}

.grid-sizer {
  width: calc(16.67% - 10px);
}

.work__item__hover {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: -300px;
  width: 100%;
  padding: 25px 30px 20px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.work__item__hover h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
}
.work__item__hover ul li {
  color: #adadad;
  list-style: none;
  font-size: 16px;
  margin-right: 23px;
  position: relative;
  display: inline-block;
}
.work__item__hover ul li:after {
  position: absolute;
  right: -18px;
  top: 1px;
  content: "/";
}
.work__item__hover ul li:last-child {
  margin-right: 0;
}
.work__item__hover ul li:last-child:after {
  display: none;
}

/*---------------------
  Counter
-----------------------*/
.counter {
  background: #144c4d;
  height: 840px;
  padding-top: 380px;
  overflow: hidden;
}

.counter__content {
  padding: 0px 50px;
}

.counter__item {
  background: #448186;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  height: 255px;
  width: 255px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.counter__item::before {
  position: absolute;
  left: -1px;
  bottom: -2px;
  height: 636px;
  width: 636px;
  border-left: 1px solid #f8931f;
  border-top: 1px solid #f8931f;
  content: "";
  z-index: -1;
}
.counter__item.second__item {
  margin-top: -185px;
}
.counter__item.second__item:before {
  left: -316px;
  bottom: -65px;
  border-right: 1px solid #f8931f;
  border-bottom: 1px solid #f8931f;
  border-left: none;
  border-top: none;
}
.counter__item.four__item {
  margin-top: -185px;
}
.counter__item.four__item:before {
  left: -380px;
  bottom: -380px;
  border-right: 1px solid #f8931f;
  border-bottom: 1px solid #f8931f;
  border-left: none;
  border-top: none;
}
.counter__item.third__item:before {
  left: -65px;
  bottom: -317px;
}

.counter__item__text {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.counter__item__text h2 {
  font-size: 60px;
  color: #f8931f;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 18px;
}
.counter__item__text p {
  color: #f8931f;
  margin-bottom: 0;
}

/*---------------------
  Team
-----------------------*/
.team {
  padding-bottom: 90px;
}

.section-title.team__title {
  margin-bottom: 90px;
}

.team__item {
  height: 390px;
  position: relative;
  overflow: hidden;
}
.team__item:hover .team__item__text {
  bottom: 0;
}
.team__item.team__item--second {
  margin-top: -60px;
}
.team__item.team__item--third {
  margin-top: -120px;
}
.team__item.team__item--four {
  margin-top: -180px;
}

.team__item__text {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  padding: 50px 0 30px;
  z-index: 1;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.team__item__text:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(../img/team/team-hover.png);
  content: "";
  z-index: -1;
}
.team__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.team__item__text p {
  color: #ffffff;
  font-weight: 300px;
  margin-bottom: 12px;
}
.team__item__text .team__item__social a {
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  margin-right: 18px;
}
.team__item__text .team__item__social a:last-child {
  margin-right: 0;
}

.team__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Styling Tombol Panah (Nav) */
.team__slider.owl-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(248, 147, 31, 0.7) !important; /* Warna Oranye GSPI transparan */
    color: #fff !important;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    transition: 0.3s;
    z-index: 10;
}

.team__slider.owl-carousel .owl-nav button:hover {
    background: #f8931f !important; /* Oranye Full */
    box-shadow: 0 0 15px rgba(248, 147, 31, 0.5);
}

.team__slider.owl-carousel .owl-nav button.owl-prev {
    left: -20px;
}

.team__slider.owl-carousel .owl-nav button.owl-next {
    right: -20px;
}

/* Styling Titik Indikator (Dots) */
.team__slider.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.team__slider.owl-carousel .owl-dots .owl-dot {
    display: inline-block;
}

.team__slider.owl-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    display: block;
    margin: 5px;
    border-radius: 50%;
    transition: 0.3s;
}

.team__slider.owl-carousel .owl-dots .owl-dot.active span {
    background: #f8931f; /* Warna aktif Oranye GSPI */
    width: 25px; /* Membuat dot aktif lebih panjang (modern look) */
    border-radius: 5px;
}

/* Memastikan container tidak memotong tombol saat mobile */
@media (max-width: 1200px) {
    .team__slider.owl-carousel .owl-nav button.owl-prev { left: 5px; }
    .team__slider.owl-carousel .owl-nav button.owl-next { right: 5px; }
}

/*---------------------
  Latest
-----------------------*/
.latest {
  background: #144c4d;
  padding-bottom: 80px;
}

.blog__item.latest__item {
  margin-bottom: 0;
  /* Tambahan agar background dinamis bisa diposisikan */
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
    border: 1px solid #f8931f !important;

}

.blog__item.latest__item:hover {
  border: 1px solid #f8931f !important;
  /* Menghapus URL statis dan menggunakan variabel dinamis */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}

/* Tambahan overlay agar teks putih tetap terbaca saat hover */
.blog__item.latest__item:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Hitam transparan */
  z-index: -1;
}

/* Pastikan teks menjadi putih saat hover sesuai CSS asli Anda */
.blog__item.latest__item:hover h4,
.blog__item.latest__item:hover ul li,
.blog__item.latest__item:hover p,
.blog__item.latest__item:hover a {
  color: #ffffff !important;
}

.latest__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.latest__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.latest__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.latest__slider.owl-carousel .owl-dots button.active {
  background: #f8931f;
}
.latest__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}
/*---------------------
  Call To Active
-----------------------*/
.callto {
  padding-top: 130px;
}
.callto.sp__callto {
  padding-top: 0;
  background: #144c4d;
}

.callto__text h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  line-height: 55px;
  margin-bottom: 22px;
}
.callto__text p {
  font-size: 15px;
  color: #ffffff;
  opacity: 0.7;
  text-transform: uppercase;
  margin-bottom: 55px;
}
.callto__text a {
  color: #ffffff;
  background: #f8931f;
  font-size: 15px;
  font-weight: 700;
  font-family: "Play", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 32px 12px;
}

/*---------------------
  Footer
-----------------------*/
.footer {
  background: #144c4d;
}

.footer__top {
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__top__logo {
  line-height: 40px;
}
.footer__top__logo a {
  display: inline-block;
}

.footer__top__social {
  text-align: right;
}
.footer__top__social a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  margin-right: 6px;
}
.footer__top__social a:last-child {
  margin-right: 0;
}

.footer__option {
  padding-bottom: 35px;
  padding-top: 75px;
}

.footer__option__item {
  margin-bottom: 35px;
}
.footer__option__item h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 35px;
}
.footer__option__item p {
  font-weight: 300;
  margin-bottom: 20px;
}
.footer__option__item .read__more {
  font-size: 16px;
  color: #ffffff;
}
.footer__option__item .read__more span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}
.footer__option__item ul li {
  list-style: none;
}
.footer__option__item ul li a {
  color: #adadad;
  font-size: 16px;
  font-weight: 300;
  line-height: 32px;
}
.footer__option__item form {
  position: relative;
}
.footer__option__item form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  border: 1px solid #544E5E;
  background: transparent;
  font-size: 16px;
  color: #adadad;
}
.footer__option__item form input::-webkit-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-moz-placeholder {
  color: #adadad;
}
.footer__option__item form input:-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::placeholder {
  color: #adadad;
}
.footer__option__item form button {
  font-size: 20px;
  color: #ffffff;
  border: none;
  height: 50px;
  width: 50px;
  background: #f8931f;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}

.footer__copyright__text {
  margin-bottom: 0;
  font-weight: 300;
}
.footer__copyright__text i {
  color: #f8931f;
}
.footer__copyright__text a {
  color: #f8931f;
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 180px;
}

.breadcrumb__text h2 {
  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 12px;
}

.breadcrumb__links a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  display: inline-block;
  margin-right: 32px;
  position: relative;
}
.breadcrumb__links a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "/";
  color: #adadad;
  font-size: 20px;
}
.breadcrumb__links span {
  font-size: 16px;
  color: #adadad;
  font-weight: 300;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/
.about {
  background: #144c4d;
  padding-bottom: 150px;
}

.about__pic__item {
  height: 235px;
  margin-right: -10px;
  margin-bottom: 20px;
}
.about__pic__item.about__pic__item--large {
  height: 490px;
}

.about__text {
  padding-left: 30px;
}
.about__text .services__item .services__item__icon:after {
  border-color: #281A3E;
}

.about__text__desc {
  margin-top: -10px;
}

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  padding-bottom: 60px;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.testimonial__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.testimonial__slider.owl-carousel .owl-dots button.active {
  background: #f8931f;
}
.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__text {
  padding: 30px 40px 25px 30px;
  border: 1px solid #3D3A64;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}
.testimonial__text P {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}

.testimonial__author {
  padding-left: 30px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 20px;
}
.testimonial__author__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
}
.testimonial__author__text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 8px;
}
.testimonial__author__text span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300px;
  display: inline-block;
}

/*---------------------
  Services
-----------------------*/
.services {
  background: #144c4d;
  padding-bottom: 60px;
  padding-top: 110px;
}

.services__title p {
  margin-bottom: 45px;
}

.services__item {
  margin-bottom: 45px;
}
.services__item:hover .services__item__icon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}
.services__item h4 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 18px;
}
.services__item p {
  margin-bottom: 0;
}

.services__item__icon {
  position: relative;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
}
.services__item__icon:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #f8931f;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.services__item__icon i {
    font-size: 24px;
    color: #ffffff; /* Ikon putih agar kontras dengan oranye */
}

.services__item:hover .services__item__icon {
    background: var(--accent-color); /* Berubah Navy saat hover */
    transform: rotateY(180deg); /* Efek putar elegan */
}
/*---------------------
  Services Page
-----------------------*/
.services-page {
  background: #144c4d;
  padding-bottom: 50px;
}

/*---------------------
  Services Responsive
-----------------------*/

/* Tablet (iPad & Small Laptops) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services {
        padding-top: 80px;
        padding-bottom: 40px;
    }
    
    .services__item h4 {
        font-size: 20px; /* Sedikit lebih kecil agar tidak pecah baris */
    }
}

/* Mobile (Smartphones) */
@media only screen and (max-width: 767px) {
    .services {
        padding-top: 60px;
        padding-bottom: 30px;
    }

    .services__title {
        text-align: center; /* Judul rata tengah di mobile biasanya lebih bagus */
        margin-bottom: 30px;
    }

    .services__item {
        text-align: center; /* Item layanan rata tengah */
        margin-bottom: 40px;
    }

    /* Memastikan Icon tetap di tengah saat text-align center */
    .services__item__icon {
        margin: 0 auto; 
    }

    .services__item h4 {
        font-size: 18px;
        margin-top: 20px;
    }

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

/*---------------------
  Logo
-----------------------*/
.logo {
  background: #144c4d;
  padding: 100px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}

/*---------------------
  Portfolio
-----------------------*/
.portfolio {
  background: #144c4d;
}

.portfolio__filter {
  text-align: center;
  margin-bottom: 40px;
}
.portfolio__filter li {
  list-style: none;
  font-size: 16px;
  color: #adadad;
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 22px;
}
.portfolio__filter li.active {
  border: 1px solid #f8931f;
}
.portfolio__filter li:last-child {
  margin-right: 0;
}

.portfolio__item {
  margin-bottom: 35px;
}
.portfolio__item:hover .portfolio__item__text h4:after {
  opacity: 1;
}

.portfolio__item__video {
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 28px;
}
.portfolio__item__video .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.portfolio__item__text {
  text-align: center;
}
.portfolio__item__text h4 {
  color: #ffffff;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}
.portfolio__item__text h4:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #333;
  content: "";
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  opacity: 0;
}
.portfolio__item__text ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  margin-right: 24px;
  position: relative;
  color: #adadad;
}
.portfolio__item__text ul li:after {
  position: absolute;
  right: -16px;
  top: 0;
  content: "/";
}
.portfolio__item__text ul li:last-child {
  margin-right: 0;
}
.portfolio__item__text ul li:last-child:after {
  display: none;
}
.portfolio__item__text span {
  font-size: 16px;
  font-weight: 300;
  color: #adadad;
  display: block;
}

.pagination__option {
  text-align: center;
  padding-top: 20px;
}
.pagination__option.blog__pagi {
  padding-top: 5px;
}
.pagination__option .arrow__pagination {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}
.pagination__option .arrow__pagination.left__arrow {
  margin-right: 26px;
}
.pagination__option .arrow__pagination.right__arrow {
  margin-left: 18px;
}
.pagination__option .arrow__pagination span {
  opacity: 0.5;
}
.pagination__option .number__pagination {
  font-size: 18px;
  color: #ffffff;
  height: 50px;
  width: 50px;
  background: rgba(242, 242, 242, 0.1);
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  background: #144c4d;
}

.blog__item {
  border: 1px solid #222222;
  padding: 40px 48px 35px 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}
.blog__item:hover {
  border: 1px solid transparent !important;
  background: url(../img/blog/blog-2.jpg) no-repeat;
  background-size: cover;
}
.blog__item:hover ul li {
  color: #ffffff;
}
.blog__item:hover p {
  color: #ffffff;
}
.blog__item h4 {
  color: #ffffff;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 18px;
}
.blog__item ul {
  margin-bottom: 20px;
}
.blog__item ul li {
  color: #777777;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  margin-right: 25px;
  position: relative;
  display: inline-block;
}
.blog__item ul li:after {
  position: absolute;
  right: -16px;
  top: 0px;
  content: "/";
}
.blog__item ul li:last-child {
  margin-right: 0;
}
.blog__item ul li:last-child:after {
  display: none;
}
.blog__item p {
  font-weight: 300;
  line-height: 29px;
  margin-bottom: 22px;
}
.blog__item a {
  font-size: 16px;
  color: #ffffff;
}
.blog__item a span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}

/*---------------------
  Blog Details Hero
-----------------------*/
.blog-hero {
  padding: 300px 0 230px;
}

.blog__hero__text {
  text-align: center;
}
.blog__hero__text h2 {
  color: #ffffff;
  font-weight: 700;
  line-height: 47px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blog__hero__text ul li {
  font-size: 14px;
  color: #ffffff;
  font-weight: 300;
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}
.blog__hero__text ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "/";
}
.blog__hero__text ul li:last-child {
  margin-right: 0;
}
.blog__hero__text ul li:last-child:after {
  display: none;
}
.blog__hero__text ul li span {
  text-transform: uppercase;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  background: #144c4d;
}

.blog__details__text {
  margin-bottom: 30px;
}
.blog__details__text p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__quote {
  border: 1px solid rgba(225, 225, 225, 0.8);
  padding: 35px 90px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}
.blog__details__quote p {
  font-size: 22px;
  font-weight: 300;
  line-height: 35px;
  font-style: italic;
  margin-bottom: 10px;
}
.blog__details__quote h6 {
  font-size: 15px;
  color: #adadad;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}
.blog__details__quote i {
  font-size: 36px;
  color: #f8931f;
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.blog__details__desc {
  margin-bottom: 50px;
}
.blog__details__desc p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__desc p:last-child {
  margin-bottom: 0;
}

.blog__details__tags {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 65px;
}
.blog__details__tags span {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 300;
  margin-right: 25px;
}
.blog__details__tags a {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  display: inline-block;
  margin-right: 11px;
  padding: 8px 15px 7px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
  margin-bottom: 40px;
}

.blog__details__option__item {
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
}
.blog__details__option__item h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.blog__details__option__item h5 i {
  font-size: 18px;
  margin-right: 5px;
}
.blog__details__option__item.blog__details__option__item--right h5 {
  text-align: right;
}
.blog__details__option__item.blog__details__option__item--right h5 i {
  margin-right: 0;
  margin-left: 5px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
  float: right;
  margin-right: 0;
  margin-left: 25px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
  margin-right: 25px;
  text-align: right;
  float: none;
}

.blog__details__option__item__img {
  float: left;
  margin-right: 25px;
}

.blog__details__option__item__text {
  overflow: hidden;
}
.blog__details__option__item__text h6 {
  color: #ffffff;
  line-height: 21px;
  font-weight: 700;
  margin-bottom: 5px;
}
.blog__details__option__item__text span {
  font-size: 14px;
  color: #777777;
  font-weight: 300;
}

.blog__details__recent {
  margin-bottom: 60px;
}
.blog__details__recent h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__recent__item {
  margin-bottom: 30px;
}
.blog__details__recent__item img {
  min-width: 100%;
  margin-bottom: 20px;
}
.blog__details__recent__item h5 {
  color: #ffffff;
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 4px;
}
.blog__details__recent__item span {
  color: #777777;
  font-size: 14px;
  font-weight: 300;
}

.blog__details__comment h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}
.blog__details__comment form textarea {
  height: 120px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
}
.blog__details__comment form textarea:placeholder {
  color: #adadad;
}

.input__list {
  margin-right: -20px;
  overflow: hidden;
}
.input__list input {
  height: 50px;
  width: calc(33.33% - 20px);
  float: left;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
}
.input__list input:placeholder {
  color: #adadad;
}

/*---------------------
  Contact Widget
-----------------------*/
.contact-widget {
  background: #144c4d;
  padding-bottom: 70px;
}

.contact__widget__item {
  margin-bottom: 30px;
}

.contact__widget__item__icon {
  height: 70px;
  width: 70px;
  border: 1px solid rgba(225, 225, 225, 0.5);
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  float: left;
  margin-right: 30px;
}
.contact__widget__item__icon i {
  font-size: 30px;
  color: #ffffff;
}

.contact__widget__item__text {
  overflow: hidden;
  padding-top: 7px;
}
.contact__widget__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}
.contact__widget__item__text p {
  margin-bottom: 0;
}

/*---------------------
  Contact
-----------------------*/
.contact {
  background: #144c4d;
  padding-top: 0;
  overflow: hidden;
}

.contact__map {
  height: 450px;
}
.contact__map iframe {
  width: 100%;
}

.contact__form h3 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.contact__form form input {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form input:placeholder {
  color: #adadad;
}
.contact__form form input:focus {
  border-color: #e1e1e1;
}
.contact__form form textarea {
  height: 110px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form textarea:placeholder {
  color: #adadad;
}
.contact__form form textarea:focus {
  border-color: #e1e1e1;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav__menu {
    margin-right: 25px;
  }

  .header__nav__menu ul li {
    margin-right: 25px;
  }

  .header__nav__social {
    padding-left: 25px;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0px 145px 0 50px;
  }

  .counter__item.second__item {
    margin-top: -210px;
  }

  .counter__item.four__item {
    margin-top: -210px;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: 930px !important;
  }
}
/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider.owl-carousel .owl-dots {
    max-width: 690px !important;
  }

  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .portfolio__filter li {
    padding: 6px 15px;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: auto;
    padding: 0 15px;
  }

  

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }

  .hero__text h2 {
    font-size: 40px;
    line-height: 40px;
  }

  .grid-sizer {
    width: calc(50% - 10px);
  }

  .work__item.wide__item {
    width: calc(50% - 10px);
  }

  .work__item {
    width: calc(50% - 10px);
  }

  .work__item.large__item {
    width: calc(50% - 10px);
  }

  .footer__top__social {
    text-align: left;
    padding-top: 30px;
  }

  .portfolio__filter li {
    margin-bottom: 10px;
  }

  .input__list {
    margin-right: 0;
  }

  .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .contact__map {
    margin-bottom: 40px;
  }

  .team__item {
    margin-bottom: 20px;
  }

  .team .p-0 {
    padding: 0 15px !important;
  }

  .about__pic__item {
    margin-right: 0;
  }

  .blog__details__quote {
    padding: 30px 45px 35px 35px;
  }
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
  .hero__text h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .grid-sizer {
    width: 100%;
  }

  .work__item.wide__item {
    width: 100%;
  }

  .work__item {
    width: 100%;
    margin-right: 0;
  }

  .work__item.large__item {
    width: 100%;
  }

  .work__gallery {
    margin-right: 0;
  }

  .pagination__option .arrow__pagination.left__arrow {
    margin-right: 15px;
  }

  .pagination__option .arrow__pagination.right__arrow {
    margin-left: 10px;
  }

  .blog__details__quote {
    padding: 30px 40px 35px 35px;
  }
}


/*---------------------
  Clients Section - Modern Full Color
-----------------------*/
.clients {
    padding: 50px 0;
    background: #ffffff; /* Background putih bersih agar warna logo kontras */
    overflow: hidden;
}

.clients-slider {
    position: relative;
    width: 100%;
    padding: 15px 0;
    overflow: hidden;
    display: flex;
}

/* Container untuk barisan logo */
.clients-track {
    display: flex;
    /* Lebar track disesuaikan secara dinamis di browser */
    animation: scroll 35s linear infinite;
}

/* Baris kedua bergerak berlawanan */
.track-2 {
    animation: scroll-reverse 35s linear infinite;
}

.clients-slide {
    width: 220px; /* Jarak antar logo lebih lega */
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.clients-slide img {
    max-width: 160px;
    max-height: 70px;
    object-fit: contain;
    /* Shadow halus agar logo tidak terlihat "tempelan" kaku */
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)); 
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efek hover: logo sedikit membesar dan shadow lebih tegas */
.clients-slide img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.1));
}

/* Efek Fade di pinggir slider agar logo tidak terpotong kaku */
.clients-slider::before,
.clients-slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.clients-slider::before {
    left: 0;
    top: 0;
}

.clients-slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

/* Animasi Jalur */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-220px * 10)); } /* Angka 10 = jumlah logo unik */
}

@keyframes scroll-reverse {
    0% { transform: translateX(calc(-220px * 10)); }
    100% { transform: translateX(0); }
}

/* Responsive untuk HP */
@media (max-width: 768px) {
    .clients {
        padding: 30px 0;
    }
    .clients-slide {
        width: 160px;
        padding: 0 20px;
    }
    .clients-slide img {
        max-width: 110px;
    }
}

/*---------------------
  Testimonials Section
-----------------------*/
.testimonials {
    padding: 80px 0;
    background-color: #f4f7f6; /* Warna abu-abu sangat muda agar card putih terlihat kontras */
}

.section-title-testi h2 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #144c4d;
    position: relative;
}

.section-title-testi h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: #f8931f;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial-item {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.testimonial-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.testimonial-item .stars {
    margin-bottom: 15px;
}

.testimonial-item .stars i {
    font-size: 16px;
    margin-right: 2px;
}

.testimonial-item p {
    font-style: italic;
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
    flex-grow: 1; /* Memastikan isi teks seimbang */
}

.testimonial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid #f8931f;
}

.testimonial-author h5 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #144c4d;
}

.testimonial-author span {
    font-size: 14px;
    color: #888;
}

.quote-icon {
    font-size: 40px;
    color: rgba(248, 147, 31, 0.2); /* Warna oranye transparan */
    line-height: 0;
}

/* Responsive Mobile */
@media (max-width: 767px) {
    .testimonial-item {
        padding: 25px;
    }
    
    .testimonial-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .quote-icon {
        display: none; /* Sembunyikan icon quote di mobile agar tidak sesak */
    }
}


/* ==========================================================================
   MODAL VIDEO MODERN - GEO SURVEY PERSADA INDONESIA
   ========================================================================== */

/* 1. Reset Modal Dialog - Memastikan modal lebar dan berada di tengah */
.custom-video-modal .modal-dialog {
    max-width: 1100px !important;
    width: 95% !important;
    margin: 50px auto !important; /* Margin disesuaikan agar tombol close terlihat */
    display: block !important; 
}

/* 2. Modal Content - Full transparan agar fokus ke video wrapper */
.custom-video-modal .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Backdrop - Efek cinematic hitam pekat */
.custom-video-modal.modal.fade.show {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.modal-backdrop.show {
    opacity: 0.95 !important;
    background-color: #000 !important;
}

/* 4. Video Wrapper - Frame video dengan bayangan halus */
.video-wrapper-modern {
    width: 100% !important;
    background: #000 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
}

/* 5. Ratio 16:9 - Menjamin video tidak menciut */
.video-wrapper-modern .ratio-16x9 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding-top: 56.25% !important;
}

.video-wrapper-modern iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* 6. Fix Tombol Close - Menggunakan Z-Index maksimal agar bisa diklik */
.btn-close-modern, .force-close-btn {
    position: absolute !important;
    top: -50px !important; /* Berada di atas frame video */
    right: 0 !important;
    background: #144c4d !important; /* Hijau GSPI */
    color: #ffffff !important;
    font-size: 24px !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 999999 !important; /* Z-index tertinggi */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    transition: all 0.3s ease;
}

.btn-close-modern:hover, .force-close-btn:hover {
    background: #f8931f !important; /* Orange GSPI saat hover */
    transform: rotate(90deg);
}

/* Memastikan body modal tidak memotong tombol yang berada di luar garis */
.custom-video-modal .modal-body {
    overflow: visible !important; 
    padding: 0 !important;
}

/* 7. Caption - Teks info di bawah video */
.video-caption-modern {
    text-align: center !important;
    margin-top: 25px !important;
    color: #fff !important;
}

.video-caption-modern h4 {
    color: #f8931f !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 5px !important;
}

.video-caption-modern p {
    color: #ffffff !important;
    font-size: 14px !important;
    opacity: 0.8;
}

/* 8. Fix Klik Grid */
.work-video-card {
    cursor: pointer !important;
}

/* 9. Optimasi Thumbnail (Lazy Load) */
.set-bg {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    background-size: cover;
    background-position: center;
}

.set-bg.bg-loaded {
    opacity: 1;
}

/* Journey/Timeline Styling */
.journey-section {
    background: #0a0a0a; /* Gelap sesuai tema Videograph */
    padding-bottom: 100px;
}

.main-timeline {
    position: relative;
    max-width: 1100px;
    margin: 50px auto 0;
}

/* Garis Tengah Timeline */
.main-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #f8931f; /* Warna Oranye GSPI */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* Titik di Garis Tengah */
.timeline-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    right: -8px;
    background-color: #f8931f;
    border: 3px solid #0a0a0a;
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -8px;
}

/* Penempatan Kiri & Kanan */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

.timeline-date {
    font-size: 24px;
    font-weight: 700;
    color: #f8931f;
    margin-bottom: 5px;
    display: block;
}

.timeline-content {
    padding: 25px;
    background: #151515;
    position: relative;
    border-radius: 10px;
    border: 1px solid #222;
    transition: 0.3s;
}

.timeline-content:hover {
    border-color: #f8931f;
    transform: translateY(-5px);
}

.timeline-content h4 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.timeline-content p {
    color: #adadad;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    /* Pindahkan garis ke kiri */
    .main-timeline::after {
        left: 31px;
    }

    /* Konten jadi full width */
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        text-align: left !important;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    /* Pindahkan titik ke kiri */
    .timeline-dot {
        left: 23px !important;
        right: auto;
    }
}
/* Journey Section Styling */
.journey-section {
    position: relative;
    z-index: 1;
    background-attachment: fixed; /* Memberikan efek parallax halus */
    background-size: cover;
    background-position: center;
}

/* Overlay Gelap agar teks terbaca */
.journey-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.85); /* Overlay Hitam 85% */
    z-index: -1;
}

.main-timeline {
    position: relative;
    max-width: 1100px;
    margin: 50px auto 0;
}

.main-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #f8931f;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

.timeline-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #f8931f;
    border: 4px solid #1a1a1a;
    top: 25px;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px rgba(248, 147, 31, 0.5);
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -10px;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

.timeline-date {
    font-size: 28px;
    font-weight: 700;
    color: #f8931f;
    margin-bottom: 5px;
    display: block;
}

.timeline-content {
    padding: 25px;
    background: rgba(255, 255, 255, 0.05); /* Semi transparan modern */
    backdrop-filter: blur(5px); /* Efek kaca */
    border-radius: 12px;
    border: 1px solid rgba(248, 147, 31, 0.2);
    transition: 0.4s;
}

.timeline-content:hover {
    background: rgba(248, 147, 31, 0.1);
    border-color: #f8931f;
    transform: translateY(-8px);
}

.timeline-content h4 {
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: 700;
}

.timeline-content p {
    color: #cccccc;
    font-size: 14px;
    line-height: 1.6;
}

/* --- MOBILE OPTIMIZATION --- */
@media screen and (max-width: 768px) {
    .main-timeline::after { left: 20px; }
    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 15px;
        text-align: left !important;
    }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-dot { left: 10px !important; right: auto; }
}



/* ==========================================================================
   GSPI PORTFOLIO & PROJECT MAIN STYLES
   ========================================================================== */

/* 1. Global Page Background (Mencegah bocor warna putih) */
body.portfolio-page {
    background-color: #070708;
}

/* 2. Map Styling (Proporsional & Branded) */
.gspi-map-wrapper {
    padding: 60px 0;
    margin-top: -30px;
}

#map { 
    height: 500px; 
    width: 100%; 
    border-radius: 20px; 
    border: 4px solid #f8931f; /* Warna Oranye GSPI */
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    z-index: 1;
}

/* 3. Modern Filter Tabs (High Contrast Capsule) */
.portfolio-filters {
    text-align: center;
    margin: 40px 0 60px 0;
    padding: 0;
    list-style: none;
}

/* Container utama filter agar kontras dengan latar belakang */
/* Container Utama Filter agar posisi Center */
.portfolio-filters {
    text-align: center;      /* Menengahkan elemen inline-block di dalamnya */
    margin: 40px auto 60px;  /* 'auto' di kiri-kanan sangat krusial untuk center */
    padding: 10px 25px;
    background: #ffffff; 
    display: table;          /* Menggunakan 'table' agar lebar kontainer mengikuti isi saja */
    border-radius: 50px;
    border: 2px solid #f8931f;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    list-style: none;        /* Menghapus titik list jika ada */
}

/* Memastikan setiap item filter sejajar */
.portfolio-filters li {
    display: inline-block;   /* Agar bisa ditengah oleh text-align di parent */
    padding: 10px 25px;
    color: #144c4d; 
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 30px;
    letter-spacing: 1px;
    margin: 0 2px;
}

.portfolio-filters li.filter-active, 
.portfolio-filters li:hover {
    background: #f8931f;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(248, 147, 31, 0.4);
}

/* 4. Portfolio Card Styling (Static Info Version) */
.portfolio-grid { margin-top: 30px; }

.portfolio-item {
    margin-bottom: 30px;
}

.portfolio-wrap {
    background: #144c4d;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.portfolio-wrap:hover {
    transform: translateY(-10px);
    border-color: #f8931f;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

/* Image Container */
.portfolio-image-container {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #144c4d;
}

.portfolio-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

.portfolio-wrap:hover .portfolio-image-container img {
    transform: scale(1.1);
}

/* Placeholder for No Images */
.gspi-placeholder-bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #111, #1a1a1a);
}

.gspi-placeholder-bg i {
    font-size: 50px;
    color: #f8931f;
    opacity: 0.2;
}

/* 5. Static Info Panel (Tampil Terus) */
.portfolio-static-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #144c4d;
}

.portfolio-category {
    color: #f8931f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.portfolio-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.portfolio-divider {
    width: 35px;
    height: 3px;
    background: #f8931f;
    margin-bottom: 15px;
    transition: 0.4s;
}

.portfolio-wrap:hover .portfolio-divider {
    width: 100%; /* Garis memanjang saat hover */
}

.portfolio-short-desc {
    color: #adadad;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.view-detail-action {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f8931f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: 0.3s;
}

.portfolio-wrap:hover .view-detail-action {
    letter-spacing: 2px;
}

/* 6. SIDE DETAIL PANEL (MODAL) */
.portfolio-detail-panel {
    position: fixed;
    top: 0;
    right: -650px; /* Hidden state */
    width: 600px;
    height: 100%;
    background: #144c4d;
    z-index: 99999;
    padding: 60px 40px;
    transition: 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    box-shadow: -15px 0 50px rgba(0,0,0,0.9);
    overflow-y: auto;
}

.portfolio-detail-panel.active {
    right: 0;
}

.close-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #f8931f;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Detail Slider */
.detail-slider {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 35px;
    background: #151515;
}

.slides-wrapper {
    display: flex;
    transition: 0.5s ease-in-out;
    height: 100%;
}

.slides-wrapper img {
    min-width: 100%;
    object-fit: cover;
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(248, 147, 31, 0.9);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.slide-arrow.prev { left: 15px; }
.slide-arrow.next { right: 15px; }

/* Detail Text */
.detail-divider-large {
    width: 50px;
    height: 4px;
    background: #f8931f;
    margin-bottom: 20px;
}

#detailTitle {
    color: #f8931f;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Play', sans-serif;
}

#detailDescription {
    color: #cccccc;
    line-height: 1.8;
    font-size: 15px;
    text-align: justify;
}

/* 7. Responsive Design */
@media (max-width: 768px) {
    .portfolio-detail-panel {
        width: 100%;
    }
    
    .portfolio-filters {
        border-radius: 20px;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .portfolio-filters li {
        padding: 8px 15px;
        font-size: 11px;
        margin-bottom: 5px;
    }

    #map {
        height: 350px;
    }
}

/* --- Global & Typography --- */
body.blog-page { 
  background-color: #ffffff; 
  color: #ffffff;
 }

/* --- Titles Section --- */
.titles { padding: 60px 0 20px; text-align: center; }
.titles h2 { color: #f8931f; font-family: 'Play', sans-serif; font-weight: 700; font-size: 32px; text-transform: uppercase; }
.titles p { color: #adadad; max-width: 800px; margin: 15px auto; line-height: 1.6; }

.blog-posts{
      margin-top: 100px;

}
/* --- Modern Blog Cards --- */
.blog-posts article {
    background: #144c4d;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.blog-posts article:hover {
    transform: translateY(-10px);
    border-color: #f8931f;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.post-img { overflow: hidden; height: 220px; position: relative; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease; }
.blog-posts article:hover .post-img img { transform: scale(1.1); }

.blog-posts .post-category {
    padding: 20px 25px 5px;
    color: #f8931f;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.blog-posts .title { padding: 0 25px 20px; margin: 0; flex-grow: 1; }
.blog-posts .title a {
    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    line-height: 1.4;
    display: block;
}
.blog-posts article:hover .title a { color: #f8931f; }

.blog-posts .d-flex.align-items-center {
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.post-author-img { width: 35px; height: 35px; border-radius: 50%; margin-right: 12px; }
.post-meta p { margin: 0; line-height: 1.2; }
.post-author { font-size: 13px; font-weight: 600; color: #ffffff; }
.post-date { font-size: 12px; color: #adadad; }

/* --- Custom Pagination --- */
.pagination-wrapper { margin-top: 50px; display: flex; justify-content: center; }
.pagination { background: rgba(255, 255, 255, 0.05); padding: 8px 15px; border-radius: 50px; border: 1px solid rgba(248, 147, 31, 0.2); }
.pagination .page-item { margin: 0 4px; border: none; }
.pagination .page-link {
    background: transparent; border: none; color: #ffffff;
    border-radius: 50%; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; font-weight: 600;
}
.pagination .page-item.active .page-link { background: #f8931f; color: #ffffff; }
.pagination .page-item:hover .page-link { background: rgba(248, 147, 31, 0.2); color: #f8931f; }
.pagination .page-item.disabled .page-link { color: #444; }

/* ==========================================================================
   GSPI BLOG DETAILS - SPECIFIC LIGHT MODE
   (Hanya berpengaruh pada body.blog-details-page)
   ========================================================================== */

/* Background Utama Halaman Detail */
body.blog-details-page {
    background-color: #f4f7f6 !important;
    color: #444444 !important;
}

/* Container Konten Utama (Box Putih) */
.blog-details-page .article {
    background: #ffffff !important;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* FIX GAMBAR: Full, No Crop, Original Aspect Ratio */
.blog-details-page .post-img, 
.blog-details-page .post-img-dynamic {
    margin: -40px -40px 30px -40px; 
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #fdfdfd; 
}

/* Gambar dokumentasi di tengah teks */
.blog-details-page .post-img-dynamic {
    margin: 30px 0;
    border-radius: 15px;
    border: 1px solid #eeeeee !important;
}

.blog-details-page .post-img img, 
.blog-details-page .post-img-dynamic img {
    width: 100% !important;
    height: auto !important; 
    display: block;
    object-fit: contain !important; /* Menjamin gambar alat/peta terlihat utuh */
}

/* Typography Khusus Detail */
.blog-details-page .article .title {
    color: #1a1a1a !important;
    font-family: 'Play', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin: 20px 0;
}

.blog-details-page .ck-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #555555 !important;
}

.blog-details-page .ck-content h3 {
    color: #f8931f !important;
    margin-top: 35px;
}

/* Sidebar Widgets (Light Version) */
.blog-details-page .widget-item {
    background: #ffffff !important;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.blog-details-page .widget-title {
    color: #1a1a1a !important;
    border-bottom: 3px solid #f8931f !important;
    padding-bottom: 10px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
}

/* Recent Posts di Sidebar */
.blog-details-page .post-item h6 a {
    color: #333333 !important;
    font-weight: 600;
}

.blog-details-page .post-item h6 a:hover {
    color: #f8931f !important;
}

/* Social Sharing Icons (Light background) */
.blog-details-page .social-links a {
    background: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    color: #333333 !important;
}

.blog-details-page .social-links a:hover {
    background: #f8931f !important;
    border-color: #f8931f !important;
    color: #ffffff !important;
}

.blog-details-page .social-links a:hover i {
    color: #ffffff !important;
}

/* Category Badge */
.blog-details-page .badge.bg-secondary {
    background-color: #f8f9fa !important;
    color: #f8931f !important;
    border: 1px solid #f8931f !important;
}

/* ==========================================================================
   GSPI BLOG DETAILS - FULL IMAGE FIX
   ========================================================================== */

/* Pastikan hanya berpengaruh pada halaman detail blog */
.blog-details-page .post-img-full {
    width: 100%;
    /* Menghilangkan overflow hidden agar jika gambar tinggi tidak terpotong */
    overflow: visible; 
    background: #fdfdfd;
    margin: -40px -40px 30px -40px; /* Menempel ke pinggir container article */
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: center;
}

.blog-details-page .post-img-full img {
    width: 100% !important;
    height: auto !important; /* Kunci agar gambar tidak terpotong (No Crop) */
    max-width: 100%;
    display: block;
    /* object-fit: contain memastikan seluruh area gambar masuk ke dalam frame */
    object-fit: contain !important; 
    border-radius: 20px 20px 0 0;
}

/* Penyesuaian untuk gambar dinamis di dalam konten */
.blog-details-page .post-img-dynamic {
    width: 100%;
    margin: 30px 0;
    border-radius: 12px;
    background: #f9f9f9;
}

.blog-details-page .post-img-dynamic img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px;
}
/* Mengubah isi konten menjadi hitam pekat */
.blog-details-page .ck-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #000000 !important; /* Hitam pekat */
}

/* Memastikan paragraf dan list juga hitam */
.blog-details-page .ck-content p, 
.blog-details-page .ck-content li,
.blog-details-page .ck-content span {
    color: #000000 !important;
}

/* Untuk judul di dalam artikel tetap hitam/gelap */
.blog-details-page .ck-content h1, 
.blog-details-page .ck-content h2, 
.blog-details-page .ck-content h3, 
.blog-details-page .ck-content h4 {
    color: #1a1a1a !important; 
    font-weight: 700;
}

/* Meta data (Author & Tanggal) jika ingin dibuat lebih gelap juga */
.blog-details-page .meta-top .fw-semibold,
.blog-details-page .meta-top .date-info {
    color: #222222 !important;
}
/* Tipografi & Kontainer */
    .article-container { line-height: 1.8; color: #333; }
    .fw-extra-bold { font-weight: 800; }
    
    /* CKEditor Content Styling */
    .ck-content {
        font-size: 1.15rem; /* Ukuran font ideal untuk artikel panjang */
        color: #502c2c;
        text-align: justify;
    }

    .ck-content h2, .ck-content h3 {
        color: #1a1a1a;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }

    .ck-content blockquote {
        border-left: 6px solid #f8931f !important;
        padding: 20px 30px !important;
        background: #fff9f0 !important;
        font-size: 1.25rem;
        border-radius: 0 12px 12px 0;
        margin: 3rem 0 !important;
    }

    /* Hover Effects */
    .hover-orange:hover {
        background-color: #f8931f !important;
        color: white !important;
        border-color: #f8931f !important;
    }

    .article-link:hover h6 {
        color: #f8931f !important;
    }

    /* Widget & Utility */
    .x-small { font-size: 0.75rem; }
    .object-fit-cover { object-fit: cover; }
    
    .social-icons .btn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
    }

    .social-icons .btn:hover {
        transform: translateY(-3px);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .ck-content { font-size: 1.05rem; }
        .display-5 { font-size: 1.8rem; }
    }

    /* =============================================================
   GSPI SERVICE - PROFESSIONAL TECH SLIDER (FINAL VERSION)
   Style: Luxury Glassmorphism & Font Awesome 5 Icons
   ============================================================= */

.example-slider-comparison {
    width: 95%;
    max-width: 1200px;
    margin: 40px auto;
    background: #ffffff;
    text-align: center;
}

.example-title {
    color: #144c4d;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 40px;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}

.example-slider-wrapper {
    position: relative;
    width: 100%;
    border-radius: 28px; /* Sudut lebih smooth */
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(20, 76, 77, 0.2);
    background: #000;
    cursor: ew-resize;
}

.example-image {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.example-right-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 50%);
    z-index: 1;
    will-change: clip-path;
}

/* =============================================================
   HANDLE & ICON FA v5 (ARROWS-ALT-H)
   ============================================================= */

.example-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7), transparent);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lingkaran Handle: Premium Glass Effect */
.example-slider-handle::before {
    content: "";
    position: absolute;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Icon Font Awesome 5 */
.example-slider-handle::after {
    font-family: "Font Awesome 5 Free";
    content: "\f337"; /* arrows-alt-h */
    font-weight: 900;
    position: absolute;
    color: #ffffff;
    font-size: 22px;
    z-index: 12;
    transition: all 0.3s ease;
}

/* Hover Interaktif: GSPI Identity */
.example-slider-wrapper:hover .example-slider-handle::before {
    background: rgba(248, 147, 31, 0.95); /* Oranye GSPI */
    border-color: #ffffff;
    width: 62px;
    height: 62px;
    box-shadow: 0 0 30px rgba(248, 147, 31, 0.4);
}

/* =============================================================
   INFO LABELS & FLOATING HINT
   ============================================================= */

.example-label-left,
.example-label-right {
    position: absolute;
    top: 35px;
    background: rgba(15, 76, 77, 0.65);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-radius: 4px;
    border-left: 4px solid #f8931f;
    z-index: 15;
}

.example-label-right {
    border-left: none;
    border-right: 4px solid #f8931f;
    right: 35px;
}
.example-label-left { left: 35px; }

/* Floating Hint: Bottom Capsule */
.slider-hint-left {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 5;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icon FA v5 di Hint */
.slider-hint-left::before {
    font-family: "Font Awesome 5 Free";
    content: "\f245"; /* mouse-pointer */
    font-weight: 900;
    font-size: 12px;
}

.slider-hint-left.hide {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .example-title { font-size: 1.5rem; }
    .example-label-left, .example-label-right { top: 20px; font-size: 9px; padding: 6px 14px; }
    .example-slider-handle::before { width: 44px; height: 44px; }
    .slider-hint-left { font-size: 9px; padding: 8px 20px; bottom: 20px; }
}

/* 1. Wrapper Utama (Menyatukan Grid & Video) */
.unified-showcase {
    padding-top: 80px;
    padding-bottom: 0;
    background: #144c4d; /* SAMA PERSIS DENGAN CSS .work ANDA */
    color: #ffffff;
    overflow: hidden;
}

/* 2. Styling Judul */
.portfolio-title span {
    font-size: 14px;
    color: #f8931f; /* Orange aksen */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}
.portfolio-title h2 {
    font-family: 'Play', sans-serif;
    color: #ffffff; /* Judul Putih */
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
}
.portfolio-title p {
    color: #e0e0e0; /* Abu terang agar terbaca jelas di background teal */
    font-weight: 300;
}

/* 3. Card Item (Disesuaikan dengan background #144c4d) */
.portfolio-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 30px;
    height: 280px;
    /* Border transparan putih tipis agar rapi */
    border: 1px solid rgba(255,255,255,0.15); 
    background: #0d3b3c; /* Sedikit lebih gelap dari background utama buat depth */
}

.portfolio-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(0.9); /* Sedikit redup */
}

/* Overlay Gradient */
.portfolio-overlay {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    /* Gradient Hitam/Teal Gelap ke Transparan */
    background: linear-gradient(to top, rgba(10, 30, 30, 0.95), rgba(20, 76, 77, 0.1)); 
    display: flex; align-items: flex-end; padding: 30px;
    transition: all 0.4s ease;
}

.portfolio-overlay h4 {
    color: #fff; font-family: 'Play', sans-serif; font-size: 22px; font-weight: 700;
    margin: 0; transform: translateY(5px);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.portfolio-overlay p {
    color: #ddd; font-size: 13px; margin-top: 5px; opacity: 0;
    transform: translateY(20px); transition: all 0.4s ease;
}

/* HOVER EFFECTS */
.portfolio-item:hover img { 
    transform: scale(1.1); 
    filter: brightness(1.1); 
}
.portfolio-item:hover {
    border-color: #f8931f; /* Border Orange saat Hover */
}
.portfolio-item:hover h4 { color: #f8931f; transform: translateY(-5px); }
.portfolio-item:hover p { opacity: 1; transform: translateY(0); }


/* 4. Pemisah Judul Video */
.video-gallery-header {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}
.video-gallery-header h3 {
    font-family: 'Play', sans-serif;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.video-gallery-header h3::after {
    content: ''; position: absolute; width: 60px; height: 3px;
    background: #f8931f; bottom: 0; left: 50%; transform: translateX(-50%);
}

/* Penyesuaian agar Masonry layout Anda tidak rusak */
.work__gallery {
    margin-right: -10px; /* Sesuai CSS asli Anda */
    overflow: hidden;
}

  /* Container Utama */
.gspi-wa-modern {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    display: flex;
    align-items: center;
}

.gspi-wa-modern a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Label Teks di Samping Icon */
.wa-chat-label {
    background: #fff;
    color: #333;
    padding: 8px 18px;
    border-radius: 50px 0 0 50px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
    margin-right: -10px; /* Merapatkan ke icon */
    transition: all 0.3s ease;
    border: 1px solid #eee;
    border-right: none;
}

/* Lingkaran Icon WhatsApp */
.whatsapp-icon-bg {
    width: 70px;
    height: 70px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}

.whatsapp-icon-bg img {
    width: 50px;
    height: 50px;
}

/* Efek Animasi Nadi (Pulse) */
.wa-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #25d366;
    border-radius: 50%;
    z-index: -1;
    animation: waPulse 2s infinite;
    opacity: 0;
}

@keyframes waPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Hover Effect */
.gspi-wa-modern:hover .whatsapp-icon-bg {
    transform: scale(1.1);
    background: #128c7e;
}
.gspi-wa-modern:hover .wa-chat-label {
    background: #f8f9fa;
    color: #25d366;
    padding-right: 25px;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .whatsapp-icon-bg img {
      width: 40px;
      height: 40px;
    }
    .wa-chat-label {
        display: none; /* Sembunyikan teks di HP agar tidak menutupi layar */
    }
    .whatsapp-icon-bg {
        width: 60px;
        height: 60px;
    }
    .gspi-wa-modern {
        bottom: 20px;
        right: 10px;
    }
}