.logo{
    width: 175px;
    height: 55px;
}
.navbar {
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}
.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.8); 
}
html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
.video-banner-wrapper {
  position: relative;
  width: 100%;
  height: 91vh;
  overflow: hidden;
}
.video-banner-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: -1;
}
.video-overlay-text {
      position: absolute;
      top: 85%; 
      left: 38%;
      transform: translate(-50%, -50%);
      z-index: 2; 
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
      text-align: left;
      padding: 0 1rem;
    }
    .map-responsive {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* rasio 16:9 */
  height: 0;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
    h1 strong{
      font-size: 50px;
    }
    p.shadow-sm{
      font-size: 30px;
    }
     @media (max-width: 768px) {
      .video-overlay-text {
        font-size: 2rem;
        top: 80%; 
      }
    }
    @media (max-width: 576px) {
      .video-overlay-text {
        font-size: 1.5rem;
        top: 75%; 
      }
    } 
    .footer{
      text-align: left;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #740202;
      color: white;
      padding-left: 35px;
      padding-right: 35px;
    }
   .logo2{
    width: 300px;
    height: auto;
}
@media screen and (max-width:600px){
    .logo2{
        width: 150px;
        height: auto;
    }
    .footer{
        font-size: 14px;
    }
}
    #textpargraph1{
      text-align: center;
    }
    .carousel-inner{
    text-align: center;
}
/* jangan set semua button terlalu besar */
button{
    font-size:18px;
}

/* tombol carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color: rgba(0,0,0,0.5);
    border-radius:50%;
    width:55px;
    height:55px;
    background-size:60%;
    background-position:center;
    background-repeat:no-repeat;
    transition:0.3s;
}

/* hover effect */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover{
    background-color: rgba(0,0,0,0.8);
    transform:scale(1.05);
}

/* panah kiri */
.carousel-control-prev-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11 1 3 8l8 7V1z'/%3E%3C/svg%3E");
}

/* panah kanan */
.carousel-control-next-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 1l8 7-8 7V1z'/%3E%3C/svg%3E");
}

/* ukuran font global */
body{
    font-size:18px;
    line-height:1.7;
}

/* heading sedikit lebih besar */
h1{
    font-size:2.5rem;
}

h2{
    font-size:2rem;
}

h3{
    font-size:1.7rem;
}

/* paragraph */
p{
    font-size:1.1rem;
}

/* tombol */
.btn{
    font-size:1rem;
}

/* khusus teks banner */
.video-overlay-text h1{
    font-size:3.5rem;
}

.video-overlay-text p{
    font-size:1.3rem;
}

/* teks gambar background */
.paragraph div{
    font-size:44px;
}

/* responsive HP */
@media (max-width:768px){

body{
font-size:17px;
}

.video-overlay-text h1{
font-size:2.5rem;
}

.video-overlay-text p{
font-size:1.1rem;
}

.paragraph div{
font-size:32px;
}

}
/* ========================= */
/* ANIMASI SCROLL            */
/* ========================= */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


/* ========================= */
/* DARK MODE                 */
/* ========================= */

body.dark-mode{
    background:#121212;
    color:#f1f1f1;
}

/* ===== DARK MODE NAVBAR FIX ===== */
body.dark-mode .navbar {
    background-color: #1e1e1e !important; /* navbar gelap */
}

/* Semua link navbar dan brand jadi putih */
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .navbar-brand {
    color: #ffffff !important;
}

/* Hover / active link */
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .nav-link.active {
    color: #ff4d4d !important; /* bisa disesuaikan tema */
}

/* Tombol navbar */
body.dark-mode .navbar .btn {
    color: #fff !important;

}

/* Icon hamburger (mobile) */
body.dark-mode .navbar .navbar-toggler-icon {
    filter: invert(1); /* biar icon hamburger jadi putih */
}

body.dark-mode .card{
    background:#1f1f1f;
    color:white;
}

/* DARK MODE FORM MODAL */
body.dark-mode .modal-content {
    background-color: #1f1f1f; /* background gelap */
    color: #ffffff; /* teks default putih */
}

/* Input, textarea */
body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea {
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #444;
}

/* Placeholder teks di input */
body.dark-mode .modal-content ::placeholder {
    color: #bbbbbb;
}

/* Tombol di modal */
body.dark-mode .modal-content .btn {
    color: #ffffff;
    border-color: #ffffff;
}

/* Tombol merah / danger tetap merah tapi teks putih */
body.dark-mode .modal-content .btn-danger {
    background-color: #dc3545;
    color: #ffffff;
    border-color: #dc3545;
}

body.dark-mode .accordion-body{
    background:#1f1f1f;
}

body.dark-mode .btn-outline-dark{
    color:white;
    border-color:white;
}
/* DARK MODE ACCORDION FIX */

body.dark-mode .accordion-body{
    background:#1f1f1f;
    color:white;
}

body.dark-mode .accordion-body p{
    color:white;
}

body.dark-mode .accordion-button{
    background:#1f1f1f;
    color:white;
}

body.dark-mode .accordion-button:not(.collapsed){
    background:#2a2a2a;
    color:white;
}
.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}