/* === Google Fonts ===*/
  @import url('https://fonts.googleapis.com/css2?family=Charm&family=Open+Sans:wght@300&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

  /* === Css Variables ===*/
  :root{
  	--green-color: #B2BF9B;
  	--orange-color : #D6964C;
  	--cyan : #55B8E8;
    --lgbrown : #f8e8cc;
    --dkbrown : #e2c188;
  	--white-color: #fff;
  	--dark-color: #222;
  	--grey-color: #939598;
  	--black-color: #000000;
  	--red: #D52020;
  	--red-hover: #FAEBEB;
  	--body-bg-color: #fff;
  	--section-about-color : #f7faff;
  	--section-bg-color: #f9fafb;
  	--navigation-item-hover-color: #3b5378;

  	--blue: #34bbad;
  	--yellow: #f5bf23;
  	--text-shadow: 0 5px 25px rgba(0, 0, 0, 0,1);
  	--box-shadow: 0 5px 25px rgba(0 0 0 / 20%);

  	--scroll-bar-color: #fff;
  	--scroll-thumb-color: #282f4e;
  	--scroll-thumb-hover-color: #454f6b;
  }

  /* === Scroll Bars ===*/
  ::-webkit-scrollbar{
  	width: 11px;
  	background: var(--scroll-bar-color);

  }

  ::-webkit-scrollbar-thumb{
  	width: 100%;
  	background: var(--scroll-thumb-color);
  	border-radius: 2em;
  }

  ::-webkit-scrollbar-thumb:hover{
  	background: var(--scroll-thumb-hover-color);
  }
  /* === Main Css ===*/
  *{
  	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  	/*font-family: 'Poppins', sans-serif;*/
  	font-family: 'Poppins', sans-serif;
  }

  body{
  	background:	var(--body-bg-color);
  }


  /* ===== Header Navigation Start =====*/
  /* Reset basic */
  * {
    box-sizing: border-box;
  }

  /* Header brand and navigation */
  header {
    position: fixed;
    width: 100%;
    top: 0;
    background: white;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    padding: 0 70px;
    height: 100px;
    gap: 20px;
  }

  header .brand a img {
    /*max-height: 50px;*/
    width: 130px;
  }

  /* Navigation */
  header .navigation {
    display: flex;
    align-items: center; 
    gap: 40px;
    flex-grow: 1;
    justify-content: center;
  }

  /* Links styling */
  .navigation > a {
    text-decoration: none;
    font-size: 1.5rem !important;
    color: #333;
    letter-spacing: 2px;
    /*font-weight: 600;*/
    padding: 10px 8px 0 8px;
    transition: color 0.3s;
    font-family: "Italianno", cursive;
  }

  .navigation > a:hover {
    color: #0aa;
  }

  /* Hamburger button (mobile only) */
  .hamburger {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    display: none; /* default sembunyi desktop */
    color: #333;
  }

  /* Language icons */
  header .language {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  header .language a .logo-en {
    height: 24px;
    cursor: pointer;
    margin-left: 10px;
  }

  .language .active {
    border-bottom: 2px solid var(--dkbrown);
  }

  header .navigation a.active {
    border-bottom: 2px solid var(--dkbrown);
  }

  header .language button {
    color: var(--dark-color) !important;
  }

  /* Show hamburger & stack menu on mobile */
  @media (max-width: 992px) {
    .hamburger {
      display: block;
    }

    .navigation {
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      background: white;
      flex-direction: column;
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .navigation.show {
      max-height: 500px; /* cukup untuk tampil */
    }

    .navigation > a,
    .dropdown .dropbtn {
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
    }

    /* Dropdown content in mobile: make static, inside nav */
    .dropdown-content {
      position: static;
      width: 100%;
      box-shadow: none;
      border-radius: 0;
      opacity: 1 !important;
      pointer-events: auto !important;
      padding: 10px 15px;
      display: none;
    }

    .dropdown-content.active {
      display: block !important;
    }

    .column {
      grid-template-columns: 1fr;
    }
  }

  /* ===== Header Navigation End =====*/

  #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ffffff;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #preloader.fade-up {
      opacity: 0;
      transform: translateY(-50px);
    }

    .loader-content {
      text-align: center;
    }

    .loader-logo {
      width: 220px;
      height: auto;
      margin-bottom: 20px;
    }

    .loader-dots {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .loader-dots .dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out;
    }

    .loader-dots .dot.cyan {
      background-color: #00FFFF;
      animation-delay: 0s;
    }
    .loader-dots .dot.green {
      background-color: #00FF00;
      animation-delay: 0.2s;
    }
    .loader-dots .dot.red {
      background-color: #FF0000;
      animation-delay: 0.4s;
    }

    @keyframes bounce {
      0%, 80%, 100% {
        transform: scale(0);
      } 
      40% {
        transform: scale(1);
      }
    }

  /* ===== Home Slider Navigation Start =====*/
  .home .slideshow-container {
  	/*max-width: 100%;*/
  	height: 724px;
  	margin: auto;
  	position: relative;
  	position: relative;
  	width: 100%;
  }
  .home .slideshow-container .mySlides{
  	display: none;
  }

  .home .slideshow-container .mySlides.active{
  	-webkit-animation-name: fade;
  	-webkit-animation-duration: 1.5s;
  	animation-name: fade;
  	animation-duration: 2.5s;
  }

  .home .slideshow-container .mySlides .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin-bottom: -50px;
      background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  }

  .home .slideshow-container .mySlides .text {
  	background: var(--dark-color);
  }

  .home .slideshow-container .mySlides .text h3{
  	z-index: 100;
  	font-size: 2rem;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	padding: 40px 120px;
   	width: 70%;
  	margin-top: 270px;
  }

  .home .slideshow-container .mySlides .mini-logo {
  	display: flex;
  	justify-content: center;
  }

  .home .slideshow-container .mySlides .text {
  	display: flex;
  	justify-content: center;
  	text-align: center;
  }

  .home .slideshow-container .mySlides .text p{
  	z-index: 100;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	padding: 40px 120px;
   	width: 70%;
  	margin-top: 520px;
  	font-family: 'Poppins', sans-serif;
  	font-weight: 300;
  }

  .home .slideshow-container .mySlides .numbertext{
  	color: var(--white-color);
  	font-size: 12px;
  	padding: 8px 12px;
  	position: absolute;
  	top: 0
  }

  .home .slideshow-container .mySlides .img{
  	vertical-align: middle;
  	width: 100%;
  	border-radius: 1px;
  	height: 724px;
  	background-image: url('../images/slider-1.png'), 
                        linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: cover;
  }

  .home .slideshow-container .prev, .next{
  	cursor: pointer;
  	position: absolute;
  	top: 50%;
  	width: auto;
  	padding: 16px;
  	margin-top: -22px;
  	color: var(--white-color);
  	font-weight: bold;
  	font-size: 18px;
  	transition: 0.6 ease;
  	border-radius: 0 3px 3px 0;
  	user-select: none; 
  }

  .home .slideshow-container .next{
  	right: 0;
  	border-radius: 3px 0 0 3px;
  }

  .home .slideshow-container .prev:hover, .next:hover{
  	background-color: rgba(0, 0, 0, 0.3);
  }

  @-webkit-keyframes fade{
  	/*from {opacity: .4}
  	to {opacity: 1}*/
  	from {clip-path: circle(0% at 0 50%)}
  	to {clip-path: circle(150% at 0 50%)}
  }

  @keyframes fade{
  	/*from {opacity: .4}
  	to {opacity: 1}*/
  	from {clip-path: circle(0% at 0 50%)}
  	to {clip-path: circle(150% at 0 50%)}
  }
  /* ===== Home Slider Navigation End =====*/

  /* ===== About Section Start ===== */
  .overview{
  	/*background-color: var(--section-about-color);*/
  	padding: 30px 20px 80px 150px;
  	display: block;
  }

  .overview .section-title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 4rem;
    font-family: "Italianno", cursive;
    /*font-weight: bold;*/
    width: 100%;
  }

  .overview .section-title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #333;
  }

  .overview .mp-overview {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  }

  .overview .mp-overview .tp-overview {
  	/*width: 50%;*/
  	margin-top: 10px;
  }

  .overview .mp-overview .tp-overview p {
  	width: 70%;
  	font-family: 'Poppins', sans-serif;
  	margin-bottom: 70px;
  	font-weight: 300;
  	line-height: 25px;
    text-align: justify;
  }

  .overview .mp-overview .tp-overview .bt-overview {
      border: none;
      background-color: var(--cyan);
      padding: 10px 0 10px 0;
      width: 20%;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .overview .mp-overview .tp-overview .bt-overview a{
  	text-decoration: none;
      color: var(--white-color);
      font-size: 0.8rem;
      margin-left: 0;
      display: flex;
      align-items: center;
  }

  .overview .mp-overview .tp-overview .bt-overview a:hover i{
  	transition: all 0.3s ease;
  	transform: translateX(5px);
  	background-color: transparent;
  }

  .overview .mp-overview .tp-overview .bt-overview a:hover {
  	color: var(--cyan);
  	background-color: transparent;
  }

  .overview .mp-overview .tp-overview .bt-overview:hover {
  	background-color: transparent;
  	transition: all 0.3s ease;
  }

  .overview .mp-overview .tp-overview .bt-overview:hover a{
  	color: var(--cyan);
  	transition: all 0.3s ease;
  }

  .overview .mp-overview .img-overview {
  	display: flex;
  	text-align: center;
  	align-items: center;
  }

  .overview .mp-overview .img-overview img{
  	width: 80%;
  }

  /* ===== Partnership Section Start ===== */

  .partnership {
  	padding: 0 0 0 130px;
  	background: linear-gradient(to top, rgba(248, 232, 204, 1), transparent);
  	/*background-image: linear-gradient(to top, rgba(184, 238, 255, 1), transparent),url("../images/tangan.png");*/
  	/*background-size: cover;*/
  	background-position: right;
  	background-repeat: no-repeat;
  }

  .partnership .mp-partnership {
  	display: flex;
  	flex-direction: row-reverse;
  	align-items: center;
  }

  .partnership .mp-partnership .mg-partnership{
  	display: flex !important;
  	/*flex-direction: row-reverse;*/
  	position: relative;
  	overflow: hidden;
  }

  .partnership .mp-partnership .mg-partnership .mg-wrapper {
  	position: relative;
  	overflow: hidden;
  	/*width: 80%;*/
  	z-index: -10;
  }

  .partnership .mp-partnership .mg-partnership .mg-wrapper::before {
  	content: '';
  	position: absolute;
    	left: auto;
    	top: 0;
    	/*right: 0;*/
    	width: 100%;
    	height: 100%;
    	background: linear-gradient(to top, rgba(184, 238, 255, 1), transparent),
    				linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent),
    				linear-gradient(to left, rgba(255, 255, 255, 0.3), transparent),
    				linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    	pointer-events: none;
    	z-index: -5;
    	opacity: 0;
  }

  .partnership .mp-partnership .mg-partnership .mg-wrapper img {
  	width: 80%;
  	opacity: 0;
  	display: block;
  	z-index: -10;
  }

  .partnership .mp-partnership .tp-partnership {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 50px 30;
  }

  .partnership .mp-partnership .tp-partnership h1 {
  	font-weight: bold;
  	margin-top: 30px;
  	margin-bottom: 30px;
  	font-family: 'Poppins', sans-serif;
  }

  .partnership .mp-partnership .tp-partnership .bt-partnership {
  	margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .partnership .mp-partnership .tp-partnership .bt-partnership a button {
  	background-color: #A6CE39;
      color: var(--white-color);
      border-color: transparent;
      border-radius: 5px;
      padding: 20px;
      text-transform: uppercase;
      /*margin-top: 30px;*/
  }

  .partnership .mp-partnership .tp-partnership .bt-partnership a {
  	text-decoration: none;
  	color: var(--white-color);
  }

  .partnership .mp-partnership .tp-partnership .bt-partnership a button:hover {
  	transform: scale(1.2);
  	transition: all 0.3s ease;
  	background-color: var(--cyan);
  }
  /* ===== Partnership Section End ===== */

  /* ===== Footer Section Start ===== */

  .footer{
  	padding: 0 80px 0 80px;
  	position: relative;
  	/*background-color: var(--cyan);*/
  	background: linear-gradient(to bottom, rgba(248, 232, 204, 1), transparent);
  }

  .footer .box-container {
      display: grid;
      grid-template-columns: 1fr 1fr 0.8fr 1fr;
      gap: 4rem;
      padding: 50px 10px 20px 10px;
      background-repeat: no-repeat;
      background-position: 200% 0;
      border-top: none;
      border-bottom: 2px solid var(--cyan);
  }

  /* Tambahkan border hanya untuk halaman mainpage */
  body.is-mainpage .footer .box-container {
      border-top: 2px solid var(--grey-color);
      border-bottom: 2px solid var(--grey-color);
  }

  .footer .box-container::before {
  	content: "";
    	position: absolute;
    	inset: 0;
    	background-image: url("../images/KL-Icon.png");
    	/*background-size: cover;*/
    	background-position: right;
    	background-repeat: no-repeat;
    	opacity: 1;
    	z-index: -1; /* biar ada di belakang konten */
  }

  .footer .box-container .box-logo {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  }

  .footer .box-container .box-logo .logo-klx img{
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding-bottom: 50px;
  	/*margin-left: 50px;*/
  	width: 80%;
  }

  .footer .box-container .box-logo .logo-kl img {
  	width: 100%;
  }

  .footer .box-container .box ul {
  	padding-left: 0;
  }

  .footer .box-container .box p {
  	font-size: 1rem;
  	color: var(--grey-color);
  	line-height: 1.5rem;
  }

  .footer .box-container .box h3{
  	font-size: 1.2rem;
  	padding: 1.5rem 0;
  	color: var(--cyan);
  }

  .footer .box-container .box .d-flex{
  	display: flex;
  	margin-bottom: 15px;
  	align-items: center !important;
  }
  .footer .box-container .box .d-flex-center{
  	display: flex;
  	margin-bottom: 15px;
  	align-items: center;
  }

  .footer .box-container .box .footer-icon{
  	font-size: 30px;
  	/*width: 150px;*/
  	padding-right: 20px;
  	color: var(--dark-color);
  }

  .footer .box-container .box .footer-address{
  	font-size: 0.9rem;
  	color: var(--dark-color);
  }

  .footer .box-container .box a{
     color: var(--dark-color);
     font-size: 0.9rem;
     padding-bottom: 1rem;
     display: block;
     text-decoration:	none;
  }

  .footer .box-container .box .box-items a:hover {
  	color: var(--cyan)
  }

  .footer .box-container .box .box-items a:hover i{
  	color: var(--cyan);
  	transition: 0.2s;
  	padding-right: 5px;
  }

  .footer .box-container .box a i {
  	color: var(--green);
  }

  .footer-bottom .container{
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  }

  .footer-bottom .container .links .nav{
  	display: flex;
  	align-items: center;
  	flex-wrap: wrap;
  }

  .footer-bottom .container .links .nav .nav-items{
  	list-style-type: none;
  	padding: 0 10px;
  }

  .footer-bottom .container .links .nav .opacity{
  	color: var(--dark-color);
  	opacity: 0.6;
  }

  .footer-bottom .container .links .nav .nav-items a{
  	text-decoration: none;
  	color: var(--dark-color);
  	display: block;
  }

  .footer-bottom .container .links .nav .nav-items:hover a{
  	color: var(--cyan);
  	/*transform: translateY(40px);*/
  }

  .footer .box-container .box .box-items-media {
  	display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
  }

  .footer .box-container .box .box-items-media a {
  	text-decoration: none;
  	border-radius: 5px;
  	padding: 7px 10px;
  	background-color: rgba(113, 134, 157, 0.1);
  	color: var(--cyan);
  	font-size: 1.2rem;
  	display: block;
  	transition: 0.5s ease;
  }

  .footer .box-container .box .box-items-media a:hover{
  	background-color: var(--grey-color);
  	transform: scale(1.1);
  }

  /*.footer-bottom .container .media-icons .nav{
  	display: flex;
  	align-items: center;
  	flex-wrap: wrap;
  }

  .footer-bottom .container .media-icons .nav .nav-items{
  	list-style-type: none;
  	padding: 0 10px;
  }

  .footer-bottom .container .media-icons .nav .nav-items a{
  	text-decoration: none;
  	border-radius: 5px;
  	padding: 10px 15px;
  	background-color: rgba(113, 134, 157, 0.1);
  	color: var(--cyan);
  	font-size: 1.3rem;
  	display: block;
  	transition: 0.5s ease;
  }

  .footer-bottom .container .media-icons .nav .nav-items a:hover{
  	background-color: var(--grey-color);
  	transform: scale(1.3);
  }

  .footer-bottom .container-copy{
  	text-align: center;
  	color: var(--grey-color);
  	padding-top: 30px;
  }*/

  .spacer{
  	display: block;
      clear: both;
      height: 1rem;
  }

  .footer .footer-bottom .container-copy p{
  	text-align: center;
  }

  /* ===== Footer Section End ===== */

  /* ===== About Pg Section Start ===== */
    .about-us{
      /*background-color: var(--section-about-color);*/
      padding: 30px 20px 0 150px;
      display: block;
    }

    .about-us .section-title {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 4rem;
      font-family: "Italianno", cursive;
      /*font-weight: bold;*/
      width: 100%;
    }

    .about-us .section-title::after {
      content: "";
      flex: 1;
      height: 2px;
      background: #333;
    }

    .about-us .mp-about {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .about-us .mp-about .tp-about {
      /*width: 50%;*/
      margin-top: 10px;
    }

    .about-us .mp-about .tp-about p {
      width: 90%;
      font-family: 'Poppins', sans-serif;
      margin-bottom: 70px;
      font-weight: 300;
      line-height: 25px;
      text-align: justify;
    }

    .about-us .mp-about .tp-about .bt-about {
        border: none;
        background-color: var(--cyan);
        padding: 10px 0 10px 0;
        width: 20%;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about-us .mp-about .tp-about .bt-about a{
      text-decoration: none;
        color: var(--white-color);
        font-size: 0.8rem;
        margin-left: 0;
        display: flex;
        align-items: center;
    }

    .about-us .mp-about .tp-about .bt-about a:hover i{
      transition: all 0.3s ease;
      transform: translateX(5px);
      background-color: transparent;
    }

    .about-us .mp-about .tp-about .bt-about a:hover {
      color: var(--cyan);
      background-color: transparent;
    }

    .about-us .mp-about .tp-about .bt-about:hover {
      background-color: transparent;
      transition: all 0.3s ease;
    }

    .about-us .mp-about .tp-about .bt-about:hover a{
      color: var(--cyan);
      transition: all 0.3s ease;
    }

    .about-us .mp-about .img-about {
      display: flex;
      text-align: center;
      align-items: center;
    }

    .about-us .mp-about .img-about img{
      width: 100%;
    }
  /* ===== About Pg Section End ===== */

  /* ===== History Pg Section Start ===== */
    .history{
      /*background-color: var(--section-about-color);*/
      padding: 30px 20px 80px 150px;
      display: block;
    }

    .history .section-title {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 4rem;
      font-family: "Italianno", cursive;
      /*font-weight: bold;*/
      width: 100%;
    }

    .history .section-title::after {
      content: "";
      flex: 1;
      height: 2px;
      background: #333;
    }

    .history .mp-history {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .history .mp-history .tp-history {
      /*width: 50%;*/
      margin-top: 10px;
    }

    .history .mp-history .tp-history p {
      width: 90%;
      font-family: 'Poppins', sans-serif;
      /*margin-left: 40px;*/
      font-weight: 300;
      line-height: 25px;
      text-align: justify;
    }

    .history .mp-history .tp-history .bt-history {
        border: none;
        background-color: var(--cyan);
        padding: 10px 0 10px 0;
        width: 20%;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .history .mp-history .tp-history .bt-history a{
      text-decoration: none;
        color: var(--white-color);
        font-size: 0.8rem;
        margin-left: 0;
        display: flex;
        align-items: center;
    }

    .history .mp-history .tp-history .bt-history a:hover i{
      transition: all 0.3s ease;
      transform: translateX(5px);
      background-color: transparent;
    }

    .history .mp-history .tp-history .bt-history a:hover {
      color: var(--cyan);
      background-color: transparent;
    }

    .history .mp-history .tp-history .bt-history:hover {
      background-color: transparent;
      transition: all 0.3s ease;
    }

    .history .mp-history .tp-history .bt-history:hover a{
      color: var(--cyan);
      transition: all 0.3s ease;
    }

    .history .mp-history .img-history {
      display: flex;
      text-align: center;
      align-items: center;
    }

    .history .mp-history .img-history img{
      width: 90%;
    }
    .history p {
      width: 95%;
      font-family: 'Poppins', sans-serif;
      margin-top: 10px;
      font-weight: 300;
      line-height: 25px;
      text-align: justify;
    }
  /* ===== History Pg Section End ===== */

  /* ===== Product Main Pg Section Start ===== */
    .product .slideshow-container {
      height: 724px;
      margin: auto;
      position: relative;
      width: 100%;
    }

    .product .swiper-slide {
      height: 724px !important; /* wajib supaya slide setinggi container */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .product .swiper-slide .img img {
      vertical-align: middle;
      width: 100%;
      height: 724px;
      border-radius: 1px;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: cover;
      object-fit: cover;
    }

  /* Product Categories Section */
    .prod-categories {
      text-align: center;
      display: flex;
      margin: 60px auto;
      padding: 0 100px;
      align-items: center;
    }

    /*.section-title {
      font-size: 24px;
      font-weight: bold;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }*/

    .prod-categories .section-mp .section-title {
      font-weight: bold;
      display: inline-block;
      position: relative;
      font-family: "Italianno", cursive;
      font-size: 3rem;
    }

    .prod-categories .section-mp .section-title::after {
      content: "";
      position: absolute;
      left: -10%;
      bottom: 0;
      transform: translateY(-1800%);
      width: 60px;
      height: 2px;
      background: #c49b63;
    }

    .prod-categories .section-mp .section-subtitle p{
      font-style: italic;
      color: #666;
      margin-bottom: 40px;
      font-size: 0.8rem;
    }

    .prod-categories .category-list {
      display: flex;
      justify-content: center;
      gap: 50px;
      flex-wrap: wrap;
      margin-left: 50px;
    }

    .prod-categories .category-list .category-item {
      text-align: center;
    }

    .prod-categories .category-list .category-item .icon-circle {
      width: 125px;
      height: 125px;
      border: 1px dashed #bbb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      font-size: 48px;
      color: #333;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
    }

    .prod-categories .category-list .category-item .icon-circle:hover {
      border-color: #888;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transform: scale(1.05);
    }

    .prod-categories .category-list .category-item .icon-circle img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      font-size: 48px;
      color: #333;
      opacity: 0.5;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 0 0 transparent;
    }

    .prod-categories .category-list .category-item .icon-circle img:hover {
      opacity: 1;
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

  /* ===== Product Main Pg Section End ===== */

  /* ===== All Product Pg Section Start ===== */
    .prod-pg {
      padding: 30px 100px;
    }

    .prod-pg .mp-tittle h1 {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      font-family: "Italianno", cursive;
      margin-bottom: 20px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 10px;
      justify-items: center;
      margin-bottom: 30px;
    }

    .product-card {
      background: #f8f8f8;
      border-radius: 10px;
      overflow: hidden;
      width: 270px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: 0.3s;
      cursor: pointer;
    }

    .product-card:hover {
      border: 2px solid #c49b63;
      box-shadow: 0 6px 12px rgba(196, 155, 99, 0.4);
    }

    .product-card img {
      width: 100%;
      height: 220px;
      display: block;
      transition: transform 0.4s ease
    }

    .product-card:hover img {
      transform: scale(1.05); /* zoom-in lebih halus */
    }

    .product-info {
      padding: 15px;
      background: #ffffff; /* putih bersih */
      border-top: 1px solid #eee; 
      border-radius: 0 0 10px 10px; /* rounded bawah */
      text-align: center;
      transition: all 0.3s ease-in-out;
    }

    .product-card:hover .product-info {
      background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .product-name {
      font-weight: 600;
      font-size: 18px;
      color: #333;
      margin-bottom: 6px;
      transition: color 0.3s;
    }

    .product-card:hover .product-name {
      color: #c49b63; /* warna aksen pas hover */
    }

    .product-price {
      font-size: 15px;
      font-weight: 500;
      color: #666;
      letter-spacing: 0.5px;
    }
  /* ===== All Product Pg Section End ===== */

  /* ===== Product Category Show Section Start ==== */
    .product-category-page {
      padding: 100px 80px 80px 100px;
    }

    .product-category-page .container.my-5 h2 {
      font-family: "Italianno", cursive;
      font-size: 3rem;
      display: flex;              
      align-items: center;       
      gap: 10px;                  
    }

    .product-category-page .container.my-5 h2::after {
      content: "";
      flex: 1;
      height: 2px;
      background: #333;
    }

    .product-category-page .container.my-5 .row .product-grid .row .product-card {
      border: 1px solid #e0e0e0; /* default border halus */
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* smooth & elegant */
    }

    .product-category-page .container.my-5 .row .product-grid .row .product-card:hover {
      border: 2px solid #c49b63; /* gold border saat hover */
      box-shadow: 0 8px 20px rgba(196, 155, 99, 0.3); /* bayangan lembut */
      transform: translateY(-5px); /* sedikit naik */
    }

    .product-category-page .container.my-5 .row .product-grid .row .product-card img {
      transition: transform 0.4s ease; /* efek zoom halus pada image */
    }

    .product-category-page .container.my-5 .row .product-grid .row .product-card img:hover {
      transform: scale(1.03); /* zoom sedikit saat hover */
    }
  /* ===== Product Category Show Section End ==== */

  /* ===== Product Detail Single Show Section Start ==== */
    .product-detail-page {
        padding: 150px 0 !important;
    }

    .product-detail-page .container .row .col-md-6 .product-image-gallery .main-image {
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
        max-height: 500px;
        width: 450px;
        margin-left: 
    }

    .product-detail-page .container .row .col-md-6 .product-image-gallery .main-image img{\
        border-radius: 12px;
        max-height: 500px;
        object-fit: contain;
        width: 450px;
    }

    .product-detail-page .container .row .col-md-6 .product-image-gallery {
      padding-left: 40px !important;
    }

    .product-detail-page h2 {
        font-weight: 700;
        margin-bottom: 15px;
        font-size: 28px;
    }

    .product-detail-page .product-title .product-code {
      font-size: 0.7rem;
      margin-right: 0.5rem;
      vertical-align: middle;
      background-color: var(--dkbrown) !important;
    }

    .product-detail-page h5 {
        font-weight: 600;
        color: var(--dkbrown) !important;
        font-size: 22px;
        margin-bottom: 25px;
    }

    .product-detail-page .detail-box {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }

    .product-detail-page .detail-box h6 {
      font-weight: 600;
      margin-bottom: 10px;
      color: #555;
    }

    .product-detail-page .btn-wa {
      display: inline-block;
      background-color: var(--dkbrown) !important;
      border-color: transparent;
      color: #fff;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.2s ease;
      margin-top: 20px;
    }

    .product-detail-page .btn-wa:hover {
      background-color: var(--dkbrown);
      transform: translateY(-2px);
      text-decoration: none;
      color: #fff;
    }

    /* Thumbnail styling */

    .thumb-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    max-width: 450px; /* sesuaikan */
    }

    .thumb-row {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none; /* hilangkan scrollbar Firefox */
      -ms-overflow-style: none; /* hilangkan scrollbar IE */
      gap: 6px;
      scroll-behavior: smooth;
      flex: 1;
    }
    .thumb-row::-webkit-scrollbar {
      display: none; /* hilangkan scrollbar Chrome/Safari */
    }

    .thumb-image {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border: 2px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.3s, border-color 0.3s;
    }
    .thumb-image:hover {
      transform: scale(1.05);
      border-color: var(--dkbrown);
    }
    .thumb-image.active {
      border-color: var(--dkbrown);
    }

    .thumb-nav {
      background: #fff;
      border: 1px solid var(--dkbrown);
      border-radius: 50%;
      width: 28px;
      height: 28px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.2s;
      color: var(--dkbrown)
    }
    .thumb-nav:hover {
      background: #f5f5f5;
    }


    /* Tab custom */
    .nav-tabs .nav-link {
      border: none;
      color: #555;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .nav-tabs .nav-link.active {
      color: #0d6efd;
      border-bottom: 2px solid #0d6efd;
    }


    /* Product details styling */
    .product-detail-page h2 {
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .product-detail-page h5 {
      color: #dc3545;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .detail-box {
      background: var(--dkbrown);
      padding: 1rem;
      border-radius: 8px;
    }

        /* Variants styling */
    .size-btn {
      border-radius: 25px;
      min-width: 50px;
          /*background-color: var(--dkbrown);*/
      color: var(--dkbrown);
      border-color: var(--dkbrown);
    }

    .size-btn:hover {
      background-color: var(--dkbrown);
      color: #fff;
      border-color: var(--dkbrown)
    }

    .size-btn.active {
      background-color: var(--dkbrown) !important;
      color: #fff;
      border-color: var(--dkbrown) !important;
    }

    .color-btn {
      border-radius: 25px;
      min-width: 50px;
      color: var(--dkbrown);
      border-color: var(--dkbrown);
    }

    .color-btn:hover {
      background-color: var(--dkbrown) !important;
      color: #fff;
      border-color: var(--dkbrown)
    }

    .color-btn.active {
      background-color: var(--dkbrown) !important;
      color: #fff;
      border-color: var(--dkbrown) !important;
    }

    .product-detail-page .container .nav-tabs .nav-item .nav-link.active {
      color: var(--dkbrown);
      border-bottom: 2px solid var(--dkbrown);
    }

    .product-rating {
      /*display: none !important;*/
      font-size: 0.8rem !important;
    }

  /* ===== Product Detail Single Show Section End ==== */

  /* ========== ADMIN PANEL ====== */
    /*SIDEBAR MENU CUSTOM */
    .brand-link .brand-image {
      float: left;
      line-height: .8;
      margin-left: .8rem;
      margin-right: .5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
      border-radius: 50px;
    }
    /* Main menu (Dashboard, Products, Categories) */
    .nav-sidebar > .nav-item > .nav-link {
      font-weight: 600;
      font-size: 15px;
      padding: 12px 15px;
      color: #f1f1f1;
    }

    /* Active main menu */
    .nav-sidebar > .nav-item > .nav-link.active {
      background-color: #939598 !important;
      color: #fff;
    }

    /* Sub menu container */
    .nav-treeview {
      margin-left: 10px;
      border-left: 2px solid rgba(255, 255, 255, 0.1);
      padding-left: 8px;
    }

    /* Sub menu link */
    .nav-treeview .nav-link {
      font-size: 14px;
      font-weight: 400;
      color: #c2c7d0;
      padding: 8px 12px;
    }

    /* Hover sub menu */
    .nav-treeview .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.05);
      color: #fff;
    }

    /* Active sub menu */
    .nav-treeview .nav-link.active {
      background-color: rgba(255, 255, 255, 0.05) !important;
      color: #fff;
      border-radius: 6px;
    }

    /* Ikon sub menu lebih kecil */
    .nav-treeview .nav-icon {
      font-size: 14px;
      margin-right: 6px;
    }



  /* === About Us Section Start === */
  .about-us{
  	padding: 180px 80px 80px 100px;
  }

  /*.about-us .mp-about-us {

  }

  .about-us .mp-about-us .tp-about-us {

  }*/

  .about-us .mp-about-us .tp-about-us h1{
  	color: var(--cyan);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	text-transform: uppercase;
  	font-weight: bold;
  }

  .about-us .mp-about-us .mp-cards {
  	display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 100px;
  }

  .about-us .mp-about-us .mp-cards .tp-cards {
  	width: 90%;
  }

  .about-us .mp-about-us .mp-cards .tp-cards p{
  	width: 90%;
      font-family: 'Poppins', sans-serif;
  	text-align: justify;
  }

  .about-us .mp-about-us .mp-cards .img-cards {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }

  .about-us .mp-about-us .mp-cards .img-cards img{
  	width: 80%;
  }
  /* === About Us Section End === */

  /* === Vismis Section Start === */
  .vismis {
  	padding: 20px 80px 80px 100px;

  }

  .vismis .mp-cards {
  	display: grid;
      grid-template-columns: 1fr 1fr;
      border-top: 2px solid var(--grey-color);
      border-bottom: 2px solid var(--grey-color);
  }

  .vismis .mp-cards .img-cards {

  }

  .vismis .mp-cards .img-cards img{
  	width: 90%;
  	margin-top: 60px;
  	margin-bottom: 30px;
  }

  .vismis .mp-cards .tp-cards {
  	/*display: grid;
  	grid-template-rows: 0.5fr 1fr 1fr;*/
  	display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .vismis .mp-cards .tp-cards .tp-vismis h1{
  	color: var(--cyan);
  	display: flex;
  	justify-content: center;
  	text-transform: uppercase;
  	font-weight: bold;
  	margin-bottom: 80px;
  	letter-spacing: 10px;
  	font-family: 'Poppins', sans-serif;
  	/*margin-top: 80px;*/
  }

  .vismis .mp-cards .tp-cards .tp-vismis-cards {
  	display: grid;
      grid-template-columns: 0.4fr 1fr;
      margin-bottom: 30px;
  }

  .vismis .mp-cards .tp-cards .tp-vismis-cards .tp-desc .desc {
  	display: flex;
  }

  .vismis .mp-cards .tp-cards .tp-vismis-cards .tp-desc .desc p {
  	font-size: 0.9rem;
  	font-family: 'Poppins', sans-serif;
  }
  /* === Vismis Section End === */

  /* === Company Values Section Start === */
  .comp-val {
  	padding: 20px 80px 80px 100px;
  }

  .comp-val .mp-comp-val {

  }

  .comp-val .mp-comp-val .tp-comp-val {

  }

  .comp-val .mp-comp-val .tp-comp-val h1 {
  	color: var(--cyan);
  	display: flex;
  	justify-content: center;
  	text-transform: uppercase;
  	font-weight: bold;
  	margin-bottom: 80px;
  	letter-spacing: 10px;
  	font-family: 'Poppins', sans-serif;
  }

  .comp-val .mp-comp-val .mp-cards {
  	column-gap: 50px;
  	row-gap: 50px;
      justify-content: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item:hover{
  	background-color: var(--grey-color);
  	opacity: 0.8;
  	transform: scale(1.1);
  	transition: 0.2s;
  }


  .comp-val .mp-comp-val .mp-cards .cards-item {
  	box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
      border-radius: 20px;
      width: 25%;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-img {
  	display: flex;
      align-items: center;
      justify-content: center;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-img img {
  	margin-top: 30px;
  	width: 40%;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-tp {
  	display: flex;
      justify-content: center;
      margin: 10px 0 10px 0;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-tp h2{
  	font-weight: bolder;
      text-transform: uppercase;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      letter-spacing: 2px;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-desc {
  	display: flex;
      justify-content: center;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item .cards-desc p {
      font-family: 'Poppins', sans-serif;
      font-size: 0.8rem;
      width: 70%;
      display: flex;
      justify-content: center;
      text-align: center;
      font-weight: 300;
      margin-bottom: 5px;
  }

  .comp-val .mp-comp-val .mp-cards .cards-item:hover .cards-desc p{
  	color: var(--black-color);
  }

  /* === Company Values Section End === */

  /* ===== about-footer Section Start ===== */

  .about-footer {
  	padding: 0 0 0 130px;
  	background: linear-gradient(to top, rgba(184, 238, 255, 1), transparent);
  	background-image: linear-gradient(to top, rgba(184, 238, 255, 1), transparent),url("../images/about-footer.png");
  	/*background-size: cover;*/
  	background-position: right;
  	background-repeat: no-repeat;
  }

  .about-footer .mp-partnership {
  	display: flex;
  	flex-direction: row-reverse;
  	align-items: center;
  }

  .about-footer .mp-partnership .mg-partnership{
  	display: flex !important;
  	/*flex-direction: row-reverse;*/
  	position: relative;
  	overflow: hidden;
  }

  .about-footer .mp-partnership .mg-partnership .mg-wrapper {
  	position: relative;
  	overflow: hidden;
  	/*width: 80%;*/
  	z-index: -10;
  }

  .about-footer .mp-partnership .mg-partnership .mg-wrapper::before {
  	content: '';
  	position: absolute;
    	left: auto;
    	top: 0;
    	/*right: 0;*/
    	width: 100%;
    	height: 100%;
    	background: linear-gradient(to top, rgba(184, 238, 255, 1), transparent),
    				linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent),
    				linear-gradient(to left, rgba(255, 255, 255, 0.3), transparent),
    				linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    	pointer-events: none;
    	z-index: -5;
    	opacity: 0;
  }

  .about-footer .mp-partnership .mg-partnership .mg-wrapper img {
  	width: 100%;
  	opacity: 0;
  	display: block;
  	z-index: -10;
  }

  .about-footer .mp-partnership .tp-partnership {

  }

  .about-footer .mp-partnership .tp-partnership h1 {
  	font-weight: bold;
  	margin-top: 30px;
  	margin-bottom: 30px;
  }

  .about-footer .mp-partnership .tp-partnership p {
  	font-weight: bold;
  	margin-top: 30px;
  	font-size: 1.2rem;
  }

  .about-footer .mp-partnership .tp-partnership .bt-partnership {
  	margin-top: 40px;
  }

  .about-footer .mp-partnership .tp-partnership .bt-partnership a button {
  	background-color: #A6CE39;
      color: var(--white-color);
      border-color: transparent;
      border-radius: 5px;
      padding: 5px 20px 5px 20px;
      text-transform: uppercase;
      margin-top: 30px;
  }

  .about-footer .mp-partnership .tp-partnership .bt-partnership a {
  	text-decoration: none;
  	color: var(--white-color);
  }

  .about-footer .mp-partnership .tp-partnership .bt-partnership a button:hover {
  	transform: scale(1.2);
  	transition: all 0.3s ease;
  	background-color: var(--cyan);
  }
  /* ===== Partnership Section End ===== */

  /* ===== GOB KBIC Section Start ===== */
  .bg-comp .mp-bg .img-kbic{
  	vertical-align: middle;
  	width: 100%;
  	border-radius: 1px;
  	height: 524px;
  	/*background-image: url('../images/bg-kbic.png'), 
                        linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));*/
      background-image: 
  		  linear-gradient(to top, rgba(255, 255, 255, 0), transparent),
  		  linear-gradient(to right, rgba(255, 255, 255, 1), transparent),
  		  linear-gradient(to left, rgba(255, 255, 255, 0), transparent),
  		  linear-gradient(to bottom, rgba(255, 255, 255, 0), transparent),
  		  linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1)),
  		  url('../images/bg-kbic.png');
      /*background-blend-mode: overlay;*/
      background-repeat: no-repeat;
  }

  .bg-comp .mp-bg .mini-logo {
  	display: flex;
  	/*justify-content: center;*/
  }

  .bg-comp .mp-bg .bg-comp-1 img{
  	z-index: 1;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	/*padding: 40px 120px;*/
  	margin-top: 270px;
  	margin-left: 50px;
  	width: 20%;
  }

  .bg-comp .mp-bg .bg-comp-2 img{
  	z-index: 1;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	/*padding: 40px 120px;*/
  	margin-top: 210px;
  	margin-left: 50px;
  	width: 15%;
  }

  .bg-comp .mp-bg .bg-comp-3 img{
  	z-index: 1;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	/*padding: 40px 120px;*/
  	margin-top: 270px;
  	margin-left: 50px;
  	width: 20%;
  }

  .bg-comp .mp-bg .bg-comp-4 img{
  	z-index: 1;
   	position: absolute;
   	top: 0;
   	color: var(--dark-color);
   	/*padding: 40px 120px;*/
  	margin-top: 270px;
  	margin-left: 50px;
  	width: 25%;
  }
  /* ===== GOB KBIC Details ===== */
  .about-gob-comp {
  	padding: 50px 80px 50px 100px;
  }

  .about-gob-comp .mp-about-gob {

  }

  .about-gob-comp .mp-about-gob .tp-about-gob {
  	margin-bottom: 70px;
  }

  .about-gob-comp .mp-about-gob .tp-about-gob h1 {
  	color: var(--cyan);
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-weight: bold;
  }

  .about-gob-comp .mp-about-gob .desc-about-gob {

  }

  .about-gob-comp .mp-about-gob .desc-about-gob p {
  	font-size: 1.2rem;
      font-family: 'Poppins', sans-serif;
      text-align: center;
      font-weight: 300;
      line-height: 25px;
  }

  .serv-gob {
  	padding: 50px 80px 50px 100px;
  }

  .serv-gob .mp-serv-gob {
  	border-top: 2px solid var(--grey-color);
  }

  .serv-gob .mp-serv-gob .tp-serv-gob {
  	margin-bottom: 50px;
  }

  .serv-gob .mp-serv-gob .tp-serv-gob h1 {
  	color: var(--cyan);
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-weight: bold;
      margin-top: 80px;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards {
  	display: grid;
  	gap: 30px;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items {
  	box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.2);
      border-radius: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tpbg {
  	/*display: flex;
  	align-items: center;*/

  }
  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp {
  	width: 50%;
  	position: absolute;
      align-items: center;
      margin: 85px 0 0 80px;
  }
  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp h2{
  	position: absolute;
  	width: 70%;
  	z-index: 100;
  	font-size: 1.5rem;
  	font-weight: bolder;
  	text-transform: uppercase;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-bg {
  	height: 225px;
    	background-size: cover;
    	background-repeat: no-repeat;
    	/*background-blend-mode: overlay;*/
    	border-radius: 20px 0 0 20px;

  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-1{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic1.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-2{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic2.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-3{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic3.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-4{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic4.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-5{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic5.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .bg-6{
  	background-image: 
  	linear-gradient(to right, rgba(255, 255, 255, 0) 80%, white 100%),
  	url('../images/serv-kbic6.png');
  	background-size: cover;
  	background-position: center left;
  	background-repeat: no-repeat;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-descbtn {
  	display: flex;
  	align-items: center;
  }

  .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-descbtn p {
  	margin: 0 70px 0 40px;
  	font-weight: 300;
  	font-size: 1rem;
  }

  .gob-prefooter {
  	background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent),
  		  linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent),
  		  linear-gradient(to left, rgba(255, 255, 255, 0.5), transparent),
  		  linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent),
  		  linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)),
  		  url('../images/bg-product2.png');
  }

  .gob-prefooter .mp-gob-prefooter {
  	padding: 50px 80px 50px 100px;
  	display: flex;
      flex-direction: column;
      align-items: center;
  }

  .gob-prefooter .mp-gob-prefooter .tp-gob-prefooter {
  	margin-top: 30px;
  	margin-bottom: 30px;
  }

  .gob-prefooter .mp-gob-prefooter .tp-gob-prefooter h1 {
  	font-weight: bold;
  	color: var(--cyan);
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-weight: bold;
  }

  .gob-prefooter .mp-gob-prefooter .items-gob-prefooter {
  	display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 30px;
  }

  .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .img-items {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }

  .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .img-items img{
  	width: 70%;
  }

  .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .tp-items {
  	display: flex;
  }

  .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .tp-items p {

  }
  /* ===== GOB KBIC Section End ===== */

  /* ===== Partnership Page Section Start ===== */
  .partnership-pg {
  	background-image: url("../images/bg-rates.png");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	min-height: 100vh;
  	padding: 60px 20px;
  	font-family: 'Poppins', sans-serif;
  }

  .partnership-pg .mp-partnership {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	padding-top: 100px;
  }

  .partnership-pg .mp-partnership .fb-partnership{
  	background: #ffffff;
  	border-radius: 12px;
  	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  	padding: 40px;
  	width: 100%;
  	max-width: 800px;
  	transition: box-shadow 0.3s ease;
  }

  .partnership-pg .mp-partnership .fb-partnership:hover {
  	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .partnership-pg .mp-partnership .tp-partnership h1 {
  	font-size: 32px;
  	font-weight: 600;
  	margin-bottom: 30px;
  	color: #333;
  	text-align: center;
  }

  .partnership-pg .mp-partnership .fb-partnership form {
  	display: grid;
  	grid-template-rows: 1fr 1fr 1fr 1fr;
  	grid-row-gap: 10px;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .tp-fb label {
  	font-weight: 600;
  	font-size: 14px;
  	display: inline-block;
  	margin-bottom: 8px;
  	color: #444;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .tp-fb label span {
  	color: var(--red);
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name {
  	display: grid;
  	grid-template-columns: 1fr;
  	gap: 20px;
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name1 {
      display: grid
  ;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-name {
  	width: 100%;
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb2 .fb-name {
  	width: 100%;
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-list {
  	width: 100%;
  }

  .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 textarea {
  	width: 100%;
  	height: 120px;
  }

  input[type="text"],
  input[type="email"],
  textarea {
  	width: 100%;
  	padding: 12px 15px;
  	border: 1px solid #ccc;
  	border-radius: 6px;
  	font-size: 14px;
  	transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  textarea:focus {
  	border-color: var(--cyan);
  	box-shadow: 0 0 6px rgba(0, 190, 255, 0.3);
  	outline: none;
  }

  textarea {
  	height: 120px;
  	resize: vertical;
  }

  /* CHECKBOX STYLING */
  input[type="checkbox"] {
  	margin-right: 8px;
  }

  .fb-items-name label {
  	font-size: 14px;
  	color: #555;
  }

  /* SUBMIT BUTTON */
  .input-box {
  	padding: 12px 30px;
  	border-radius: 6px;
  	background: var(--cyan);
  	color: white;
  	font-weight: bold;
  	border: none;
  	cursor: pointer;
  	transition: background 0.3s ease;
  }

  .input-box:hover {
  	background: #00aabb;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit {
  	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }


  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit .loading-spinner {
  	width: 20px;
  	height: 20px;
  	border: 3px solid rgba(0, 0, 0, 0.1);
  	border-top-color: var(--cyan);
  	border-radius: 50%;
  	animation: spin 1s linear infinite;
  	margin-left: 10px;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content {
    text-align: center;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-logo {
    width: 80px;
    margin-bottom: 10px;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
  }

  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-dots .dot.cyan { background-color: #00bcd4; animation-delay: -0.32s; }
  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-dots .dot.green { background-color: #4caf50; animation-delay: -0.16s; }
  .partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit #spinner .loader-content .loader-dots .dot.red   { background-color: #f44336; }

  @keyframes bounce {
    0%, 80%, 100% {
      transform: scale(0);
    } 
    40% {
      transform: scale(1);
    }
  }


  /*.partnership-pg .mp-partnership .fb-partnership form .fb-items-list .formbox-items-submit .input-box {
  	padding: 10px 30px;
      border-radius: 5px;
      background: var(--cyan);
      color: var(--white-color);
      border-color: transparent;
      margin-bottom: 20px;
      margin-top: 30px;
  }*/

  /* ===== Partnership Page Section End ===== */

  /* ===== Rates Page Section Start ===== */
  /* Container background */
  .rates2 {
    background-image: url("../images/bg-rates.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px 140px;
    font-family: 'Poppins', sans-serif;
    color: #333;
  }

  .spinner-api {
    width: 50px;
    height: 50px;
    border: 6px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .rates2 .mp-rates {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rates2 .tp-rates {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 100px;
  }

  .rates2 .tp-rates h1 {
    color: #0abde3;
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  .rates2 .tp-rates p {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
  }

  /* Origin & Destination Box */
  .rates2 .ori-rates {
    background: #fff;
    border-radius: 14px;
    padding: 32px 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
    width: 100%;
    transition: box-shadow 0.3s ease;
  }

  .rates2 .ori-rates:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }

  .rates2 .tp-ori {
    margin-bottom: 24px;
  }

  .rates2 .tp-ori h2 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #222;
  }

  /* Input Grid */
  .rates2 .ib-ori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
  }

  .ori-items {
    display: flex;
    flex-direction: column;
  }

  .ori-tp h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
  }

  .ori-tp h2 span {
    color: #e74c3c;
  }

  .ori-bx select {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1.5px solid #ced4da;
    background-color: #f9fafb;
    transition: 0.3s ease;
    appearance: none;
    cursor: pointer;
    color: #333;
    font-weight: 500;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 5%);
  }

  .ori-bx select:focus {
    outline: none;
    border-color: #0abde3;
    box-shadow: 0 0 5px rgba(10, 189, 227, 0.5);
    background-color: #fff;
  }

  /* ------------------- PACKAGE BOX ------------------ */
  .pkg-box {
    font-family: 'Poppins', sans-serif;
    margin: 30px auto;
    padding: 30px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: #333;
  }

  .pkg-box:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }

  .pkg-box .tp-pkg h1,
  .multi-tp h1,
  .tp-sum h1 {
    font-weight: 700;
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
    letter-spacing: 1px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
  }

  .tp-pkg p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
  }

  #package-container {
    margin-bottom: 30px;
  }

  .multi-pkg {
    background: #f8f9fa;
    padding: 25px 20px;
    border-radius: 10px;
    border: 1px solid #e1e4e8;
    box-shadow: inset 0 0 10px #f0f3f5;
    position: relative;
    margin-bottom: 30px;
  }

  /* Input Area */
  .pkg-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    margin-bottom: 30px;
  }

  .list-tp h2 span {
    color: #e74c3c;
    margin-left: 4px;
  }

  .flex-bx, .flex-bx-weight {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .num-bx input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1.8px solid #bdc3c7;
    border-radius: 8px;
    transition: border-color 0.3s ease;
  }

  .num-bx input[type="text"]:focus {
    border-color: #2980b9;
    box-shadow: 0 0 8px rgba(41, 128, 185, 0.3);
    outline: none;
  }

  /* Disabled Input */
  .flex-bx.disabled input {
    background-color: #e9ecef;
    cursor: not-allowed;
    color: #6c757d;
  }

  /* Unit Label */
  .desc-bx span {
    font-size: 0.95rem;
    color: #7f8c8d;
    min-width: 30px;
    text-align: center;
  }

  /* Buttons */
  /*.fb-items-list {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
  }*/

  .btn-save {
    background-color: #3498db;
    color: white;
    padding: 12px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease;
  }

  .btn-save:hover {
    background-color: #2980b9;
  }

  .spinner {
    width: 30px;
    height: 30px;
    border: 4px solid #ddd;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 10px auto;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }


  .rates2 .mp-rates .pkg-box .btn-pckg {
    display: flex;
    justify-content: center;
  }

  /* Add Package Button */
  #add-package-btn {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #2ecc71;
    color: white;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  #add-package-btn:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
  }

  #add-package-btn:not(:disabled):hover {
    background-color: #27ae60;
  }

  .btn-delete {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #e74c3c;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      display: none; /* default tersembunyi */
  }

  .btn-delete:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }


  /* Package Summary */
  .rates2 .mp-rates .pkg-box .package-sum {
  	background: #f8f9fa;
      padding: 25px 20px;
      border-radius: 10px;
      border: 1px solid #e1e4e8;
      box-shadow: inset 0 0 10px #f0f3f5;
  }

  .rates2 .mp-rates .pkg-box .package-sum .sum-items {
  	display: flex;
      justify-content: space-between;
  }
  .rates2 .mp-rates .pkg-box #package-container .multi-pkg .pkg-items .list-items .list-tp h2 {
  	font-size: 1rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: #34495e;
  }

  .rates2 .mp-rates .pkg-box #package-container .multi-pkg .pkg-items-grid .list-items .notif-bx p {
  	margin-top: 6px;
      font-size: 0.85rem;
      color: #e74c3c;
      font-weight: 600;
      font-style: italic;
      margin-bottom: -20px;
  }

  .rates2 .mp-rates .pkg-box #package-container .multi-pkg .pkg-items .list-items .notif-bx p {
  	margin-top: 6px;
      font-size: 0.85rem;
      color: #e74c3c;
      font-weight: 600;
      font-style: italic;
      margin-bottom: -20px;
  }

  .rates2 .mp-rates .pkg-box .package-sum .sum-items h2, p {
      font-size: 1.1rem;
      /* margin-bottom: 8px; */
      color: #34495e;
  }

  .pkg-items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Empat kolom sejajar */
    gap: 20px; /* Jarak antar elemen */
    margin-bottom: 10px;
  }

  .pkg-items-grid .list-items {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    margin-bottom: 20px;
  }

  .pkg-items-grid .list-tp h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #34495e;
  }

  .pkg-items-grid .flex-bx,
  .pkg-items-grid .disabled {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pkg-items-grid .num-bx input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1.5px solid #ced4da;
    background-color: #fafafa;
    font-weight: 500;
    color: #333;
  }

  .pkg-items-grid .num-bx input[type="text"]:focus {
    border-color: #0abde3;
    box-shadow: 0 0 5px rgba(10, 189, 227, 0.5);
    background-color: #fff;
    outline: none;
  }

  .pkg-items-grid .disabled input {
    background-color: #e9ecef;
    color: #999;
    cursor: not-allowed;
  }

  .pkg-items-grid .desc-bx span {
    font-size: 0.9rem;
    color: #7f8c8d;
    min-width: 30px;
  }

  /* ===== Rates Page Section End ===== */

  /* ===== Contact Page Section Start ===== */
  .contact {
  	background-image: url("../images/bg-rates.png");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding-top: 150px;
  }

  .contact .container-main {
  	display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  .contact .container-main a {
    text-decoration: none;
    color: var(--black-color);
  }

  .contact .container-main .tp-contact {
  	display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  .contact .container-main .tp-contact h1 {
  	color: var(--cyan);
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 10px;
  }

  .contact .container-main .tp-contact p {
  	color: var(--grey-color);
  	text-align: center;
  	width: 80%;
  	margin-bottom: 30px;
  	font-size: 0.8rem;
  	line-height: 15px;
  }

  .contact .container-main .mp-contact {
  	background: #fff;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      width: 720px;
      display: grid;
      grid-template-columns: 1fr 1fr;
  }

  .contact .container-main .mp-contact .desc-items {

  }

  .contact .container-main .mp-contact .desc-items .desc-details {
  	display: flex;
  	align-items: center;
  }

  .contact .container-main .mp-contact .desc-items h2 {
  	font-size: 1.2rem;
  	margin-bottom: 10px;
  }

  .contact .container-main .mp-contact .desc-items p {
  	font-size: 0.9rem;
  	color: var(--grey-color);
  	line-height: 16px;
  	font-weight: 450;
  	width: 70%;
  	margin-bottom: 15px;
  }

  .contact .container-main .mp-contact .desc-items .details-icon {
  	font-size: 20px;
  	padding-right: 10px;
  }

  .contact .container-main .mp-contact .desc-items .details-text {
  	font-size: 0.9rem;
  	color: var(--grey-color);
  	margin-left: 5px;
  	line-height: 16px;
  	font-weight: 450;
  }

  .contact .container-main .mp-contact .icon-items img {
  	width: 80%;
  }

  .contact .container-sub {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-wrap: wrap;
  	padding: 0 300px;
      column-gap: 30px;
  }

  .contact .container-sub .container-items {
  	background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      height: 200px;
      width: 250px;
      display: grid;
      grid-template-rows: 0.5fr 1fr;
  }

  .contact .container-sub .container-items .icon-items {
  	/*display: flex;*/
  	margin-bottom: 20px;
  	text-align: center;
  }

  .contact .container-sub .container-items:hover{
  	opacity: 0.8;
  	transform: scale(1.1);
  	transition: 0.2s;
  }

  .contact .container-sub .container-items .icon-items img {
  	width: 60%;
  }

  .contact .container-sub .container-items .kmlc img {
  	width: 45% !important;
  }

  .contact .container-sub .container-items .text-items {
  	display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .contact .container-sub .container-items .text-items h2 {
  	font-size: 1rem;
  }

  .contact .container-sub .container-items .text-items p {
  	font-size: 0.7rem;
  	font-weight: 500;
  	line-height: 10px;
  	margin-bottom: 10px;
  	text-align: center;
  }

  .contact .container-sub .container-items .text-items .desc-details {
  	display: flex;
  	align-items: center;
  }

  .contact .container-sub .container-items .text-items .desc-details .details-icon {
  	font-size: 0.7rem;
  	padding-right: 10px;
  }

  .contact .container-sub .container-items .text-items .desc-details .details-text {
  	font-size: 0.7rem;
  }
  /* ===== Contact Page Section End ===== */

  /* ===== News Page Section Start ===== */
  .news {
  	background-image: url("../images/bg-rates.png");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding-top: 150px;
  }

  .news .container-main {
  	display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  .news .container-main .tp-news {
  	display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  .news .container-main .tp-news h1 {
  	color: var(--cyan);
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 10px;
  }

  .news .container-main .tp-news p {
  	color: var(--grey-color);
  	text-align: center;
  	width: 80%;
  	margin-bottom: 30px;
  	font-size: 0.8rem;
  	line-height: 15px;
  }

  /* ===== News Container ===== */
  .news .container-main .mp-news {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 50px;
    width: 920px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 32px;
  }

  /* ===== News Item Card ===== */
  .news .container-main .mp-news .mp-items {
    display: grid;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .news .container-main .mp-news .mp-items:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  }

  /* ===== Image Style ===== */
  .news .container-main .mp-news .mp-items .img-cards a img {
    width: 100%;
    height: 250px;
    display: block;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    object-fit: cover;
  }

  /* ===== Title ===== */
  .news .container-main .mp-news .mp-items .tp-cards a {
    text-decoration: none;
    color: #222222;
  }

  .news .container-main .mp-news .mp-items .tp-cards h2 {
   /* font-size: 1rem;
    font-weight: 600;
    color: #333;
    padding: 20px 20px 0 20px;
    line-height: 1.4;
  */
    font-size: 1.2rem;
      width: 80%;
      padding: 5px 0 0 20px;
  }

  /* ===== Date Section ===== */
  .news .container-main .mp-news .mp-items .details-news .date-cards .date-icon {
  	font-size: .7rem;
      font-family: 'Poppins', sans-serif;
  }

  .news .container-main .mp-news .mp-items .date-cards {
    display: flex;
      align-items: center;
      padding-left: 20px;
      margin-top: 10px;
  }

  .news .container-main .mp-news .mp-items .date-cards i {
    margin-right: 8px;
    font-size: 18px;
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 20px;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
  }

  .pagination button {
    padding: 10px 16px;
    border: 1px solid #ccc;
    background: linear-gradient(145deg, #ffffff, #f3f3f3);
    border-radius: 8px;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-width: 40px;
  }

  .pagination button:hover {
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    color: #0485C4;
    transform: translateY(-2px);
  }

  .pagination button.active {
    background: linear-gradient(to right, #0485C4, #29a1d6);
    color: #fff;
    border-color: #0485C4;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(4, 133, 196, 0.4);
  }

  .pagination button:focus {
    outline: none;
  }

  .hidden {
    display: none !important;
  }
  /* ===== News Page Section End ===== */

  /* ===== News View Section Start ===== */
  .news-view {
  	background-image: url("../images/bg-rates.png");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding-top: 150px;
  }

  .news-view .container-main {
  	display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  .news-view .container-main .mp-news {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 50px;
    width: 920px;
    display: grid;
    grid-template-rows: repeat(2, 1fr); /* 2 columns */
    gap: 10px;
    justify-content: center;
  }

  .news-view .container-main .mp-news .tp-news h1 {
  	font-size: .9rem;
  	color: var(--cyan);
  	align-items: center;
  	font-weight: 1000;
  	text-align: center;
  }

  .news-view .container-main .mp-news .tp-news p {
  	font-size: 1.5rem;
  	color: var(--black-color);
  	align-items: center;
  	font-weight: 1000;
  	text-align: center;
  }

  .news-view .container-main .mp-news .date-news {
  	display: flex;
      justify-content: center;
      /*align-items: center;*/
  }

  .news-view .container-main .mp-news .date-news .date-icon {
  	padding-right: 10px;
  }

  .news-view .container-main .mp-news .desc-item .img-news {
  	display: flex;
      justify-content: center;
      margin-bottom: 30px;
      flex-direction: column;
      align-items: center;
  }

  .news-view .container-main .mp-news .desc-item .img-news img {
  	width: 720px;
    margin-bottom: 10px;
  }

  .news-view .container-main .mp-news .desc-item .content-news p {
  	font-size: 1rem;
  	font-weight: 500;
  	width: 720px;
  	text-align: justify;
  }

  .news-view .container-sub {
      padding-left: 80px;
      margin-top: 30px;
  }

  .news-view .container-sub .sub-tp p {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 20px;
      color: var(--cyan);
  }

  .news-view .container-sub .sub-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      padding-right: 80px;
  }

  .news-view .container-sub .sub-items {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      margin-bottom: 90px;
  }

  .news-view .sub-items:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }

  .news-view .mp-items .img-cards a img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
  }

  .news-view .mp-items .tp-cards a {
  	text-decoration: none;
  }

  .news-view .mp-items .tp-cards h2 {
      font-size: 1rem;
      font-weight: 600;
      color: #333;
      padding: 16px 20px 0;
      line-height: 1.4;
      min-height: 60px;
  }

  .news-view .mp-items .date-cards {
      display: flex;
      /*align-items: center;*/
      padding: 12px 20px 20px;
      color: #777;
      font-size: 0.85rem;
  }

  .news-view .mp-items .date-cards i {
      margin-right: 8px;
      font-size: 18px;
  }


  /* ===== News View Section End ===== */

  .hamburger {
        display: none;
        font-size: 2rem;
        background: none;
        border: none;
        cursor: pointer;
      }
  html, body {
    overflow-x: hidden;
  }
  /* ========== LOGIN PAGE ==========*/
    .container-login,
    .login-page {
      display: flex;
      width: 100%;
      margin: 0;
      padding: 0;
      min-height: 70vh;
    }

    .login-left {
      width: 70vw;
      height: 100vh;
      flex: 7;
      overflow: hidden;
    }

    .login-left img {
      width: 100%; 
      height: 100%; 
      object-fit: cover;
      filter: blur(8px);
    }

    .login-left img.logo-white {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .login-right {
      width: 30vw;
      height: 100vh;
      background-color: #f8f9fa;
      flex: 3; 
      display: flex; 
      flex-direction: column; 
      padding: 0 1rem;
      align-items: center;
      justify-content: center;
    }

    .main-footer {
      font-size: 0.9rem;
      color: #666;
      padding: 10px 0;
      border-top: 1px solid #ddd;
    }

  /* ========== DASHBOARD PAGE ========== */

    .dashboard-news .content-wrapper{
      padding: 10px;
    }

    .dashboard-news .content-wrapper .tp-dashnews {
      background: #fff;
      border-radius: 14px;
      padding: 10px 20px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      width: 100%;
      transition: box-shadow 0.3s ease;
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    .dashboard-news .content-wrapper .tp-dashnews h1 {
      font-size: 2rem;
      color: var(--cyan);
      margin-bottom: 0px;
      text-transform: uppercase;
    }

    .dashboard-news .content-wrapper .tb-dashnews {
      width: 100%;
      overflow-x: auto;
      margin-top: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }

    .dashboard-news .content-wrapper .tb-dashnews table {
      border-collapse: collapse;
      width: 100%;
    }

    .dashboard-news .content-wrapper .tb-dashnews table .td-newstitle {
      width: 30%;
    }
    .dashboard-news .content-wrapper .tb-dashnews table thead {
      /*background-color: #f1f5f9;*/
    }

    .dashboard-news .content-wrapper .tb-dashnews table th, .dashboard-news .content-wrapper .tb-dashnews table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: middle;
    }

    .dashboard-news .content-wrapper .tb-dashnews table th {
        font-weight: 600;
        color: #374151;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .dashboard-news .content-wrapper .tb-dashnews table tbody tr:hover {
        background-color: #f9fafb;
    }

    .dashboard-news .content-wrapper .tb-dashnews table tbody tr td img.rounded {
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        object-fit: cover;
        width: 200px;
    }

    .td-newstitle {
        font-weight: 500;
        color: #1f2937;
    }

    .bg-green-200 {
        background-color: #bbf7d0;
    }

    .text-green-800 {
        color: #166534;
    }

    .bg-red-200 {
        background-color: #fecaca;
    }

    .text-red-800 {
        color: #991b1b;
    }

    /* Style umum tag action */
    .action-tag {
        display: inline-block;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        text-decoration: none;
        line-height: 1;
    }

    .action-tag i {
        margin-right: 4px;
        font-size: 1rem;
    }

    /* Edit Tag Style */
    .action-edit {
        background-color: #bbf7d0;
        color: #166534;
        margin-bottom: 10px;            
    }

    .action-edit:hover {
        background-color: #86efac;
    }

    /* Delete Tag Style */
    .action-delete {
        background-color: #fecaca;
        color: #991b1b;
        border: none;
    }

    .action-delete:hover {
        background-color: #fca5a5;
    }


  /* ========== CREATE NEWS PAGE ======== */
    .form-wrapper {
        background-color: #ffffff;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.05);
        max-width: 700px;
        margin: 0 auto;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 14px;
        margin-top: 4px;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    label {
        font-weight: 600;
        font-size: 14px;
        color: #374151;
    }

    button.btn-submit {
        background-color: #2563eb;
        color: white;
        padding: 10px 20px;
        border: none;
        font-weight: 600;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    button.btn-submit:hover {
        background-color: #1d4ed8;
    }

    a.btn-cancel {
        font-size: 14px;
        color: #6b7280;
        text-decoration: underline;
        margin-left: 16px;
    }

    /* Optional: Error message styling */
    .alert-error {
        background-color: #fee2e2;
        color: #b91c1c;
        padding: 10px 14px;
        border-radius: 5px;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .create-news .content-wrapper .tp-crnews h1 {
      text-align: center;
      color: var(--cyan);
      font-size: 1.8rem;
      padding: 10px 0;
    }

    .create-news .content-wrapper .form-wrapper .btn-option {
      margin-top: 10px;
    }

    .create-news .content-wrapper .form-wrapper .btn-option .action-delete {
      background-color: #991b1b;
      text-decoration: none;
      color: white;
      padding: 10px 20px;
      border: none;
      font-weight: 600;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    trix-editor {
          background-color: white;
          border: 1px solid #ccc;
          min-height: 200px;
          padding: 10px;
      }

  .nav-sidebar .nav-link p {
    color: var(--white-color);
  }

  /* ========== RESPONSIVE ========== */
  @media screen and (max-width: 480px) {
    /*=== HOMEPAGE ==== */
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 10px 15px 0;
      }

      header .brand img {
        max-width: 75%;
        height: auto;
        margin-left: 10px;
        margin-top: -15px;
        }

        header .hamburger {
          display: block;
        }

        header .navigation {
            display: none;
            flex-direction: column;
            position: absolute;
            background-color: var(--white-color);
            top: 100px;
            left: 0;
            right: 0;
            width: 100vw; /* Full width dari viewport */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 100;
            margin-left: 0;
        }

      header .navigation a {
        font-size: 0.7rem;
        font-weight: 500;
      }

      header .languange {
          display: none;
      }

         /* Tampilkan menu saat tombol hamburger aktif */
      header .navigation.show {
          display: flex;
          align-items: flex-start;
      }

      header .navigation.show .dropdown .dropbtn i {
          display: none;
      }

      header .navigation.show .dropdown1 .dropbtn i {
          display: none;
      }

      header .navigation .dropdown .dropbtn {
        text-align: left !important;
        display: block;
        font-size: 0.7rem;
        font-weight: 500;
      }

      header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
        display: none;
      }

      header .navigation .dropdown .dropdown-content {
        display: grid;
      }

        .navigation a,
        .dropbtn {
            padding: 10px 20px;
            width: 100%;
            text-align: left;
            font-size: 1rem;
        }

        /* Hide dropdown content entirely */
        .dropdown-content,
        .dropdown1 .dropdown-content {
            display: none !important;
          }

        .home .slideshow-container .mySlides .text p {
          font-size: 0.8rem;
             margin-top: 450px; 
            padding: 0 10px;
            text-align: center;
        }

        .home .slideshow-container .mySlides .mini-logo img {
        z-index: 100;
        position: absolute;
        top: 0;
        color: var(--dark-color);
        margin-top: 270px;
        width: 50%;
      }

      .overview {
        padding: 30px 50px 60px 50px;
        flex-direction: column;
        }
        .overview .mp-overview {
        display: block; /* ubah dari grid ke block agar stack vertikal */
        }

        .overview .mp-overview .tp-overview {
        margin-top: 50px;
        text-align: center;
        }

        .overview .mp-overview .tp-overview h1 {
        font-size: 1.5rem;
        margin-bottom: 30px;
        padding-left: 0;
        }

        .overview .mp-overview .tp-overview p {
        width: 100%;
        margin-bottom: 40px;
        line-height: 1.6;
        text-align: justify;
        font-size: 0.8rem;
        } 

        .overview .mp-overview .tp-overview .bt-overview {
        width: 60%;
        margin: 0 auto;
        }

        .overview .mp-overview .tp-overview .bt-overview a {
        justify-content: center;
        font-size: 0.9rem;
        }

        .overview .mp-overview .img-overview {
        margin-top: 30px;
        justify-content: center;
        }

        .overview .mp-overview .img-overview img {
        width: 50%;
        display: none;
        }

        .group-bus {
        padding: 40px 20px;
        flex-direction: column;
        }

        .group-bus .mp-group .tp-group {
        margin-bottom: 40px;
        text-align: center;
        }

        .group-bus .mp-group .tp-group h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-group {
        grid-template-columns: 1fr 1fr; /* dari 4 kolom jadi 2 kolom */
        gap: 20px;
        }

        .group-bus .mp-group .logo-group img {
        width: 60%;
        }

        .group-bus .mp-group .logo-group .img-small {
        width: 50%;
        }

        .group-bus .mp-group .tp-partners {
        margin: 60px 0 40px 0;
        text-align: center;
        }

        .group-bus .mp-group .tp-partners h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-partners {
        padding: 0 10px;
        }

        .group-bus .mp-group .logo-partners img {
        width: 100%;
        }

        .news-sec {
        padding: 0 30px 40px 30px;
        }

        .news-sec .mp-news .tp-news {
        padding: 40px 0 10px 0;
        text-align: center;
        }

        .news-sec .mp-news .tp-news h1 {
        font-size: 1.5rem;
        }

        .news-sec .mp-news .mp-cards .mp-items .img-cards a img {
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        object-fit: fill !important;
        height: 150px !important; 
        }

        .news-sec .mp-news .mp-cards {
        grid-template-columns: 1fr; /* 1 kolom saat layar kecil */
        gap: 30px;
        padding: 20px;
        }

        .news-sec .mp-news .mp-cards .mp-items {
        transform: none;
        }

        .news-sec .mp-news .mp-cards .mp-items .tp-cards h2 {
        font-size: 0.7rem !important;
        width: 100%;
        padding-left: 15px;
        }

        .news-sec .mp-news .mp-cards .mp-items .date-cards {
        padding-left: 15px;
        }

        .news-sec .mp-news .load-more-container button {
        font-size: 0.9rem;
        padding: 20px 0;
        }

        .partnership {
        display: none;
      }

      .footer {
        padding: 0 30px;
        }

        .footer .box-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 30px 10px;
        background-position: center;
        }

        .footer .box-container .box-logo {
        align-items: flex-start;
        }

        .footer .box-container .box-logo .logo-klx img,
        .footer .box-container .box-logo .logo-kl img {
        width: 100%;
        }

        .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        }

        .footer-bottom .container .links .nav {
        justify-content: center;
        }

        .footer .box-container .box .box-items-media {
        justify-content: flex-start;
        gap: 10px;
        }

        .footer .box-container .box .footer-address {
        font-size: 0.7rem;
        color: var(--dark-color);
      }

      .footer .box-container .box a {
        font-size: 0.7rem;
      }

        .footer .box-container .box .box-items-media a {
        font-size: 1rem;
      }
      .footer .box-container .box .d-flex, .d-flex-center .footer-icon i {
      font-size: 1.5rem;
      } 
      .footer .footer-bottom .container-copy p {
        text-align: center;
        font-size: 0.6rem;
      }
    /*=== ABOUT-US PAGE ==== */
      .about-us {
        padding: 150px 50px 30px 50px;
      }

      .about-us .mp-about-us .mp-cards {
        grid-template-columns: 1fr; /* tetap 1 kolom */
        gap: 30px;
        margin-top: 40px;
      }

      .about-us .mp-about-us .mp-cards .tp-cards p {
        font-size: 0.9rem;
        width: 100%;
      }

      .about-us .mp-about-us .mp-cards .img-cards img {
        width: 100%;
        display: none;
      }

      .about-us .mp-about-us .tp-about-us h1 {
        font-size: 1.5rem;
      }
    /*=== VISMIS PAGE ===*/
      .vismis .mp-cards {
        grid-template-columns: 1fr; /* tetap 1 kolom */
        border-top: none;
        border-bottom: 1px solid var(--grey-color);
      }

      .vismis {
        padding: 30px 50px 30px 50px;
      }

      .vismis .mp-cards .img-cards img {
        width: 90%;
        margin-top: 30px;
        margin-bottom: 15px;
      }

      .vismis .mp-cards .tp-cards .tp-vismis h1 {
        margin-bottom: 30px;
        letter-spacing: 4px;
        font-size: calc(1.375rem + 1.5vw);
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards {
        grid-template-columns: 1fr; /* satu kolom */
        margin-bottom: 15px;
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards .tp-desc .desc p {
        font-size: 0.8rem;
      }
    /*=== COMP-VAL PAGE ===*/
      .comp-val .mp-comp-val .tp-comp-val h1 {
        margin-bottom: 30px;
        letter-spacing: 4px;
        font-size: 1.4rem;
      }

      .comp-val {
        padding: 40px 20px 30px 20px;
      }


      .comp-val .mp-comp-val .mp-cards {
        column-gap: 20px;
        row-gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item {
        width: 70%; /* satu kolom */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-img img {
        width: 70%;
        margin-top: 15px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-tp h2 {
        font-size: 1rem;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-desc p {
        width: 90%;
        font-size: 0.7rem;
      }
    /*=== ABOUT-GOB-COMP*/
      .about-gob-comp,
      .serv-gob,
      .gob-prefooter {
        padding: 30px 50px 30px 50px;
      }

      .bg-comp .mp-bg .bg-comp-1 img,
      .bg-comp .mp-bg .bg-comp-2 img,
      .bg-comp .mp-bg .bg-comp-3 img,
      .bg-comp .mp-bg .bg-comp-4 img {
        width: 45%;
      }

      .about-gob-comp .mp-about-gob .desc-about-gob p {
        font-size: 0.95rem;
        line-height: 1.6;
      }

      .serv-gob .mp-serv-gob .tp-serv-gob h1,
      .about-gob-comp .mp-about-gob .tp-about-gob h1,
      .gob-prefooter .mp-gob-prefooter .tp-gob-prefooter h1 {
        font-size: 1.5rem;
        text-align: center;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards {
        gap: 25px;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items {
        grid-template-columns: 1fr;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-bg {
        border-radius: 20px 20px 0 0;
        height: 180px;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp {
        margin: 20px;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp h2 {
        font-size: 1.5rem;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-descbtn p {
        font-size: 0.9rem;
        margin: 20px;
        text-align: justify;
      }
      .gob-prefooter .mp-gob-prefooter {
        padding: 30px 0 30px 0;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter {
        grid-template-columns: 1fr;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .img-items img {
        width: 50%;
      }
    /*=== PARTNERSHIP-PG ===*/
      .partnership-pg .mp-partnership {
        padding-top: 100px;
      }

      .partnership-pg {
        padding: 30px 10px;
      }

      .partnership-pg .mp-partnership .fb-partnership {
        padding: 20px 15px;
      }

      .partnership-pg .mp-partnership .tp-partnership h1 {
        font-size: 24px;
      }

      .partnership-pg .mp-partnership .fb-partnership form {
        grid-row-gap: 8px;
      }

      input[type="text"],
      input[type="email"],
      textarea {
        font-size: 13px;
        padding: 10px 12px;
      }

      .input-box {
        width: 100%;
        padding: 12px;
        font-size: 14px;
      }
    /*=== CONTACT PAGE ===*/
      .contact .container-main .tp-contact h1 {
        font-size: 1rem;
        letter-spacing: 3px;
      }

      .contact {
        padding: 150px 20px 30px 20px;
      }

      .contact .container-main .tp-contact p {
        width: 100%;
        font-size: 0.7rem;
        line-height: 16px;
        padding: 0 10px;
      }

      .contact .container-main .mp-contact {
        width: 95%;
        padding: 15px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
      }

      .contact .container-main .mp-contact .desc-items {
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        }

      .contact .container-sub {
        padding: 0 20px;
        flex-direction: column;
        align-items: center;
      }

      .contact .container-sub .container-items {
        width: 90%;
        height: auto;
        padding: 15px;
      }

      .contact .container-sub .container-items .icon-items img {
        width: 50%;
      }

      .contact .container-sub .container-items .text-items h2 {
        font-size: 0.9rem;
      }

      .contact .container-sub .container-items .text-items p,
      .contact .container-sub .container-items .text-items .desc-details .details-text {
        font-size: 0.65rem;
      }

      .contact .container-sub .container-items .text-items .desc-details .details-icon {
        font-size: 0.6rem;
      }

      .contact .container-sub .container-items:hover {
        transform: none; /* matikan efek zoom saat hover */
      }
    /*=== NEWS INDEX PAGE ===*/
      .news .container-main .tp-news h1 {
        font-size: 1.2rem;
        letter-spacing: 3px;
      }

      .news {
        padding: 150px 20px 30px 20px;
      }

      .news .container-main .tp-news p {
        width: 100%;
        font-size: 0.7rem;
        padding: 0 10px;
        line-height: 16px;
      }

      .news .container-main .mp-news {
        width: 95%;
        padding: 20px;
        gap: 20px;
      }

      .news .container-main .mp-news .mp-items {
        border-radius: 8px;
      }

      .news .container-main .mp-news .mp-items .details-news .date-cards .date-icon {
        font-size: .5rem;
        font-family: 'Poppins', sans-serif;
      }

      .news .container-main .mp-news .mp-items .tp-cards h2 {
        font-size: 0.7rem;
        padding: 5px 0 0 15px;
        width: 95%;
      }

      .news .container-main .mp-news .mp-items .date-cards {
        padding-left: 15px;
        margin-top: 8px;
      }

      .news .container-main .mp-news .mp-items .date-cards i {
        font-size: 0.5rem;
      }

      .pagination {
        gap: 8px;
      }

      .pagination button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 35px;
      }
    /*=== NEWS VIEW PAGE ===*/
      .news-view .container-main .mp-news {
        width: 95%;
        padding: 20px;
        /*gap: 15px;*/
        grid-template-rows: 1fr;
      }

      .news-view {
        padding: 150px 20px 30px 20px;
      }

      .news-view .container-main .mp-news .tp-news h1 {
        font-size: 0.75rem;
        letter-spacing: 1px;
      }

      .news-view .container-main .mp-news .tp-news p {
        font-size: 1rem;
      }
      .news-view .container-main .mp-news .date-news .date-text p {
        font-size: 0.7rem;
        margin-bottom: 0;
      }
      .news-view .container-main .mp-news .date-news .date-icon {
        font-size: 0.7rem;
      }

      .news-view .container-main .mp-news .desc-item .img-news img {
        width: 100%;
      }

      .news-view .container-main .mp-news .desc-item .content-news p {
        width: 100%;
        font-size: 0.9rem;
        padding: 0 5px;
      }

      .news-view .container-sub {
        padding: 0 20px;
      }

      .news-view .container-sub .sub-tp p {
        font-size: 1.1rem;
        text-align: center;
      }

      .news-view .container-sub .sub-content {
        padding-right: 0;
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .news-view .container-sub .sub-items {
        margin-bottom: 40px;
      }

      .news-view .mp-items .tp-cards h2 {
        font-size: 0.9rem;
        padding: 12px 16px 0;
        min-height: auto;
      }

      .news-view .mp-items .date-cards {
        padding: 10px 16px 16px;
        font-size: 0.75rem;
      }

      .news-view .mp-items .date-cards i {
        font-size: 16px;
      }
  }

  @media screen and (max-width: 768px) {
    /*=== HOMEPAGE ===*/
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 10px 15px 0;
      }

      header .brand img {
        max-width: 85%;
        height: auto;
        margin-left: 10px;
        margin-top: -15px;
        }

        header .hamburger {
          display: block;
        }

        header .navigation {
          display: none;
          flex-direction: column;
          position: absolute;
          background-color: var(--white-color);
          top: 100px;
          left: 0;
          width: 100%;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          z-index: 100;
          margin-left: 0;
      }

      header .languange {
          display: none;
      }

         /* Tampilkan menu saat tombol hamburger aktif */
      header .navigation.show {
          display: flex;
      }

      header .navigation.show .dropdown .dropbtn i {
          display: none;
      }

      header .navigation.show .dropdown1 .dropbtn i {
          display: none;
      }

        .navigation a,
        .dropbtn {
            padding: 10px 20px;
            width: 100%;
            text-align: left;
            font-size: 1rem;
        }

        /* Hide dropdown content entirely */
        .dropdown-content,
        .dropdown1 .dropdown-content {
            display: none !important;
          }

        /* Override dropdown button as link */
        .dropdown .dropbtn,
        .dropdown1 .dropbtn {
            all: unset;
            display: block;
            color: var(--dark-color);
            cursor: pointer;
            padding: 10px 20px;
            text-align: left;
            font-size: 1rem;
          }

        .home .slideshow-container .mySlides .text p {
          font-size: 0.8rem;
             margin-top: 450px; 
            padding: 0 10px;
            text-align: center;
        }

        .home .slideshow-container .mySlides .mini-logo img {
        z-index: 100;
        position: absolute;
        top: 0;
        color: var(--dark-color);
        margin-top: 270px;
        width: 50%;
      }

      .overview {
        padding: 30px 50px 60px 50px;
        flex-direction: column;
        }
        .overview .mp-overview {
        display: block; /* ubah dari grid ke block agar stack vertikal */
        }

        .overview .mp-overview .tp-overview {
        margin-top: 50px;
        text-align: center;
        }

        .overview .mp-overview .tp-overview h1 {
        font-size: 1.5rem;
        margin-bottom: 30px;
        padding-left: 0;
        }

        .overview .mp-overview .tp-overview p {
        width: 100%;
        margin-bottom: 40px;
        line-height: 1.6;
        text-align: justify;
        } 

        .overview .mp-overview .tp-overview .bt-overview {
        width: 60%;
        margin: 0 auto;
        }

        .overview .mp-overview .tp-overview .bt-overview a {
        justify-content: center;
        font-size: 0.9rem;
        }

        .overview .mp-overview .img-overview {
        margin-top: 30px;
        justify-content: center;
        }

        .overview .mp-overview .img-overview img {
        width: 50%;
        display: none;
        }

        .group-bus {
        padding: 40px 20px;
        flex-direction: column;
        }

        .group-bus .mp-group .tp-group {
        margin-bottom: 40px;
        text-align: center;
        }

        .group-bus .mp-group .tp-group h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-group {
        grid-template-columns: 1fr 1fr; /* dari 4 kolom jadi 2 kolom */
        gap: 20px;
        }

        .group-bus .mp-group .logo-group img {
        width: 60%;
        }

        .group-bus .mp-group .logo-group .img-small {
        width: 50%;
        }

        .group-bus .mp-group .tp-partners {
        margin: 60px 0 40px 0;
        text-align: center;
        }

        .group-bus .mp-group .tp-partners h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-partners {
        padding: 0 10px;
        }

        .group-bus .mp-group .logo-partners img {
        width: 100%;
        }

        .news-sec {
        padding: 0 30px 40px 30px;
        }

        .news-sec .mp-news .tp-news {
        padding: 40px 0 10px 0;
        text-align: center;
        }

        .news-sec .mp-news .tp-news h1 {
        font-size: 1.5rem;
        }

        .news-sec .mp-news .mp-cards {
        grid-template-columns: 1fr; /* 1 kolom saat layar kecil */
        gap: 30px;
        padding: 20px;
        }

        .news-sec .mp-news .mp-cards .mp-items {
        transform: none;
        }

        .news-sec .mp-news .mp-cards .mp-items .tp-cards h2 {
        font-size: 1rem;
        width: 100%;
        padding-left: 15px;
        }

        .news-sec .mp-news .mp-cards .mp-items .date-cards {
        padding-left: 15px;
        }

        .news-sec .mp-news .load-more-container button {
        font-size: 0.9rem;
        padding: 20px 0;
        }

        .partnership {
        display: none;
      }

      .footer {
        padding: 0 30px;
        }

        .footer .box-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 30px 10px;
        background-position: center;
        }

        .footer .box-container .box-logo {
        align-items: flex-start;
        }

        .footer .box-container .box-logo .logo-klx img,
        .footer .box-container .box-logo .logo-kl img {
        width: 100%;
        }

        .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        }

        .footer-bottom .container .links .nav {
        justify-content: center;
        }

        .footer .box-container .box .box-items-media {
        justify-content: flex-start;
        gap: 10px;
        }

        .footer .box-container .box .footer-address {
        font-size: 0.7rem;
        color: var(--dark-color);
      }

      .footer .box-container .box a {
        font-size: 0.7rem;
      }

        .footer .box-container .box .box-items-media a {
        font-size: 1rem;
      }
      .footer .box-container .box .d-flex, .d-flex-center .footer-icon i {
      font-size: 1.5rem;
      } 
      .footer .footer-bottom .container-copy p {
        text-align: center;
        font-size: 0.6rem;
      }
    /*=== ABOUT-US PAGE ===*/
      .about-us {
        padding: 150px 40px 40px 40px;
      }

      .about-us .mp-about-us .mp-cards {
        grid-template-columns: 1fr; /* dari 2 kolom jadi 1 kolom */
        gap: 40px;
        margin-top: 60px;
      }

      .about-us .mp-about-us .mp-cards .tp-cards {
        width: 100%;
      }

      .about-us .mp-about-us .mp-cards .tp-cards p {
        width: 100%;
        font-size: 1rem;
      }

      .about-us .mp-about-us .mp-cards .img-cards img {
        width: 90%;
        display: none;
      }
    /*=== VISMIS PAGE ===*/
      .vismis .mp-cards {
        grid-template-columns: 1fr; /* ubah jadi 1 kolom supaya stack vertikal */
        border-top: none;
        border-bottom: 2px solid var(--grey-color);
      }
      .vismis {
        padding: 0 40px 40px 40px;
      }

      .vismis .mp-cards .img-cards img {
        width: 70%;
        margin-top: 40px;
        margin-bottom: 20px;
        display: none;
      }

      .vismis .mp-cards .tp-cards .tp-vismis h1 {
        margin-bottom: 40px;
        letter-spacing: 6px;
        font-size: 1.5rem;
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards {
        grid-template-columns: 1fr; /* ubah jadi 1 kolom */
        margin-bottom: 20px;
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards .tp-desc .desc p {
        font-size: 0.85rem;
      }
    /*=== COMP-VAL PAGE ===*/
      .comp-val .mp-comp-val .tp-comp-val h1 {
        margin-bottom: 50px;
        letter-spacing: 6px;
        font-size: 1.8rem;
      }

      .comp-val {
        padding: 60px 40px 40px 40px;
      }

      .comp-val .mp-comp-val .mp-cards {
        column-gap: 30px;
        row-gap: 30px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item {
        width: 45%; /* 2 kolom */
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-img img {
        width: 60%;
        margin-top: 20px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-tp h2 {
        font-size: 0.8rem;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-desc p {
        width: 80%;
        font-size: 0.75rem;
      }
    /*=== ABOUT-FOOTER ===*/
      .about-footer .mp-partnership {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
      }

      .about-footer {
        padding: 0 20px 0 20px;
        background-position: center;
        background-size: contain;
        display: none;
      }

      .about-footer .mp-partnership .mg-partnership {
        width: 100%;
        justify-content: center;
      }

      .about-footer .mp-partnership .mg-partnership .mg-wrapper {
        width: 100%;
        z-index: 0;
      }

      .about-footer .mp-partnership .mg-partnership .mg-wrapper img {
        opacity: 1;
        max-width: 80%;
        height: auto;
        position: relative;
        z-index: 0;
        display: none;
      }

      .about-footer .mp-partnership .tp-partnership h1 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1.7rem;
      }

      .about-footer .mp-partnership .tp-partnership p {
        margin-top: 20px;
        font-size: 0.8rem;
      }

      .about-footer .mp-partnership .tp-partnership .bt-partnership {
        margin-top: 30px;
      }

      .about-footer .mp-partnership .tp-partnership .bt-partnership a button {
        padding: 8px 25px;
        font-size: 0.7rem;
        margin-bottom: 30px;
      }
    /*=== ABOUT-GOB-COMP*/
      .about-gob-comp,
      .serv-gob,
      .gob-prefooter {
        padding: 40px 30px;
      }

      .about-gob-comp .mp-about-gob .desc-about-gob p,
      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-descbtn p {
        font-size: 1rem;
        text-align: justify;
      }

      .serv-gob .mp-serv-gob .tp-serv-gob h1,
      .about-gob-comp .mp-about-gob .tp-about-gob h1,
      .gob-prefooter .mp-gob-prefooter .tp-gob-prefooter h1 {
        font-size: 1.5rem;
        text-align: center;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items {
        grid-template-columns: 1fr;
      }

      /*.serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp {
        position: static;
        width: 100%;
        margin: 20px;
      }*/

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp h2 {
        font-size: 1.2rem;
        position: static;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .img-items img {
        width: 80%;
      }

      .gob-prefooter .mp-gob-prefooter {
        text-align: center;
      }
    /*=== PARTNERSHIP-PG ===*/
      .partnership-pg .mp-partnership {
        padding-top: 80px;
      }

      .partnership-pg {
        padding: 40px 15px;
      }

      .partnership-pg .mp-partnership .fb-partnership {
        padding: 30px 20px;
      }

      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name {
        grid-template-columns: 1fr; /* ubah jadi satu kolom */
        gap: 15px;
      }

      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-name,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb2 .fb-name,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-list,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 textarea {
        width: 100%;
      }

      .partnership-pg .mp-partnership .tp-partnership h1 {
        font-size: 28px;
      }
    /*=== CONTACT PAGE ===*/
      .contact .container-main .tp-contact h1 {
        font-size: 1.2rem;
        letter-spacing: 5px;
        text-align: center;
      }

      .contact {
        padding: 180px 20px 30px 20px;
      }

      .contact .container-main .tp-contact p {
        width: 90%;
        font-size: 0.75rem;
        line-height: 18px;
      }

      .contact .container-main .mp-contact {
        width: 95%;
        padding: 15px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
      }

      .contact .container-main .mp-contact .desc-items {
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
       }

      .contact .container-sub {
        padding: 0 50px;
        column-gap: 20px;
      }

      .contact .container-sub .container-items {
        width: 200px;
        height: auto;
        padding: 15px;
      }

      .contact .container-sub .container-items .text-items p {
        line-height: 14px;
        font-size: 0.7rem;
      }
    /*=== NEWS INDEX PAGE ===*/
      .news .container-main .tp-news h1 {
        font-size: 1.2rem;
        letter-spacing: 3px;
      }

      .news {
        padding: 150px 20px 30px 20px;
      }

      .news .container-main .tp-news p {
        width: 100%;
        font-size: 0.7rem;
        padding: 0 10px;
        line-height: 16px;
      }

      .news-sec .mp-news .mp-cards .mp-items .img-cards a img {
          width: 100%;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          object-fit: fill;
          height: 300px;
      }

      .news .container-main .mp-news {
        width: 95%;
        padding: 20px;
        gap: 20px;
      }

      .news .container-main .mp-news .mp-items {
        border-radius: 8px;
      }

      .news .container-main .mp-news .mp-items .details-news .date-cards .date-icon {
        font-size: .5rem;
        font-family: 'Poppins', sans-serif;
      }

      .news .container-main .mp-news .mp-items .tp-cards h2 {
        font-size: 0.7rem;
        padding: 5px 0 0 15px;
        width: 95%;
      }

      .news .container-main .mp-news .mp-items .date-cards {
        padding-left: 15px;
        margin-top: 8px;
      }

      .news .container-main .mp-news .mp-items .date-cards i {
        font-size: 0.5rem;
      }

      .pagination {
        gap: 8px;
      }

      .pagination button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 35px;
      }
    /*=== NEWS VIEW PAGE ===*/
      .news-view .container-main .mp-news {
        width: 95%;
        padding: 20px;
        /*gap: 15px;*/
        grid-template-rows: 1fr;
      }

      .news-view {
        padding: 150px 20px 30px 20px;
      }

      .news-view .container-main .mp-news .tp-news h1 {
        font-size: 0.75rem;
        letter-spacing: 1px;
      }

      .news-view .container-main .mp-news .tp-news p {
        font-size: 1rem;
      }
      .news-view .container-main .mp-news .date-news .date-text p {
        font-size: 0.7rem;
        margin-bottom: 0;
      }
      .news-view .container-main .mp-news .date-news .date-icon {
        font-size: 0.7rem;
      }

      .news-view .container-main .mp-news .desc-item .img-news img {
        width: 100%;
      }

      .news-view .container-main .mp-news .desc-item .content-news p {
        width: 100%;
        font-size: 0.9rem;
        padding: 0 5px;
      }

      .news-view .container-sub {
        padding: 0 20px;
      }

      .news-view .container-sub .sub-tp p {
        font-size: 1.1rem;
        text-align: center;
      }

      .news-view .container-sub .sub-content {
        padding-right: 0;
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .news-view .container-sub .sub-items {
        margin-bottom: 40px;
      }

      .news-view .mp-items .tp-cards h2 {
        font-size: 0.9rem;
        padding: 12px 16px 0;
        min-height: auto;
      }

      .news-view .mp-items .date-cards {
        padding: 10px 16px 16px;
        font-size: 0.75rem;
      }

      .news-view .mp-items .date-cards i {
        font-size: 16px;
      }
  }

  @media (max-width: 992px) {
    /*=== HOMEPAGE ===*/
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 10px 15px 0;
      }

      header .brand img {
        max-width: 100%;
        height: auto;
        margin-left: 10px;
        margin-top: -15px;
        }

      header .hamburger {
        display: block;
      }

      header .navigation {
        display: none;
        flex-direction: column;
        position: absolute;
        background-color: var(--white-color);
        top: 100px;
        left: 0;
        right: 0;
        width: 100vw; /* Full width dari viewport */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        margin-left: 0;
      }

      header .languange {
          display: none;
      }

         /* Tampilkan menu saat tombol hamburger aktif */
      header .navigation.show {
          display: flex;
      }

      header .navigation.show .dropdown .dropbtn i {
          display: none;
      }

      header .navigation.show .dropdown1 .dropbtn i {
          display: none;
      }

        .navigation a,
        .dropbtn {
            padding: 10px 20px;
            width: 100%;
            text-align: left;
            font-size: 1rem;
        }

        /* Hide dropdown content entirely */
        .dropdown-content,
        .dropdown1 .dropdown-content {
            display: none !important;
          }

        /* Override dropdown button as link */
        .dropdown .dropbtn,
        .dropdown1 .dropbtn {
            all: unset;
            display: block;
            color: var(--dark-color);
            cursor: pointer;
            padding: 10px 20px;
            text-align: left;
            font-size: 1rem;
          }

        .home .slideshow-container .mySlides .text p {
          font-size: 1rem;
            margin-top: 580px;
            padding: 0 10px;
            text-align: center;
        }

        .home .slideshow-container .mySlides .mini-logo img {
        z-index: 100;
        position: absolute;
        top: 0;
        color: var(--dark-color);
        margin-top: 270px;
        width: 50%;
        }

        .desktop-only {
        display: none !important;
        }

        .mobile-only {
          display: block !important;
        }

      .overview {
        padding: 30px 50px 60px 50px;
        flex-direction: column;
        }

        .overview .mp-overview {
        display: block; /* ubah dari grid ke block agar stack vertikal */
        }

        .overview .mp-overview .tp-overview {
        margin-top: 50px;
        text-align: center;
        }

        .overview .mp-overview .tp-overview h1 {
        font-size: 1.5rem;
        margin-bottom: 30px;
        padding-left: 0;
        }

        .overview .mp-overview .tp-overview p {
        width: 100%;
        margin-bottom: 40px;
        line-height: 1.6;
        text-align: justify;
        } 

        .overview .mp-overview .tp-overview .bt-overview {
        width: 60%;
        margin: 0 auto;
        }

        .overview .mp-overview .tp-overview .bt-overview a {
        justify-content: center;
        font-size: 0.9rem;
        }

        .overview .mp-overview .img-overview {
        margin-top: 30px;
        justify-content: center;
        }

        .overview .mp-overview .img-overview img {
        width: 50%;
        display: none;
        }

        .group-bus {
        padding: 40px 20px;
        flex-direction: column;
        }

        .group-bus .mp-group .tp-group {
        margin-bottom: 40px;
        text-align: center;
        }

        .group-bus .mp-group .tp-group h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-group {
        grid-template-columns: 1fr 1fr; /* dari 4 kolom jadi 2 kolom */
        gap: 20px;
        }

        .group-bus .mp-group .logo-group img {
        width: 60%;
        }

        .group-bus .mp-group .logo-group .img-small {
        width: 50%;
        }

        .group-bus .mp-group .tp-partners {
        margin: 60px 0 40px 0;
        text-align: center;
        }

        .group-bus .mp-group .tp-partners h1 {
        font-size: 1.5rem;
        }

        .group-bus .mp-group .logo-partners {
        padding: 0 10px;
        }

        .group-bus .mp-group .logo-partners img {
        width: 100%;
        }

        .news-sec {
        padding: 0 30px 40px 30px;
        }

        .news-sec .mp-news .tp-news {
        padding: 40px 0 10px 0;
        text-align: center;
        }

        .news-sec .mp-news .tp-news h1 {
        font-size: 1.5rem;
        }

        .news-sec .mp-news .mp-cards {
        grid-template-columns: 1fr 1fr; /* 1 kolom saat layar kecil */
        gap: 30px;
        padding: 20px;
        }

        .news-sec .mp-news .mp-cards .mp-items .img-cards a img {
          object-fit: fill;
        }

        .news-sec .mp-news .mp-cards .mp-items {
        transform: none;
        }

        .news-sec .mp-news .mp-cards .mp-items .tp-cards h2 {
        font-size: 1rem;
        width: 100%;
        padding-left: 15px;
        }

        .news-sec .mp-news .mp-cards .mp-items .date-cards {
        padding-left: 15px;
        }

        .news-sec .mp-news .load-more-container button {
        font-size: 0.9rem;
        padding: 20px 0;
        }

        .partnership {
        display: none;
         }

        .footer {
        padding: 0 30px;
        }

        .footer .box-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 30px 10px;
        background-position: center;
        }

        .footer .box-container .box-logo {
        align-items: flex-start;
        }

        .footer .box-container .box-logo .logo-klx img,
        .footer .box-container .box-logo .logo-kl img {
        width: 80%;
        }

        .footer-bottom .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        }

        .footer-bottom .container .links .nav {
        justify-content: center;
        }

        .footer .box-container .box .box-items-media {
        justify-content: flex-start;
        gap: 10px;
        }

        .footer .box-container .box .footer-address {
        font-size: 0.7rem;
        color: var(--dark-color);
        }

        .footer .box-container .box a {
          font-size: 0.7rem;
        }

          .footer .box-container .box .box-items-media a {
          font-size: 1rem;
        }
        .footer .box-container .box .d-flex, .d-flex-center .footer-icon i {
        font-size: 1.5rem;
        } 
        .footer .footer-bottom .container-copy p {
          text-align: center;
          font-size: 0.6rem;
        }
    /*=== ABOUT-US PAGE ===*/
      .about-us {
        padding: 180px 40px 0 40px;
      }

      .about-us .mp-about-us .mp-cards {
        grid-template-columns: 1fr; /* dari 2 kolom jadi 1 kolom */
        gap: 40px;
        margin-top: 60px;
      }

      .about-us .mp-about-us .mp-cards .tp-cards {
        width: 100%;
      }

      .about-us .mp-about-us .mp-cards .tp-cards p {
        width: 100%;
        font-size: 1rem;
      }

      .about-us .mp-about-us .mp-cards .img-cards img {
        width: 90%;
        display: none;
      }
    /*=== VISMIS PAGE ===*/
      .vismis .mp-cards {
        grid-template-columns: 1fr; /* ubah jadi 1 kolom supaya stack vertikal */
        border-top: none;
        border-bottom: 2px solid var(--grey-color);
      }
      .vismis {
        padding: 0 40px 40px 40px;
      }

      .vismis .mp-cards .img-cards img {
        width: 70%;
        margin-top: 40px;
        margin-bottom: 20px;
        display: none;
      }

      .vismis .mp-cards .tp-cards .tp-vismis h1 {
        margin-bottom: 40px;
        letter-spacing: 6px;
        font-size: calc(1.375rem + 1.5vw);;
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards {
        grid-template-columns: 1fr; /* ubah jadi 1 kolom */
        margin-bottom: 20px;
      }

      .vismis .mp-cards .tp-cards .tp-vismis-cards .tp-desc .desc p {
        font-size: 0.85rem;
      }
    /*=== COMP-VAL PAGE ===*/
      .comp-val .mp-comp-val .tp-comp-val h1 {
        margin-bottom: 50px;
        letter-spacing: 6px;
        font-size: 1.8rem;
      }

      .comp-val {
        padding: 60px 40px 40px 40px;
      }

      .comp-val .mp-comp-val .mp-cards {
        column-gap: 30px;
        row-gap: 30px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item {
        width: 45%; /* 2 kolom */
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
        border-radius: 15px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-img img {
        width: 60%;
        margin-top: 20px;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-tp h2 {
        font-size: 0.8rem;
      }

      .comp-val .mp-comp-val .mp-cards .cards-item .cards-desc p {
        width: 80%;
        font-size: 0.75rem;
      }
    /*=== ABOUT-FOOTER ===*/
      .about-footer .mp-partnership {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
      }

      .about-footer {
        padding: 0 20px 0 20px;
        background-position: center;
        background-size: contain;
        display: none;
      }

      .about-footer .mp-partnership .mg-partnership {
        width: 100%;
        justify-content: center;
      }

      .about-footer .mp-partnership .mg-partnership .mg-wrapper {
        width: 100%;
        z-index: 0;
      }

      .about-footer .mp-partnership .mg-partnership .mg-wrapper img {
        opacity: 1;
        max-width: 80%;
        height: auto;
        position: relative;
        z-index: 0;
        display: none;
      }

      .about-footer .mp-partnership .tp-partnership h1 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 1.7rem;
      }

      .about-footer .mp-partnership .tp-partnership p {
        margin-top: 20px;
        font-size: 0.8rem;
      }

      .about-footer .mp-partnership .tp-partnership .bt-partnership {
        margin-top: 30px;
      }

      .about-footer .mp-partnership .tp-partnership .bt-partnership a button {
        padding: 8px 25px;
        font-size: 0.7rem;
        margin-bottom: 30px;
      }
    /*=== ABOUT-GOB-COMP*/
      .about-gob-comp,
      .serv-gob,
      .gob-prefooter {
        padding: 40px 30px;
      }

      .about-gob-comp .mp-about-gob .desc-about-gob p,
      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-descbtn p {
        font-size: 1rem;
        text-align: justify;
      }

      .serv-gob .mp-serv-gob .tp-serv-gob h1,
      .about-gob-comp .mp-about-gob .tp-about-gob h1,
      .gob-prefooter .mp-gob-prefooter .tp-gob-prefooter h1 {
        font-size: calc(1.375rem + 1.5vw);;
        text-align: center;
      }

      .serv-gob .mp-serv-gob .mp-serv-gob-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
      }

      /*.serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items {
        grid-template-columns: 1fr;
      }*/

      .serv-gob .mp-serv-gob .mp-serv-gob-cards .card-items .items-tp h2 {
        font-size: 1.2rem;
        position: static;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .gob-prefooter .mp-gob-prefooter .items-gob-prefooter .img-items img {
        width: 80%;
      }

      .gob-prefooter .mp-gob-prefooter {
        text-align: center;
      }
    /*=== PARTNERSHIP-PG ===*/
      .partnership-pg .mp-partnership {
        padding-top: 150px;
      }

      .partnership-pg {
        padding: 40px 15px;
      }

      .partnership-pg .mp-partnership .fb-partnership {
        padding: 30px 20px;
      }

      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name {
        grid-template-columns: 1fr; /* ubah jadi satu kolom */
        gap: 15px;
      }

      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-name,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb2 .fb-name,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 .fb-list,
      .partnership-pg .mp-partnership .fb-partnership form .formbox-items .fb-items-name .form-fb1 textarea {
        width: 100%;
      }

      .partnership-pg .mp-partnership .tp-partnership h1 {
        font-size: 28px;
      }
    /*=== CONTACT PAGE ===*/
      .contact .container-main .tp-contact h1 {
        font-size: 1.2rem;
        letter-spacing: 5px;
        text-align: center;
      }

      .contact {
        padding: 180px 20px 30px 20px;
      }

      .contact .container-main .tp-contact p {
        width: 90%;
        font-size: 0.75rem;
        line-height: 18px;
      }

      .contact .container-main .mp-contact {
        align-items: center;
        text-align: center;
      }

      .contact .container-main .mp-contact .desc-items {
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
       }

      .contact .container-sub {
        padding: 0 50px;
        column-gap: 20px;
      }

      .contact .container-sub .container-items {
        width: 200px;
        height: auto;
        padding: 15px;
      }

      .contact .container-sub .container-items .text-items p {
        line-height: 14px;
        font-size: 0.7rem;
      }
    /*=== NEWS INDEX PAGE ===*/
      .news .container-main .tp-news h1 {
        font-size: 1.2rem;
        letter-spacing: 3px;
      }

      .news {
        padding: 180px 20px 30px 20px;
      }

      .news .container-main .tp-news p {
        width: 100%;
        font-size: 0.7rem;
        padding: 0 10px;
        line-height: 16px;
      }

      .news .container-main .mp-news {
        width: 95%;
        padding: 20px;
        gap: 20px;
      }

      .news .container-main .mp-news .mp-items {
        border-radius: 8px;
      }

      .news .container-main .mp-news .mp-items .details-news .date-cards .date-icon {
        font-size: .5rem;
        font-family: 'Poppins', sans-serif;
      }

      .news .container-main .mp-news .mp-items .tp-cards h2 {
        font-size: 0.7rem;
        padding: 5px 0 0 15px;
        width: 95%;
      }

      .news .container-main .mp-news .mp-items .date-cards {
        padding-left: 15px;
        margin-top: 8px;
      }

      .news .container-main .mp-news .mp-items .date-cards i {
        font-size: 0.5rem;
      }

      .pagination {
        gap: 8px;
      }

      .pagination button {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 35px;
      }
    /*=== NEWS VIEW PAGE ===*/
      .news-view .container-main .mp-news {
        width: 95%;
        padding: 20px;
        /*gap: 15px;*/
        grid-template-rows: 1fr;
      }

      .news-view {
        padding: 180px 20px 30px 20px;
      }

      .news-view .container-main .mp-news .tp-news h1 {
        font-size: 0.9rem;
        letter-spacing: 1px;
      }

      .news-view .container-main .mp-news .tp-news p {
        font-size: 1.5rem;
      }
      .news-view .container-main .mp-news .date-news .date-text p {
        font-size: 0.7rem;
        margin-bottom: 0;
      }
      .news-view .container-main .mp-news .date-news .date-icon {
        font-size: 0.7rem;
      }

      .news-view .container-main .mp-news .desc-item .img-news img {
        width: 100%;
      }

      .news-view .container-main .mp-news .desc-item .content-news p {
        width: 100%;
        font-size: 0.9rem;
        padding: 0 5px;
      }

      .news-view .container-sub {
        padding: 0 20px;
      }

      .news-view .container-sub .sub-tp p {
        font-size: calc(1.375rem + 1.5vw);
        text-align: center;
      }

      .news-view .container-sub .sub-content {
        padding-right: 0;
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .news-view .container-sub .sub-items {
        margin-bottom: 40px;
      }

      .news-view .mp-items .tp-cards h2 {
        font-size: 0.9rem;
        padding: 12px 16px 0;
        min-height: auto;
      }

      .news-view .mp-items .date-cards {
        padding: 10px 16px 16px;
        font-size: 0.75rem;
      }

      .news-view .mp-items .date-cards i {
        font-size: 16px;
      } 
  }

  @media (max-width: 1200px) {
    /*=== HOMEPAGE ===*/
    header .navigation .dropdown .dropdown-content {
      top: 100px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-logo img {
      height: 40px;
    }

    header .navigation .dropdown1 .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
      font-size: 0.7rem;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation a {
      font-size: 0.7rem;
      margin-left: 0;
      transition: 0.3s ease;
    }

    header .navigation .dropdown .dropbtn {
      font-size: 0.7rem;
    }

    header .navigation .dropbtn {
      margin-left: 0;
    }

    .footer .box-container .box-logo .logo-kl img {
      width: 110%;
    }
  }

  @media (max-width: 1400px) {
    /*=== HOMEPAGE ===*/
    header .navigation .dropdown .dropdown-content {
      top: 80px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-logo img {
      height: 80px;
    }

    header .navigation .dropdown1 .dropdown-content {
      top: 80px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown1 .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items .column-text p {
      font-size: 0.7rem;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation a {
      font-size: 0.7;
      margin-left: 0;
      transition: 0.3s ease;
    }

    header .navigation .dropbtn {
      margin-left: 0;
    }

    .dropdown-content1 {
      position: fixed;
      top: 100px;
      left: 0px;
      width: 100vw;
      height: 15vw;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 10px;
      opacity: 0;
      pointer-events: none;
      z-index: 9999;
      border-radius: 0px 0px 10px 10px;
      transition: opacity 0.3s;
      padding: 15px 20px;
    }
  }

  @media (max-width: 1700px) {
    /*=== HOMEPAGE ===*/
    header .navigation .dropdown .dropdown-content {
      top: 100px;
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown1 .dropdown-content {
      top: 100px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content1 .column .column-items .column-more a {
      font-size: 0.7rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-logo img {
      height: 80px;
    }

    header .navigation .dropdown1 .dropdown-content {
      top: 100px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown1 .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation a {
      font-size: 1.1rem;
      margin-left: 0;
      transition: 0.3s ease;
    }

    header .navigation .dropbtn {
      margin-left: 0;
      font-size: 1.1rem;
    }
  }

  @media (min-width: 1701px) {
    /*=== HOMEPAGE ===*/
    header .navigation .dropdown .dropdown-content {
      /*top: 120px;*/
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-text p {
      font-size: 1.1rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-more a {
      font-size: 0.9rem;
    }

    header .navigation .dropdown .dropdown-content .column .column-items .column-logo img {
      height: 80px;
    }

    header .navigation .dropdown1 .dropdown-content {
      top: 120px; /* mungkin navbar jadi lebih tinggi di mobile */
      height: auto;
      padding: 20px 20px;
      flex-direction: column;
    }

    header .navigation .dropdown1 .dropdown-content .column {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
    }

    header .navigation .dropdown1 .dropdown-content .column .column-items {
      padding: 15px 10px;
    }

    header .navigation .dropdown1 .dropdown-content .column1 .column-items .column-text p {
      font-size: 1.1rem;
      font-weight: 500;
      width: 85%;
    }

    header .navigation .dropdown1 .dropdown-content .column1 .column-items .column-more a {
      font-size: 0.9rem;
    }

    header .navigation a {
      font-size: 1.3rem;
      margin-left: 0;
      transition: 0.3s ease;
    }

    header .navigation .dropbtn {
      margin-left: 0;
      font-size: 1.3rem;
    }
    .dropdown-content1 {
      position: fixed;
      top: 100px;
      left: 0px;
      width: 100vw;
      height: 12vw;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 10px;
      opacity: 0;
      pointer-events: none;
      z-index: 9999;
      border-radius: 0px 0px 10px 10px;
      transition: opacity 0.3s;
      padding: 15px 20px;
    }

    .news-sec .mp-news .mp-cards .mp-items .img-cards a img {
    width: 100%;
    object-fit: fill;
    height: 400px;
    }

    .news .container-main .mp-news .mp-items .img-cards a img {
      width: 100%;
      height: 250px;
      display: block;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      object-fit: fill;
    }
  }