/* import font */
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* body-font */
body {
    font-family: 'Poppins', sans-serif;
    
}
/* smooth scroll */
html {
    scroll-behavior: smooth;
}
/* color custom */
.c-blue{
  color: #026CF4;
}
/* font custom */
.h-tittle{
    font-size: 28px;
    font-weight: 700;
}
.h-sub{
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
}

.s-title{
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 600;
  
}
.s-title .bold{
  font-weight: 800;
}
.s-title::before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #026CF4;
    
    margin-bottom: 20px;
}

.s-title.l-wh::before {
    content: "";
    display: block;
    width: 50px;
    height: 1px;
    background: #ffffff;
    margin-left: auto;
    margin-bottom: 20px;
}

.s-sub{
   font-family: "Source Sans 3", sans-serif;
   font-weight: 300;
   font-size: 16px;
}

.f-sub{
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-align: center !important;
}

  .s-sub-2{
    font-family: "Source Sans 3", sans-serif;
   font-weight: 400;
   font-size: 12px;
  }

/* navbar */
  .navbar{
    background: rgba(8, 41, 91, 0.95); 
    /* backdrop-filter: blur(15px); */
  }
.navbar-nav{
    padding: 15px 15px !important;
    gap: 30px;
    align-items: center;
}
.navbar-brand{
    padding: 15px 10px !important;
}
.navbar-nav .nav-item .nav-link{
    position: relative;
    color: white;
    font-weight: 500;
    font-size: 14px;
}

.navbar-nav .nav-item .nav-link.active {
    color: #fff;
}


.navbar-nav .nav-item .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #fff;
    border-radius: 10px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after {
    width: 75%;
}

/* sidebar off canvas */
.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -300px;

    width: 300px;
    height: 100vh;

    background: #fff;

    z-index: 1050;

    transition: all .3s ease;

    box-shadow: 0 0 20px rgba(0,0,0,.15);
}

.mobile-sidebar.show {
    right: 0;
}

.menu-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.5);

    opacity: 0;
    visibility: hidden;

    transition: .3s ease;

    z-index: 1049;
}

.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

/* jumbotron */
.jumbotron{
    /* margin-top: -170px; */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 32.75%, rgba(0, 0, 0, 0.00) 51.09%, rgba(0, 0, 0, 0.25) 99.83%),  url('../media/banner/basigaro-banner.jpeg')  lightgray -16.192px 2.061px / 101.874% 100% no-repeat;
    background-size: cover;
    background-position: center;
    height: 750px;
    color: white;
    z-index: -9999 !important;
}

.jumbotron .container-fluid{
    padding-top: 60px;
    padding-left: 30px;
 }


/* btn */
.btn{
    padding: 7px 30px;
    font-size: 10px;
    border-radius: 75px;
}

.btn.btn-success{
    background: #08B19A;
}

.btn.btn-primary{
    background: #026CF4;
}

.btn.btn-outline-blue {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn.btn-outline-blue:hover {
    background: #026CF4;
    color: white;
    border-color: #026CF4;
}

/* padding custom*/
.p-sm{
    padding: 7px 20px;
}

/* form custom */
.search-wrapper {
    position: relative;
    width: 100%;
}

.search-form {
    height: 45px;
    border-radius: 50px;
}

.search-form::placeholder {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  color: #6868686d;
}

.search-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    width: 35px;
    height: 35px;

    border-radius: 50%;
    border: none;

    background: #026CF4;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;
}

/* card-glass */

.card.card-glass {
  background: rgba(80, 80, 80, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.15);
  /* border-radius: 15px; */
  font-family: "Source Sans 3", sans-serif;
}
.card.card-glass .card-title{
  
  font-size: 22;
  font-weight: 600;
  padding: 10px 0px;
}
.card.card-glass .card-body{
  font-size: 12px;
  font-weight: 400;
}
.card.card-profil{
  border-color: white;
  border-radius: 25px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
  padding: 20px 25px;
}

.card.card-layanan-p{
  border: none;
  background:
      linear-gradient(
          rgba(2, 108, 244, 0.5),
          rgba(2, 108, 244, 0.5)
      ),
      url(../media/image/kanwil-malut-flat.png);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 25px 25px 0px 0px;
  padding: 10px 0px;
}

.card.card-layanan-i{
  border: none;
  background:
      linear-gradient(
          rgba(8, 177, 154, 0.5),
          rgba(8, 177, 154, 0.5)
      ),
      url(../media/image/tolire.png);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  border-radius:  0px 0px 25px 25px;
  padding: 0px; 
}


.superapp-section{
  background:url('../media/image/bg-superapps.png');
    background-size:cover;
    background-position:center;
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:80px 0;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius:  25px 25px 25px 25px;

}

.bg-superapp{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1;

}

/* Judul */

.title-superapp{

    margin-bottom:25px;
    text-align:center;

}

.title-superapp h1{

    font-size:70px;
    font-weight:900;
    line-height:1;
    margin:0;

    color:#0d47a1;

    -webkit-text-stroke:5px #ffc107;

    text-shadow:
        2px 2px 6px rgba(0,0,0,.2);

}

/* Kotak logo */

.logo-box{

    display:inline-block;
    width:55px;
    height:55px;
    border-radius:12px;
    background:#0d47a1;
    color:white;
    text-align:center;
    line-height:55px;
    font-size:28px;
    margin-right:10px;

}

/* HP */
 .hp-image{
    max-width:450px;
    width:100%;

}

/* Deskripsi */

.desc{

    color:#0d47a1;
    font-weight:700;
    line-height:1.6;

}

/* Tombol */

.store img{

    width:220px;

    margin-bottom:15px;

}

.store img:hover{

    transform:translateY(-5px);

}

.card-poster{
  position: relative;
  background: url(../media/image/bg-green.png);
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  margin-top: -15px;
  margin-bottom: -30px;
  z-index: 1;
  /* padding: 20px 25px; */
}

.card-img-poster{
  position: relative;
  background: url(../media/image/basigaro-poster.png);
  background-size: cover;
  background-position: center;
  border-radius: 0px 0px 25px 25px  ;
  padding-bottom: 225px;
  border: none;
}

.card-text-poster {
  position: relative;
  padding: 40px 50px;
  text-align: center;
}

.card.card-sublayanan{
  border-radius: 20px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20);
  padding: 20px 25px;
}

/* img-custom */
.img-banner{
  width: 225px;
}
.img-logo1 {
  width: 200px;
}
.img-logo-layanan {
  height: 100px;
}

.logo-line {
    width: 100%;
    height: 1px;
    background: #8A8A8A;
    margin: 20px auto 0;
    opacity: .8;
}


/* section */
.sec-profil{
  margin-top:-20px;
  margin-bottom:50px;
}

.sec-layanan{
  margin-top: 100px;
  margin-bottom:50px;
  padding: 0px 0px;
}

.sec-kontak{
  margin-top: 100px;
  margin-bottom: 50px;
}
.sec-footer{
  position: relative;
  background: url(../media/banner/footer.png);
  background-position: center;
  background-size: cover;
  height: 250px;
}
.menu-footer-1 {
  padding: 35px 0px 0px 0px;
}

.menu-footer-2 {
  padding: 20px 0px 0px 0px;
}
.contact-icon {
    width: 40px;
    height: 40px;
    background: #026CF4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.contact-divider {
    width: 1px;
    height: 30px;
    background: #E5B36A;
  
}

.contact-text {
    font-family: "Source Sans 3", sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.frame-maps{
  height: 125px;
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* font custom */
  .s-title{
    font-size: 28px;
  }
  .s-sub{
    font-size: 18px;
  }

  .s-sub-2{
   font-size: 14px;
  }

  /* navbar */
  .navbar{
    background: none;
  }

  .navbar-nav{
    padding: 25px 25px !important;
  }
  .navbar-brand{
      padding: 25px 50px !important;
  }
  /* sidebar off canvas */
    .mobile-sidebar,
    .menu-overlay {
        display: none;
    }
  /* jumbotron */
  .jumbotron{
      margin-top: -130px;
      height: 900px;
   }
   .jumbotron .container-fluid{
    padding-top: 250px;
    padding-left: 100px;
  }

  /* btn */
.btn{
    font-size: 12px;
}

 .h-tittle{
    font-size: 42px;
 }
 .h-sub{
    font-size: 18px;
}

  /* img-custom */
  .img-banner{
    width: 350px;
  }

  .img-logo1 {
    width: 400px;
  }

  .img-logo-layanan {
    height: 125px;
  }

  /* form */
  .search-form::placeholder {
    font-size: 16px;
  }


  /* section */
  .sec-profil{
    margin-top:-100px;
    margin-bottom: 50px;
  }

  .sec-layanan{
  padding: 0px 20px;
}

  .card.card-layanan-p{
    padding: 20px 0px;
  }
  .card.card-layanan-i{
    padding: 25px 35px 50px 50px;
  }

  .card-poster{
    margin-top: -25px;
  }

  .card-text-poster {
    padding: 40px 50px;
    text-align: left;
  }

  .card-img-poster{
    border-radius: 0px 25px 25px 0px;
    padding-bottom: 0px;
  }

  .frame-maps{
    width: 400px;
    height: 200px;
  }

.sec-footer{
  margin-bottom: 0px !important;
  height: 100px;
}
.menu-footer-1 {
  padding: 35px 0px 0px 0px;
}

.menu-footer-2 {
  padding: 15px 0px 0px 0px;
}

.f-sub{
  text-align: left !important;
}

/*
|--------------------------------------------------------------------------
| AUTH PAGE
|--------------------------------------------------------------------------
*/

@media(max-width:992px){

.login-page .container-fluid{

padding:25px;

}

.login-card{

max-width:560px;

}

}

.login-page{

    background:

    linear-gradient(

    rgba(8,41,91,.60),

    rgba(8,41,91,.60)

    ),

    url('../media/banner/basigaro-banner.jpeg');

    background-size:cover;

    background-position:center;
    opacity: 80%;

}

.login-page .container-fluid{

    padding-left:100px;

    padding-right:100px;

}

.login-page .overlay{

    position:absolute;

    inset:0;

    backdrop-filter:blur(3px);

}

.login-card{

    width:100%;

    max-width:520px;   /* sebelumnya 460px */

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.login-card h3{

    color:#08295B;

    font-weight:700;

}

.login-card .form-control{

    height:54px;

    border-radius:0 14px 14px 0;

    font-size:15px;

    box-shadow:none;

}

.login-card .btn{

    height:52px;

    border-radius:50px;

    font-weight:600;

    font-size:15px;

    transition:.3s;

    height:56px;

    font-size:16px;

}

.login-card .btn:hover{

    transform:translateY(-2px);

}

.login-card .btn-success{

    background:#08B19A;

    border:none;

}

.login-card .btn-primary{

    background:#026CF4;

    border:none;

}

.login-card-body{

    padding:60px;

}

.login-title{

    font-size:34px;

    font-weight:700;

    color:#08295B;

    margin-bottom:10px;

}

.login-subtitle{

    color:#6c757d;

    margin-bottom:35px;

}

.input-group-text{

    background:#fff;

    border-right:none;

    border-radius:14px 0 0 14px;

    padding-left:18px;
    
    padding-right:18px;

}

.input-group .form-control{

    border-left:none;

}

.service-list{

    margin-top:35px;

}

.service-item{

    margin-bottom:15px;

    font-size:15px;

    font-weight:500;

}

.service-item i{

    color:#08B19A;

    margin-right:10px;

}

.logo-auth{

    width:180px;

    height:auto;

    margin-bottom:25px;

}

.brand-title{

    font-size:52px;

    font-weight:700;

    color:#fff;

    margin-bottom:8px;

}

.brand-subtitle{

    font-size:18px;

    color:#fff;

    font-weight:500;

}

.brand-wrapper{

    max-width:500px;

}

.brand-wrapper{

    max-width:600px;

}

.brand-header{

    display:flex;

    align-items:center;

    gap:30px;

    margin-bottom:30px;

}

.brand-logo{

    width:180px;

    height:auto;

    flex-shrink:0;

}

.brand-title{

    color:#fff;

    font-size:72px;

    font-weight:700;

    line-height:1;

    margin:0;

}

.brand-line{

    width:140px;

    height:3px;

    background:#08B19A;

    margin:18px 0;

    border-radius:10px;

}

.brand-tagline{

    color:#fff;

    font-weight:600;

    line-height:1.5;

}

.brand-description{

    margin-top:25px;

    color:#fff;

    max-width:420px;

    font-size:17px;

}

.floating-services{

    position:absolute;

    right:460px;

    top:120px;

}

.service-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

    width:210px;

    height:70px;

    padding:15px;

    border-radius:20px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    color:#fff;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.service-card img{

    width:42px;

}

.service-card span{

    font-weight:600;

}

.service-1{

    top:0;

    left:0;

}

.service-2{

    top:110px;

    left:80px;

}

.service-3{

    top:230px;

    left:40px;

}

.service-4{

    top:360px;

    left:-30px;

}

.service-5{

    top:490px;

    left:20px;

}

.service-6{

    top:610px;

    left:90px;

}

.login-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:18px 0;

}

.login-divider span{

    width:70px;

    height:2px;

    background:#08B19A;

}

.login-divider i{

    color:#08B19A;

    font-size:10px;

}

.nav-user{

    display:flex;

    align-items:center;

    color:#ffffff;

    font-weight:600;

    text-decoration:none;

}

.nav-user:hover{

    color:#ffffff;

    text-decoration:none;

}

.nav-avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.3);

    margin-right:10px;

}

.dropdown-menu{

    min-width:220px;

    border:none;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.dropdown-item{

    padding:.75rem 1.25rem;

}

.btn-back{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#ffffff;

    color:#08295B;

    text-decoration:none;

    font-size:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

    transition:.25s;

}

.btn-back span{

    display:none;

}

.btn-back:hover{

    background:#65d7c0;

    color:#fff;

    text-decoration:none;

    transform:translateY(-3px);

}


}