:root {

    --primary-color: #19559C;
    --secondary-color: #192C65;
    --accent-color: #1A87C2;
    --warning-color: #F09C25;

    --light-bg: #F5F7FA;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--light-bg);
    color: #333;
    overflow-x: hidden;
}
.banner {
    margin-top: 200px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
/* NAVBAR */
.navbar {
    background: linear-gradient(
        90deg,
        var(--secondary-color),
        var(--primary-color)
    );

    padding: 15px 0;
}

.nav-link {
    color: white !important;
    margin-left: 10px;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--warning-color) !important;
}
/* Latar Belakang Dropdown */
    .custom-dropdown-menu {
        background-color: #174285 !important; /* Warna biru sesuai header */
        border: 1px solid #103267;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Item Menu Dropdown */
    .custom-dropdown-menu .dropdown-item {
        color: #ffffff !important;
        padding: 10px 18px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
    }

    /* Efek Hover / Disorot Kursor */
    .custom-dropdown-menu .dropdown-item:hover,
    .custom-dropdown-menu .dropdown-item:focus {
        background-color: #103267 !important; /* Biru sedikit lebih gelap */
        color: #f5a623 !important;             /* Warna oranye sesuai logo */
    }

    /* Garis Pembatas (Pemisah) */
    .custom-dropdown-menu .dropdown-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
/* HERO */
.hero-section {
/* Memanggil nama keyframe 'heroBg' di atas */
    transition: background 0.5s ease;
    color: white;
}
.hero-section.home-page{
/* Memanggil nama keyframe 'heroBg' di atas */
    animation: heroBg 6s linear infinite;
    transition: background 0.5s ease;
    color: white;
    min-height: 100vh;
}

.hero-title {
    padding-top: 50%;
    font-size: 60px;
    font-weight: bold;
}
/* --- Container Utama Anda (Tetap) --- */
.hero-section.about-us {
background-image: url('../img/office.png'); /* jalur gambar Anda */
    background-size: cover;
    background-position: 10% 90%;
    background-repeat: no-repeat;
    
    /* Menggunakan Flexbox untuk mengetengahkan isi secara sempurna */
    display: flex;
    justify-content: center; /* Tengah secara Horizontal (Kiri-Kanan) */
    align-items: center;     /* Tengah secara Vertikal (Atas-Bawah) */
    
    /* Tentukan tinggi section background */
    min-height: 80vh;        /* Menggunakan 80% tinggi layar monitor/HP */
    width: 100%;
}
.hero-section.services {
background-image: url('../img/services.png'); /* jalur gambar Anda */
    background-size: cover;
    background-position: 10% 90%;
    background-repeat: no-repeat;
    
    /* Menggunakan Flexbox untuk mengetengahkan isi secara sempurna */
    display: flex;
    justify-content: center; /* Tengah secara Horizontal (Kiri-Kanan) */
    align-items: center;     /* Tengah secara Vertikal (Atas-Bawah) */
    
    /* Tentukan tinggi section background */
    min-height: 80vh;        /* Menggunakan 80% tinggi layar monitor/HP */
    width: 100%;
}
@keyframes lights {
  0% {
    color: hsl(210, 50%, 85%); /* Biru muda lembut */
    text-shadow:
      0 0 1em hsla(30, 100%, 50%, 0.3),                 /* Glow Oranye Utama */
      0 0 0.125em hsla(30, 100%, 60%, 0.4),             /* Core Oranye */
      -1em -0.125em 0.5em hsla(25, 100%, 55%, 0),        /* Glow Oranye Kiri */
      1em 0.125em 0.5em hsla(210, 100%, 55%, 0);        /* Glow Biru Kanan */
  }
  
  30% { 
    color: hsl(210, 80%, 92%);
    text-shadow:
      0 0 1em hsla(30, 100%, 50%, 0.6),
      0 0 0.125em hsla(30, 100%, 60%, 0.6),
      -0.5em -0.125em 0.25em hsla(25, 100%, 55%, 0.3),
      0.5em 0.125em 0.25em hsla(210, 100%, 55%, 0.5);
  }
  
  40% { 
    color: #ffffff; /* Inti teks menjadi putih terang saat puncak animasi */
    text-shadow:
      0 0 1em hsla(30, 100%, 50%, 0.8),
      0 0 0.125em hsla(30, 100%, 85%, 0.8),
      -0.25em -0.125em 0.125em hsla(25, 100%, 55%, 0.4),
      0.25em 0.125em 0.125em hsla(210, 100%, 60%, 0.6);
  }
  
  70% {
    color: hsl(210, 80%, 92%);
    text-shadow:
      0 0 1em hsla(30, 100%, 50%, 0.6),
      0 0 0.125em hsla(30, 100%, 60%, 0.6),
      0.5em -0.125em 0.25em hsla(25, 100%, 55%, 0.3),
      -0.5em 0.125em 0.25em hsla(210, 100%, 55%, 0.5);
  }
  
  100% {
    color: hsl(210, 50%, 85%);
    text-shadow:
      0 0 1em hsla(30, 100%, 50%, 0.3),
      0 0 0.125em hsla(30, 100%, 60%, 0.4),
      1em -0.125em 0.5em hsla(25, 100%, 55%, 0),
      -1em 0.125em 0.5em hsla(210, 100%, 55%, 0);
  }
}

/* 1. Definisi Keyframe untuk Fade In */
@keyframes fadeInJudul {
  from {
    opacity: 0;
    transform: translateY(0px); /* Opsional: memberikan efek sedikit naik dari bawah */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Styling Elemen .judul */
.judul {
  margin: 0;
  display: block;
  font: 100% / 1.5 Raleway, sans-serif;
  font-size: 3.5rem;
  
  /* Menggabungkan dua animasi sekaligus:
     1. fadeInJudul: berjalan 1.2 detik (sekali, tetap terlihat dengan 'forwards')
     2. lights: berjalan 5 detik berulang terus-menerus (infinite) setelah delay 750ms
  */
  animation: 
    fadeInJudul 1.8s ease-out forwards,
    lights 5s 750ms linear infinite;
}
/* BUTTON */
.btn-primary {
    background: var(--warning-color);
    border: none;
}

.btn-primary:hover {
    background: #d68912;
}

/* SECTION */
.section-padding {
    padding: 100px 0;
}

.section-title {
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 50px;
}

/* CARD */
.service-card,
.portfolio-card {

    border: none;
    border-radius: 20px;
    transition: 0.3s;
}

.service-card:hover,
.portfolio-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* ICON */
.service-icon {
    font-size: 60px;
    color: var(--primary-color);
}

/* FOOTER */
.footer-section {

    background: linear-gradient(
        90deg,
        var(--secondary-color),
        var(--primary-color)
    );
}

.footer-section a {
    color: white;
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--warning-color);
}

/* CONTACT */
.contact-box {
    background: rgb(255, 255, 255);
    border-radius: 20px;
}
/* Container Utama Slider */
.logo-slider {
    overflow: hidden;
    padding: 30px 0;
    background: #fff; /* Ubah sesuai background web Anda */
    position: relative;
    width: 100%;
}

/* Track/Jalur Logo Bergerak */
.logo-slide-track {
    display: flex;
    width: calc(250px * 10); /* Total lebar: (Lebar item x Jumlah total item termasuk duplikat) */
    animation: scrollInfinite 20s linear infinite;
}

/* Menghentikan slider saat kursor mouse menyentuh logo */
.logo-slider:hover .logo-slide-track {
    animation-play-state: paused;
}

/* Kotak Tiap Logo */
.slide-item {
    width: 250px; /* Lebar masing-masing area logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

/* Pengaturan Gambar Logo */
.slide-item img {
    max-width: 100%;
    height: auto;
    /*filter: grayscale(100%); /* Opsional: Membuat logo estetik hitam putih */
    opacity: 0.6;
    transition: 0.3s;
}

/* Logo kembali berwarna saat di-hover */
.slide-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Animasi Looping Menggeser Setengah dari Total Lebar Track */
@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 5)); /* Geser sejauh jumlah logo asli (5 logo) */
    }
}
/*droping text homepage */
/* Container Utama Teks agar Sejajar Presisi */
.hero-headline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
    font-size: 3rem; /* Tentukan 1 ukuran font utama untuk SEMUA teks */
    font-weight: 300;
    color: #ffffff;
    margin-top: 50vh;
    font-weight: 800;
    /* --- PENAMBAHAN OUTLINE TEKS --- */
    text-shadow: 2px 2px #555555;
}

.static-text {
    white-space: nowrap;
}

.dropping-texts {
    display: inline-block;
    position: relative;
    width: 300px;        
    height: 1.2em;
    vertical-align: middle;
    text-align: center;
}
.dropping-texts > div {
    font-size: 0px;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    font-weight: 800;
    color: #f0a224;     
    white-space: nowrap;
}

/* Timing Animasi 3 Div (Total Loop 6 Detik) */
.dropping-texts > div:nth-child(1) {
    animation: roll 6s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
    animation: roll 6s linear infinite 2s;
}
.dropping-texts > div:nth-child(3) {
    animation: roll2 6s linear infinite 4s; /* Elemen ke-3 pakai roll2 (efek perbesar) */
}
.container2{
 margin-top: 50px;   
}
/* Keyframe roll Asli CodePen (Disesuaikan Persentasenya untuk 3 Item) */
@keyframes roll {
    0% {
        font-size: 0px;
        opacity: 0;
        transform: rotate(-25deg) translateY(-30px);
    }
    3% {
        opacity: 1;
        transform: rotate(0deg) translateY(0);
    }
    5% {
        font-size: inherit; /* Mengambil ukuran font 3rem dari induknya */
        opacity: 1;
        transform: rotate(0deg);
    }
    30% {
        font-size: inherit;
        opacity: 1;
        transform: rotate(0deg);
    }
    37% {
        font-size: 0px;
        opacity: 0.5;
        transform: rotate(15deg) translateY(100px);
    }
    100% {
        font-size: 0px;
        opacity: 0;
    }
}

/* Keyframe roll2 Asli CodePen (Efek Membesar di Akhir) */
@keyframes roll2 {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  30% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  37% {
    font-size:1500px;
    opacity:0;
    margin-left:-1000px;
    margin-top:-800px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}

/* Responsif untuk Layar HP */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 1.8rem;
        flex-direction: column;
    }
    .dropping-texts {
        width: 100%;
        height: 1.4em;
    }
}
@keyframes heroBg{
  /* Kata 1: TRUSTED (Dimulai dengan Biru Navy) */
  0%, 30% {
    background-image: url("../img/trust.jpg");
    background-repeat: no-repeat;  /* Mencegah gambar mengulang (terpotong-potong) */
    background-position: center;   /* Memosisikan gambar tepat di tengah-tengah */
    background-size: cover;
    width: 100%;
  }

  /* Transisi ke Kata 2 */
  33%, 63% {
    background-image: url("../img/warehouse.png");
    background-repeat: no-repeat;  /* Mencegah gambar mengulang (terpotong-potong) */
    background-position: center;   /* Memosisikan gambar tepat di tengah-tengah */
    background-size: cover;
    width: 100%;
  }

  /* Transisi ke Kata 3: EXPERTS */
  66%, 96% {
    background-image: url("../img/trucking.png");
    background-repeat: no-repeat;  /* Mencegah gambar mengulang (terpotong-potong) */
    background-position: center;   /* Memosisikan gambar tepat di tengah-tengah */
    background-size: cover;
    width: 100%;
  }

  /* Kembali ke Warna Awal untuk Smooth Loop */
  100% {
    background-image: url("../img/trust.jpg");
    background-repeat: no-repeat;  /* Mencegah gambar mengulang (terpotong-potong) */
    background-position: center;   /* Memosisikan gambar tepat di tengah-tengah */
    background-size: cover;
    width: 100%;
  }
}
/* Container Utama Timeline */
    .timeline {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px 0;
    }

    /* Garis Vertikal di Tengah */
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background-color: #2563eb;
      transform: translateX(-50%);
    }

    /* Baris Item Timeline */
    .timeline-item {
      position: relative;
      width: 50%;
      padding: 10px 40px;
      margin-bottom: 40px;
    }

    /* Posisi Sisi Kiri & Kanan */
    .timeline-item.left {
      left: 0;
      text-align: right;
    }

    .timeline-item.right {
      left: 50%;
      text-align: left;
    }

    /* Node / Titik Lingkaran di Tengah */
    .timeline-icon {
      position: absolute;
      top: 20px;
      width: 40px;
      height: 40px;
      background-color: #2563eb;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      z-index: 2;
      box-shadow: 0 0 0 4px #fff;
      
      /* Animasi pada ikon */
      opacity: 0;
      transform: scale(0);
      transition: all 0.5s ease;
    }

    .timeline-item.left .timeline-icon {
      right: -20px;
    }

    .timeline-item.right .timeline-icon {
      left: -20px;
    }

    /* Kartu Konten */
    .timeline-content {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      
      /* STATE AWAL SEBELUM DI-SCROLL (Tersembunyi) */
      opacity: 0;
      transition: all 0.8s ease-out;
    }

    /* State Awal Arah Geser */
    .timeline-item.left .timeline-content {
      transform: translateX(-80px);
    }

    .timeline-item.right .timeline-content {
      transform: translateX(80px);
    }

    /* Label Badge */
    .badge {
      display: inline-block;
      padding: 4px 12px;
      font-size: 0.8rem;
      border-radius: 4px;
      color: #fff;
      margin-bottom: 10px;
    }
    .badge-1 { background-color: #1e3a38; }
    .badge-2 { background-color: #3b8ffd; }
    .badge-3 { background-color: #949e35; }
    .badge-4 { background-color: #f78f06; }
    .badge-5 { background-color: #0212fc; }

    .card-title {
      font-size: 1.25rem;
      margin-bottom: 8px;
    }

    .card-text {
      font-size: 0.95rem;
      color: #666;
      line-height: 1.5;
    }

    /* --- STATE AKTIF SAAT ELEMEN MASUK LAYAR (ON SCROLL) --- */
    .timeline-item.show .timeline-content {
      opacity: 1;
      transform: translateX(0);
    }

    .timeline-item.show .timeline-icon {
      opacity: 1;
      transform: scale(1);
    }

    /* --- LAYOUT RESPONSIF (Tampilan Perangkat Seluler) --- */
    @media (max-width: 768px) {
      .timeline::before {
        left: 30px;
      }

      .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 15px;
      }

      .timeline-item.left,
      .timeline-item.right {
        left: 0;
        text-align: left;
      }

      .timeline-item.left .timeline-icon,
      .timeline-item.right .timeline-icon {
        left: 10px;
        right: auto;
      }

      .timeline-item.left .timeline-content,
      .timeline-item.right .timeline-content {
        transform: translateX(60px);
      }
    }
/* Container Luar */
.flip-box {
    background-color: transparent;
    width: 100%;
    height: 280px;
    perspective: 1000px;
}

/* Pembungkus Dalam yang Berputar */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Pemicu HOVER: Ketika .flip-box di-hover, .flip-box-inner diputar */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Sisi Depan dan Sisi Belakang */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0.5rem;
}

/* Sisi Depan */
.flip-box-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
}

/* Sisi Belakang */
.flip-box-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}