#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3B2308; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#preloader img {
    width: 100px;
}
#preloader img {
    width: 100px;
    animation: fadeInOut 2s infinite ease-in-out; 
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
}

#loading-text {
    margin-top: 20px;
    font-size: 1.5vw; 
    font-style: italic;
    text-align: center;
    color: rgb(150, 150, 136);
}


.gwkeren {
    position: absolute;
    top: 100%; 
    right: 91px;  
    transform: translateY(10px); 
    z-index: 1000; 
}
.menu-tigger {
    position: relative; 
    z-index: 1010; 
}

.menu-tigger img {
    width: 70px; 
    z-index: 1010;
    cursor: pointer; 
    padding: 5px; 
}
          
    .logo_tut {
            position: absolute;
            top: 50px;
            left: 51px;
            z-index: 3;
        }
        .logo_tut img {
            width: 80px;
            height: auto;
            transition: all 0.3s ease;
        }
        .logox {
            position: absolute;
            top: 60px;
            right:51px;
            z-index: 3;
        }
.logox img {
    width: 80px;
    height: auto;
    transition: all 0.3s ease;
}
.section-btn {
    display: flex;
    flex-direction: column; /* Sesuaikan sesuai kebutuhan */
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f0f0f0; /* Tambahkan warna latar belakang jika perlu */
    cursor: pointer; /* Tambahkan kursor pointer untuk interaksi */
    position: relative;
    z-index: 10; /* Pastikan di atas elemen lain */
}
.btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 7px 7px;
        font-size: 20px;
        color: rgb(255, 255, 255);
        border: solid rgb(134, 0, 0);
        border-radius: 20px;
        background: linear-gradient(178deg, #ff0000 0%, #9b1b1f 100%);
        width: 200px;
        transition: 0.5s;
        cursor: pointer;
        letter-spacing: 2px;
        z-index: 5;
    }

   

    .btn:hover {
        background: rgb(255, 242, 254);
        color: #ff0000;
        border-color: #9b1b1f;
    }




@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: normal; 
  color: #9C9C9C;
  font-style: normal;
  line-height: 26px;
}

.montserrat-light {
  font-weight: 300; 
}

.montserrat-regular {
  font-weight: 400; 
}

.montserrat-medium {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

@font-face {
    font-family: 'francy';
    src: url('../fontawesome/Francy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  .francy {
    font-family: francy, san-serif;
    font-weight: 200;
  }


.montserrat-bold {
  font-weight: 700; 
}


#caroy_sel {
    width: 100vw; 
    height: 100vh; 
    position: relative;
  }
 


.carousel-caption {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
}
  
  .caption-right {
      text-align: right;
      right: 7%; 
      left: auto;
  }
  
  .caption-left {
      text-align: left;
      left: 7%; 
      right: auto;
  }
  .caption-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.carousel-caption h4,
.carousel-caption h1 {
margin: 0;}
  
 .carousel-caption h1 {
      font-size: 5rem;
      line-height: 1.2;
  }
  
  .carousel-caption h4 {
      font-size: 3rem; 
      line-height: 1.5;
  }
  
  .carousel-item img {
    width: 100%;
    height: 100vh; 
    object-fit: cover; 
}

@media (max-width: 576px) {
    .carousel-item img {
        min-height: 100vh; 
    }
}


@media (min-width: 576px) and (max-width: 768px) {
    .carousel-item img {
        min-height: 100vh; 
    }
}


.menu-close {position: absolute; top: 20px; padding-top: 5px; left: 20px; z-index: 10000;}
.menu-close i { 
  position:absolute; 	font-size: 18px; color: #fff; 	transition: .3s; cursor: pointer; padding-top: 17px;
  margin-bottom: 30px; margin-bottom: 5px; z-index: 99998; }
.menu-close:hover i { 	color: #df2919; }
/* offby me */
.offcanvas-menu {
	position: fixed;
	right: 0;
	height: 100%;
	width: 300px;
	z-index: 998;
	background: #00081b;
    background: rgba(0, 8, 27, 0.65);
	top: 0;
	padding: 30px;
	transition: .5s;
	transform: translateX(100%);
}
.offcanvas-menu.active{
	transform: translateX(0)
}

.offcanvas-menu ul {
	margin-top: 30px;
}
.offcanvas-menu ul li {
	border-bottom: 1px solid #453c13;
}
.offcanvas-menu ul li a {
	color: #fff;
	font-size: 18px; font-weight:500;
	text-transform: capitalize;
	padding: 6px 0;
	display: block;
}
.offcanvas-menu ul li:hover a{
	color: #df2919;
}
.offcanvas-overly {
	position: fixed;
	background: #000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
  z-index: 997;
}
.offcanvas-overly.active{
	opacity: .5;
	visibility: visible;

}
.off-logo {display: none;}
/* ---- */
@media (min-width: 1200px) { /* XL */
    .gwkeren {right: 20px;}

    .gwkeren img {
        width: 40px;
    }  

    .carousel-caption {
        bottom: 27%;
        padding: 20px;
        text-align: left; 
    }

    .carousel-caption h4, .carousel-caption h1 {
        margin: 0;
    }

    .carousel-caption h4:first-of-type {
        margin-bottom: -35px; 
        font-size: 4.5vh; 
        letter-spacing: -2px;
    }
    .carousel-caption h1:first-of-type {
        margin-bottom: -25px; 
        font-size: 8vh;
        letter-spacing: 2px;
    }
    .carousel-caption h1:last-of-type {
        margin-bottom: -5px; 
        font-size: 10vh; 
        letter-spacing: 6px;
    }
    .carousel-caption h4:last-of-type {
        font-size: 4vh; 
        letter-spacing: -2px;
    }

    .caption-right {
        right: 7%;
        left: auto;
    }

    .caption-left {
        left: 12%;
        right: auto;
    }

    .image-spacing {
        position: relative;
        top: -230px; 
    }
}


@media (min-width: 992px) and (max-width: 1199px) { 
.carousel-caption {
        bottom: 40%;
        padding: 20px;
        text-align: left; 
    }

    .carousel-caption h4, .carousel-caption h1 {
        margin: 0;
    }

    .carousel-caption h4:first-of-type {
        margin-bottom: -35px; 
        font-size: 4.5vh; 
        letter-spacing: -2px;
    }
    .carousel-caption h1:first-of-type {
        margin-bottom: -29px; 
        font-size: 6vh; 
        letter-spacing: 6px;
    }
    .carousel-caption h1:last-of-type {
        margin-bottom: -22px; 
        font-size: 8vh; 
        letter-spacing: 6px;
    }
    .carousel-caption h4:last-of-type {
        font-size: 4vh; 
        letter-spacing: -2px;
    }

    .caption-right {
        right: 7%;
        left: auto;
    }

    .caption-left {
        left: 20%;
        right: auto;
    }
    .responsive-cp {
        font-size: 1rem;}
        .info { font-size: 0.7rem;}
  
        .image-spacing {
            margin-top: -85px; 
  
    }
}

@media (min-width: 768px) and (max-width: 991px) { /* MD */
   
    .carousel-caption {
        bottom: 40%;
        left: 10px;
        right: 10px;
        text-align: left; 
    
    }
  
.carousel-caption h4, .carousel-caption h1 {
        margin: 0;
        }
.carousel-caption h4:first-of-type {
    margin-bottom: -21px; 
    font-size: 24px;
    letter-spacing: 0px;
}
.carousel-caption h1:first-of-type {
    margin-bottom: -18px; 
    font-size:55px;
    letter-spacing: 2px;
    
}
.carousel-caption h1:last-of-type {
    margin-bottom: 5px;
    font-size:68px;
    letter-spacing: 2px;
}
.carousel-caption h4:last-of-type {
    font-size: 23px;
    letter-spacing: 1px;
}
.caption-right {
        right: 7%;
        left: auto;
    }

    .caption-left {
        left: 20%;
        right: auto;
    }
    .responsive-cp {
        font-size: 1rem;}
        .info { font-size: 0.7rem;}
  
        .image-spacing {
            margin-top: -85px; 
  
    }
    
}

@media (max-width: 767px) { /* SM */
    #loading-text {
    font-size:5vw; /* 23% dari lebar viewport */}

     
.gwkeren {
    top: 100%; 
    right: 7px;  
}

.menu-tigger img {
    width: 40px !important ; 
    padding: 5px; 
}   



    .logo_tut {
            top: 40px;
            left: 31px;
        }
        .logo_tut img {
            width: 50px;
            height: auto;
        }
        .logox {
            top: 45px;
            right:31px;
        }
        .logox img {
            width: 45px;
            height: auto;
        }
       
 .section-btn {
        padding: 10px; /* Sesuaikan padding */
        margin-bottom: 20px;
        display: flex; /* Menggunakan flex untuk penyelarasan */
        justify-content: center; /* Tengah */
        align-items: center; /* Vertikal */
    }


    .section-btn img {
        width: 80%; /* Mengatur ukuran gambar untuk menghindari pemotongan */
        max-width: 100px; /* Batasi lebar maksimum gambar */
        height: auto;
    }
     
.carousel-caption {
        bottom: 40%;
        left: 10px;
        right: 10px;
        text-align: center;
    }
  
.carousel-caption h4, .carousel-caption h1 {
        margin: 0;
        }
.carousel-caption h4:first-of-type {
    margin-bottom: -21px; 
    font-size: 24px;
    letter-spacing: 0px;
}
.carousel-caption h1:first-of-type {
    margin-bottom: -13px; 
    font-size:40px;
    letter-spacing: 2px;
    
}
.carousel-caption h1:last-of-type {
    margin-bottom: 5px;
    font-size:65px;
    letter-spacing: 2px;
}
.carousel-caption h4:last-of-type {
    font-size: 23px;
    letter-spacing: 1px;
}
    .responsive-cp {
        font-size: 1rem;}
        .info { font-size: 0.7rem;}
  
        .image-spacing {
            margin-top: -85px; 
  
    }
   
}
/** sambutan */

/* sambutan */
#sambutan {
    padding: 120px 150px; /* Padding atas/bawah dan kiri/kanan */
    background-image: url('../img/bg/bgs.jpg'); 
    background-size: 100% 100%; /* Membuat gambar sesuai dengan ukuran elemen */
    background-position: center; /* Memusatkan gambar */
    background-repeat: no-repeat; /* Menghindari pengulangan gambar */
    background-color: rgba(0, 0, 0, 0.5); /* Menambahkan latar belakang semi-transparan untuk kontras */
    color: white; /* Mengubah warna teks agar kontras dengan latar belakang */
}

#sambutan h2 {
    font-size: 2.5rem; /* Ukuran default untuk layar besar */
    color: #161616; /* Warna teks */
}
.responsive-text {
    font-size: 1.1rem; /* Sesuaikan ukuran font sesuai kebutuhan */
}

.mb-4 {
    margin-bottom: 30px; /* Ganti 30px dengan nilai yang diinginkan */
}

.text-justify {
    text-align: justify; /* Mengatur teks menjadi rata kiri dan kanan */
}

.custom-margin {
    margin-bottom: 40px; /* Ganti sesuai kebutuhan */
}

.image-spacing {
    margin-top: 10px; /* Jarak tambahan di atas gambar */
}
.responsive-cp {
    font-size: 1rem; 
}


@media (max-width: 1024px) {
    #sambutan {
        padding: 80px 50px; /* Mengurangi padding untuk layar yang lebih kecil */
    }

    .responsive-text {
        font-size: 1rem; /* Mengurangi ukuran font pada layar lebih kecil */
    }

    #sambutan h2 {
        font-size: 2rem; /* Ukuran lebih kecil untuk layar sedang */
    }

    /* Atur grid agar gambar berada di bawah teks */
    .row {
        flex-direction: column; /* Susun kolom vertikal pada layar lebih kecil */
    }

    .image-spacing {
        margin-top: 20px; /* Mengatur margin-top agar gambar bergeser ke bawah pada resolusi 1024px */
    }
}

/* Media Queries untuk layar di bawah 768px */
@media (max-width: 768px) {
    #sambutan {
        padding: 80px 50px; /* Mengurangi padding untuk layar yang lebih kecil */
    }

    .responsive-text {
        font-size: 1rem; /* Mengurangi ukuran font pada layar lebih kecil */
    }
    #sambutan h2 {
        font-size: 2rem; /* Ukuran lebih kecil untuk layar sedang */
    }
    .responsive-cp {
        font-size: 1rem;}
        .info { font-size: 0.7rem;}

    .image-spacing {
        margin-top: 20px; /* Mengurangi jarak di atas gambar */
    }
}

@media (max-width: 425px) {
    #sambutan h2 {
        font-size: 1.7rem; /* Ukuran lebih kecil lagi untuk layar sangat kecil */
    }
    .responsive-cp {
        font-size: 0.8rem;}
    
}
@media (max-width: 380px) {
    #sambutan {
        padding: 50px 20px; /* Mengurangi padding lebih jauh pada layar kecil */
    }
    #sambutan h2 {
        font-size: 1.5rem; /* Ukuran lebih kecil lagi untuk layar sangat kecil */
    }

    .responsive-text {
        font-size: 0.9rem; /* Lebih kecil lagi untuk ukuran font */
    }
    .responsive-cp {
        font-size: 0.7rem;}
    .image-spacing {
        margin-top: 20px; /* Mengurangi jarak di atas gambar */
    }
    .responsive-cp {font-size: 0.7rem;}
    .info { font-size: 0.7rem;}
}

/* -- */
.footer-link ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start; 
}
.footer-link ul li {
    margin-right: 15px;
}
.footer-link ul li:last-child {
    margin-right: 0;
}
.footer-link ul li img {
    width: 24px;
    height: auto;
}
.footer-link ul li a {
    display: inline-block;
}
.footer-link ul li a:hover {
    color: #df2919;
}
.footer-widget {
margin-bottom: 0;
}

.footer-bg {
padding-bottom: 0; 
}

.copyright-wrap {
margin-top: 0;
padding-top: 10px; 
}
/* --- */

.f-widget-title h2,.footer-widget .widgettitle  {
    font-size: 18px;
    position: relative;
    padding-bottom: 30px;
    color: #FFF;
    margin-bottom: 0;
    }
    .f-widget-title h2::before,.footer-widget .widgettitle::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    height: 1px;
    width: 54px;
    background: #df2919;
        display: none;
    }
    .f-widget-title img {
        width: 50%;
    }
/* copyright */
.copyright-wrap {
    padding: 30px 0px;
    background-color: #3B2308; /* Perubahan warna latar belakang */
    color: #fff;
    text-align: center; /* Memusatkan teks */
}

.copyright-wrap a {
    color: #fff;
   text-decoration: none;
}
.copyright-wrap .putdik {
    color: #acacac;
}

.copyright-wrap li {
    display: inline;
    padding-left: 15px;
    margin-left: 40px;
    position: relative;
}

.copyright-wrap li::before {
    background-color: #000;
    width: 8px;
    height: 8px;
    content: "";
    position: absolute;
    left: -4px;
    top: 5px;
    border-radius: 50px;
}

.copyright-wrap li a {
    color: #fff; }

/* @media (max-width: 576px) { 

    .footer-link ul { display: block; justify-content:left; }


} */

.dropdown {
    position: absolute;
    top: 60px;
    right: 200px;
    z-index: 3;
}

.dropbtn {
    background-color:#3B2308;
    color: white;
    padding: 10px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.dropdown-content a img {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #461709;
}