/* Generated at: 2025-06-16 04:08:13 */
#main-container{
    /* border:1px solid #fff; */
    background:#0c597a !important;
    /* background:#044163 !important; */
}
body,html {
    background-size: cover;
    background: #0c597a  top center no-repeat !important;
}
.header-area {
 -webkit-transition-duration: 500ms;
         transition-duration: 500ms;
 background-color: transparent;
 height: 4.125rem;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000;
  
 
}
.logo-wrapper img{
    margin:0 !important;
    /* background:#044163 !important; */
    margin-top:-10 !important;
    padding-left:20px !important;
}
.navbar-logo-container{
    padding-right:20px !important;
}
.form-underline{
    border:0 !important;
    padding:2px!important;
    border-bottom:1px solid #eee !important;
}
.header-area .container{
    background: #044163 !important;
    
}
.suha-footer-nav{
     background: #044163 !important;

   
}
.suha-footer-nav ul li a{
    color:#fff !important;
}
.suha-footer-nav ul li a:hover{
    color:#e0792c !important;
}
.page-content-wrapper{
    margin-top:90px;
 
}

.search-form{
    background:#044163 !important;
}
.no-scroll {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .no-scroll::-webkit-scrollbar {
    display: none;
  }
  .class1{
    background:#fff;
    color:#e0792c;
}
.class1 a{
    color:#e0792c;
}
.class1:hover,.class1 a:hover{
    background:#e0792c;
     color:#fff;
}
.class1 a:hover{
     color:#fff;
}
.btn-selengkapnya{
    color:#fff;background:#e0792c;border:1px solid #fff;border-radius:5px;
}
.btn-selengkapnya:hover{
   color:#fff;background:transparent;border:1px solid #e0792c;border-radius:5px;
}
.btn-selengkapnya1{
    background:#fff;color:#e0792c;border:1px solid #e0792c;border-radius:5px;
}
.btn-selengkapnya1 a{
    color:#e0792c!important;
}
.btn-selengkapnya1:hover{
   color:#fff;background:#e0792c;border:1px solid #fff;border-radius:5px;
}
.btn-selengkapnya1 a:hover{
    color:#fff!important;
}
.btn-secondary {
    background-color: #548bc3!important;
    color:#fff!important;
 
}  

.outline-light{
    color:#fff!important;
    border:1px solid #fff!important;
    padding:10px 10px!important;
    border-radius: 5px!important;
    font-weight: bold;
   }
   .class1{
    background:#fff;
    color:#e0792c;
}
.class1:hover{
    background:#e0792c;
     color:#fff;
}
.header-area-container {
 -webkit-box-shadow: 0px 0px 0.25rem 0px rgba(15, 15, 15, 0.1);
 box-shadow: 0px 0px 0.25rem 0px rgba(15, 15, 15, 0.1);

}

.footer-nav-area {
 position: fixed;
 z-index: 1000;
 left: 0;
 width:100%;
 bottom: 0;
 

 background-color:transparent;
 color: #fff !important;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
}

.suha-footer-nav {
 -webkit-box-shadow: 0px 0px 0.5rem 0px rgba(15, 15, 15, 0.15);
       box-shadow: 0px 0px 0.5rem 0px rgba(15, 15, 15, 0.15);
}
.suha-footer-nav a,.suha-footer-nav i  {
   color:#fff !important;
}
.suha-footer-nav a:hover,.suha-footer-nav i:hover  {
   color:#000!important;
}

.header-area a,.suha-navbar-toggler {
 color:#FFF !important;
}
.suha-navbar-toggler {
 background-color: #fff !important;
}

.main-container{
 background-color: #fff !important;
}
.page-content-wrapper{
    background-color: #fff !important;

}
.text-orange{
 color:#e0792c !important;
}
.text-biru{
 color:#044163 !important;
}

.bg-body{
    background-color:#0c597a !important;

}
.hero-wrapper,.hero-slides,.single-hero-slide{
    margin:0 !important;
}

.bg-orange{
 background-color:#044163 !important;
}
.text-primary{
    color:#044163 !important;
}
.bg-section .text-primary{
 color:#044163 !important;
}
.bg-primary,.btn-primary{
 background-color:#044163 !important;
 color:#fff !important;
}
.btn-primary:hover{
    border:1px solid #044163 !important;
    background: #fff !important;
    color:#044163 !important;
}
.btn-primary:hover span{
    color:#044163 !important;
}
.btn-primary{
    border:1px solid #fff !important;
    background: #044163 !important;
    color:#fff !important;
}
.btn-primary span{
     color: #fff !important;
}
.card{
    border:1px solid #ddd !important;
    background-color: #fff !important;
}
.bg-section{
 background:#fff !important;
 
 border-radius: 0px !important;
 padding-top:20px;
 padding-bottom:20px;
 box-shadow: 0px 0px 0.5rem 0px rgba(15, 15, 15, 0.15) !important;
/* border-top:1px #ddd solid !important; */
border-bottom:1px #ddd solid !important;

 /* background-color: {{ env('BACKGGROUND_COLOR') }} !important; */
}
.bg-section span{
    color:#fff !important;
}
.btn-outline-primary{
    border:1px solid #044163 !important;
    background: #fff !important;
    color:#044163 !important;
}
.btn-outline-primary:hover{
    border:1px solid #fff !important;
    color: #fff !important;
    background-color:#044163 !important;
}
.bg-header,.bg-header h6,.bg-header h2,.bg-header h5{
    color:#fff !important;
    background-color:#044163 !important;
}
.bg-footer{
    color:#fff !important;
    background-color:#044163 !important;
}
.section-biru{
    background-color:#548bc3 !important;
}
.suha-offcanvas-wrap {
    background: #044163 !important;
}
.bg-slide-nav, .bg-slide-nav a,.bg-slide-nav i {
 background-color:#044163 !important;

}
.bg-slide-nav .btn-close,.bg-slide-nav.btn-close i,.bg-slide-nav.btn-close span{
 color:#fff!important;
}



/* Container untuk setiap input/select field */
.input-group {
    position: relative;
    width: 300px; /* Lebar input group */
    margin-bottom: 20px;
}

/* Styling untuk Input Text dan Select */
.input-underline {
    width: 100%;
    padding: 10px 0;
    background-color: transparent;
    border: none;
    /* --- Perubahan di sini untuk garis putus-putus --- */
    border-bottom: 1px dashed #ccc; /* 1px tebal, gaya dashed (putus-putus), warna abu-abu */
    /* --- Akhir perubahan --- */
    font-size: 1.1em;
    color: #333;
    outline: none; /* Hilangkan outline default saat fokus */
    transition: border-color 0.3s ease; /* Animasi perubahan warna border */

    /* Khusus untuk select: menghilangkan panah default di beberapa browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Optional: Tambahkan panah kustom jika perlu, biasanya dengan background-image */
    /* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-6.5H18.8c-7.7%200-13.5%204.7-16.1%2011.5c-2.5%206.9-.4%2014.2%204.6%2019.2l128%20127.9c5%205%2011.8%207.7%2018.6%207.7s13.6-2.8%2018.6-7.7l128-127.9c5.1-5%207.1-12.3%204.6-19.2c-2.7-6.9-8.5-11.5-16.2-11.5z%22%2F%3E%3C%2Fsvg%3E'); */
    /* background-repeat: no-repeat; */
    /* background-position: right 10px center; */
    /* background-size: 12px; */
    /* padding-right: 30px; */
}

/* Garis bawah yang menonjol saat input/select fokus */
.input-underline:focus {
    /* Anda bisa tetap menggunakan garis solid atau mengubahnya jadi dashed juga saat fokus */
    border-color: #044163; /* Warna garis bawah saat fokus */
}

/* Styling untuk Label */
.input-label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.85em;
    color: #999;
    pointer-events: none;
    transition: 0.3s ease all;
    margin-top: 10px;
}

/* Efek Floating Label untuk INPUT TEXT */
.input-underline[type="text"]:focus + .input-label,
.input-underline[type="email"]:focus + .input-label,
.input-underline[type="password"]:focus + .input-label,
.input-underline[type="text"]:not(:placeholder-shown) + .input-label,
.input-underline[type="email"]:not(:placeholder-shown) + .input-label,
.input-underline[type="password"]:not(:placeholder-shown) + .input-label {
    top: -20px;
    font-size: 0.85em;
    color: #044163;
}

/* Efek Floating Label untuk SELECT dan saat input-group memiliki kelas 'has-value' */
.input-group.has-value .input-label,
.input-underline:focus + .input-label {
    top: -20px;
    font-size: 0.85em;
    color: #044163;
}

/* Optional: Garis highlight yang bergerak (hanya untuk estetika) */
.input-highlight {
    position: absolute;
    height: 2px; /* Bisa tetap 2px atau disesuaikan */
    width: 0;
    bottom: 0;
    left: 50%;
    background-color: #044163;
    transition: 0.3s ease all;
}

/* Efek garis highlight saat fokus */
.input-underline:focus ~ .input-highlight {
    width: 100%;
    left: 0;
}

/* Pastikan placeholder " " tidak terlihat untuk input type text/email/password */
.input-underline::placeholder {
    color: transparent;
}

/* Gaya untuk opsi default pada select agar tidak terlihat di awal */
.input-underline option[value=""][disabled][selected] {
    display: none;
}



    .my-responsive-height {
  height: 150px;
}

/* Untuk layar menengah (md) dan ke atas */
@media (min-width: 768px) { /* Ini adalah breakpoint 'md' di Bootstrap */
  .my-responsive-height {
    height: 170px;
  }
}