@font-face {
    font-family: "Comfortaa2";
    src: url("../fonts/Comfortaa-Regular.ttf");
}
@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/Comfortaa-Regular2.ttf");
}
@font-face {
    font-family: "NotoSansTC";
    src: url("../fonts/NotoSansTC-Regular.otf");
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
:root {
    --white: #fff;
    --white-dark: #f5f5f5;
    --white-yellow: #fffef9;
    --gray-light: #E8E9EC;
    --gray: #ddd;
    --gray-dark: #c1c1c1;
    --gray-dark2: #AAAEB7;
    --yellow-light2: #fff8e1;
    --yellow-light: #edff01;
    --yellow: #fbefba;
    --orange-light: #f8b785;    
    --orange:#f9a61d;
    --orange-dark: #F89717;
    --red: #f24f22;
    --red-light : #FF597B;
    --red-dark: #E14D2A;
    --blue-dark: #0C2F91;
    --blue: #1744b5;
    --blue-light: #3B61B1;
    --bg-yellow: linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(237,255,1,1) 100%);
    --dark-light: #4C3A51;
    --dark: #333;
    --green: #28a745;
    --green-light: #A9F216;
    --bg-dark: linear-gradient(180deg, rgba(119,67,96,1) 0%, rgba(76,58,81,1) 100%);
    --rbg-blue: radial-gradient(circle, #1744b5 0%, #0c2f91 100%);
    --bg-orange: linear-gradient(180deg, rgba(255,201,1,1) 0%, rgba(252,162,19,1) 100%);
    --shadow-lg: 3px 6px 16px rgb(0 0 0 / 25%);
    --shadow-md: 2px 4px 12px rgb(0 0 0 / 15%);
    --shadow-smooth:    0.2px 0.3px 2.1px rgba(0, 0, 0, 0.012),
                        0.6px 0.8px 5.8px rgba(0, 0, 0, 0.019),
                        1.5px 1.8px 13.9px rgba(0, 0, 0, 0.027),
                        5px 6px 46px rgba(0, 0, 0, 0.05);
    --shadow-smooth-hv: 0.5px 1.6px 2.7px rgba(0, 0, 0, 0.005),
                        1.5px 4.4px 7.5px rgba(0, 0, 0, 0.011),
                        3.6px 10.6px 18.1px rgba(0, 0, 0, 0.021),
                        12px 35px 60px rgba(0, 0, 0, 0.05);
}


body {
    /*font-family: NotoSansTC, sans-serif;*/
    font-family: Comfortaa2, sans-serif;
    scroll-behavior: smooth;
     font-size: 14px;
     color: #333;
}
.input-group-text{
    font-size: 14px;
}
.h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
    font-weight: bold;
}
.h1, h1{
  font-size: 2.25rem;
}
.h2, h2{
    font-size: 1.5rem;
}
.h3, h3, .h4, h4 {
    font-size: 1rem
}
.h5, h5{
    font-size: 0.875rem;
}
.form-control{
    border: 2px solid #ccc;
    font-size: 14px;
}
.form-control:hover, .form-control:focus{
    box-shadow: var(--shadow-smooth) !important;
}
.select2-container--default .select2-selection--single{
    border: 2px solid #ccc;
}
.select2-container--default .select2-selection--single:foucs, .select2-container--default .select2-selection--single:hover{
    box-shadow: 1px 2px 10px #00000040 !important;
}
.text-primary {
    color: #1744b5!important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: rgb(12 47 145);
}
a, a:hover, a:focus {
    text-decoration: none;
}
a.btnlink{
    text-decoration: underline;
    color: #fff;
}
a.btnlink:hover, a.btnlink:focus{
    color: #fff8e1;
}
/*.padding-top{
    padding-top: 70px;
}*/
.padding-bottom{
    padding-bottom: 90px;
}
.padding-page {
    padding: 85px 26px;
}
.shadow{
    box-shadow: var(--shadow-smooth) !important;
}
.border-radius, .card{
    border-radius: 8px;
}
.bg-blue {
    background-color: #1744b5;
    background: radial-gradient(circle, #1744b5 0%, #0c2f91 100%);
    color: #fff;
}
.bg-orange{
    background: radial-gradient(circle, #F89717 0%, #F15F2E 100%);
    color: #fff;
}
.bg-white-y{
    background-color: var(--white-yellow);
}
.bg-blue-light {
    background-color: #3B61B1;
    background: radial-gradient(circle, #3B61B1 0%, #1744b5 100%);
    color: #fff;
}
.btn.btn-blue{
    border-radius: 8px !important;
    color: #fff;
    padding: .375rem  1.5rem;
    background: #0C2F91;
}
.btn.btn-blue:hover, btn.btn-blue:focus{    
    background: #09236E;
    box-shadow: 2px 3px 10px #00000085;
}
.btn.btn-blue-light{
    color: #fff;
    border-width: 2px;
    border-radius: 8px;
    border-color: #1744b5;
    background-color: #1744b5;
    padding: .375rem 1.5rem;
}
.btn.btn-blue-light:hover{
    color: #e8e9ec;
    background-color: #092573;
    border-color: #092573;
    box-shadow: 2px 3px 10px #00000085;
}

.btn.btn-outline-blue{
    color: #fff;
    border-width: 2px;
    border-radius: 8px;
    border-color: #1744b5;
    background-color: transparent;
}
.btn.btn-outline-blue:hover{
    color: #e8e9ec;
    background-color: #1744b5;
    border-color: #1744b5;
    box-shadow: var(--shadow-md);
}
.btn-orange{
    color: #fff;
    border-width: 2px;
    border-radius: 8px;
    border-color: #F89717;
    background-color: #F89717;
    padding: .375rem 1.5rem;
}
.btn-orange:hover{
    color: #fff;
    font-weight: bold;
    background-color: #f9a61d;
    border-color: #f9a61d;
    box-shadow: var(--shadow-md);
}
.btn-outline-orange{
    color: #F89717;
    border-width: 2px;
    border-radius: 8px;
    border-color: #F89717;
    background-color: transparent;
}
.btn-outline-orange:hover {
    color: #e8e9ec;
    background-color: #F89717;
    border-color: #F89717;
    box-shadow: var(--shadow-md);
}

.border-bottom {
    /*border-bottom: 2px solid #dee2e6!important;*/
    border-bottom: 1px solid var(--yellow-light)!important;
}
.border-top {
    /*border-top: 2px solid #dee2e6!important;*/
    border-top: 1px solid var(--yellow-light)!important;
}
.border{
    border: 1px solid var(--white-yellow)!important;
}
.border-y{
    border: 1px solid var(--white-dark)!important;
}
/*datepicker*/
.datepicker td, .datepicker th{
    padding: 5px 8px;
    margin: 2px;
}
.datepicker table tr td.active:active, 
.datepicker table tr td.active:hover:active, 
.datepicker table tr td.active.disabled:active, 
.datepicker table tr td.active.disabled:hover:active, 
.datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, 
.datepicker table tr td.active.disabled.active, 
.datepicker table tr td.active.disabled:hover.active{
    border-radius: 6px;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover{
    border-radius: 6px;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{
    background-color: #1744b5  !important;
    background-image: -moz-linear-gradient(to bottom, #1744b5, #0c2f91 ) !important;
    background-image: -ms-linear-gradient(to bottom, #1744b5, #0c2f91 ) !important;
    background-image: -webkit-linear-gradient(to bottom, #1744b5, #0c2f91 ) !important;
    background-image: -o-linear-gradient(to bottom, #1744b5, #0c2f91 ) !important;
    background-image: linear-gradient(to bottom, #1744b5, #0c2f91  ) !important;               
}

/*navbar menu*/

.navbar-light {
    background:#fff !important;
    box-shadow: 0px 11px 11px rgba(194, 194, 194, 0.18);
}

.search-form {
    border-radius: 50px;
    background: #ccc;
    font-style: italic;
    padding: 2px 12px;
    height: auto;
}
.select2-selection {
  -webkit-box-shadow: 0;
  box-shadow: 0;
  background-color: #fff;
  border-radius: 0;
  color: #555555;
  font-size: 16px;
  outline: 0;
  min-height: calc(1.5em + .75rem + 2px);
  height: calc(1.5em + .75rem + 2px);
  text-align: left;
}
.select2-results__option {
    font-size: 14px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: .1rem .75rem !important;
  line-height: 30px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  padding: .375rem .75rem !important;
  top: 4px !important;
  height: 29px;
}


/*=====================
    Menu Header
=======================*/
/*.navbar-green {
    background: #32bb6a !important;
    box-shadow: 0px 2px 8px #008000de;
   height: 92px;
}*/
#scrollUp {
    right: 20px;
    z-index: 33;
    bottom: 30px;
    text-align: center;
}
#scrollUp i {
    height: 47px;
    width: 47px;
    line-height: 47px;
    font-weight: 700;
    background: var(--orange-dark);
    box-shadow: var(--shadow-md);
    font-size: 25px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    transition: all 500ms ease;
    display: block;
    color: #fff;
    border-radius: 50%;
}
#scrollUp i:hover{
    background-color: var(--orange);
    box-shadow: var(--shadow-lg);
}


.header .navbar{
    left: 0;
    padding: .25rem 1rem;
    right: 0;
    position: fixed;
    /*background-color: #f6f6f6;*/
    top: 0;
    z-index: 111;
    /*background-image: linear-gradient(90deg, #0C2F91 0%, #1744B5 100%);*/
}
.header.sticky nav.navbar  {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    -webkit-box-shadow: 0px 1px 16px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 1px 16px rgb(0 0 0 / 10%);
    box-shadow: 0px 1px 16px rgb(0 0 0 / 10%);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
    animation: fadeInDown .5s both 0.2s;
}
.header .navbar .btn-outline-light{
    color: #fff;
    border-width: 2px;
    border-color: #fff;
}
.header .navbar .btn-outline-light:hover{
    color: #f5f5f5;
    background-color: #dc1013;
    border-color: #d20003;
    box-shadow: 0 3px 10px #d20003;
}
.header .navbar .navbar-brand{
    margin-right: 2rem;
    width: 100%;
    height: auto;
    max-width: 170px;
}
.header .navbar-brand img{
    width: 100%;
    height: auto;
}
.navbar-dark .navbar-toggler{
    color: #ffffff;
    border: 1px solid #ffffff;
}
.header .nav {
    justify-content: center;
}
.header .nav li{
    position: relative;
    padding: 5px 18px;
}
.navbar .navbar-nav li .nav-link{
    color: #65647C  !important;
    padding: 0px !important;
    font-size: 16px;
    margin-right: 2px;
    margin-left: 2px;
    font-weight: bold;
    position: relative;
}
.header .navbar .navbar-nav li .nav-link:hover,.header .navbar-nav .dropdown-menu.sub-menu .dropdown-item:hover{
    color: #F89717  !important;    
}
.header .nav li:hover .nav-link::before, .header .nav li.active .nav-link::before {
    visibility: visible;
    transform: scaleY(1);
    width: 80%;
}
.header .nav li .nav-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #F89717;
    bottom: -8px;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.navbar-collapse ul li .dropdown-toggle::after{
    display: inline-block;
    margin-left: .255em;
    vertical-align: 0 !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;    
    content: "\f0d7" !important;
    border: none !important;
}
.header nav .navbar-nav .dropdown-menu.sub-menu .dropdown-item {
    font-size: 15px;
    background-color: #fff;
    padding: 5px 15px;
    color: #28a745 !important;
    font-weight: bold;
}
.header nav .navbar-nav .dropdown-menu .dropdown-item:hover {
    border-radius: 0!important;
    box-shadow: inset #1744b5 4px 0px;
}

.header .navbar .btn-daftar-login{
    margin-left: auto;
    text-align: -webkit-right;
    text-align: right;
}

.header .nav li.btn-name{
    padding: 0;
}
.navbar .navbar-nav li.btn-name .dropdown-item{
    color: #1744b5;
    margin-right: 2px;
    margin-left: 2px;
    font-weight: bold;
    position: relative;
}
.navbar .navbar-nav li.btn-name .dropdown-item:active, .navbar .navbar-nav li.btn-name .dropdown-item:hover{
    color: #09236E !important;
    background-color: #fff;
}
.header nav .btn-name .dropdown-menu{
    top: 110%;
}
.header .btn-name .nama-user{
    width: 150px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .375rem 1.25rem .375rem .475rem;
}
.navbar-collapse ul li a[aria-expanded="true"]::after{
    content: "\f0d8" !important;
}
.header .btn-name .dropdown-toggle::after {
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d8";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    right: 15px;
    position: absolute;
    top: 6px;

}
.header .btn-name a[aria-expanded="false"]::after{
    content: "\f0d7" !important;
}
.dropdown-menu.show
.header .btn-name .nama-user div{
    width: 140px;
  
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}
#cektiket.show .modal-dialog, #cekpaket.show .modal-dialog{
    top: 10%;
}
/*End menu header*/

/*banner New*/
.banner-header .content-section {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-header .content-section .container {
    height: 100%;
    width: 100%;
}
.banner-header .wrappercontent{
    width: 100%;
    height:100%;
}
.banner-header .content-section p{
    font-size: 16px;
    font-weight: 600;
}


/*====== SWIPER BANNER HEADER =========*/
.banner-header {
    position: relative;
    /*background-color: #F89717;*/
    /*background: radial-gradient(circle, #3B61B1 0%, #1744b5 100%);*/
    /*border-bottom: 2px solid #ccc;*/
}
.banner-header .swiper-banner {
    width: 100%;
    height: 390px;
    /*padding-top: 65px;*/
    padding-top: 20px;
    padding-bottom: 30px
  }

.banner-header .swiper-banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    /*background: #fff;*/

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.banner-header .swiper-nav div{
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    width: 60px;
    height: 60px;
}
.banner-header .swiper-pagination.swiper-pagination-bullets {
    bottom: 0px;
}
.banner-header .swiper-banner .swiper-pagination-bullet{
    width: 9px;
    height: 9px;
    background: #6C8EC7;
    border-radius: 50% !important;
    opacity: 1;
    transition: all ease .5s;
}
.banner-header .swiper-banner .swiper-pagination-bullet:hover {
    opacity: .8;
}
.banner-header .swiper-banner .swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    height: 7px;
    margin-bottom: 1px;
    border-radius: 4px !important;
}
.banner-header .swiper-button-prev{
    left:-100px;
}
.banner-header .swiper-button-next{
    right:-100px;
}
.banner-header:hover .swiper-button-prev{
    left: 0px;
}
.banner-header:hover .swiper-button-next{
    right: 0px;
}
.banner-header .swiper-button-prev:after{
    content: '\f053'!important;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    color: #fff;
    font-size: 35px;
    padding-right: 5px; 
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;

}
.banner-header .swiper-button-prev:hover:after{
    color: #E8E9EC;
    font-size: 35px;
    padding-right: 3px; 
}

.banner-header .swiper-button-next:after{
    content: '\f054'!important;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    color: #fff;
    font-size: 35;
    padding-left: 5px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.banner-header .swiper-button-next:hover:after{
    color: #E8E9EC;
    padding-left: 3px;
    font-size: 35px;
}

.banner-header .swiper-banner .swiper-slide img{
    width: auto;
    height: 100%;
}

/*======================== 
        Reservasi
 ========================*/
 .section-form-search{
    /*padding: 50px 0;*/
    background-position: bottom;
    background-size: cover;
    /*background-color: #E8E9EC;*/
}
.section-form-search .container{
    /*margin-top: -215px;*/
    position: relative;
    z-index: 2;
}
.section-form-search .text-header{
    font-weight: 600;
    color: #f5f5f5;
    font-size: 20px;
    text-align: center;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}
.section-form-search .booking-online{
    background: #fff;
    border-radius: 8px;
    overflow-y: hidden;
    box-shadow: var(--shadow-smooth);
    margin-top: -90px;
}
.section-form-search .list-group{
    background: var(--orange-dark);
    border-radius: 8px 8px 0px 0px;
    padding: 16px;
    grid-gap: 16px;
    height: 100%;
}
.section-form-search .list-group-item{
    z-index: 2;
    color: var(--white);
    background-color: transparent;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 10px 20px;

    font-weight: bold;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.section-form-search .list-group-item:hover{
    /*background-color: var(--orang);*/
    border: 2px solid var(--orange-light);
    color: var(--yellow-light2);
}
.section-form-search .list-group-item.active{
    background-color: var(--red);
    /*box-shadow: var(--shadow-md);*/
    border: 2px solid var(--red);
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
}
/*
.custome-listab .list-group-item{
    z-index: 2;
    color: var(--white);
    background-color: transparent;
    border-color: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 0px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.custome-listab .list-group-item .icon{
    max-width: 80px
}

.custome-listab .list-group-item::before {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: var(--white);
    left: 0px;
    bottom: -3px;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.custome-listab .list-group-item:hover::before, .custome-listab .list-group-item.active::before,.custome-listab .list-group-item:focus::before {
    visibility: visible;
    transform: scaleY(1);
    width: 100%;
}
.custome-listab .list-group-item.active{
    color: var(--white);
    font-weight: bold;
}
*/

.section-form-search .list-group-item i{
    font-size: 20px;
    /*width: 35px;*/
    padding-right: 10px;
    /*color: #fff;*/
}
.section-form-search .booking-online .form-data{
    /*border: 2px solid #eeeeee;*/
    padding: 32px 22px;
    background: #fff;
    border-radius: 0 0px 8px 8px;
}

.form-reservasi .form-data{    
    align-items: center;
}
.form-reservasi  .form-group{
}
.form-reservasi button{
    border-radius: .9rem;
    padding: .2rem .75rem !important;
    border: 2px solid #e2ef47;
}
.form-reservasi button:hover{
    border-radius: .9rem;
    padding: .2rem .75rem !important;
    border: 2px solid #fff;

}

.section-form-search .select2-container{
    width: 100%;
}
.section-form-search select.form-control {
    background-color: transparent;
    border: none;
    color: #222;
    border: 2px solid #ccc;
    /*border-radius: 0.9rem;*/
    box-shadow: none !important;
}
.section-form-search .input-group:before{
   font-family: "Font Awesome 5 Free";
    font-weight: 700;
    color: #222;
    font-size: 15px;
    top: 20%;
    left: 10px;
    padding-right: 5px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease; 
}
.section-form-search .input-group.kota-cabang::before {
    position: absolute;
    content: '\f64f'!important;
}
.section-form-search .input-group.agen::before {
    position: absolute;
    content: '\f54e'!important;
}
.section-form-search .input-group.date::before {
    position: absolute;
    content: '\f073'!important;  
}
.section-form-search .input-group.armada::before {
    position: absolute;
    content: '\f55e'!important;
}
.section-form-search .input-group.penumpang::before {
    position: absolute;
    content: '\f0c0'!important;
}
.section-form-search .qwe .select2-container--default .select2-selection--single{
    background-color: transparent;
    color: #222;
    border: 2px solid #ccc;
    box-shadow: none !important;
    padding-left: 25px;
    transition: all ease .5s;
}

.section-form-search .qwe .select2-container--default .select2-selection--single:focus,
.section-form-search .qwe .select2-container--default .select2-selection--single:hover,
.section-form-search .qwe .select2-container--open .select2-selection--single{
    background-color: transparent;
    color: #222;
    border: 2px solid #ccc;
    box-shadow: 1px 2px 10px #00000040 !important;
}
.section-form-search .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: #222;
    line-height: 30px;
}
.section-form-search .select2-container--default .select2-selection--single .select2-selection__rendered:hover,
.section-form-search .select2-container--open .select2-selection--single .select2-selection__rendered{
    color: #222;
}
.section-form-search  .select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color: #ccc transparent transparent transparent;
}
.section-form-search  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
   border-color: transparent transparent #ccc transparent;
}
.section-form-search .date input.form-control{
    background-color: transparent;
    font-size: 16px;
    color: #222;
    border-radius: 4px;
    border: 2px solid #ccc;
    box-shadow: none !important;
    padding-left: 27px;
    cursor: pointer;
}
.section-form-search .date input.form-control:focus, .section-form-search .date input.form-control:hover{
    background-color: transparent;
    color: #222;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 0 8px #0000003d !important;
}
.section-form-search .date input.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #222;
  opacity: 1; /* Firefox */
}

.section-form-search .date input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #222;
}

.section-form-search .date input.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: #222;
}
.section-form-search .date input.form-control:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #222;
  opacity: 1; /* Firefox */
}

.section-form-search .date input.form-control:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #222;
}

.section-form-search .date input.form-control:focus::-ms-input-placeholder { /* Microsoft Edge */
  color: #222;
}
.section-form-search .form-data ul.nav.nav-pills {
    background-color: #0c2f91;
    color: #fff;
    padding: 14px 0px;
    margin: 0 14px;
    border-radius: 6px;
}
.section-form-search .form-data a.nav-link {
    color: #eee;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.section-form-search .form-data a.nav-link:hover {
    background-color: #6c8ec7;
    border-radius: 6px;
    border-color: #6c8ec7!important;
    color: #fff;
}
.section-form-search .form-data .nav-link.active {
    background-color: #1744b5;
    color: #fff;
    border-radius: 6px;
    border: 1px solid #1744b5;

}
/*form booking online*/
.form-paket .input-group-addon{
    border: 2px solid silver;
    /*background-color: #569248;*/
    padding: 5px 7px;
    border-radius: 0;
    color: 444;
    margin-left: -2px;
    border-radius: 0 5px 5px 0;
}
#cekpaket .close{
    font-size: 2rem !important;
    font-weight: 700;
    line-height: 1;
    color: #09ab53;
    text-shadow: 0 1px 0 #080000;
    opacity: 1;
}
#cekpaket  .nav-tabs .nav-link span{
    width: 100%;
}
#cekpaket  .nav-tabs .nav-link::before{
    content: "";
    left: 0;
    top: -2px;
    /*margin-right: -1rem;
    margin-left: -1rem;*/
    position: absolute;
    width: 0;
    height: 3px;
    background: #28a745;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#cekpaket .nav-tabs .nav-link.active::before, #cekpaket .nav-tabs .nav-link:hover::before {
    visibility: visible;
    transform: scaleY(1);
    width: 100%;
}

/*================================================
    Slider Promo / slider rekomend produk
================================================*/

.banner-info .swiper-info {
    padding: 0px 12px 50px;
}

.section-rekomend .swiper-info , .section-rekomend .swiper-rekomend{
  width: 100%;
}
.section-rekomend .swiper-slide{
  /*width: calc(25% - 15px);*/
  width: calc(33% - 16px);
  height: auto;
}
.section-rekomend .swiper-slide .card{
    overflow: hidden;
    border: none;
}
.section-rekomend .rekomend-img {
    z-index: 2;
    position: relative;
    /*padding-top: 60%;*/
    overflow: hidden;
}
.section-rekomend .rekomend-img img {
    /*position: absolute;*/
    height: auto;
    min-width: 200px;
    width: 100%;
    height: auto;
    /*top: 0;*/
    /*left: 0;*/
    /*object-fit: cover;*/
}
.section-rekomend .card-rekomend .card-body{
    display: flex;
    flex-direction: column;
    padding: 14px;
    grid-gap: 5px;
    line-height: 1.15;
    color: var(--dark);
}
.section-rekomend .card-rekomend .card-body p, .section-rekomend .card-rekomend .card-title{
    margin-bottom: 0px;
}
.section-rekomend .card-rekomend .card-body .naikdari{
    min-height: 32px;
}
.section-rekomend .card-rekomend .card-title{
  min-height: 38px;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.section-rekomend .swiper-button-next, .section-rekomend .swiper-button-prev {
    top: 25%;
}

/*====================
    Keunggulan Fasilitas
======================*/
.section-keunggulan{
    position: relative;
    z-index: 2;
    background-color: var(--yellow-light2);
}
.font-gold {
    font-size: 2.2rem;
    font-weight: 700;
    color: #f98f09;
    text-shadow: -1px -1px 1px #f98f09, 1px -1px 1px #bc6a00, -1px 2px 1px #bc6a00, 2px 2px 1px #bc6a00;
}
.section-keunggulan .img-responsive{
    width: 50%;
    max-width: 100px;
}
.section-keunggulan .fasilitas.row {
    margin-bottom: 30px;
    position: relative;
}
.section-keunggulan .card-fasilitas{
    position: relative;
    overflow: hidden;
    height: 100%;
    margin: 15px 0;
    /*border: 1px solid var(--yellow-light2);*/
    background-color: var(--white-yellow);
    border-radius: 8px;
    padding: 18px;
    box-shadow: var(--shadow-smooth);
    transition: all .5s ease-in-out;
     
}
.section-keunggulan .card-fasilitas:hover{
    box-shadow: var(--shadow-smooth-hv)!important;
    /*border: 1px solid #ddd;*/
    border-radius: 6px;
    /*transform: scale(1.04);*/
    transform: translateY(-5px);
}
.section-keunggulan .service-item:nth-child(odd) .card-fasilitas::before {
    content:"";
    position: absolute;
    top: -65px;
    right: -80px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: var(--orange-light);
}
.section-keunggulan .service-item:nth-child(odd) .card-fasilitas::after{
    content:"";
    position: absolute;
    z-index: 1;
    bottom: -80px;
    left: -100px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: var(--orange-light);
}

.section-keunggulan .service-item:nth-child(even) .card-fasilitas::before {
    content:"";
    position: absolute;
    top: -65px;
    left: -80px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: var(--orange-light);
}
.section-keunggulan .service-item:nth-child(even) .card-fasilitas::after{
    content:"";
    position: absolute;
    z-index: 1;
    bottom: -80px;
    right: -75px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: var(--orange-light);
}
.section-keunggulan .card-fasilitas .icon-service{
    padding: 12px 0px 28px;
}
.section-keunggulan .fasilitas-text .text-header {
    color: var(--dark);
    font-size: 18px;
    font-weight: bold;
    /*min-height: 64px;*/
    margin-bottom: 16px;
}

.section-keunggulan .fasilitas-text p{
    margin-bottom: 0px;
    padding: 0 10px;
}

/* Layanan Service */
.section-Layanan {
    position: relative;
    /*margin: 50px 0;*/
    /*color: #fff;*/
    /*background-color: #0c2f91;*/
    /*background: radial-gradient(circle, #1744b5 0%, #0c2f91 100%);*/
    background-color: #eee;
    padding-top: 24px;
}
.section-Layanan  .header-content{
    position: relative;
}
.section-Layanan .text-header {
}
.section-Layanan .text-header .font-gold{
    margin-bottom: 30px;
}
.section-Layanan .layanan-icon{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}
.section-Layanan .layanan-icon img{
    width: 30px;
    height: 30px;
}
.section-Layanan .layanan-icon span{
    margin-left: 10px;
    color: #fff;
    font-size: 20px;
}
.section-Layanan .container-content{
    padding: 5px 0;
    position: relative;
    z-index: 2;
}
.section-Layanan .container-content .swiper-container{
    padding: 15px 0px;
}
.section-Layanan .container-content .list-content{
    display: flex;
    flex-direction: row;
    padding: 30px 0;
}
.section-Layanan .container-content .list-content .img-layanan{
    margin-bottom: 10px;
}
.section-Layanan .container-content .list-content img{
    width: 100%;
    height: auto;
}
.section-Layanan .container-content .list-content .text-layanan{

}

/*New Layanan*/
.section-Layanan .swiper-slide {
    margin: 20px 0;
}
.section-Layanan .swiper-layanan .swiper-pagination{
    text-align: right;
    padding: 0px 14px;
}
.section-Layanan .swiper-layanan .swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    background: transparent;
    border: 3px solid #6C8EC7;    
    border-radius: 50% !important;
    opacity: 1;
    transition: all ease .5s;
}
.section-Layanan .swiper-layanan .swiper-pagination-bullet:hover {
    opacity: 1;
}
.section-Layanan .swiper-layanan .swiper-pagination-bullet-active {
    opacity: 1;
    background: #6C8EC7;
    border: 3px solid #6C8EC7;
    /*border-radius: 4px !important;*/
}
.section-Layanan .swiper-slide .card-content {
    display: flex;
    align-items: center;
    /*box-shadow: 3px 3px 10px #0000004d;*/
    height: 100%;
    padding: 25px;
    border-radius: 6px;
    /*background-color: #fff;*/
}
.section-Layanan .swiper-slide .card-content .text-header{
    /*color: #fff;*/
    font-weight: 600;
    font-size: 20px;
}

/*=================
    Outlet
==================*/
.section-outlet {
    padding: 30px 0;
}
.section-outlet .header-content{
    position: relative;
    margin-bottom: 2.5rem;
}
.section-outlet .header-content .text-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    height: 100%;
    width: 100%;
    max-width: 500px;
    padding-top: 7rem;
    margin: 0 30px;
}
.section-outlet .text-header .font-gold{
    margin-bottom: 10px;
    text-align: right;
}

.section-outlet  .text-desk{
    margin-left: 10px;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: right;
}
.section-outlet .container-content .text-header{
    text-align: center;
    margin-bottom: 1rem;
}
.section-outlet .container-content .text-header span{
    font-size: 40px;
    font-weight: 600;
}
.section-outlet .list-outlet{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.section-outlet .list-outlet .card{
    margin: 20px 0;
    box-shadow: 0 0 16px #0000006e;
    border: 8px solid #fff;
    border-radius: 20px;
}
.section-outlet .list-outlet .map{
    width: 100%;
    height: 350px;
}
.section-outlet .list-outlet .map iframe{
    border-radius: 20px;
}
.section-outlet .list-outlet .nama-outlet h4{
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
.section-outlet .garis-outlet{
    border-bottom: 2px solid #09ab53;
    position: relative;
    margin: 30px 0;

}
.section-outlet .garis-outlet::before{
    content: '';
    position: absolute;
    bottom: -10px;
    height: 20px;
    width: 20px;
    left: 50%;
    border-radius: 50%;
    background-color: #09ab53;

}
.section-outlet .bulet-kecil::before{
    content: '';
    position: absolute;
    bottom: -5px;
    height: 10px;
    width: 10px;
    left: 15%;
    border-radius: 50%;
    background-color: #09ab53;
}
.section-outlet .bulet-kecil::after{
    content: '';
    position: absolute;
    bottom: -5px;
    height: 10px;
    width: 10px;
    right: 15%;
    border-radius: 50%;
    background-color: #09ab53;
}


/*===============
    footer
====================*/
img.bg-img-footer{
    background-color: #eee;
    width: 100%;
    margin-bottom: -5px;
    margin-top: -5px; 
}
.foot-background img{
    /*background: url('assets/images/beranda/foot.png');*/
    background-repeat: repeat-x;
    width: 100%;
    /*height: 115px;*/
    background-position-x: -160px;
    z-index: 1001;
    position: inherit;
}
.footer {
    /*background: #ddd;*/
    position: relative;
    background-color: var(--yellow-light2);
    color: var(--dark);
}
.footer .footer-top {
    padding: 42px 0 30px 0;
}
.footer-top .text-header{
    position: relative;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    font-weight: bold;
}
.footer-top .text-header::before {
    content: '';
    width: 11%;
    height: 2px;
    background: var(--orange);
    bottom: -8px;
    position: absolute;
}
.footer .footer-top .img-logo img{
    width: 100%;
    height: auto;
    /*margin-left: 15%;*/
    margin-bottom: 16px;
}
.footer .footer-top .contact-us p{
    margin-bottom: 14px;
    font-size: 14px;
}
.footer .footer-top .contact-us .contact-list {
    font-size: 14px;
}
.footer ul.menu {
    padding-inline-start: 0;
}
.footer .menu .list-menu {
    margin: 5px 0;
    list-style-type: none;
}

.footer .menu .list-menu .sub-menu{
    padding: 0;
}
.footer .menu .list-menu .sub-menu li{
    list-style-type: none;
}
.footer .menu .list-menu a{
    color: var(--dark);
    transition: .5s ease;
    position: relative;
}
.footer .menu .list-menu .sub-menu a{
    color: var(--dark);
    transition: .5s ease;
    position: relative;
}
.footer .menu .list-menu a:hover{
    padding-left: 18px;
    color: var(--orange-dark);
}
.footer .menu .list-menu a::Before{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: var(--orange-dark);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.footer .menu .list-menu a:hover::before{
    width: 14px;    
}

.footer .footer-copyright {
    padding: 20px 0;
    background-color: #0c2f91;
    background: var(--orange-dark);
}
.btn-foot {
    color:#484848;
    font-weight: bold;
}

.text-followsosmed{
   /* font-family: 'poppins';*/
   font-size: 16px;
    position: relative;
    color: #eee;
}
.followsosmed .list-sosmed a{
    color: var(--white-dark);
    background-color: var(--orange);
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    transition: .5s ease;
}
.followsosmed .list-sosmed a:hover{
    color: var(--dark);
    background-color: var(--orange-light);
}
.footer .followsosmed .list-sosmed a i{
    font-size: 20px
}
.footer .text-copyright{
    margin-bottom: 0;
    font-size: 14px;
    line-height: 14px;
    color: var(--white);
    padding-bottom: 0px;
}
/*===================
Update Terkini

=======================*/
/*.banner-berita .swiper-container-android .swiper-slide, .swiper-wrapper{
    padding-bottom: 45px;
}
.banner-berita .swiper-pagination.swiper-pagination-bullets {
    bottom: -25px;
}*/
.section-news .container.container-content {
    padding-top: 30px;
}
.section-news .swiper-slide {
    margin: 15px 0 25px;
    transform: scale(0.95);
}
.btn-selengkapnya:hover .card-berita {
    transform: scale(1.02);
}
.section-news .swiper-slide .card-berita{
    color: #222;
    border-radius: 10px;
    box-shadow: 0 1px 10px rgba(0,0,0,.15)!important;
}
.section-news .swiper-slide .berita-img{
    border-radius: 10px 10px 0 0 ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 210px;
}
.section-news .card-text{
    font-size: 14px;
    height: 95px;
}
.swiper-button-next, .swiper-button-prev{
    background-color: #fff;
    padding: 10px;
    width: 45px;
    height: 60px;
     border-radius: 6px; 
     box-shadow: var(--shadow-smooth);
    transition: all ease-in .5s;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 6px;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 6px;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-family: "Font Awesome 5 Free";
    font-size: 25px;
    color: #F89717;
    font-weight: 600;
}
.swiper-button-prev:after{
    content: "\f053";
}
.swiper-button-next:after{
    content: "\f054";
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
}
/*=====================
    kontak us
    ===================*/
.title-contact{
    background: rgb(113,184,18);
    background: radial-gradient(circle, rgba(113,184,18,1) 0%, rgba(70 163 32) 100%);
    color: #fff;
    padding-top: 1.5rem;
    height: 200px;
}
.section-kontak .title-contact::before {
    content: '';
    position: absolute;
    left: 45%;
    top: 25%;
    margin-top: 20px;
    width: 10%;
    height: 10px;
    color: white;
    border-bottom: 5px solid white;
    border-radius: 5px;
}

.form-kontak{
    margin-top: 10px;
}
.send-pesan{
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
    background-color: #fff;
    border-radius: 8px 0 0 8px;
}
.kontak-number{
    background: rgb(248 160 27);
    background: radial-gradient(circle, rgb(248 162 30) 0%, rgb(250 139 4) 100%);
    color: #fff;
    box-shadow: 2px 0px 1rem rgb(0 0 0 / 30%) !important;
    border-radius: 0 8px 8px 0;
}
.kontak-number .icon-sosmed {
    padding: 5px;
}
.kontak-number .call-center i{
    font-size: 1.5rem;
    color: #efefef;
}
.kontak-number .icon-sosmed i{
    font-size: 2.5rem;
    color: #efefef;
}
/*==================
    Page Pembayaran
    ==================*/
.section-pembayaran .title-pembayaran {
    background: rgb(9 171 83);
    /*background: radial-gradient(circle, rgba(113,184,18,1) 0%, rgba(70 163 32) 100%);*/
    color: #fff;
    padding-top: 1.5rem;
    height: 200px;
}
.section-pembayaran .desk-pembayaran{
    color: #262626;
    background-color: #fff;
    margin-top: -90px;
    border-radius: 5px;
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
}
.section-pembayaran .title-pembayaran::before {
    content: '';
    position: absolute;
    left: 45%;
    top: 25%;
    margin-top: 20px;
    width: 10%;
    height: 10px;
    color: white;
    border-bottom: 5px solid white;
    border-radius: 5px;
}
.section-pembayaran .form-pembayaran .list-group{
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
}
.section-pembayaran .form-pembayaran .card-list-content{
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
    border-radius: 5px;
}
.section-pembayaran .list-group-item.active{
    z-index: 2;
    color: #fff !important;
    background: rgb(9 171 83);
    background: radial-gradient(circle, rgb(7 186 89) 0%, rgb(9 171 83) 100%);
    border-color: #09ab53 !important;
}
.section-pembayaran .list-group a{
    color: #008000;
}

.section-pembayaran .form-pembayaran .form-pembayaran-list{
    border-radius: 10px;
    padding: 15px;
    display: flex;
}
.section-pembayaran .form-pembayaran .tab-content{
    color: #262626;
}
.section-pembayaran .form-pembayaran .tab-content .nav-tabs{
    background-color: #f5f5f5;
}
.section-pembayaran .tab-pane .carddebit {
    background-color: #f5f5f5;
    border-top: 3px solid #28a745;
    border-bottom: 0 !important;
} 
.section-pembayaran .tab-pane li{
    padding: 5px 0 !important;
}

.section-pembayaran .nav-tabs .nav-link::before{
    content: "";
    margin-right: -1rem;
    margin-left: -1rem;
    position: absolute;
    width: 0;
    height: 3px;
    background: #09ab53;
    top: -2px;
    visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.section-pembayaran .nav-tabs .nav-link.active::before, .section-pembayaran .nav-tabs .nav-link:hover::before {
    visibility: visible;
    transform: scaleY(1);
    width: 100%;
}
/*======================
    Profile member
=====================*/

.section-profile .title-profile {
   /* background: rgb(113,184,18);
    background: radial-gradient(circle, rgba(113,184,18,1) 0%, rgba(70 163 32) 100%);*/
    color: #fff;
    padding-top: 1.5rem;
    height: 200px;
}
.section-profile .data-profile{
    color: #262626;
    background-color: #fff;
    margin-top: -90px;
    border-radius: 5px;
    box-shadow: 0 0 1rem rgba(0,0,0,.3)!important;
}
.section-profile .title-profile::before {
    content: '';
    position: absolute;
    left: 45%;
    top: 25%;
    margin-top: 20px;
    width: 10%;
    height: 10px;
    color: white;
    border-bottom: 5px solid white;
    border-radius: 5px;
}
.section-profile .list-group{
    background: #0C2F91;
    padding: 15px;
}
.section-profile .list-group-item{
    background: transparent;
    color: #fff !important;
    border-color: transparent !important;
    margin: 10px 0px;
}
.section-profile .list-group-item.active{
    z-index: 2;
    background: #1744b5;
    border-color: transparent !important;
    border-radius: 6px;
    margin: 10px 0px;
    
}

/*.section-profile .list-group a{
    color: #0C2F91;
}*/
.section-profile .list-group a i{
    margin-right: 10px;
    font-size: 20px !important;
}
.section-profile .form-profile .form-profile-list{
    border-radius: 10px;
    padding: 15px;
    display: flex;
}
.section-profile .form-profile .tab-content{
    color: #262626;
}
.section-profile .form-profile .tab-content .form-control{
    color: #0C2F91;
}
.section-profile #list-pesanan .badge.badge-pill,#list-inbox .badge.badge-pill{
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
    padding: 5px 15px
}
.section-profile #list-inbox .text-desk{
    max-height:48px; 
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
    white-space: nowrap;
}
#profile .select2-container{
    width: 100% !important;
    font-size: 16px;
}
.select2-selection{

}
.section-profile #profile .select2-container .select2-selection--single  .select2-selection__rendered {
  color: #0C2F91 !important;
}

.section-profile .list-book-btn{
    position: absolute;
    right: 15px;
    bottom: 20px;
    cursor: pointer;
}
.section-profile .list-book{
    position: relative;
}
.section-profile .tab-content .icon-fa  i{
    font-weight: 900;
    font-size: 26px;
    /*color: #5aac19;*/

}

.carddebit img{
    height: 25px;
    width: 100%;
    object-fit: contain;
}
.nav-tabs .nav-link img{
    height: 25px;
    width: 100%;
    object-fit: contain;
}
.form-pembayaran .custom-control-label{
    cursor: pointer;
}


  /* Timeline versi 2 */
  .text-layanan .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1000px;
    
  }
  .text-layanan .item-header{
    margin: 0 auto;
  }
  .text-layanan .item .image {
    padding-right: 1rem;
  }
.text-layanan .item .image::before {
    content: '';
    width: 0;
    /* height: 100%; */
    border-left: 1px solid #232b50;
    position: absolute;
    top: -60px;
    bottom: 0;
    left: 3.3rem;
}
.text-layanan .item .image > div {
    position: relative;
    text-align: center;
    font-size: 0.8em;
    width: 5rem;
    height: 5rem;
    background-color: #09ab53;
    border-radius: 50%;
    border: 0.3em solid #fff;
    padding: 1rem;
}
.text-layanan .item .image img {
    width: 2.5rem;
    height: 2.5rem;
    
}
.text-layanan .item .image span {
    display: block;
    clear: both;
    padding: 0.25em 0;
    margin: 0.5em 0;
    background: #3b4262;
}
.text-layanan .item .details {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.text-layanan .item .details  {
    align-self: center;
}
.text-layanan .item .details  h1 {
    color: #444444;
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.1em;
}
.text-layanan .item .details p {
    margin: 0;
    padding: 0;
    line-height: 150%;
    font-size: 16px;
    color: #515151;
}
.item-content{
    margin-top: 10px;
}
.text-layanan .bullet-hijau{
    position: relative;
    width: 5em;
    align-self: center;
}
.bullet-hijau .img{
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    margin:0 1.9rem;
    background-color: #09ab53;
    border: 0.5em solid #09ab53;
}

.text-layanan .item .details button{
    color: #09ab53;
    box-shadow:none;
}
.text-layanan .item .details button:hover, .text-layanan .item .details button:active{
    color: #008000;
    font-weight: 700;
    box-shadow: none;
}


/*=============================
        SIDEBAR LOGIN-WA
==================================*/
.sidebar-fixed nav{
    position: fixed;
    width: 100px;
    transition: all 0.5s linear;
    /*box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);*/
    z-index: 102;
    bottom: 0px;
    text-decoration: none;
    right: 0;
    padding: 0;
    
}
.sidebar-fixed nav ul{
    padding: 0;
    margin: 0;
}
.sidebar-fixed nav li{
  margin-bottom: 20px;
  position:relative;
  list-style-type:none;
  text-align: center;
    text-align: -webkit-center;
}
.sidebar-fixed nav li a.btn-wa{
  background-color: #fff;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
   border-radius: 50%;
   box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
    margin: 5px 0;
  transition: all .5s linear;

}
.sidebar-fixed nav li span{
    font-weight: 600;
    color: #000;
}
.sidebar-fixed nav li.icon-login a.btn-user {
    background-color: #fff;
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    writing-mode: vertical-lr;
    box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
    color: #09ab53;
}
.sidebar-fixed nav li.icon-login .name-user{
    width: 90px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-fixed .dropdown-menu{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease-in;
    width: 0;
}
.sidebar-fixed .dropdown-menu.show{
    position:  absolute;
    width: 100%;
}
.sidebar-fixed .dropleft .dropdown-toggle::before{
    display: none;
}
.sidebar-fixed nav li a i{
  font-size: 45px;
}
.sidebar-fixed ul li a span{
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tooltip-inner {
    max-width: 100%;
    padding: .5rem;
    font-size: 18px;
    color: #000;
    text-align: center;
    background-color: #fff5c2;
    border-radius: .35rem ;
    box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
.tooltip.show{
    top: -30px !important;
}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
    top: 10px !important;
    border-width: .0rem 0.9rem .8rem 0rem !important;
     border-left-color: transparent !important; 
    border-bottom-color: #fff5c2 !important;
    border-right-color: transparent !important;

}
.sidebar-fixed .dropdown-item:hover,.sidebar-fixed .dropdown-item:focus {
    color: #fff;
    text-decoration: none;
    background-color: #09ab53;
}
.sidebar-fixed .dropdown-item:active{
     background-color: #078f45;
}
/*===================
SK modal
=====================*/

#SKmodal .modal-content{
    border: 0px !important;
    border-radius: 14px;
}
#SKmodal .modal-content .modal-header{
    border: 0px !important;
    border-radius: 13px 13px 0px 0px;
}
#SKmodal .close{
    color: #eee;
    opacity: 1;
    text-shadow: 0 1px 2px #979797;
    font-size: 25px;
}
#SKmodal .close:focus,#SKmodal .close:active, #SKmodal .close:hover{
    outline: none !important;
    opacity: 1;
    color: #fff;
}
#SKmodal .modal-body li{
    line-height: 20px;
    text-align: justify;
    padding: 5px;
}
#SKmodal .modal-body .sk-list{
    font-weight: bold;
}
#SKmodal .modal-body .sub-menu{
    list-style-type: lower-alpha;
}
#SKmodal .modal-body li.sk-list .sub-menu, #SKmodal .modal-body li .menu-sub-menu{
    font-weight: normal;
}
#SKmodal .modal-body li .menu-sub-menu{
    list-style-type: disc;
}


/*======================================
            page about
  ======================================*/
/*.section-about{
    background-color: #e6e7ea;
}*/
.section-about .container{
    position: relative;
}
.section-about .pilih-content {
    margin-top: -30px;    
    margin-bottom: 20px;
}
.section-about ul.nav.nav-pills{
    background-color: #0c2f91;
    color: #fff;
    padding: 24px 10px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgb(0 0 0 / 55%);
}

.section-about a.nav-link{
    color: #8cafff;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.section-about a.nav-link:hover {
    background-color: #6c8ec7;
    border-radius: 6px;
    border-color: #6c8ec7!important;
    color: #fff;
}
.section-about a.nav-link[aria-selected="true"] {
    background-color: #1744b5;
    color: #fff;
    border-radius: 6px;
    border: 1px solid #1744b5;
}
/*======================================
        page Cabang/ Outlet
======================================*/
.section-cabang{
    background-color: #eee;
    padding-bottom: 40px;
}
.section-cabang .search-cabang{
    /*background: #1744b5;*/
    background-color: var(--white);
    padding: 20px 6px;
    border-radius: 8px;
    /*margin-top: -30px;*/
    margin-bottom: 30px;
    position: relative;
    box-shadow: var(--shadow-smooth);
}
.section-cabang .search-cabang .form-group{
    margin-bottom: 0px;
}
.section-cabang .form-control{
    background: transparent;
    color: #fff;
}
.section-cabang .form-control:focus, .section-cabang .form-control:hover{
    background: transparent;
    color: #fff;
}
.section-cabang input.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #eee;
    opacity: 1; /* Firefox */
}

.section-cabang input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #eee;
}
.section-cabang input.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #eee;
}
.section-cabang input.form-control:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #eee;
    opacity: 1; /* Firefox */
}
.section-cabang input.form-control:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #eee;
}
.section-cabang input.form-control:focus::-ms-input-placeholder { /* Microsoft Edge */
    color: #eee;
}
.section-cabang .store-item{
    border-radius: 6px;
}
.section-cabang .store-item .row .col-12{
    align-self: center;
}
.card_metodebayar .custom-control-input:disabled~.custom-control-label,
.card_metodebayar .custom-control-input[disabled]~.custom-control-label {
    background-color: #eee;
    cursor: not-allowed;
}
.card_metodebayar .methodpay-item {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.card_metodebayar input[type=radio]:checked+label {
    border: 2px solid #1744b5;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 3px 10px rgb(0 0 0 / 15%);
}


.card_metodebayar .methodpay-item img{
    width: 70px;
    height: auto;
}
.card_metodebayar .methodpay-item::before {
    position: absolute;
    top: calc(50% - .6rem);
    left: 10px;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.card_metodebayar .methodpay-item::after {
    position: absolute;
    top: calc(50% - .6rem);
    left: 10px;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.card_metodebayar .methodpay-item .text-payment {
    margin-left: 24px;
    font-weight: bold;
}
/*======================
    responsive mobile
  =======================*/
@media only screen and (min-width: 1919px) {
    .container{
        min-width: 1536px !important;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1026.6px) and (max-width: 1919px) {
    .header .navbar-brand img{
        width: 125px;
    }
    .navbar .navbar-nav li .nav-link, .navbar .navbar-nav li .dropdown-item{
        padding: 5px 10px !important;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1026.5px) {
    .header .nav li{
        position: relative;
        padding: 5px 15px;
    }
    .header .navbar-brand img{
        width: 125px;
    }
    .header .nav li {
        position: relative;
        padding: 5px 20px;
    }
}
@media only screen and (max-width: 992px) {
    /*hambuerger icon animation*/
    .navbar .menu {
      background-color: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      padding: 0;
      outline:none;
    }
    .navbar .menu .line {
      fill: none;
      stroke: #fff;
      stroke-width: 6;
      transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .navbar .menu .line1 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }
    .navbar .menu .line2 {
      stroke-dasharray: 60 60;
      stroke-width: 6;
    }
    .navbar .menu .line3 {
      stroke-dasharray: 60 207;
      stroke-width: 6;
    }
    .navbar .menu[aria-expanded="true"] .line1 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }
    .navbar .menu[aria-expanded="true"] .line2 {
      stroke-dasharray: 1 60;
      stroke-dashoffset: -30;
      stroke-width: 6;
    }
    .navbar .menu[aria-expanded="true"] .line3 {
      stroke-dasharray: 90 207;
      stroke-dashoffset: -134;
      stroke-width: 6;
    }
    .header .nav li:hover .nav-link::before, .header .nav li.active .nav-link::before {
    visibility: visible;
    transform: scaleY(1);
    width: 40%;
    }
    
    .header .nav li .nav-link::before {
        content: "";
        position: absolute;
        width: 0;
        height: 3px;
        background: #71b961;
        bottom: -2px;
        visibility: hidden;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        display: none;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 769px) {
    body {
        font-size: 14px;
    }
    #scrollUp{
        bottom: 20px;
    }
    .padding-page{
        padding-top: 80px;
    }
    .container{
        padding: 0px 14px;
    }
    .row{
        margin-left: -14px;
        margin-right: -14px;
    }
    .no-gutters{
        margin-left: 0px;
        margin-right: 0px;
    }
    .btn{
        font-size: 14px !important;
    }
    .header .navbar .navbar-brand{
        max-width: 150px;
        width: 70%;
    }
    .header .navbar .navbar-brand img{
        width: 100%;
        height: auto;
    }
    /*menu sidebar*/
    .mobile-menu{
        visibility: hidden;
        opacity: 0;
        background-color: #0c2f91 !important;
        box-shadow: 1px 0px 12px #111;
        position: fixed;
        display: block !important;
        width: calc(100% - 5em);
        max-width: 275px;
        height: 100%;
        overflow-x: hidden;
        z-index: 1034;
        top: 0;
        bottom: 0;
        left: 0;
        /*right: 0;*/
        -webkit-transform: translateX(-290px);
           -moz-transform: translateX(-290px);
            -ms-transform: translateX(-290px);
             -o-transform: translateX(-290px);
                transform: translateX(-290px);
        -webkit-transition: all ease 0.5s;
           -moz-transition: all ease 0.5s;
                transition: all ease 0.5s;
    }
    .mobile-menu.show {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateX(0px);
           -moz-transform: translateX(0px);
            -ms-transform: translateX(0px);
             -o-transform: translateX(0px);
                transform: translateX(0px);
    }
    .mobile-menu a.navbar-brand {
        background: #0c2f91 !important;
        margin: 0px;
        padding: 16px 14px;
    }
    .mobile-menu ul.navbar-nav{
        padding: 14px;
    }
    .mobile-menu .navbar-nav .nav-link{
        color: #fff;
        padding: 14px 0px; 
    }
    /*end menu */
    /*Header Reservasi online*/
    .section-form-search .form-data a.nav-link{
        font-size: 12px;
    }
    .section-form-search .form-data a.nav-link:hover{
        background-color: #1744b5;
        color: #fff;
        border-radius: 6px;
        border-color:  #1744b5;

    }
    /*end header*/

    #list-kirimpaket .nav-tabs .nav-item {
        background: rgb(255 255 255);
        background: radial-gradient(circle, rgb(255 255 255) 0%, rgb(239 239 239) 100%);
        color: #000 !important;
        border: 1px solid #dcdcdc;
    }

    #list-kirimpaket .nav-tabs .nav-item .active{
        background: rgb(107,182,21);
        background: radial-gradient(circle, rgba(107,182,21,1) 0%, rgba(29,143,45,1) 100%);
        color: #fff;
    }
    .card-body .box-logo img{
        width: 150px;   
    }
    /*Login*/
    .section-login .wrap-login {
        border-radius: 10px;
        box-shadow: 1px 0 15px rgb(0 0 0 / 35%);
    }
    .section-login .img-right {
        width: 100%;
        padding: 25px;
    }
    .section-login .loginmodal-container {
        background-color: #fff;
        color: #222;
        width: 100%;
        margin-left: 0px !important;
        border-radius: 0 0 10px 10px;
        padding: 25px;
    }
}

/* mobile view devices (handphhone max 489.9px) */
@media only screen and (max-width: 489.9px) {
    .h1, h1,.h2, h2 ,.h3, h3, .h4, h4{
        font-size: 20px;
    }
    .h5, h5{
        font-size: 18px;
    }
    .banner-header .swiper-banner .swiper-slide img{
        width: 100%;
        height: auto;
    }
    .section-service .box-service{
        margin-top: 70px
    }
    .section-service .service-item{
        border-radius: 10px;
        box-shadow: 0px 6px 15px 0px #6f6f6f;
        height: 100%;
        transition: transform .7s;  
    }
    .section-profile .form-profile .form-profile-list{
        border-radius: 10px;
        padding: 15px;
        display: block;
    }
    .section-pembayaran .form-pembayaran .form-pembayaran-list{
        border-radius: 10px;
        padding: 15px;
        display: block;
    }
    .footer .menu{
        padding:0!important;
    }
    .card-body .box-logo img{
        width: 50%;  
    }
    .section-keunggulan .layanan .svg-img .img-1 {
        position: absolute;
        top: 0px;
        z-index: 1001;
    }
    .section-keunggulan .layanan .svg-img .img-2 {
        position: absolute;
        top: 10px;
        z-index: 1000;
    }
    .section-Layanan .container-content .list-content{
        display: block;
        flex-direction: none;
        padding: 30px 0;
    }
    .text-layanan .item .image::before {
        content: '';
        width: 0;
        /* height: 100%; */
        border-left: 1px solid #232b50;
        position: absolute;
        top: 0px;
        bottom: 0;
        left: 3.3rem;
    }
    .sidebar-fixed nav{
        width: 90px;
        right: 0px;
    }
    .sidebar-fixed nav ul{
        padding: 0;
        margin: 0;
    }
    .sidebar-fixed nav li{
      margin-bottom: 5px;
      
    }
    .sidebar-fixed nav li a.btn-wa{
      height: 45px;
      width: 45px;
      line-height: 45px;
    }

    .sidebar-fixed nav li.icon-login a.btn-user {
        height: 45px;
        width: 45px;
        line-height: 45px;       
    }
    .sidebar-fixed nav li.icon-login .name-user{
        width: 80px;
    }
    .sidebar-fixed nav li a i{
      font-size: 35px;
    }
    .content .text-header h2{
        font-size: 1.5rem !important;
    }
    /*==================
    content reservasi
    =====================*/
    .banner-header .swiper-banner{
        height: auto !important;
        /*padding-top: 75px;*/
    }
    .section-form-search .container{
         /*margin-top: -40px;*/
         margin-top: -85px;
    }
    .section-form-search .booking-online{
        margin: auto;
        flex-wrap: wrap;

    }
    .section-form-search .list-group{
        flex-direction: row !important;
        padding: 10px;
        border-radius: 10px 10px 0px 0px;
    }
    .section-form-search .list-group-item{
        flex-direction: column;
        padding: 8px;
        margin: 0px;
        width: 33.33333%;
        color: #8cafff;
    }
    .section-form-search .list-group-item.active{
        margin-top: 0px;
        border-top-width:0px;
        color: #fff;
    }
    .section-form-search .list-group-item i{
        width: auto;
        margin-bottom: 5px;
    }
    .section-form-search .list-group-item span{
        font-size: 11px;
    }
    .section-form-search .booking-online .form-data {
        border-left: 0px;
        padding: 15px 6px;
        background: #fff;
        border-radius: 0px 0px 10px 10px;
        box-shadow: 1px 1px 15px rgb(0 0 0 / 30%);
    }
    .section-form-search .btn{
        width: 100%;
    }
    /*Section keunggulan*/
    .section-keunggulan .fasilitas.row{
        margin: 0px -10px
    }
    .section-keunggulan .fasilitas .col-6{
        padding: 5px 10px;
    }
    .section-keunggulan .card-fasilitas {
        margin: 0;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 20px 10px;
    }
    .section-keunggulan .fasilitas-text.text-center{
        font-size: 12px;
    }
    /*Layanan */
    .section-Layanan .swiper-slide {
        margin: 15px 0;
    }
    .section-Layanan .swiper-slide .card-content {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 25px 10px 40px; 
        border-radius: 6px;
        text-align: center;
    }
    .section-Layanan .swiper-slide .card-content .text-header{
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }
    .section-Layanan .swiper-slide .card-content p{
        font-size: 12px;
        text-align: justify;
    }
    .section-Layanan .content-txt{
        order: 2;
    }
    .section-Layanan .content-img{
        order: 1;
    }
    .section-Layanan .swiper-slide {
        margin: 15px 0;
    }
    .section-Layanan .swiper-slide a.btn{
        box-shadow: 1px 1px 10px rgb(0 0 0 / 35%);
    }
    /*Section Berita terbaru*/
    .section-news .swiper-slide {
        margin: 15px 0;
        transform: scale(0.95);
    }
    .section-news .swiper-slide .card-berita{
        color: #222;
        border-radius: 10px;
        box-shadow: 0 1px 10px rgba(0,0,0,.25)!important;
    }
    .section-news .swiper-slide .berita-img{
        border-radius: 10px 10px 0 0 ;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 210px;
    }
    .section-news .card-text{
        font-size: 12px;
        height: 95px;
        text-align: justify;
    }
    /*Section hubungi kami*/
    
    .section-contactUs .form-hubungikami{
        border-radius: 10px !important;
    }
    .section-contactUs .text-header p{
        font-size: 12px;
    }
    .section-contactUs .img-contactus{
        padding: 0px;
        margin-bottom: 10px;
    }
    .section-contactUs .radio-list{
        margin: 10px 0 !important;
    }
    .section-contactUs .custom-control-inline{
        margin-right: 0;
        width: 49%;
        padding-bottom: 14px;
    }
    .section-contactUs .btn{
        margin-bottom: 14px;
    }
    .input-group-text{
        width: 45px;
    }
    /*=============== 
    Section search Cabang
    =================*/
    .section-cabang .search-cabang{
        padding: 14px;
    }
    .section-cabang .search-cabang .d-flex{
        border: 2px solid #4378ff;
        border-radius: 8px;
    }
    .section-cabang .search-cabang .form-group{
        padding: 0px;
    }
    .section-cabang .form-group.searchinput {
        width: 65%;
    }
    .section-cabang .form-group.searchinput input{
        border: 0px  solid transparent !important;
    }
    .section-cabang .form-group.btn-search {
        width: 35%;
    }
    
    .section-cabang .form-control {
        background: transparent;
        color: #fff;
        border-radius: 8px 0px 0px 8px !important;
    }
    .section-cabang button#search {
        border-radius: 0px 8px 8px 0px !important;
    }
    .section-cabang .store-item {
        border-radius: 10px;
        padding: 16px !important;
    }
    .section-cabang .hsl-search {
        padding: 0px;
    }
    .section-cabang .store-item .col-12{
        margin: 5px 0px;
    }
    /*Section about*/
    .section-about .img-header img{
        /*height: 110px;*/
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .section-about .container{
        padding: 0px !important;
    }
    .section-about .pilih-content{
        margin-top: 0px;
    }
    .section-about .container .tab-content{
        padding: 0px 14px;
    }
    .section-about ul.nav.nav-pills{
       padding: 10px;
        border-radius: 0px;
        align-items: center;
    }
    .section-about a.nav-link{
        color: #8cafff;
        padding: 8px 10px;
        border: 1px solid transparent;
    }
    .section-about a.nav-link:hover {
        background-color: #1744b5;
        border-radius: 6px;
        border-color: #1744b5!important;
        color: #fff;
    }
    .section-about .conten-text{
        text-align: justify;
    }
    /*footer*/
    .footer .footer-top .img-logo{
        text-align: center;
        padding-bottom: 10px;
    }
    .footer-top .text-header::before {
        content: '';
        width: 15%;
        bottom: -5px;
    }
    .footer .footer-top .contact-us{
        padding-bottom: 14px;
        display: flex;
        flex-wrap: wrap;
    }
    .footer .footer-top .contact-us .text-header{
        width: 100%;
        text-align: center;
    }
    .footer .footer-top .container .row{
            margin: 0px !important;
    padding: 0px !important;
    }
    .footer .footer-top .contact-us p, .footer .footer-top .contact-us .contact-list{
        width: 50%;
        font-size: 12px;
        text-align: left;
    }
    
    .footer-top .contact-us .text-header::before {
        content: '';
        width: 12%;
        left: calc(50% - 6%);
        bottom: -5px;
    }
     .footer .footer-top .lainnya{
        padding-left: 0px;
     }
    .footer .menu .list-menu{
        font-size: 12px;
    }
    .footer .footer-copyright{
        padding-bottom: 30px;
    }
    .footer .footer-copyright .text-copyright{
        text-align: center;
        font-size: 14px;
        padding-bottom: 10px;
    }
    .footer .footer-copyright .followsosmed .list-sosmed{
        justify-content: center !important;
    }
}
/*Responsive height*/
@media only screen and (min-height: 1079px) {
    .section-about{
        min-height: 1082px;
    }
}
@media only screen and (min-height: 1024px) and (max-height: 1078px) {
    .section-about{
        min-height: 1024px;
    }
}
@media only screen and (min-height: 900px) and (max-height: 1023px) {
    .section-about{
        min-height: 902px;
    }
}
@media only screen and (min-height: 864px) and (max-height: 899px) {
    .section-about{
        min-height: 867px;
    }
}
@media only screen and (min-height: 768px) and (max-height: 863px) {
    .section-about{
        min-height: 770px;
    }
}
@media only screen and (min-height: 720px) and (max-height: 768px) {
    .section-about{
        min-height: 722px;
    }
}