@import url('https://fonts.googleapis.com/css2?family=Poppins:...&display=swap');

header {
  .navbar{
    font-family: 'Georgia','Times New Roman', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    .animated-link {
      position: relative;
      color:  #000;
      text-decoration: none;
    }
    .animated-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 0%;
      margin: 0 auto;
      height: 2px;
      background-color:#000;
      transition: all .5s;
    }
    .animated-link:hover::after {
      width: 100%;
    }
    }
    .dropdown-item{
        font-family: 'Georgia','Times New Roman', serif;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .animated-link {
      position: relative;
      color:  #000;
      text-decoration: none;
    }
    .animated-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3px;
      width: 0%;
      margin: 0 auto;
      height: 2px;
      background-color:#000;
      transition: all .5s;
    }
    .animated-link:hover::after {
      width: 100%;
    }
  
  
}
.carousel-caption {
  bottom: 35% !important; /* Naik dari bawah, sesuaikan % */
}
.animate-text {
    animation: fadeInUp 2s ease forwards;
    opacity: 0;
    font-size: 3rem;        /* Ukuran besar */
    font-weight: bold;
    transition: all 1s ease;
  }
  .animate-active {
    animation: fadeInUp 1.5s forwards;
  }
  
  @keyframes fadeInUp {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

.footcolor{
  background-color: #dcdfd2;
}
.animated-link {
    position: relative;
    color:  #000;
    text-decoration: none;
  }
  .animated-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 0%;
    margin: 0 auto;
    height: 2px;
    background-color:#000;
    transition: all .5s;
  }
  .animated-link:hover::after {
    width: 100%;
  }


.navbar-scroll {
    transform: translateY(-100%);
    transition: all 0.1s ease-in-out; /* Tambahkan animasi */
   
}
.navbar-scroll.show {
    transform: translateY(0);
    transition: all 0.7s ease-in-out; /* Tambahkan animasi */
}

.no-border {
  border: none !important;
}

body {
    #block1{
    background-image: url('img/Picture3.jpg');
    background-size: cover; /* Menyesuaikan ukuran dengan layar */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar */
    background-position: center; /* Memusatkan gambar */
    }
    
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 1px;
    .offcanvas{
    font-family: 'Georgia','Times New Roman', serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    }
    main{
        font-family: "Roboto", "Segoe UI", sans-serif;

    }
}

footer {
    .animated-link {
        position: relative;
        color:  #6e6d6d;
        text-decoration: none;
      }
    .animated-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        width: 0%;
        margin: 0 auto;
        height: 2px;
        background-color:#000;
        transition: all .5s;
      }
      .animated-link:hover::after {
        width: 100%;
      }  
}

.btn-merahtua{
    background-color: #70010b;
    color: #fff;
    font-size: 0.75rem;
    padding: 8px 25px;
    @media (min-width:992px){
        background-color: #70010b;
        color: #fff;
        font-size: 1rem;
        padding: 10px 35px;
    }
}

#logo2 {
    max-width: 150px;
    width: 100%;
    
}


.lni-grid-alt {
    font-size: 1.5rem;
}

.lni-cross-circle {
    font-size: 2rem;
}


.carousel-inner {
    width: 100%;           /* Menggunakan lebar penuh kontainer */
    height: 77%;          /* Menggunakan tinggi penuh dari kontainer */
    text-align: center;    /* Membuat gambar berada di tengah secara horizontal */
}

.carousel-item img {
  object-fit: cover;
  
}


@media (min-width:992px){

 .carousel-item img {
    object-fit: cover; /* Desktop: lebih rendah */
  }

#logo {
        
        margin-bottom: -35px; /* Menurunkan logo lebih dekat ke navbar */
}

.dropdown>.dropdown-menu {
    visibility: hidden;
    opacity: 0;
    top: 100%;
    display: block;
    transition: all 0,1s ease-out;
    
}

.dropdown:hover>.dropdown-menu{
    padding: 15px;
    display: block;
    visibility: visible;
    opacity: 10;
    transition: all 0.3s ease-in-out;
}

.dropdown-item:hover, 
.dropdown-item:focus {
  background-color: transparent !important; /* Hilangkan background */
  color: inherit !important; /* Pertahankan warna teks */
}

}

.carousel-caption {
    
    text-align: center; /* Teks diatur ke kiri */
    @media (min-width:992px){
    left: 200px;          /* Posisikan di kiri */
    }
  }
/* 
.banner{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
    height: 100%;
    margin-right: 640px;
} */

  .carousel-caption h2 {
    text-align: center; /* Teks diatur ke kiri */
    font-weight: normal; /* Menghilangkan bold */
    letter-spacing: 0;
    color:#000;

  }
  .carousel-caption button{
    margin-top: 20px;

  }

  .logo-carousel {
    width: 190px !important;
    height: auto !important;
    display: block !important; /* Mencegah efek dari Bootstrap */
    margin: 35px auto -35px auto; /* Auto pada kiri dan kanan agar logo di tengah */
}

  .animated-link .arrow {
    margin-left: 10px;
    border: solid rgb(3, 3, 3);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(45deg);
    transition: transform 0.3s;
  }

  /* Tampilkan menu saat hover
  .dropdown:hover .dropdown-menu {
    display: block;
  }
   */
  /* Animasi panah saat dropdown terbuka */
  .dropdown:hover .arrow {
    transform: rotate(-135deg);
  }

