/* RESET RULES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
    --lightblue: #f6f9fc;
    --blue: #4068d6;
  }
  
body{
    font-family: "Be Vietnam Pro", sans-serif;
  }
  
  
  a,
  a:hover {
    color: inherit;
  }
  
  a:hover {
    text-decoration: none;
  }
  
  .bg-lightblue {
    background: var(--lightblue);
  }
  
  .bg-red {
    background: var(--blue);
  }
  
  
.titlesection {
    color: #EEDF7A;
    background-color: #333;
    display: inline-block; 
    padding: 20px; 
    border-radius: 40px;
    font-size: 30px;
    margin-bottom: 40px;
  }
  
  @media screen and (max-width: 576px) {
        
    .titlesection {
    padding: 16px; 
    font-size: 18px;
    margin-bottom: 30px;
    }
  
  }
  
  

  .container-fluid-max {
    max-width: 1440px;
  }
  
  .cover {
    background: no-repeat center/cover;
  }
  
  .p-15 {
    padding: 15px;
  }
  
  /* SCROLL ANIMATIONS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .scroll .page-header {
    background: var(--blue);
  }
  
  .scroll .hero {
    transform: scale(0.98);
  }
  
  /* HEADER
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .page-header {
    transition: background 0.5s ease-in-out;
  
  }
  
  .page-header .navbar {
    padding: 1rem 0;
    
  }
  
  .page-header .navbar-toggler {
    /* the variable is inherited from BS4 built-in variables */
    border-color: var(--white); 
  }
  
  /* BANNER SECTION
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .hero {
    background-attachment: scroll;
    transition: transform 0.5s ease-in-out;
  }
  
  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      rgba(0, 0, 0, 0.3) 0,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
  
  .hero .container-fluid {
    z-index: 10;
  }
  
  /* POPULAR DESTINATIONS SECTION
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .popular-destinations figure {
    margin-bottom: 30px;
  }
  
  .popular-destinations figcaption {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
  }
  
  .popular-destinations img {
    filter: grayscale(50%) blur(3px);
    transition: transform 0.5s, filter 0.75s;
  }
  
  .popular-destinations a:hover img {
    transform: scale(1.25);
    filter: none;
  }
  
  /* PAGE FOOTER
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .page-footer .footer-links {
    text-align: right;
  }
  
  /* MEDIA QUERIES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* MEDIUM SCREENS */
  @media screen and (max-width: 991px) {
    .page-header {
      background: var(--blue);
    }
  
    
  }
  
  @media screen and (min-width: 991px) {
  
    .nav-page {
      margin-left: 12px;
    }
    
  }
  
  
  /* SMALL SCREENS */
  @media screen and (max-width: 767px) {
    .page-footer .footer-child {
      text-align: center;
    }
  }
  
  
  @media screen and (max-width: 400px) {
    .img2{
      height: calc(100vw * (6 / 19)); /* Menjaga rasio 19:6 */
      background-size: contain; /* Membuat gambar tetap sesuai skala */
      background-repeat: no-repeat; /* Menghindari pengulangan */
      background-position: center; /* Menempatkan gambar di tengah */
    }
  
    #featured-destinations .cover {
      height: auto; /* Sesuaikan tinggi gambar dengan ukuran kolom pada layar kecil */
      max-height: 300px; /* Tentukan tinggi maksimal untuk gambar pada layar kecil */
    }
  }
  
  
  @media screen and (min-width: 576px) {
  
    .img-fluid {
      height: 300px; /* Sesuaikan sesuai kebutuhan */
      object-fit: cover; /* Menjaga proporsi gambar */
      width: 100%; /* Memastikan gambar mengisi seluruh lebar kolom */
    }
    #featured-destinations{
      margin: 30px;
    }
  
    #home h1{
        font-size: 50px;
    }
  
    #home p{
      font-size: 25px;
    }
  
  
  }
  

  @media screen and (max-width: 576px) {
  
    .img-fluid {
      height: 250px; /* Sesuaikan sesuai kebutuhan */
      object-fit: cover; /* Menjaga proporsi gambar */
      width: 100%; /* Memastikan gambar mengisi seluruh lebar kolom */
    }
    /* #featured-destinations{
      margin: 30px;
    } */
  
    #home h1{
        font-size: 50px;
    }
  
    #home p{
      font-size: 25px;
    }

    .nav-mobile{
      margin-top: 15px;
    }

    .bottom_content{
      font-size: 23px;
    }

    .deskripsi_content{
      font-size: 16px;
    }
  
  
  }
  



  
  
  
  #request-quote .fa-envelope, .fa-whatsapp, .fa-instagram, .fa-youtube{
    font-size: 25px;
    color: #545e7c;
    margin: 10px;
  }
  
  
  
  
  
  .btn-map {
    display: inline-block;
    padding: 0.5em 1em;
    background: #808080;
    color: #fff;
    margin: 1em;
  }
  .btn-map:hover, .btn-map:focus {
    color: #fff;
    background: #333;
  }
  
  .static-img {
    display: block;
  }
  
  iframe {
    max-width: 100%;
  }
  
  /* From https://codepen.io/chriscoyier/full/kycDp */
  .map-container {
    width: 100%;
    margin: 0 auto;
    height: 0;
    padding-top: 38%;
    position: relative;
    display: none;
    /* Hide for small screens */
  }
  .map-container iframe {
    width: 100%;
    height: 100%;
    /* had to specify height/width */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  
  
    .map-container {
      display: block;
    }
  
    .static-img {
      display: none;
    }
  
  
    #process p{
      font-size: 13px;
    }
  
    #process .fa-solid{
      font-size: 35px;
      color: #EEDF7A;
    }
  
    #process h3{
      font-size: 20px;
    }
  
  
    .custom-img {
      height: 50vh; /* Sesuaikan dengan ukuran yang diinginkan */
      background-size: contain; /* Atur agar gambar tidak terpotong */
      background-repeat: no-repeat;
      background-position: center;
    }
  
  
  
  
  
    #process .bg-light {
  
      border-radius: 8px; /* Tambahkan border-radius untuk efek rounded */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Opsional: tambahkan bayangan untuk efek visual */
    }
    
  
    /* Kelas khusus untuk latar belakang */
  .nav-page {
    background-color: #b9b9b953; /* Ubah warna sesuai kebutuhan */
    padding: 5px 10px; /* Tambahkan padding agar latar belakang lebih lebar dari teks */
    border-radius: 5px; /* Opsional: Membuat sudut melengkung */
    color: #fff; /* Warna teks, sesuaikan jika perlu */
    display: inline-block; /* Pastikan hanya sepanjang teks */
    margin-bottom: 10px;
  }
  
  .nav-links{
    padding: 5px 0; /* Tambahkan padding agar latar belakang lebih lebar dari teks */
    border-radius: 5px; /* Opsional: Membuat sudut melengkung */
    color: #fff; /* Warna teks, sesuaikan jika perlu */
    display: inline-block; /* Pastikan hanya sepanjang teks */
    margin-top: 5px;
  }
  
  .boxfooter {
    transition: transform 0.3s ease-in-out; /* Animasi halus */
  }
  
  .boxfooter:hover {
    transform: scale(1.07); /* Membesar saat di-hover */
    cursor: pointer;
  }
  
  
  body::-webkit-scrollbar {
    display: none; /* Menyembunyikan scrollbar */
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  
  .visi-misi {
    text-align: center; /* Menyatukan teks di tengah */
    padding: 100px 20px 20px 20px;
  }
  
  .visi-misi h4 {
    text-align: center; 
    margin-bottom: 1rem; 
  }
  
  .visi-misi p {
    text-align: center; /* Rata tengah */
    border-bottom: 2px solid #5a5a5b; /* Garis bawah dekoratif */
    padding-bottom: 2.5rem; /* Jarak antara teks dan garis */
    display: inline-block; /* Membuat garis mengikuti panjang teks */
  
  }
  
  
  @media screen and (min-width: 576px) {
    .visi-misi {
      text-align: center; /* Menyatukan teks di tengah */
      padding: 100px 20px;
      margin: 30px;
    }
  
  
  
  }
  
  
  .kegiatan-siswa h6{
    text-align: center; /* Rata tengah */
    overflow: hidden; /* Menyembunyikan teks yang meluap */
    display: -webkit-box; /* Mengatur elemen menjadi fleksibel untuk teks multiline */
    -webkit-line-clamp: 4; /* Maksimal jumlah baris */
    -webkit-box-orient: vertical; /* Orientasi box vertikal */
    text-overflow: ellipsis; /* Menambahkan titik-titik di akhir teks */
    margin-bottom: 4rem; /* Jarak bawah teks */
  }


  .logo-icon {

    width: 52px;
    height: 52px;
    margin-right: 10px;
  }


  a {
    text-decoration: none;
  }
  
  
  .homedeskripsi{
  font-size: 1px;
}

  
  
  .imgdetail {
  display: flex; /* Mengatur gambar agar sejajar secara horizontal */
  flex-wrap: wrap; /* Memungkinkan elemen untuk pindah ke baris berikutnya jika ruang tidak cukup */
  gap: 10px; /* Memberikan jarak antar gambar */
  margin-bottom: 50px;
  max-width: 800px; /* Batas maksimum lebar container */
}

.imgdetail img {
  width: 180px; /* Lebar gambar */
  height: 100px; /* Tinggi gambar */
  object-fit: cover; /* Agar gambar tidak terdistorsi */
  border-radius: 5px; /* Opsional, untuk membuat sudut gambar melengkung */
}


.img-item {
  display: flex; /* Flexbox untuk gambar dan teks di dalam item */
  flex-direction: column; /* Menyusun gambar dan teks secara vertikal */
  align-items: center; /* Teks di tengah secara horizontal */

}

.img-item p {
  margin-top: 5px; /* Jarak antara gambar dan teks */
  font-size: 14px; /* Ukuran font teks */
  color: #333; /* Warna teks */
  text-align: center; /* Teks rata tengah */
  word-wrap: break-word; /* Memastikan teks panjang bisa terputus */
}

@media screen and (max-width: 576px) {
  .imgdetail img {
    width: 170px; 
    height: 100px; 
  }
  

}




.titlehome{
 margin-bottom: 50px;

}




.imgdenah {
  display: flex;
  flex-wrap: wrap; /* Memungkinkan gambar pindah baris jika ruang tidak cukup */
  gap: 20px; /* Jarak antar elemen gambar */
  justify-content: center; /* Elemen sejajar di tengah */
  margin: 120px 0; /* Margin atas dan bawah */
}

.img-denah {
  display: flex;
  flex-direction: column; /* Susunan vertikal untuk gambar */
  align-items: center; /* Gambar berada di tengah */
}

.img-denah img {
  width: 450px; /* Atur lebar gambar */
  height: 450px; /* Atur tinggi gambar */
  object-fit: cover; /* Agar gambar tetap proporsional */
  border-radius: 5px; /* Opsional: sudut gambar melengkung */
}

.img-caption {
  margin-top: 50px; /* Jarak antara gambar terakhir dan teks */
  font-size: 14px; /* Ukuran font */
  text-align: center; /* Teks rata tengah */
  color: #333; /* Warna teks */
  width: 100%; /* Pastikan teks mencakup seluruh area */
}

@media screen and (min-width: 1000px) {
    .img-caption {
        max-width : 50%;
        
    }
}


/* Media Query untuk layar kecil */
@media screen and (max-width: 576px) {
  .imgdenah {
    gap: 15px; /* Kurangi jarak antar elemen pada layar kecil */
  }
  
      .img-caption {
        max-width : 90%;
        
    }

  .img-denah img {
    width: 350px; /* Gambar lebih kecil di layar kecil */
    height: 350px;
  }
  
  
}




.customhover:hover{
  background-color: rgb(97, 121, 136);
}









@media screen and (min-width: 576px) {
    #featured-destinations{
        padding: 30px;
    }
    
    
    #programsekolah{
        margin: 0 30px;
    }
    
    #popular-destinations{
         margin: 40px 30px;
    }
    
    #article{
         margin: 40px 30px;
    }
    
    
}