/* =========================================================
   Base
========================================================= */
body{
  font-family:'Poppins',sans-serif;
  color:#101010;
  background:#fff;
}

/* Spacing helpers */
.layout_padding{padding:75px 0;}
.layout_padding2{padding:45px 0;}
.layout_padding-top{padding-top:75px;}
.layout_padding-bottom{padding-bottom:75px;}
.layout_padding2-top{padding-top:45px;}
.layout_padding2-bottom{padding-bottom:45px;}

/* Heading decoration */
.custom_heading-container{display:flex;}
.custom_heading-container h2{
  color:#000;font-weight:700;position:relative;
}
.custom_heading-container h2::before{
  content:"";width:60px;height:3px;position:absolute;left:0;bottom:-2px;background:#6bd1bd;
}
.custom_heading-container h2::after{
  content:"";width:10px;height:10px;position:absolute;top:50%;right:-15px;transform:translateY(-50%);background:#fb1004;border-radius:50%;
}

/* =========================================================
   Header / Top Nav
========================================================= */
.hero_area{height:100vh;background-image:url(../images/hero-bg.png);}
.sub_page .hero_area,
.hero_area.sub_pages{height:auto;}

.header_section .active a{color:#0caa7d!important;}
.header_section .call_btn{margin-left:auto;}
.header_section .call_btn a{color:#000;}
.header_section .container-fluid{padding:0 25px;}
.header_section .nav_container{margin:0 auto;}

.custom_nav-container{z-index:99999;padding:15px 0;}
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link{padding:10px 30px;color:#070101;text-align:center;}
.custom_nav-container .user_option{display:flex;flex-direction:column;align-items:center;}
.custom_nav-container .user_option .login_btn-container a{display:inline-block;padding:10px 30px;color:#070101;text-align:center;}
.custom_nav-container .navbar-toggler{outline:none;}
.custom_nav-container .navbar-toggler .navbar-toggler-icon{background-image:url(../images/menu.png);background-size:55px;}

a,a:hover,a:focus{text-decoration:none;}
a:hover,a:focus{color:initial;}
.btn,.btn:focus{outline:none!important;box-shadow:none;}
.nav_search-btn{
  background-image:url(../images/search-icon-black.png);
  background-size:22px;background-repeat:no-repeat;
  width:35px;height:35px;padding:0;border:none;
}
.navbar-brand img{width:45px;}
.navbar-brand,.navbar-brand:hover{color:#0878a0;font-size:22px;font-weight:600;text-transform:uppercase;}

/* =========================================================
   Slider / Hero content
========================================================= */
.slider_section{
  position:relative;z-index:1;margin-top:-75px;
}
.slider_section::before,
.slider_section::after{pointer-events:none;}
.slider_section .carousel{overflow:hidden;}
.slider_section .row{align-items:center;}
.slider_section .detail-box h1{font-size:4rem;font-weight:bold;}
.slider_section .detail-box p{margin:15px 0;}
.slider_section .detail-box a{display:inline-block;padding:10px 45px;background:#ffcc07;color:#4b2121;border-radius:0;margin-top:15px;}
.slider_section .detail-box a:hover{background:#b00b03;color:#fff;}
.slider_section .img-box img{width:100%;}
.slider_section .carousel-control-prev,
.slider_section .carousel-control-next{
  position:absolute;left:2.5%;top:47%;width:45px;height:45px;border:none;
  background-color:#0caa7d;background-repeat:no-repeat;background-size:10px;background-position:center;opacity:1;border-radius:7px;
}
.slider_section .carousel-control-prev{transform:translate(-50%,55px);}
.carousel-control-prev:hover,.carousel-control-next:hover{background-color:#fb1004;}
.carousel-control-prev{background-image:url(../images/left-arrow-black.png);}
.carousel-control-prev:hover{background-image:url(../images/left-arrow-white.png);}
.carousel-control-next{background-image:url(../images/right-arrow-black.png);}
.carousel-control-next:hover{background-image:url(../images/right-arrow-white.png);}

/* Keep for legacy if used somewhere */
.menu_fixed-position{top:0;left:0;right:0;width:100%;z-index:99999999999999999999999999;}

/* =========================================================
   Sticky secondary menu (custom_menu)
========================================================= */
.custom_menu-container{
  position:sticky;top:0;z-index:4000;background:#4b2121;
}
.custom_menu-container .custom_menu{display:flex;justify-content:space-between;}
.custom_menu-container .custom_menu .navbar-nav{display:flex;flex-direction:row;}
.custom_menu-container .custom_menu .navbar-nav .nav-link{padding:15px 30px;color:#fff;text-align:center;}
.custom_menu-container .custom_menu .user_option{display:flex;align-items:flex-end;}
.custom_menu-container .custom_menu .user_option .login_btn-container a{display:inline-block;padding:15px 30px;color:#fff;text-align:center;}
.custom_menu-container .nav_search-btn{background-image:url(../images/search-icon.png);}

/* active underline */
.custom_menu .nav-link.active,
.custom_menu .nav-item.active>.nav-link{font-weight:700;position:relative;}
.custom_menu .nav-item.active>.nav-link::after{
  content:"";display:block;width:28px;height:3px;background:#fff;border-radius:3px;margin:6px auto 0;
}

/* Make sure header sits above hero; menu above everything */
.header_section,.custom_menu-container{z-index:2000;}

/* =========================================================
   About
========================================================= */
.about_section .row{align-items:center;}
.about_section .img-box img{width:100%;}
.about_section .detail-box p{margin-top:25px;}
.about_section .detail-box a{display:inline-block;padding:12px 45px;background:#fb1004;color:#fff;border-radius:10px;margin-top:25px;}
.about_section .detail-box a:hover{background:#b00b03;color:#fff;}

/* =========================================================
   SECTOR CARDS (do_section)
   - Solid brand colors
   - Pointer proximity glow (uses --mx / --my from JS)
   - Comma-separated item list
========================================================= */
.do_section .row{justify-content:center;gap:8px 0;}

.do_section .content-box{
  --accent:#0ca57a; /* default (green) */
  background:
    radial-gradient(100px 100px at var(--mx,-200px) var(--my,-200px),
      rgba(255,255,255,.18), transparent 60%),
    var(--accent);
  color:#fff;border:none;border-radius:18px;
  padding:22px 22px 20px;min-height:220px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 12px 24px rgba(0,0,0,.14);
  transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s,filter .25s;
}
.do_section .content-box.bg-green{--accent:#0ca57a;}
.do_section .content-box.bg-red{--accent:#fb1004;}

/* icon */
.do_section .content-box .icon-wrap{
  width:54px;height:54px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
  margin-bottom:12px;
}
.do_section .content-box .icon-wrap i{font-size:22px;color:#fff;}
.do_section .content-box .icon-wrap img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);}

/* title */
.do_section .content-box h6{
  margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.2;color:#fff;
}

/* item list — comma separated (no bullets) */
.do_section .content-box .sector-list{list-style:none;padding:0;margin:8px 0 0;text-align:center;}
.do_section .content-box .sector-list li{
  display:inline;color:#fff;opacity:.95;font-size:15px;padding:0;margin:0;
}
.do_section .content-box .sector-list li+li::before{content:", ";display:inline;}

/* hover */
@media (hover:hover){
  .do_section .content-box:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 30px rgba(0,0,0,.22);
    filter:saturate(1.03) brightness(1.02);
  }
}

/* =========================================================
   Skills
========================================================= */
.skill_section{background-image:url(../images/skill-bg.jpg);background-size:cover;background-repeat:no-repeat;}
.skill_section .row .col-md-3{
  display:flex;justify-content:center;text-align:center;color:#fff;margin:25px 0;
}
.skill_section .row .col-md-3 h6{font-weight:bold;margin-top:20px;font-size:18px;}
.skill_section .skill_padding{padding:75px 0;}
.skill_section .custom_heading-container{justify-content:flex-end;}
.skill_section .custom_heading-container h2{color:#fff;}
.skill_section .custom_heading-container h2::before,
.skill_section .custom_heading-container h2::after{background:#fff;}
.skill_section .progress_text{font-size:24px!important;color:#fff;font-weight:bold;}

/* =========================================================
   Portfolio
========================================================= */
.portfolio_section .row .col-md-6{margin:45px 0;}
.portfolio_section .box{position:relative;border-radius:10px;overflow:hidden;}
.portfolio_section .box.b-1,.portfolio_section .box.b-4{margin-bottom:20px;}
.portfolio_section .box img{width:100%;}
.portfolio_section .box h4{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;text-align:center;color:#fff;font-weight:bold;font-size:28px;
  filter:drop-shadow(8px 3px 8px #000);
}

/* =========================================================
   Clients
========================================================= */
.client_section .custom_heading-container{justify-content:center;}
.client_section .client_container{display:flex;align-items:flex-start;}
.client_section .client_box{background:#f3f3f3;margin:0 25px;padding:25px;border-radius:20px;}
.client_section .client_box.b-2{margin-top:135px;}
.client_section .client_box .client-id{display:flex;align-items:flex-end;}
.client_section .client_box .client-id .img-box{border-radius:10px;overflow:hidden;}
.client_section .client_box .client-id .img-box img{width:100%;}
.client_section .client_box .client-id .name{margin-left:10px;}
.client_section .client_box .client-id .name h5{text-transform:uppercase;color:#0caa7d;font-weight:bold;}
.client_section .client_box .detail{margin-top:25px;}
.client_section .carousel-control-prev,
.client_section .carousel-control-next{
  width:60px;height:60px;border-radius:100%;top:40%;background-size:10px;
}
.client_section .carousel-control-prev{left:-75px;}
.client_section .carousel-control-next{right:-75px;}

/* =========================================================
   Contact
========================================================= */
.contact_section{background:#ffcc07;color:#4b2121;background-size:cover;background-repeat:no-repeat;}
.contact_section .row{align-items:center;}
.contact_section h2{margin-bottom:45px;font-family:'Roboto',sans-serif;font-weight:bold;}
.contact_section form{padding-right:35px;}
.contact_section input{
  width:100%;border:0;height:50px;border-radius:25px;margin-bottom:25px;
  padding-left:25px;background:#fff;border:1px solid #bbb;outline:none;color:#101010;
}
.contact_section input::placeholder{color:#131313;}
.contact_section input.message-box{height:120px;}
.contact_section button{
  background:#4b2121;padding:15px 55px;outline:none;border:none;border-radius:30px;color:#fff;font-family:'Roboto',sans-serif;
}
.contact_section button:hover{background:#cc0404;}

/* =========================================================
   Info / Footer
========================================================= */
.info_section{background:#201f33;color:#fff;font-family:'Open Sans',sans-serif;}
.info_section h4{font-weight:bold;margin-bottom:20px;}
.info_links ul{padding-left:15px;}
.info_links ul .active::before{background:#0caa7d;}
.info_links ul li{list-style:none;position:relative;}
.info_links ul li::before{
  content:"";left:-15px;top:50%;position:absolute;width:8px;height:8px;background:#fff;transform:translateY(-50%);
}
.info_links ul li a{color:#fff;}
.info_form input{width:100%;border:none;height:45px;margin-bottom:25px;padding-left:25px;background:#eaeaea;outline:none;color:#101010;}
.info_form button{background:#0caa7d;padding:8px 35px;outline:none;border:none;border-radius:30px;color:#fff;text-transform:uppercase;}
.info_form button:hover{background:#097a5a;}
.info_social .social_container{display:flex;}
.info_social .social_container a{margin:0 5px;}
.info_social .social_container a img{width:35px;}
.info_contact>div{display:flex;align-items:flex-start;}
.info_contact>div img{width:20px;height:auto;margin-right:12px;}

/* Footer */
.footer_section{background:#201f33;font-weight:500;font-family:'Roboto',sans-serif;}
.footer_section p{
  border-top:1px solid #fff;width:60%;color:#fff;margin:0 auto;text-align:center;padding:20px 35px;
}
.footer_section a{color:#fff;}

/* Map responsive wrapper */
.map-responsive{
  position:relative;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:10px;
}
.map-responsive iframe{
  position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* ==== COMPACT DO CARDS ==== */
.do_section .content-box{
  padding:16px 18px;           /* 22px -> 16px */
  min-height:170px;            /* 220px -> 170px (boleh 160) */
  border-radius:14px;          /* 18px -> 14px */
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.do_section .content-box .icon-wrap{
  width:42px; height:42px;     /* 54px -> 42px */
  border-radius:12px; 
  margin-bottom:8px;
}
.do_section .content-box .icon-wrap i{ font-size:18px; }  /* 22px -> 18px */

.do_section .content-box h6{
  font-size:15px;              /* 16px -> 15px */
  margin:0 0 6px 0;
}
.do_section .content-box .sector-list{ margin-top:2px; }
.do_section .content-box .sector-list li{
  font-size:13.5px;            /* 14–15 -> 13.5 */
}

/* grid jarak antar kartu sedikit rapat */
.do_section .row{ row-gap:16px; }

/* mobile: biar fleksibel tingginya */
@media (max-width:575.98px){
  .do_section .content-box{ min-height:unset; }
}

/* === Perbaiki koma (tanpa spasi sebelum koma) === */
.do_section .content-box .sector-list li::before{ display:none !important; }
.do_section .content-box .sector-list li:not(:last-child)::after{ content:", "; }


/* ===== Logo Marquee ===== */
.marquee-section{
  background:#f4f7fb;               /* latar lembut */
  padding-top: 28px; padding-bottom: 28px;
  border-radius: 10px;
}

.marquee{
  --gap: clamp(40px, 6vw, 140px);   /* jarak antar logo */
  --speed: 28s;                     /* ubah untuk cepat/lambat */
  overflow:hidden; width:100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track{
  display:flex; align-items:center;
  gap: var(--gap);
  width: max-content;
  /* bergerak dari kanan->kiri by default (0 -> -50%) */
  animation: marquee-scroll var(--speed) linear infinite;
}

.marquee.is-ltr .marquee__track{     /* kiri -> kanan */
  animation-direction: reverse;
}

@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* karena list digandakan */
}

.marquee__item{
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));
}

.marquee__item img{
  height: clamp(34px, 6vw, 64px);    /* skala responsif */
  width: auto; object-fit: contain;
  display:block;
  transition: transform .2s ease;
  /* Boleh aktifkan gaya di bawah kalau mau konsisten warna:
  filter: grayscale(0) contrast(1.05);
  */
}

@media (hover:hover){
  .marquee:hover .marquee__track{
    animation-play-state: paused;    /* berhenti saat di-hover */
  }
  .marquee__item img:hover{
    transform: translateY(-2px) scale(1.03);
  }
}

/* Hormati preferensi user yang tak suka animasi */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* ==== Fix: hapus bullet & besarkan logo ==== */
.marquee__track{ list-style:none; padding:0; margin:0; }
.marquee__item{ list-style:none; }

.marquee{ 
  /* jarak antar logo sedikit lebih lega saat logo dibesarkan */
  --gap: clamp(48px, 8vw, 160px);
}

/* besarkan tinggi logo (silakan atur angka kalau mau) */
.marquee__item img{
  height: clamp(72px, 9vw, 140px);   /* dulu 34–64px */
}

.about_section {
  margin-top: -40px;
  margin-bottom: -40px;
}

/* Center nav desktop custom_menu */
.custom_menu-container .custom_menu{
  display:flex;
  justify-content:center;      /* ⬅️ ganti dari space-between */
}

.custom_menu-container .custom_menu .navbar-nav{
  display:flex;
  flex-direction:row;
  justify-content:center;      /* ⬅️ pastikan ul-nya center */
  gap: 12px;                   /* jarak antar item; boleh 20px sesuai selera */
  margin: 0 auto;              /* bantu center jika container melebar */
}

/* Pastikan padding kiri-kanan konsisten (pl-0 sudah dihapus di Blade) */
.custom_menu-container .custom_menu .navbar-nav .nav-link{
  padding: 15px 30px;
}

/* ===== Keunggulan (image cards) ====================================== */
.kg-card{
  /* background image dari inline style: --bg */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.68) 100%),
    var(--bg) center/cover no-repeat;
  border-radius: 18px;
  height: 180px;                 /* ubah tinggi kartu di sini */
  padding: 16px 18px;
  color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .22s cubic-bezier(.2,.6,.2,1), box-shadow .22s;
}
.kg-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.24);
}

.kg-title{
  margin:0;
  font-size:14px; line-height:1.15;
  letter-spacing:.4px; font-weight:800; text-transform:uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.kg-sub{
  margin:.3rem 0 0;
  font-size:13px; line-height:1.35; opacity:.95;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* grid gap yang rapi */
.do_section .row.gx-3 { --bs-gutter-x: 1rem; }  /* kalau pakai Bootstrap 4/5 */
.do_section .row.gy-4 { row-gap: 1.25rem; }

/* responsive: kartu sedikit lebih tinggi di layar besar */
@media (min-width: 992px){
  .kg-card{ height: 210px; }
}
/* ==================================================================== */

/* Background untuk section Keunggulan */
.bg-keunggulan{
  background:#fff6f6;
}

/* (opsional) biar jarak dalam section terasa lega di layar kecil juga */
.bg-keunggulan .container{
  padding-top: 24px;
  padding-bottom: 24px;
}