/* ==================================================
   GLOBAL
================================================== */
*{font-family:'Poppins',sans-serif;}

#about,#service,#client,#contact,#vision_mission{
    padding-top:40px;
}


/* ==================================================
   NAVBAR
================================================== */
nav{
    box-shadow:0 10px 18px rgba(0,0,0,.25);
    overflow: visible !important;
}


/* Navbar */
.navbar .container,
.navbar .container-fluid {
    display: flex;
    align-items: center;
}

/* logo gajiplus */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-brand img {
    height: 65px;
    width: auto; 
    display: block;
}

/* menu hamburger */
.navbar-toggler {
    padding: 4px 8px;
    font-size: 1.4rem;
}
/* logo utama */
.hero-logo{
    text-align:center;
}

.hero-logo-img{
     max-width:360px;
    width:100%;
    height:auto;
    display:block;
    margin:0 auto 10px;
    position: relative;
}

/* teks supported by */
.hero-support{
    margin-top:10px;
    font-size:14px;
    color:#777;
    text-align:center;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

/* garis kiri & kanan */
.hero-support::before,
.hero-support::after{
    content:"";
    flex:1;
    max-width:60px;
    height:2px;
    background:#f9b233;
}

/* teks */
.hero-support strong{
    color:#000;
    font-weight:600;
}

.nav-item{min-width:120px;}

.nav-item a{
    background:#fff;
    margin:8px 6px;
    border-radius:12px;
    padding:5px 10px;
    text-align:center;
    transition:.3s;
}

.nav-item a:hover,
.nav-link.active{
    background:orange;
    color:#fff;
}

.nav-item:last-child a{
    background:none;
    font-weight:700;
}

.btn-orange{
    background:orange!important;
    border-radius:12px;
    color:#fff!important;
}

.btn-white{
    background:#fff!important;
    border-radius:12px;
    border:1px solid #ccc;
}

/* ==================================================
   HOME
================================================== */
#home{
    padding-top:118px;
    padding-bottom:80px;
    min-height:610px;
    background:url('../images/icon_home.png') no-repeat right bottom;
    background-size:80%;
}

.demoButtonOrange{margin-right:10px;}

/* ==================================================
   ABOUT & SERVICE
================================================== */
#about{
    min-height:610px;
    background:url('../images/shape_bg_page_2.png') no-repeat right bottom;
    background-size:contain;
}

#service{min-height:610px;}

/* ==================================================
   SLICK
================================================== */
.slick-dots{display:none!important;}
.slick-prev:before,.slick-next:before{color:orange;font-size:26px}

/* ==================================================
   DEMO BUTTON
================================================== */
.demobutton{
    background:#fff;
    padding:10px 26px;
    border-radius:24px;
    border:1px solid #ddd;
    box-shadow:0 8px 15px rgba(0,0,0,.25);
    transition:.3s;
}
.demobutton:hover{background:orange;color:#fff;}
.demobutton.disable{background:#d2d0d0;cursor:not-allowed}

/* ==================================================
   VISION & MISSION
================================================== */
#vision_mission{min-height:610px;}

#vision{
    border:2px dashed orange;
    border-top:none;border-right:none;
}

#vision p{font-size:20px;}

.dots1,.dots2{
    font-size:30px;height:80px;width:80px;
    border:2px dashed orange;border-radius:50%;
    background:#fff;line-height:80px;text-align:center;
    color:orange;
}

.dots1{left:-40px;top:0}
.dots2{right:85px;top:-50px}

.judul-mission{font-weight:700}
.judul-mission span{font-size:50px;color:orange;text-decoration:underline}
.judul-section{
    position:relative;
    font-weight:700;
    padding-bottom:14px;
    margin-top:10px;
}

/* Garis pendek (default semua menu) */
.judul-section::after{
    content:"";
    width:60px;
    height:3px;
    background:orange;
    display:block;
    margin:12px auto 0;
    border-radius:5px;
}


/* ==================================================
   CLIENT
================================================== */
#client{background:linear-gradient(180deg,#fff,#f9f9f9);}
.client-logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:30px}
.client-logo{
    height:130px;background:#fff;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 6px 16px rgba(11,44,95,.08);
    transition:.35s;
}
.client-logo:hover{
    transform:translateY(-8px) scale(1.03);
    border-color:orange;
    box-shadow:0 12px 28px rgba(245,166,35,.35);
}
.client-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:14px;
    filter:grayscale(100%);
    opacity:.85;
    transition:.3s;
}
.client-logo:hover img{filter:none;opacity:1}
.client-name{text-align:center;margin-top:10px;font-weight:600}

/* ==================================================
   CONTACT
================================================== */
#contact{
    min-height:610px;
    background:url('../images/wave.svg') no-repeat bottom/cover;
}

#contact h5{color:#fff;font-weight:700}

#contact .form-control{
    border:0;border-radius:22px;
    padding:14px 20px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

#contact .form-control:focus{box-shadow:0 0 0 2px #fff}

#contact textarea{resize:none}

#contact .btn-outline-light{
    width:100%;border-radius:30px;
    background:#fff;color:#ff9800;
    font-weight:700;border:0;padding:13px;
}
#contact .btn-outline-light:hover{background:#ff9800;color:#fff}

.contact-social img:hover{transform:translateY(-10px) scale(1.08)}
/* ================= ICON CONTACT ANIMATION ================= */

.contact-social img{
    width:70px;
    animation: floatIcon 3.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,.35));
    transition:.35s;
}

/* beda delay supaya tidak naik bareng */
.contact-social a:nth-child(1) img{animation-delay:0s;}
.contact-social a:nth-child(2) img{animation-delay:.4s;}
.contact-social a:nth-child(3) img{animation-delay:.8s;}
.contact-social a:nth-child(4) img{animation-delay:1.2s;}

/* hover */
.contact-social img:hover{
    transform: scale(1.2) translateY(-8px);
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.45));
}

/* animasi naik turun */
@keyframes floatIcon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}


/* ==================================================
   FOOTER
================================================== */
.footer-menu{list-style:none;padding:0}
.footer-menu a{text-decoration:none;color:#000}
.footer-menu a:hover{color:#00d0ff}

/* ==================================================
   RESPONSIVE
================================================== */
@media(max-width:768px){
    #home{background:none}
    .judul-section{font-size:30px}
    .judul-mission{font-size:23px}
    .client-logo{height:110px}
}

/* ================= INPUT PESAN ERROR ================= */

.form-control.error{
    border:2px solid #ff3b3b!important;
    background:#fff5f5;
    color:#ff3b3b;
}

.form-control.error::placeholder{
    color:#ff3b3b;
}
.about-mockup{
    min-height:520px;
}

.about-mockup .main-mockup{
    width:100%;
    position:relative;
    z-index:1;
}

.about-mockup .float-mockup{
    position:absolute;
    right:-50px;
    top:80px;
    width:60%;
    z-index:2;
    pointer-events:none;
}
/* Geser kolom teks supaya tidak ketabrak mockup */
@media (min-width:992px){
    #about .col-lg-7{
        padding-left:110px;
    }
}

/* container gambar */
#service .card-body{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Area gambar FIX */
#service .card-body img{
    width:260px;
    height:480px;
    object-fit:contain;
    display:block;

   /* samakan baseline */
    margin-top:20px;
    margin-bottom:12px;
}

/* Hapus efek img-fluid */
#service .card-body img.img-fluid{
    max-width:none;
    height:480px;
}

/* tombol konsisten */
#service .demobutton{
    margin-top:0;
}

/* kurangi padding section */
#service{
    padding-top:4px !important;
}

/* override py-5 */
#service .container-fluid{
    padding-top:10px !important;
    padding-bottom:20px !important;
}

/* override pt-5 & mb-5 di judul */
#service .col-lg-12{
    padding-top:4px !important;
    margin-bottom:12px !important;
}

/* hapus mt-5 */
#service .col-10{
    margin-top:4px  !important;
}

/* judul lebih nempel yang our service */
#service .judul-section{
   margin-top:80px !important;
    padding-bottom:6px;
}