/* Hero Background */
.hero {
    height: 500px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  
  .hero-bg {
    background: url('https://via.placeholder.com/1200x500') no-repeat center center;
    background-size: cover;
    position: absolute;
    inset: 0;
    z-index: 1;
    filter: brightness(0.75);
  }
  
  .hero-box {
    position: relative;
    z-index: 2;
    max-width: 500px;
    border-radius: 8px;
  }
  
  /* Navbar Active Style */
  .navbar .nav-link.active {
    font-weight: 700;
    color: #007bff !important;
    border-bottom: 2px solid #007bff;
  }
  
  /* Features Card Hover Effect */
  .features .shadow-sm:hover {
    transform: translateY(-5px);
    transition: 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  .navbar {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
    top: 0;
    width: 100%;
    padding: 16px 24px;
    transition: background-color 0.3s, box-shadow 0.3s;
    z-index: 999;
    background-color: #036441;
  }
  
  .navbar.scrolled {
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Contoh isi styling lainnya */
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
  }
  
  .nav-menu li a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
  }
  
  .navbar.scrolled .nav-menu li a {
    color: #333;
  }
  
  .nav-btn button {
    margin-left: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .login {
    background: transparent;
    color: white;
    border: 1px solid white;
    font-size: 1.2rem; /* atau misal 18px */
    font-weight: 500;  /* opsional agar lebih tebal sedikit */
  }
  
  .register {
    font-size: 1.2rem; /* atau misal 18px */
    font-weight: 500;  /* opsional agar lebih tebal sedikit */
    background: #38b2ac;
    color: white;
  }
  #scrollLogo {
    transition: opacity 0.3s ease-in-out;
  }
  .navbar-nav .nav-link {
    font-size: 1.2rem; /* atau misal 18px */
    font-weight: 500;  /* opsional agar lebih tebal sedikit */
  }
  /* Default saat belum discroll */
  .navbar .nav-link,
  .navbar .logo,
  .nav-btn .login {
    color: white !important;
    
  }
  
  /* Saat discroll */
  .navbar.scrolled .nav-link,
  .navbar.scrolled .logo,
  .navbar.scrolled .login {
    color: black !important;
  }
  
  /* Saat scroll */
  .navbar.scrolled .login {
    color: #333;
    border-color: #333;
  }
  
  .navbar.scrolled .register {
    background: #319795;
  }
  /* Agar hamburger icon terlihat */
  .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
  }
  .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15); /* semi-transparan putih */
    border-radius: 5px; /* biar sudutnya halus */
    transition: background-color 0.3s ease;
  }
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  .text-shadow {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  }
  .carousel-caption {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
  }
  .carousel-item {
    height: 100vh;
  }
  
  .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  .carousel-caption h1 {
    font-size: 4rem;
  }
  .carousel-caption h2 {
    font-size: 3.5rem;
  }
  .carousel-caption h3 {
    font-size: 2.2rem;
  }
  .carousel-caption p {
    font-size: 1.5rem;
  }
  .carousel-item img {
    object-fit: cover; /* atau 'contain' jika ingin seluruh gambar terlihat */
  }
  .logo{
    font-weight: bold;
    font-size: 2rem;
  }
  
  /* timelines */
  a{text-decoration:none}
  h4{text-align:center;margin:30px 0;color:#444}
  .main-timeline{position:relative}
  .main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:#242922;position:absolute;top:0;left:0;right:0}
  .main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative}
  .main-timeline .timeline:before{content:"";width:20px;height:20px;border-radius:50%;border:4px solid #fff;background:#ec496e;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}
  .main-timeline .timeline-icon{display:inline-block;width:130px;height:130px;border-radius:50%;border:3px solid #ec496e;padding:13px;text-align:center;position:absolute;top:50%;left:30%;transform:translateY(-50%)}
  .main-timeline .timeline-icon i{display:block;border-radius:50%;background:#ec496e;font-size:64px;color:#fff;line-height:100px;z-index:1;position:relative}
  .main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before{content:"";width:100px;height:4px;background:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)}
  .main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;top:89px;right:-30px}
  .main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative}
  .main-timeline .timeline-content:before{content:"";width:70%;height:100%;border:3px solid #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px}
  .main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0}
  .main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px}
  .main-timeline .description{display:inline-block;font-size:16px;color:#404040;line-height:20px;letter-spacing:1px;margin:0}
  .main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%}
  .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px}
  .main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px}
  .main-timeline .timeline:nth-child(even) .timeline-content{float:left}
  .main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)}
  .main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0}
  .main-timeline .timeline:nth-child(2n) .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-icon i,.main-timeline .timeline:nth-child(2n) .timeline-icon:before,.main-timeline .timeline:nth-child(2n):before{background:#f9850f}
  .main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f}
  .main-timeline .timeline:nth-child(2n) .title{color:#f9850f}
  .main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f}
  .main-timeline .timeline:nth-child(3n) .timeline-content:after,.main-timeline .timeline:nth-child(3n) .timeline-icon i,.main-timeline .timeline:nth-child(3n) .timeline-icon:before,.main-timeline .timeline:nth-child(3n):before{background:#8fb800}
  .main-timeline .timeline:nth-child(3n) .timeline-icon{border-color:#8fb800}
  .main-timeline .timeline:nth-child(3n) .title{color:#8fb800}
  .main-timeline .timeline:nth-child(3n) .timeline-content:before{border-left-color:#8fb800;border-bottom-color:#8fb800}
  .main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#2fcea5}
  .main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#2fcea5}
  .main-timeline .timeline:nth-child(4n) .title{color:#2fcea5}
  .main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#2fcea5;border-bottom-color:#2fcea5}
  @media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px}
  .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px}
  .main-timeline .timeline-content{margin-top:75px}
  }
  @media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px}
  .main-timeline .timeline-icon{left:25%}
  .main-timeline .timeline:nth-child(even) .timeline-icon{right:25%}
  .main-timeline .timeline-content{margin-top:115px}
  }
  @media only screen and (max-width:767px){.main-timeline{padding-top:50px}
  .main-timeline:before{left:80px;right:0;margin:0}
  .main-timeline .timeline{margin-bottom:70px}
  .main-timeline .timeline:before{top:0;left:83px;right:0;margin:0}
  .main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0}
  .main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto}
  .main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px}
  .main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px}
  .main-timeline .timeline-icon i{font-size:30px;line-height:45px}
  .main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px}
  .main-timeline .timeline:nth-child(even) .timeline-content{float:right}
  .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px}
  .main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)}
  .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px}
  }
  @media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px}
  .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px}
  .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px}
  }
  
  
  @media (max-width: 576px) {
    .carousel-caption {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 10;
    }
    .carousel-caption h1 {
      font-size: 2.5rem;
    }
    .carousel-caption h2 {
      font-size: 2.2rem;
    }
    .carousel-caption h3 {
      font-size: 1.5rem;
    }
    .carousel-caption p {
      font-size: 1.2rem;
    }
    #scrollLogo {
      display: inline !important;
      opacity: 1 !important;
    }
    .navbar.scrolled .navbar-toggler {
      border: 2px solid #000 !important; /* Paksa border hitam */
      border-radius: 6px; /* Tambahan opsional biar rapi */
    }
    
    /* Ganti warna garis ikon hamburger saat di-scroll */
    .navbar.scrolled .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
  }
  @media (max-width: 991.98px) {
    .navbar-collapse {
      background-color: white;
      padding: 1rem;
      border-radius: 0 0 10px 10px;
      text-align: center;
    }
    .navbar-nav {
      width: 100%;
      align-items: center;
    }
  
    .navbar-nav .nav-item {
      width: 100%;
    }
  
    .navbar-nav .nav-link {
      display: inline-block;
      width: 100%;
    }
    .navbar-collapse .nav-link,
    .navbar-collapse .nav-btn .login,
    .navbar-collapse .nav-btn .register {
      color: #333 !important;
    }
  
    .navbar-collapse .nav-btn .login {
      border-color: #333;
    }
  }