/***
* -------------------------------------------------------------------
* Main Content CSS
* font, Root, Body, Titte (h1,h2...), Input Form, Button/a, Padding, Datepicker
* Menu Header
* Menu Dropdown Header
* --------------------------------------------------------------------
***/

@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Regular.ttf");
}

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/Comfortaa-Regular.ttf");
}
@font-face {
    font-family: "Comfortaa-bold";
    src: url("../fonts/Comfortaa-Bold.ttf");
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.ttf");
}
:root {
    --dark-0: #171717;
    --dark-1: #343434;
    --dark-2: #495057;
    --dark-3: #6C757D;
    --dark-4: #9E9E9E;

    --white-0: #FFFFFF;
    --white-1: #F7F7F7;
    --white-2: #F5F5F5;  
    --white-3: #F2F2F2;

    --gray-0: #F8F9FA; 
    --gray-1: #E9ECEF;
    --gray-2: #D0D5DD;
    --gray-3: #C9AdA7;
    --gray-4: #9A8C98;
    --gray-5: #4A4E69;

    --yellow-0: #FDf8E1;
    --yellow-1: #FFF6cc;
    --yellow-2: #FFEE99;
    --yellow-3: #FFE566;

    --orange-0: #EAE2B7;
    --orange-1: #FFC300;
    --orange-2: #FFAA00;    
    --orange-3:#FF9500;
    --orange-4: #FF7B00;

    --red-0: #F66A13;
    --red-1: #FF0000;
    --red-2: #F40009;
    --red-3: #c20d14;
    --red-4: #83060e;

    --blue-0: #90e0ef;
    --blue-1: #44C5EC;
    --blue-2: #0060B9;
    --blue-3: #1744b5;
    --blue-4: #113559;

    --green-0: #DADD98;  
    --green-1: #32de84;
    --green-2: #00AB66;
    --green-3: #568203;
    --green-4: #008000;

    --pink-0 : #FFC0CB;
    --pink-1 : #FF00FF;
    --pink-3 : #FF00BF;
    
    --rbg-blue: radial-gradient(circle, #1744b5 0%, #0c2f91 100%);

    --lbg-yellow: linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(237,255,1,1) 100%);
    --lbg-dark: linear-gradient(180deg, rgba(119,67,96,1) 0%, rgba(76,58,81,1) 100%);
    --lbg-orange: linear-gradient(180deg, rgba(255,201,1,1) 0%, rgba(252,162,19,1) 100%);
    --lbg-red: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), linear-gradient(180deg, #F66A13 0%, #F74009 100%);
    --lbg-red-1: linear-gradient(180deg, #F66A13 0%, #F64009 100%);
    --lbg-red-2: linear-gradient(180deg, #F64009 0%, #E13726 100%);

    --shadow-xs: 1px 2px 4px rgb(0 0 0 / 10%);
    --shadow-sm: 1px 2px 8px rgb(0 0 0 / 10%);
    --shadow-md: 2px 3px 14px rgb(0 0 0 / 14%);
    --shadow-lg: 3px 4px 18px rgb(0 0 0 / 20%);  
    --shadow-xl: 4px 6px 30px rgb(0 0 0 / 22%);

    --shadow-inset-sm : inset -2px -2px 6px rgba(0, 0, 0, .1);

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;  
    --radius-xl: 32px;

    --padding-xs: 10px;
    --padding-sm: 14px;
    --padding-md: 16px;
    --padding-lg: 18px;
    --padding-xl: 26px;
    --padding-xxl: 34px;

    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.125rem;
    --font-size-md: 1rem;
    --font-size-sm: 14px;
    --font-size-xs: 12px;

    --line-height-lg: 1.5; 
    --line-height-md: 1.3;
    --line-height-sm: 1.2;
    --line-height-xs: 1;

    --margin-xs: 6px;
    --margin-sm: 10px;
    --margin-md: 14px;
    --margin-lg: 18px;
    --margin-xl: 24px;

    --mx-width-xs: 540px;
    --mx-width-sm: 720px;
    --mx-width-md: 980px;
    --mx-width-lg: 1080px;
    --mx-width-xl: 1200px;
    --mx-width-xxl: 1290px;
}

body {
    position: relative;
    height: 100%;
    font-family: 'Montserrat','Comfortaa', sans-serif;
    font-size: 16px;
    line-height: var(--line-height-lg);
    color: var(--dark-0);
    /*background-color: var(--white-2);*/
}
body#home {
    background-color: var(--white-2);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}
/*Loader content*/
.loader-content {
    background: rgba(255, 255, 255, .95) none repeat scroll 0 0;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
}
.wrapload {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    align-items: center;
}
.loader {
    width: 50px;
    height: 28px;
    --_g: no-repeat radial-gradient(farthest-side,var(--red-2) 94%,#0000);
    background:
        var(--_g) 50%  0,
        var(--_g) 100% 0;
    background-size: 12px 12px;
    position: relative;
    animation: l23-0 1.5s linear infinite;
}
.loader:before {
    content: "";
    position: absolute;
    height: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--red-2);
    left:0;
    top:0;
    animation: 
        l23-1 1.5s linear infinite,
        l23-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes l23-0 {
    0%,31%  {background-position: 50% 0   ,100% 0}
    33%     {background-position: 50% 100%,100% 0}
    43%,64% {background-position: 50% 0   ,100% 0}
    66%     {background-position: 50% 0   ,100% 100%}
    79%     {background-position: 50% 0   ,100% 0}
    100%    {transform:translateX(calc(-100%/3))}
}
@keyframes l23-1 {
    100% {left:calc(100% + 7px)}
}
@keyframes l23-2 {
    100% {top:-0.1px}
}
/*================== end loader ================*/
/*start skeleton load ticket*/
.skeleton {
    position: relative;
    overflow: hidden;
    /*padding:14px;*/
    width: 100%;
    background: #fff;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.skeleton .square {
    height: 80px;
    border-radius: 5px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.4)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.5) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: wave-squares 2s infinite ease-out;
}
.skeleton .circle {
    border-radius: 50% !important;
    height: 14px !important;
    width: 14px;
    margin-bottom: 6px;
}
.skeleton .line {
    height: 14px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.4)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.4) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: wave-lines 2s infinite ease-out;
}
.skeleton-top {
    display: flex;
    justify-content: center;
}
.skeleton .line.brand-bus {
    border-radius: 0 0 var(--radius-lg);
}
.skeleton-rute {
    width: 100%;
    display: flex;
    padding: var(--padding-xs) var(--padding-lg) var(--padding-lg);
    justify-content: space-between;
}

.skeleton-rute .rute-awal,.skeleton-rute .rute-tujuan {
    width: 250px;
}

.skeleton-rute .rute-arrow {
    width: calc(100% - 550px);
    position: relative;
    padding-top: 15px;
    display: flex;
    align-items: flex-start;
}
@keyframes wave-lines {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}
@keyframes wave-squares {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}
.w-80 {
    width: 80%;
}
.w-60 {
    width: 60%;
}
.w-40 {
    width: 40%;
}
.w-25 {
    width: 25%;
}

.h-16 {
    height: 16px !important;
}
.h-24 {
    height: 24px !important;
}
.h-38 {
    height: 38px !important;
}
.h-54 {
    height: 54px !important;
}
/*end skeleton efect load*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-weight: bold;
}
h1, .h1{
    font-size: var(--font-size-h1);
}
h2, .h2 {
    font-size: var(--font-size-h2);
}
h3, .h3 {
    font-size: var(--font-size-h3);
}
h4, .h4{
    font-size: var(--font-size-h4);
}
h5, .h5 {
    font-size: var(--font-size-h5);
    font-weight: 400;
}
h6, .h6{
    font-size: var(--font-size-md);
}

menu {
    padding: 0px;
    margin: 0px;
}
input:-webkit-autofill, input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, input:-webkit-autofill:active{
    -webkit-box-shadow: none;
    background-color: transparent !important;
}
input:-internal-autofill-selected {
  background-color: transparent !important;
}
button:focus{
    outline: none;
}
a {
  color: var(--dark-0);
  cursor: pointer;
  text-decoration: none;
}
a:hover {   
   text-decoration: none;
   color: inherit;
}
.btn{
    position: relative;
    font-family: 'Montserrat', sans-serif;
    padding: .375rem  1.5rem;
    border-radius: var(--radius-xs);
    border-width: 2px;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.btn.show, .btn-check:checked+.btn, .btn.active, .btn.show, 
.btn:first-child:active, :not(.btn-check)+.btn:active {
    border-color: transparent;
}
.btn.focus, .btn:focus{
    box-shadow: none;
}
.btn.disabled, .btn:disabled {
    cursor: not-allowed;
    background-color: hsl(from var(--bs-btn-disabled-bg) h s 80%);
    border-color: hsl(from var(--bs-btn-disabled-border-color) h s 70%);
    opacity: 1;
    color: hsl(from var(--bs-btn-disabled-color) h s 95%);
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-block+.btn-block {
    margin-top: 0.875rem;
}
.btn-danger, .btn-danger:active {
    background: var(--red-1);
    text-transform: capitalize;
    border-color: transparent;
}
.btn-danger:hover{
  background: var(--red-2);
  text-transform: capitalize;
  border-color: transparent;
}
.btn-warning{
    background-color: var(--yellow-2);
    border-color: var(--yellow-2)
}
.btn-warning:hover {
    background-color: var(--yellow-3);
    border-color: var(--yellow-3);
}

.btn-outline-danger {
    border: 2px solid var(--red-2);
    color: var(--red-2);
}
.btn-outline-danger:hover {
    background: var(--red-2);
    border-color: var(--red-2);
    color: var(--white-0);
}
.btn-outline-danger:not(:disabled):not(.disabled).active {
    background: var(--bg-red);
    border-color: var(--red);
    color: var(--white-0);
}

.btn-outline-white{
    border-color: var(--white-0);
    color: var(--white-0);
}
.btn-outline-white:hover{
    border-color: var(--white-0);
    background-color: var(--white-0);
    color: var(--red);
}

.btn-outline-dark {
    border-color: var(--gray);
    color: var(--dark-3);
}
.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;;
}
.btn-link {
    text-decoration: underline;
    color: var(--dark-0);
    padding: 0px;
}
.btn-link:hover {
    color: var(--red-1);
}
.btn-link-blue {
    text-decoration: underline;
    color: var(--blue2);
}
.btn-link-blue:hover {
    color: var(--blue-light);    
    text-decoration: underline;
}
.btn-link-danger {
    font-size: 18px;
    font-weight: bold;
    color: var(--dark-0);
}
.btn-link-danger:hover, .btn-link-danger:focus {
    color: var(--red);
}
.btn-collapse {
    color: var(--dark-2);
    padding: 0px;
}
.btn-collapse:hover {
    color: var(--red-1);
}
.btn-collapse i,.btn-collapse[aria-expanded="false"] i {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
.btn-collapse[aria-expanded="true"] i {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.input-group .btn:hover {
    color: var(--red-1);
}
/*-------------------*/
.p-xs {
    padding: var(--padding-xs);
}
.p-sm {
    padding: var(--padding-sm);
}
.p-md {
    padding: var(--padding-md);
}
.p-lg {
    padding: var(--padding-lg);
}
.p-xl {
    padding: var(--padding-xl);
}
/*--------------*/
.card-white {
    background: var(--white-0);
    padding: var(--padding-lg);
    border-radius: var(--radius-md);
}
.radius-xs {
    border-radius: var(--radius-xs);
}
.radius-sm {
    border-radius: var(--radius-sm);
}
.radius-md {
    border-radius: var(--radius-md);
}
.radius-lg {
    border-radius: var(--radius-lg);
}
.radius-xl {
    border-radius: var(--radius-xl);
}

.shadow-xs {
    box-shadow: var(--shadow-xs) !important;
}
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
    box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}
.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

.container {
    position: relative;
    max-width: var(--mx-width-xxl);
}
.icon-stroke svg{
    /*fill: currentColor;*/
    stroke: currentColor;
}

.title-text {
    margin-bottom: 20px;
}

.title-text .top-title {
    font-size: 22px;
    font-weight: bold;
}

.title-text .bottom-title {
    font-size: 14px;
    margin-bottom: 0px;
}
.main-title .small-tittle {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #6B7280;
    margin: 4px;
    letter-spacing: 2px;
}
.main-title .title-text {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 2.25rem;
    font-family: 'Montserrat', sans-serif;
}
.sub-title .title-text {    
    position: relative;
    font-size: 1.75rem;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 12px;
    margin-bottom: 30px;
}
.main-page-layanan .sub-title .title-text::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--red-1);
}
.main-title .desc-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.section-padding {
    padding: 46px 0px;
}

.form-group .invalid-feedback label {
    color: var(--dark-light3) !important;
    font-weight: normal;
}

.section-cabang .select2-container .select2-selection--single {
    min-height: 42px;
    border: 1px solid var(--gray-1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: 12px;
    padding-right: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    width: 30px;
}
.select2-container--default .select2-results__group {
    background-color: var(--yellow-0);
    border-top: 1px solid var(--gray-1);
    border-bottom: 1px solid var(--gray-1);
    color: var(--dark-2);
    font-size: 14px;
    padding: 10px 8px;
}
.select2-container--default .select2-results__option {
    position: relative;
    font-size: 14px;
    padding: 10px 6px 8px 10px;
}
.select2-container--default .select2-results__option .select2-results__option {
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 12px 8px 10px 30px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgb(246,64,9);
    background: -moz-linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    background: linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f64009",endColorstr="#e13726",GradientType=1);
}
.datepicker td, .datepicker th{
    padding: 6px 10px;
}
.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover{
    background: var(--bg-yellow);
}

.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: transparent;
    background: rgb(246,64,9);
    background: -moz-linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    background: linear-gradient(180deg, rgba(246,64,9,1) 0%, rgba(225,55,38,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f64009",endColorstr="#e13726",GradientType=1);              
}
.datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover{
    color: var(--gray-1);
}
.datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active {
    background: var(--bg-red);
}
.border-bottom {
    border-bottom: 2px solid var(--gray-1) !important;
}
.border-top {
    border-top: 2px solid var(--gray-1) !important;
}
.d-flex > [class*='col-'] {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}  
.dropdown-menu ul {
    padding-left: 0px;
    margin: 8px 0;
} 
.dropdown-menu ul li {
    list-style: none;
    padding: 4px 6px;
    cursor: pointer;
}
.dropdown-menu ul li:hover {
    background: var(--white-2);
    border-radius: var(--radius-xs);
}
.dropdown-menu ul li label, .dropdown-menu ul li input {
    cursor: pointer;
}
.alert {
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.scroll-custome::-webkit-scrollbar-track {
    border-radius: 6px;
    box-shadow: inset 0 0 8px var(--gray-2);
}
.scroll-custome::-webkit-scrollbar {
    width: 12px;
}

.scroll-custome::-webkit-scrollbar-thumb {
    background: var(--red-1);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red-2); 
}

/*Custome Swith*/
.form-check.form-switch.custom-switch {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-check.form-switch.custom-switch .form-check-input {
    float: none;
    margin: 0;
}

.form-cari-tiket .form-check-input:focus {
    box-shadow: none;
}
.form-cari-tiket .form-check label, .form-cari-tiket .form-check input {
    cursor: pointer;
}
.form-cari-tiket .form-check label {
    color: var(--dark-3);
}

.form-cari-tiket .form-check input[type="radio"] {
    position: relative;
    border: 3px solid var(--gray-3);
    width: 18px;
    height: 18px;
    margin-top: calc(.25rem - 1px);
}
.form-cari-tiket .form-check:hover label {
    color: var(--dark-1);
}
.form-cari-tiket .form-check:hover input[type="radio"] {
    border-color: var(--dark-3);
}
.form-cari-tiket .form-check input[type="radio"]:checked+label {
    color: var(--dark-1);
    font-weight: bold;
}
.form-cari-tiket .form-check input[type="radio"]:checked {
    border-color: var(--dark-2);
    background: transparent;
}
.form-cari-tiket .form-check input[type="radio"]:checked::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    background: var(--dark-2);
    border-radius: var(--radius-md);
}
.bg-yellow-0 {
    background: var(--yellow-0);
}
.bg-yellow-1 {
    background: var(--yellow-1);
}
.bg-gd-yellow-1 {
    background: var(--lbg-yellow);
}
.bg-gd-dark {
    background: var(--lbg-dark);
}
.bg-gd-orange {
    background: var(--lbg-orange);
}
.bg-gd-red-0 {
   background: var( --lbg-red);
}
.bg-gd-red-1 {
    background: var(--lbg-red-1);
}
.bg-gd-red-2 {
    background: var(--lbg-red-2);
}
/***
* --------------------------------------------
* Main Menu Header - Navbar
* --------------------------------------------
***/
.header {
    display: block;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: var(--shadow-lg);
    z-index: 999;
    padding-top: 0;
    -webkit-transition: all ease .4s;
    transition: all ease 0.4s ;
}
.header::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
}
.header .navbar {
    font-family: 'Montserrat', sans-serif;
    padding: 0px;
}

.header .navbar-brand {
    width: 100%;
    height: auto;
    min-height: 40px;
    max-width: 210px;
    /*background-color: var(--white-0);*/
    /*border-radius: 50px;*/
    /*padding: 10px 22px;*/
}
.navbar-toggler {
    border: 2px solid var(--gray-3);
}
.navbar-toggler:focus, .navbar-toggler:hover {
    background-color: #444;
    box-shadow: none;
}
/*.header .navbar .navbar-brand:hover {
    background-color: var(--white-3);
}*/

.header .navbar-brand img{
    width: 100%;
    height: auto;
}
.header .navbar-brand:hover img{
    opacity: .9
}
.header .navbar .navbar-nav {
    padding: 0 1rem;
    justify-content: center;
    position: unset;
}

.header .navbar .navbar-nav .nav-item { 
    display: inline-block; 
    padding: 17px 0px;
}

.header .navbar-nav .nav-link {
    position: relative;
    padding: .5rem 1.25rem;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 18px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.header .navbar-nav .nav-link, 
.header .navbar .navbar-nav .nav-item .nav-link[aria-expanded="false"] {
    color: var(--gray-1);  
}

.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link[aria-expanded="true"] {
    color: var(--white-0);
}

.header .navbar-nav .nav-link::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    color: transparent;
    background: var(--white-0);
    height: 3px;
    border-radius: 2px;  
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.header .navbar .navbar-nav .nav-item .nav-link:hover::before, 
.header .navbar .navbar-nav .nav-item .nav-link[aria-expanded="true"]::before {
    width: 42px;
}
.header .navbar .navbar-nav .nav-item a.btn {
    padding: .375rem 1.125rem;
    font-size: 18px
}

.header .nav-btn .btn-link-white {
    color: var(--white-0);
}
.header .nav-btn .btn-link-white:hover {
    color: var(--yellow);
}
.header .navbar .btn-daftar-login .nav-item  a {
    font-size: 18px;
    color: var(--white-3);
    border-color: var(--white-3);
    /*border-radius: 50px;*/
    line-height: 1.2;
    padding: .375rem .75rem;
}
.header .navbar .btn-daftar-login .nav-item a:hover {
    background: var(--red-1);
    color: var(--white-0);
    border-color: transparent;
}
.header .navbar .btn-daftar-login .nav-item a .name-user {
    max-width: 140px;
    position: relative;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0px;
}
.header .navbar .btn-daftar-login .nav-item .dropdown-item {
    color: var(--dark-2);
    margin: 4px 0px;
    display: flex;
    align-items: center;
    grid-gap: 8px;
}
.header .navbar .navbar-nav .nav-item .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--red-1);
    color: var(--white-0);
    border-color: transparent;
}
.header .navbar .btn-daftar-login .nav-item.dropdown .dropdown-toggle::after {
    display: none;
}
.header .navbar .btn-daftar-login .nav-item .dropdown-item img {
    opacity: .8;
    width: 24px;
    height: auto;
}
.header .navbar .btn-daftar-login .nav-item .dropdown-item:hover {
    color: var(--dark-0);
    border-radius: var(--radius-xs);
    background-color: var(--gray-1);
}
.header .navbar .btn-daftar-login .nav-item .dropdown-item:hover img {
    opacity: 1;
}
.header .navbar .navbar-nav .dropdown-menu {
    padding: var(--padding-sm);
}
/*================================
    Footer content
=============================*/
footer.footer {
    position: relative;
    background: var(--white-0);
    padding-top: 20px;
}
footer .icon-company {
    max-width: 250px;
    padding-bottom: 20px;
}
p.name-company {
    font-size: 16px;
    font-weight: bold;
}

.footer-top {
    padding: 40px 0 20px;
}
.footer-top .text-header {
    position: relative;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    font-weight: bold;
}

.footer-top .text-header::before {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--red-1);
    bottom: -8px;
    position: absolute;
}
.footer ul.menu {
    padding-inline-start : 0;
}
footer.footer li.list-menu {
    display: inline-block;
    width: 100%;
    margin: 5px 0px;
    list-style-type: none;
}
.footer .menu .list-menu a {
    transition: all .5s ease-in-out ;
    position: relative;
}
.footer .menu .list-menu a:hover {
    padding-left: 16px;
    color: var(--red-0);
}
.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(--red-0);
    -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: 12px;
}
.footer-copyright {
    padding: 18px 0;
    background: var(--red-3);
    color: var(--white-2);
}

.footer-copyright p {
    margin: 0;
}
.footer .list-sosmed {
    justify-content: flex-end;
    margin-bottom: 0px;
}
.footer .list-sosmed li {
    display: inline-block;
    margin: 0 10px 0 0;
}

.list-sosmed li a {
    width: 42px;
    height: 42px;
    color: var(--yellow-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: var(--red-0);
    border-radius: 50%;
    transition: all .3s ease-in-out;
}
.list-sosmed li a:hover {
    color: var(--red-1);
    background: var(--yellow-0);
    box-shadow: var(--shadow-md);
}
.footer .footer-top .btn-link {
    color: var(--dark-1);
    text-decoration: none;
}
.footer .footer-top .btn-link:hover {
    color: var(--red-0);
    /*font-weight: bold;*/
    text-decoration: underline;
}
.footer .text-copyright .btn-link {
    color: var(--white-0);
    text-decoration: none;
}
.footer .text-copyright  .btn-link:hover {
    color: var(--white-0);
    /*font-weight: bold;*/
    text-decoration: underline;
}
/*embed whatsapp*/
.sidebar-fixed nav {
  position: fixed;
  width: auto;
  transition: all 0.3s linear;
  z-index: 1020;
  bottom: 24px;
  text-decoration: none;
  right: 18px;
}

.sidebar-fixed ul.icon-side-fix {
  padding: 0;
  margin: 0;
}

.sidebar-fixed li.icon-whatsap {
  position: relative;
  list-style-type: none;
  text-align: center;
  text-align: -webkit-center;
}

.sidebar-fixed li.icon-whatsap a.wa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #25d366;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 1px 2px 14px rgb(0 0 0 / 25%);
}
.sidebar-fixed li.icon-whatsap img {
    width: 100%;
    height: auto;
}

/*Search form cari tiket bus*/

.form-cari-tiket .form-group{
    margin-bottom: 0px;
}

.form-cari-tiket .row.wrapper-agen {
    position: relative;
}

.form-cari-tiket .input-group, .row-agen .form-row {    
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-md);
    background: #F0F8FF;
/*    border: 1px solid rgba(0, 0, 0, .1);*/
}
.form-cari-tiket .input-group .input-group  {
    border: none;
}
.form-cari-tiket .input-group .input-group-prepend {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    width: 62px;
    opacity: .1;
    display: none;
}

.form-cari-tiket .input-group-prepend {
    width: 34px;
    height: 34px;
    background-color: var(--white-dark);
    border-radius: 50%;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.form-cari-tiket .input-group-text {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 18px;
    color: var(--dark-3);
}

.form-cari-tiket .row-text {
    position: relative;
    width: 100% !important;
/*    width: calc(100% - 34px);*/
    /*    padding-left: 10px;*/
}
.form-cari-tiket .cardtgl.pp .box-group {
    width: 50%;
    padding-right: 11px
}
.form-cari-tiket #tglplg.box-group {
    padding-left: 15px;
    padding-right: 0px
}
.form-cari-tiket .cardtgl.pp .input-group.date::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    right: calc(50% + 1px);
    border-left: 2px solid var(--red-0);
}
.form-cari-tiket .row-text .text-label {
    margin-bottom: 0px;
    color: var(--dark-3);
    font-size: 12px;
    text-transform: uppercase;
}
.form-cari-tiket .form-control {
    border: 0px !important;
    padding: 0px;
    height: calc(1em + .75rem);
    font-size: 14px;
    font-weight: bold;
    color: var(--dark-0);
    background-color: transparent;
    cursor: pointer;
}
.form-cari-tiket .input-group .input-group-text {
    border: 0px !important;    
    color: var(--dark-1);
    line-height: 1;
    padding-right: 10px;
    font-size: 14px;
    font-weight: bold;
}
.form-cari-tiket .date .form-control{
  font-family: 'Montserrat', sans-serif;
}
.form-cari-tiket .form-control:hover, 
.form-cari-tiket .form-control:focus,
.form-cari-tiket .form-control:active {
    box-shadow: none;
    outline: none;
}
.form-cari-tiket  .select2-container {
    display: block;
}
.form-cari-tiket .select2-container .select2-selection--single{
    height: 28px;
    background-color: transparent;
    border: 0px;
}
.form-cari-tiket .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: 'Montserrat', sans-serif;
    padding-left: 0px;
    font-size: 14px;
    line-height: 28px;
    font-weight: bold;
    color: var(--dark-0);
}
.form-cari-tiket .card-exchange {
    position: absolute;
    width: 58px;
    height: 58px;
    left: calc(50% - 29px);
    top: calc(50% - 29px);
    padding: 8px;
    z-index: 2;
    background: var(--white-0);
    border-radius: 50%;
}
.form-cari-tiket .card-exchange .exchange {
    background: var(--yellow-0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.form-cari-tiket .card-exchange .exchange:hover {
    box-shadow: var(--shadow-md);
    background: var(--red-2);
    color: #fff;
}

.form-cari-tiket span.select2-selection__arrow {
    display: none;
}

.form-cari-tiket .btn {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: bold;
    border-radius: var(--radius-md);
    padding: var(--padding-sm) var(--padding-md);
    text-align: center;
}
.form-cari-tiket .btn:hover{
    box-shadow: var(--shadow-md);
}
.form-cari-tiket .btn img {
    max-width: 34px;
    height: auto;
}
/*.form-cari-tiket .btn img {
    position: absolute;
    max-width: 72px;
    height: auto;
    padding-left: 4px;
    right: 0px;
    top: calc(50% - 36px);
    opacity: .45;
}*/
.form-cari-tiket .border-line {
    border-top: 2px dashed #f40009;
    position: absolute;
    width: 90%;
    top: calc(50% - 1px);
    left: 5%;
}

.form-cari-tiket .button-cari.d-flex.justify-content-center {
    position: relative;
}

.form-cari-tiket .border-line::before {
    content: '';
    position: absolute;
    z-index: 2;
    right: 0;
    top: -3px;
    background: #fff;
    width: 45%;
    height: 6px;
    /*background: rgb(255 255 255);*/
    background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.form-cari-tiket .border-line::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    top: -3px;
    background: #fff;
    width: 45%;
    height: 6px;
    background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
/**
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid) device
 *   1024-768    - tablet landscape device
 *   768-480     - tablet device 
 *   480-less    - phone / mobile landscape & smaller
 * --------------------------------------------
 */

@media screen and (min-width: 1337px) and (max-width: 1440.98px) { 
    .section-header .header-slider img{
        width: 100%;
        max-height: 800px;
        object-fit: cover;
        object-position: top center;
    }
    .container {
      max-width: var(--mx-width-xl);
    }
}
@media screen and (min-width: 1281px) and (max-width: 1336.98px) { 
    .section-header .header-slider img{
        width: 100%;
        max-height: 800px;
        object-fit: cover;
        object-position: top center;
    }
    .container {      
      max-width: var(--mx-width-lg);
    }
    .header .navbar-brand {
        max-width: 200px;
        padding: 8px 16px;
    }
    .header .navbar-nav .nav-link {
      padding: 0.5rem 1rem;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1280.98px) {
    .container {
      max-width: var(--mx-width-md);
    }
    .header .navbar-brand {
        max-width: 180px;
        padding: 8px 16px;
    }
    .header nav .navbar-nav .nav-item .nav-link {
        color: var(--gray-1);
        padding: 5px 10px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 30px;
        font-size: 1rem;      
  
    }
    .header .navbar .navbar-nav .nav-item a.btn {
        padding: 5px 10px;
    }
    .card-ticket .body-left {
        width: 298px;
    }
    .card-ticket .body-right {
        /*width: calc(100% - 298px);*/
        /*grid-gap: 20px;*/
    }
    .card-ticket .body-right .rute {
        width: calc(70% - 5px);
    }
    .card-ticket .body-right .rute .rute-asal, .card-ticket .body-right .rute .rute-tujuan {
        max-width: 45%;
    }
    /*==================== content header Form tiket min 1025px - max 1280.98px ==============*/
    .section-header .content-desc .text-desc {
        width: 40%;
        max-width: 410px;
    }

    .section-header .content-desc {
        padding-bottom: 60px;
    }
    .section-header .header-slider img{
        width: 100%;
        max-height: 760px;
        object-fit: cover;
        object-position: top center;
    }
    .section-header .content-desc .top-title {
      font-size: 22px;
    }
    .section-header .content-desc .bottom-desc {
      font-size: 16px;
    }
    /*Beranda*/
    /*form search tiket*/
    .form-cari-tiket .input-group .input-group-prepend {
        width: 26px;
        height: 26px;
    }
    .form-cari-tiket .row-text {
        width: calc(100% - 34px);
/*        padding-left: 8px;*/
        line-height: 1.2;
    }
    .form-cari-tiket .row-text .text-label {
        font-size: 12px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024.98px) {
    .container {
        padding: 0 30px;
    }
    .header .navbar-brand {
        max-width: 180px;
    }
    .header nav .navbar-nav .nav-item .nav-link {
        color: #ffff;
        padding: 5px 10px;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 30px;
        font-size: 1rem;      
  
    }
    .header .navbar .navbar-nav .nav-item a.btn {
        font-size: 16px;
        padding: .375rem 0.8rem;
    }
    /*================= Section armada 1024 ====================*/
    .section-armada .armada-slider .card-armada::before {
        height: 84%;
        top: 8%;
    }
    .section-armada .armada-slider .card-desc .text-header {
        font-size: 22px;
    }
    /*=========================================== 
            Beranda min 992px - max 1024px
              content header Form tiket
     =========================================*/
    .main-page .content-header {
        padding-top: 70px;
    }
    .section-header .content-desc .text-desc {
        width: 40%;
        max-width: 410px;
    }

    .section-header .content-desc .top-title {
      font-size: 22px;
    }
    .section-header .content-desc .bottom-desc {
      font-size: 16px;
    }

    .section-header .content-desc {
        padding-bottom: 0px;
    }
    .section-form {
        margin-top: -34px;
    }
    /*================================================
                page layanan - min 992 max 1024
        ===============================================*/
    .section-layanan .main-content .content-row {
        padding: 50px 0;
    }
    .section-layanan .thumb-img{
        padding-right: 0px;
    }
    .section-layanan .text-desc  {
        padding-left: 24px;
    }

    .section-layanan .main-content .content-row:nth-child(even) .thumb-img {
        padding-right: 0px;
        padding-left: 0;
        
    }
    .section-layanan .main-content .content-row:nth-child(even) .text-desc {
        padding-right: 24px;
        padding-left: 0px;
    }
}
@media screen and (min-width: 993px) {
    /*=============== Search tiket step p2 reservasi min 993px ======*/

    .section-search .content-filter .filtermenu-btn {
        display: none;
    }
    .section-search .content-filter .collapse-filtermenu {
        display: block;
    }
}
@media screen and (max-width: 991.98px) {
    body{
        font-size: 14px;
    }    
    .container {
       padding: 0 24px; 
    }
    main.resevation-page {
        padding-bottom: 145px;
    }
    .btn {
        font-size: 14px;
    }
    .main-title .desc-title {
        font-size: 14px;
    }
    /*======================== Menu Header max 991.98px ===========================*/
    .header {
        min-height: 70px;
        background: rgba(0, 0, 0, 0.6);
    }
    .header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
    }
    .header .icon-stroke svg {
        stroke: currentColor;
    }
    
    .header .navbar {
        padding: 15px;
    }
    .header .navbar-brand {
        padding: 4px 8px;
        max-width: 170px;
    }
    .header .navbar .navbar-nav .nav-item {
        padding: 0px;
    }
    .header .navbar-toggler.menu {
        color: var(--white-0);
        border: none;
        border-radius: 0px;
        padding: 0;
    }
    .header .navbar-toggler.menu:active{
        color: var(--orange-2);
    }
    .header .navbar .mobile-menu{
        visibility: hidden;
        opacity: 0;
        background-color: var(--white-0) !important;
        box-shadow: 1px 0px 12px #111;
        position: fixed;
        display: block !important;
        /*width: calc(100% - 5em);*/
        /*max-width: 275px;*/
        width: 100%;
        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;
    }
    .header .navbar .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);
    }
    .header .navbar .mobile-menu .navbar-nav {
      overflow-y: auto;
    }
    .header .mobile-menu .header-close {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px 8px 14px;
        background: rgba(0,0,0,0.5);
    }
    .header .header-close .navbar-toggler.close {
        border: 0;
        opacity: 1;
        float: none;
        color: var(--white-0);
        font-size: 34px;
        padding: 0 0 0 16px;
        line-height: 1;
    }
    .header .navbar-nav .nav-link, .header .navbar .navbar-nav .nav-item .nav-link[aria-expanded="false"] {
        color: var(--dark-0);
    }
    .header .navbar .navbar-nav .nav-item .nav-link:hover, .header .navbar .navbar-nav .nav-item .nav-link[aria-expanded="true"] {
        color: var(--dark-3)
    }
    .header .nav li .nav-link::before {
        display: none;
    }
    .header .navbar .navbar-nav.btn-daftar-login .nav-item a {
        font-size: 18px;
        color: var(--white-3);
        border-color: var(--red-2);
        background-color: var(--red-2);
        padding: 0.5rem 1rem;
        margin-bottom: 10px;
    }

    .title-menu a {
        font-weight: bold;
        color: var(--orange-2);
        padding-bottom: 20px;
    }
    .header .body-menu a.btn{
        padding: 12px 14px;
        font-size: 16px;
        font-family: 'Montserrat','Comfortaa', sans-serif;
        text-transform: uppercase;
    }
    a.myaccount {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    a.myaccount p.txt-username {
        margin: 0;
        order: 2;
    }
    .header .riis-menu-mobile ul {
        list-style: none;            
        margin: 0px;
        padding: 0px;
        font-family: 'Montserrat', sans-serif;
    }
    .header .nav-profile .riis-menu-mobile .menu-wrap {
        padding: 14px 0;
    }
    .right-menu .card-content {
        margin-right: 14px;
        border-radius: var(--radius-xs);
        padding: 8px;
    }
    /*=========================================== 
            Beranda min 992px - max 1023px
              content header Form tiket
     =========================================*/
    .main-page .content-header {
        padding-top: 70px;
    } 
    .section-header .content-desc .text-desc {
        width: 40%;
        max-width: 410px;
    }

    .section-header .content-desc .top-title {
      font-size: 22px;
    }
    .section-header .content-desc .bottom-desc {
      font-size: 16px;
    }

    .section-header .content-desc {
        padding-bottom: 0px;
    }
    /*===================== Section service / pelayanan max 991.98px===========================*/
    .service-slider .swiper-slide, .service-slider .swiper-slide.slide-50, .service-slider .swiper-slide.slide-25 {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
        max-width: calc(45% - 24px);
        margin-left: 24px;
    }
    .service-slider .service-item {
        padding-top: 50%;
    }
    .service-slider .service-item .service-desc .title-service {
        font-size: 20px;
    }
    /*==================== Search tiket beranda max-width : 991.98; ========================*/
    .form-cari-tiket .input-group, .row-agen .form-row {
        margin-bottom: 10px;
    } 
    /*============== Section news / berita terbaru max-width: 991.98px ====================*/
    .content-home section[class*="section-"] .main-title {
        padding: 0 24px 16px;
    }
    .main-title .title-text {
        font-size: 1.75rem;
    }
    .main-title .row .desc-title {
        font-size: 1.15rem;
    }
    .news .swiper.news-slider-mobile, .section-service .service-slider{
        padding-bottom: 45px;
        margin: 0px -24px 45px;
    }
    .news .news-slider-mobile .swiper-slide {
        width: 45%;
        padding-left: 24px;
    }
    .section-agen .agen-slider .swiper-slide{
        width: 30%;
        padding-left: 24px;
    }
    .news .news-slider-mobile .news-item .news-image {
        position: relative;
        height: 200px;
        width: 100%;
    }
    .news .news-slider-mobile .news-item .news-image img {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
        border-radius: var(--radius-md);
        background-color: var(--gray-1);
    }
    .news .news-item .news-desc .title {
        font-size: 1.15rem;
        line-height: 1.5;
        min-height: 48px;
    }

    .news .news-item .news-desc .desc {
        font-size: 14px;
        -webkit-line-clamp: 3;
        min-height: 54px;
    }
    .section-agen .agen-slider {
        margin: 0px -24px 14px;
    }
    /*=============== Pelayanan Prima Rosalia indah max 991px ================*/
    
    .page-detail-pelayanan .title-img .images img {
        height: auto;
        width: 100%;
        object-fit: cover;
        object-position: top;
        margin-top: 74px;
    }
    .page-detail-pelayanan .title-header {
        bottom: 86px;
    }
    /*===================== page berita terbaru max 991px============================*/
    .page-detail-berita .main-title .title-text {
        font-size: 1.25rem;
    }
    /*=================== Footer max 991px ==============================*/
    .section-footer {
        margin-top: -182px;
    }
    /*============ search tiket step 1 / list tiket max 991px ===============*/
    .section-search .section-form-ubah .btn {
        min-height: 65px;
        font-size: 16px;
    }
    .section-search .content-order .left-content, .section-search .content-order .right-content {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0px;
    }

    .section-search .content-order .left-content {
        border-bottom: 2px solid var(--gray);
        margin-bottom: 14px;
    }
    .section-search .content-filter .filtermenu {
        display: none;
    }
    .filtermenu-btn {
        display: flex;
        align-items: center;
        grid-gap: 10px;
    }
    .section-search .content-filter .filtermenu-btn i{
        transition: transform .5s ease-in-out
    }
    .section-search .content-filter .filtermenu-btn[aria-expanded="true"] i {
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .section-search .content-filter .collapse-filtermenu {
        margin-bottom: 16px;
    }
    .modal-body-kursi .plane table{
        margin: auto;
    }
    .section-search .card-ticket .body-left {
        width: 70%;
    }
    .section-search .card-ticket .body-right {
        width: 30%;
        padding: 14px 12px;
    }
    .section-search .card-ticket .body-left .rute-asal, .section-search .card-ticket .body-left .rute-tujuan {
        width: 190px;
    }
    .section-search .card-ticket .body-left .arrow {
        width: calc(100% - 400px);
        position: relative;
        height: auto;
    }
    /*============ pilih metode bayar / konfirmasi max 991px ===============*/
    .card-step {
        align-items: center;
    }
    .card-step .main-title .title-text {
        font-size: 1.25rem;
        margin-bottom: 0px;
    }
     .metodpay .bank-item label {
        padding: 14px;
    }

    .metodpay .bank-item label img {
        width: 46px;
    }
    .metodpay .bank-item label .text-payment {
        padding-right: 26px;
        display: grid;
    }

    .metodpay .bank-item label .text-payment span {
        font-size: 10px;
    }
    /*==============================================
            Page layanan - Max width 991.98
    ===================================================*/
    .section-layanan .main-content .content-row {
        padding: 40px 0;
    }
    .section-layanan .thumb-img, .section-layanan .text-desc  {
        width: 100%;
        padding: 0px;
    }

    .section-layanan .main-content .content-row:nth-child(even) .thumb-img {
        order: 1;
        padding: 0px;
    }
    .section-layanan .main-content .content-row:nth-child(even) .text-desc {
        order: 2;
        padding: 0px;
    }
    .section-layanan .thumb-img {
        margin-bottom: 16px;
    }
    footer .icon-company {
        width: 100%;
    }
}  
@media screen and (min-width: 769px) and (max-width: 992.98px) {    
   
}
@media screen and (max-width: 768.98px) {

    main.homepage section[class*="section-"] {
        padding: 28px 0px;
    }

    main.resevation-page {
        padding-bottom: 103px;
    }  
    h1, .h1 {
        font-size: 20px;
    }
    h2, .h2 {
        font-size: 18px;
    }
    h3, .h3 {
        font-size: 16px;
    }
    h4, .h4, h5, .h5 {
        font-size: 14px;
    }
    .container {
        padding: 0 15px;
        max-width: 100%;
    }
    .main-title .title-text {
        font-size: 1.5rem;
    }
    .main-title .row .desc-title {
        font-size: 14px;
    }
    .sub-title .title-text {
        font-size: 1.25rem;
        margin-bottom: 22px;
    }
    .sub-title .title-text::after {
        height: 3px;
        width: 42px;
    }
    section[class*="section-"] .navigation-custome {
        display: none;
    }
    /*=========== header content max 768.98px====================*/
    /*.section-header {
        min-height: 320px;
        padding: 90px 14px 56px;
        background: rgb(194, 13, 20);
        background: -moz-linear-gradient(180deg, rgba(194, 13, 20, 1) 0%, rgba(131, 6, 14, 1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(194, 13, 20, 1) 0%, rgba(131, 6, 14, 1) 100%);
        background: linear-gradient(180deg, rgba(194, 13, 20, 1) 0%, rgba(131, 6, 14, 1) 100%);
        border-bottom-left-radius: 20% 10%;
        border-bottom-right-radius: 20% 10%;
    }*/
    /*.section-header .background-header {
        display: none;
    }*/
    .section-header .content-desc {
        position: relative;
        text-align: center;
    }
    .section-header .content-desc .text-desc {
        width: 100%;
        max-width: 100%;
    }
    .section-header .content-desc .top-title {
        font-size: 26px;
    }
    .form-cari-tiket .form-check label {
        font-size: 14px;
    }

    .form-cari-tiket .form-check input[type="radio"] {
        margin-top: calc(.25rem - 3px);
    }
    /*============== Beranda content - max-width: 768.98px ============= */
    .section-promo .promo-slider .swiper-slide {
        width: 65%;
    }
    .section-service .service-item {
        width: calc(50% - 13px);
        height: auto;
    }
    .section-armada .armada-slider .card-armada {
        flex-direction: column;
    }
    .section-armada .armada-slider .thumb-galery {
        padding-left: 0px;
        width: 45%;
    }
    .section-armada .armada-slider .card-desc {
        width: 100%;
        text-align: center;
    }
    .section-armada .armada-slider .card-armada::before {;
        height: 90%;
    }
    .section-armada .list-fasilitas {
        grid-gap: 14px;
        justify-content: center;
    }
    .section-armada .fasilitas-item {
        position: relative;
        background: var(--white-0);
        width: calc(33% - 7px);
        max-width: 400px;
    }
    .section-armada .fasilitas-item .card-fasilitas {
        padding: var(--padding-sm);
    }

    /*================= searchpage - reservation step 1 -- max-width: 768.98px =============*/
    .section-search .top-content-reserv .card-rute .desc-detailrute {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .section-search .top-content-reserv .card-rute .desc-detailrute .thumb-icon {
        max-width: 46px;
        height: 46px;
        padding: var(--padding-xs);
    }
    .section-search .top-content-reserv .card-rute .reservasi-detail {
        width: calc(100% - 56px);
    }
    .section-search .top-content-reserv .card-rute .reservasi-detail .rute {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .section-search .top-content-reserv .detail-keberangkatan {
        font-size: 12px;
    }
    .card-ticket .body-left .wakturute .jam {
        font-size: 24px;
    }
    .section-search .card-ticket .body-left .rute-asal, .section-search .card-ticket .body-left .rute-tujuan {
        width: 160px;
    }
    .section-search .card-ticket .body-left .arrow {
        width: calc(100% - 340px);
    }
    .section-search .top-content-reserv .card-rute .arrow {
        width: 76px;
        padding: 0 6px;
    }

    .section-search .top-content-reserv .card-rute .arrow::after {
        left: calc(50% - 14px);
        top: calc(50% - 14px);
        height: 28px;
        width: 28px;
        line-height: 24px;
    }

    .section-search .card-ticket .body-left {
        width: 65%;
    }
    .section-search .card-ticket .body-right {
        width: 35%;
        padding: 14px 12px;
    }
    /*====================== login page ============*/
    section.section-login {
        padding: 90px 16px 16px;
    }
    .section-login .form-group label {
        font-size: 14px;
    }
    .section-login .wrap-login .form-content, .section-login .wrap-login .thumb-content {
        width: 100%;
    }
    .section-login .wrap-login .form-content {
        order: 2;
        padding: 24px 20px 24px;
    }
    .section-login .wrap-login .thumb-content {
        order: 1;
    }
    .section-login .main-title .title-text {
        font-size: 1.25rem;
    }
    .login-body .main-title .desc-title {
        font-size: 14px;
    }
    .section-login .form-group .notesk {
        font-size: 12px;
    }
}

@media screen and (max-width: 480.98px) {
    body {
        font-size: 12px;
    }
    ol, ul {
        padding-left: 16px;
    }
    .btn {
        padding: .375rem  1rem;
    }
    .form-control,.input-group-text {
        font-size: 14px;
    }
    /*====================== Menu navbar - max-width 480.98px  ===================*/
    .header .navbar-brand {
        max-width: 150px;
        padding: 0px;
    }
    .header .navbar .navbar-nav {
        padding: 10px 0px;
    }
    .header .navbar .navbar-nav.right-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-top: 2px solid var(--gray-1);
        grid-gap: 10px;
    }
    .header .navbar .navbar-nav.right-menu .nav-item {
        display: block;
        width: calc(50% - 5px);
    }
    .header .navbar .navbar-nav.btn-daftar-login .nav-item a {
        width: 100%;
        font-size: 14px;
    }
    .header .mobile-menu .header-close {
        background-color: rgba(0,0,0,.8);
    }
    .header .navbar-nav .nav-link {
        font-size: 16px;
    }
    /*======================================== Beranda - Home max-width 480.98px ==============*/
    .section-padding {
        padding: 36px 0px;
    }

    /*============== Header content - max-width 480.98px =======================*/
    /*.section-header {
        min-height: 280px;
        padding: 90px 14px 56px;
        background: rgb(194,13,20);
        background: -moz-linear-gradient(180deg, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        background: linear-gradient(180deg, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        border-bottom-left-radius: 20% 10%;
        border-bottom-right-radius: 20% 10%;
    }*/
    /*.section-header .background-header {
        display: none;
    }*/
    .section-header .content-desc .row-desc {
        padding-bottom: 0px;
    }
    .section-header .content-desc {
        position: relative;
    }
    .section-header .content-desc .text-desc {
        width: 100%;
    }
    .section-header .content-desc .top-title {
        font-size: 20px;
    }
    .section-header .content-desc .bottom-desc {
        font-size: 14px;
    }
    .section-form {
        margin-top: -44px;
    }
    .section-form .form-slider {
        border-radius: var(--radius-md)
    }
    .section-form .nav-pills .nav-link {
        font-size: 12px;
        padding: 6px 8px;
        border-radius: var(--radius-sm);
    }
    .section-form .nav-pills .nav-link .icon-stroke img {
        width: 26px;
    }
    .form-cari-tiket .input-group, .row-agen .form-row {
        padding: var(--padding-xs);
    }
    .form-cari-tiket .input-group-prepend {
        width: 26px;
        height: auto;
    }
    .form-cari-tiket .row-text {
        width: calc(100% - 26px);
    }
    .form-cari-tiket .row-text .text-label {
        font-size: 12px;
        width: 100%;
    }
    .section-form .form-cari-tiket .btn, .section-search .form-cari-tiket .btn {
        font-size: 14px;
        border-radius: var(--radius-sm);
    }
    .section-form .form-cari-tiket .btn img, .section-search .form-cari-tiket .btn img {
        width: 26px;
        height: auto;
    }
    .tab_typeForm {
        position: relative;
        margin: 0;
        padding: 0 0 var(--padding-sm) 0;
    }
    .form-cari-tiket .form-check {
        padding-left: 1.5rem
    }
    .form-cari-tiket .form-check .form-check-input {
        margin-left: -1.5rem;
    }
    .form-cari-tiket .form-check label {
        font-size: 14px;
    }

    .form-cari-tiket .form-check input[type="radio"] {
        margin-top: calc(.25rem - 3px);
    }
    .form-cari-tiket .input-group.date {
        flex-direction: column;
    }    
    .form-cari-tiket .cardtgl.pp .input-group.date::before {
        width: 100%;
        height: 2px;
        top: calc(50% - 1px);
        left: 0;
        border-left: 0px;
        border-top: 2px solid var(--red-0);
    }
    .form-cari-tiket .cardtgl.pp .box-group, .form-cari-tiket .cardtgl .box-group  {
        width: 100%
    }
    .form-cari-tiket #tglplg.box-group {
        padding-left: 0px;
        padding-top: 14px;
    }
    /*=================== Promo Slider - max-width 480.98px ========================*/
    .container.container-promo {
        padding: 0px;
    }
    .section-promo .swiper-button-next, .section-promo .swiper-button-prev{
        display: none;
    }
    .section-promo .promo-slider {
        border-radius: 0px;
        padding-bottom: 24px;
    }
    .section-promo .promo-slider .swiper-slide {
        width: 90%;
        margin: 0px;
        padding-left: 15px;
    }
    .section-promo .thumb-promo {
        border-radius: var(--radius-md);
    }

    /*================= section service - max-width 480.98px =========================*/
    .section-service .list-service {
        grid-gap: 12px;
    }
    .section-service .service-item {
        width: calc(50% - 6px);
        height: auto;
    }
    .section-service .service-item .card-service {
        padding: var(--padding-sm);
        border-radius: var(--radius-md);
    }
    .section-service .card-service .thumb-icon {
        width: 72px;
        height: 72px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
        padding: 6px;
    }
    .section-service .card-service .thumb-icon img {
        padding: 8px;
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-inset-sm);
    }
    .section-service .card-service .service-text .title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .section-service .card-service .service-text .desc {
        font-size: 12px;
    }
    /*================= section armada slider - max-width 480.98px =========================*/
    .section-armada .armada-slider .card-armada {
        display: flex;
        flex-direction: column;
    }
    .section-armada .armada-slider .thumb-galery {
        width: 60%;
        padding-left: 0px;
    }
    .section-armada .armada-slider .card-desc {
        width: 100%;
        padding: var(--padding-sm);
        min-height: 227px;
    }
    .section-armada .armada-slider .card-desc .content-desc {
        font-size: 12px;
    }
    .section-armada .armada-slider .card-armada::before {
        height: 90%;
    }
    .section-armada .armada-slider .card-desc .text-header {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /*================= section fasilitas - max-width 480.98px =========================*/
    .section-armada .list-fasilitas {
        grid-gap: 8px;
    }
    .section-armada .fasilitas-item {
        width: 50%;
        max-width: calc(33% - 5px);
        min-height: 130px;
        padding: 6px;
        border: 2px solid var(--red-0);
        border-radius: var(--radius-md);
    }
    .section-armada .fasilitas-item .card-fasilitas {
        padding: 6px;
        border-radius: var(--radius-sm);
    }
    .section-armada .fasilitas-item .card-fasilitas .fasilitas-text {
        font-size: var(--font-size-xs);
        padding-top: var(--padding-md);
    }
    /*================ Footer - max-width 480.98px ========================================*/
    .footer {
        font-size: 14px;
    }
    .company-profile {
        text-align: center;
    }
    .footer .icon-company {
        max-width: 200px;
    }
    .footer-copyright p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 10px;
    }
    .footer .list-sosmed {
        justify-content: center;
        margin-bottom: 0px;
    }
    .list-sosmed li a {
        width: 38px;
        height: 38px;
    }
    /*Section step order cara pemesanan*/
    .section-stepOrder .stepOrder-item {
        width: 100%;
    }
    .section-stepOrder .stepOrder-item:first-child .card-stepOrder::before {
        top: unset;
        right: unset;
        left: -154px;
        bottom: -140px;
    }
    .section-stepOrder .stepOrder-item:first-child .card-stepOrder::after {
        top: -90px;
        right: -40px;
        left: unset;
        bottom: unset;
    }
    .section-stepOrder .stepOrder-item:nth-child(2) .card-stepOrder::after {
        bottom: -100px;
        right: -30px;
    }
    .section-stepOrder .stepOrder-item:last-child .card-stepOrder::before {
        top: unset;
        bottom: -100px;
        right: unset;
        left: -100px
    }
    .section-stepOrder .stepOrder-item:last-child .card-stepOrder::after {
        left: unset;
        right: -29px;
        bottom: unset;
        top: -60px;
    }
    /*Section download app*/
    .section-downloadapp .main-content {
        /*padding-top: 90px;        */
        border-radius: var(--radius-md);
        padding: 20px;
        background: -moz-linear-gradient(180deg, rgba(244,0,9,1) 0%, rgba(198,1,31,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(244,0,9,1) 0%, rgba(198,1,31,1) 100%);
        background: linear-gradient(180deg, rgba(244,0,9,1) 0%, rgba(198,1,31,1) 100%);
        text-align: center;
    }
    .section-downloadapp .main-content .img-thumb {
        width: 280px;
        left: calc(50% - 140px);
        margin-bottom: 30px;
    }
    .section-downloadapp .main-content .img-thumb img {
        width: 100%;
        height: auto;
    }
    .section-downloadapp .main-content::before {
        display: none;
    }
    .section-downloadapp .main-content .desc-card {
        width: 100%;
    }
    .section-downloadapp .main-content .desc-card::before {
        width: 260px;
        height: 260px;
        left: calc(50% - 130px);
        top: -140px;
    }
    .section-membership .list-membership {
        grid-gap: 20px;
    }
    .section-membership .member-card {
        border-radius: var(--radius-md);
    }
    .member-card .title-content, .member-card .feature-content {
        padding: 20px;
    }
    .member-card .class-produk {
        font-size: 26px;
    }
    .member-card .desc-produk {
        font-size: 20px;
    }
    .member-card .feature-content li .icon {
        font-size: 14px;
        padding: 6px;
    }
    .member-card .feature-content .text {
        line-height: 1.5;
    }
    /*========= Reservation step 1 - max-width 480.98px =====================*/
    main.main-reservation {
        padding-top: 70px;
    }
    .main-reservation .card {
        padding: var(--padding-md);
        border-radius: var(--radius-md);
    }
    .section-search .top-content-reserv .card-rute {
        align-items: center;
        justify-content: center;
        padding: var(--padding-xs);
        border-radius: var(--radius-md);
    }
    .section-search .top-content-reserv .rute-tiket {
        margin: 0px;
        padding-bottom: 12px;
    }
    .section-search .top-content-reserv .card-rute .desc-detailrute {
        flex-wrap: wrap;
        justify-content: center;
    }
    .section-search .top-content-reserv .card-rute .desc-detailrute .thumb-icon {
        max-width: 40px;
        height: 40px;
        padding: 4px;
    }
    .section-search .top-content-reserv .card-rute .reservasi-detail {
        width: 100%;
        max-width: 100%;
    }
    .section-search .top-content-reserv .card-rute .reservasi-detail .rute {
        font-size: 14px;
        width: 100%;
        align-items: flex-start !important;
    }
    .section-search .top-content-reserv .card-rute .right-content {
        width: 100%;
    }
    .section-search .reservasi-detail .rute .asal, .section-search .reservasi-detail .rute .tujuan {
        min-width: calc(50% - 23px);
        max-width: calc(50% - 23px);
    } 
    .section-search .top-content-reserv .card-rute .arrow {
        width: 46px;
        padding: 0 4px;
    }
    .section-search .top-content-reserv .card-rute .arrow::after {
        left: calc(50% - 11px);
        top: calc(50% - 11px);
        height: 22px;
        width: 22px;
        line-height: 16px;
        font-size: 12px;
    }
    .section-search .arrow img {
        max-width: 14px;
        height: auto;
    }

    .section-search .reservasi-detail .rute .asal {
        text-align: right;
    }
    .section-search .reservasi-detail .rute .kota {
        display: block;
        width: 100%;
    }
    .section-search .reservasi-detail .rute .title {
        display: flex;
        flex-direction: column;
    }
    .section-search .reservasi-detail .rute .agen {
        display: block;
        /*overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;*/
        font-size: 12px;
        font-weight: normal;
        order: 2;
    }
    .section-search .top-content-reserv .detail-keberangkatan {
        font-size: 12px;
        padding-top: 8px;
        grid-gap: 4px;
    }
    .section-search .top-content-reserv .detail-keberangkatan .tgl-berangkat {
        width: calc(50% + 4px);
        text-align: right;
        padding-right: 14px;
    } 
    .section-search .top-content-reserv .detail-keberangkatan .jml-pnp {
        width: calc(50% - 10px);
    }
    .section-search .top-content-reserv .card-ubah-cari {
        text-align: center;
    }
    .section-search .content-order .left-fill {
        width: 100%;
        margin-bottom: 12px;
    }
    .section-search .content-order .left-fill .btn-group {
        width: 100%;
    }
    .section-search .content-order .left-fill .btn{
        font-size: 12px;
        padding: .5rem;
    }
    .section-search .card-ticket {
        padding: 0px;
    }
    .section-search .card-ticket .body-left {
        width: 100%;
    }
    .section-search .card-ticket .body-right {
        width: 100%;
        border-left: 0px;
        border-top: 2px dashed var(--gray-2);
        padding: 12px var(--padding-xs) var(--padding-xs);
    }
    .section-search .card-ticket .brand-bus {
        min-width: 150px;
        padding: var(--padding-sm);
    }
    .section-search .card-ticket .header-content .brand-name {
        font-size: 14px;
    }

    .section-search .card-ticket .body-left .rute {
        position: relative;
        padding: var(--padding-xs);
    }
    .section-search .card-ticket .body-left .rute-asal, .section-search .card-ticket .body-left .rute-tujuan {
        width: calc(50% - 34px);
    }
    .section-search .card-ticket .body-left .arrow {
        width: 68px;
        position: relative;
        height: auto;
        padding: 0px 8px;
    }

    .card-ticket .body-left .wakturute .jam {
        font-size: 16px;
    }
    .card-ticket .body-left .kota {
        font-size: 14px;
    }
    .section-search .card-ticket .body-left .agen {
        font-size: 12px;
    }
    .card-ticket .body-right .price-content {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }
    .card-ticket .body-right .price-content .txt-price {
        font-size: 16px;
    }
    .card-ticket .body-right .price-content .price_disc, .card-ticket .seat-available {
        font-size: 12px;
    }
    /*.card-ticket .pay-seat {
        width: 100%;
    }*/
    .sekeleton .pay-seat {
        width: calc(100% - 105px);
    }
    .card-ticket .body-right .price-content .btn-pesantiket {
        min-width: 105px;
    }
    .modal-kursi .modal-content {
        height: calc(100vh -  60px);
        border: 0;
        border-radius: 0;
    }

    .modal-kursi .modal-dialog {
        margin: 0;
        align-items: flex-end;
        height: 100%;
    }
    /*=========== Reservation step 2/ pesan page - max-width 480.98px  =====================*/

    .section-pesan .sub-title p {
        margin-bottom: .75rem;
    }
    .section-pesan .section-form-pnp .title-pnp {
        border-radius: var(--radius-md) 0;
    }
    .section-pesan .content-keberangkatan .body-content {
        padding: var(--padding-sm) 0px 0px;
    }
    .section-pesan .content-keberangkatan .body-content .nm-agen .title,
    .main-reservation .form-rute .content-keberangkatan .nm-agen .title {
        font-size: 16px;
    }
    .section-pesan .form-group .checkbtn {
        display: flex;
        grid-gap: 10px;
        align-items: flex-start;
    }
    /*.section-pesan .form-group .checkbtn label {
        font-size: 14px;
    }*/
    .section-pesan .data-penumpang .row, .main-reservation .form-kursi .btn-inputdata {
        padding: var(--padding-md);
    }
    .section-pesan .sub-title, .main-reservation .content-order .sub-title {
        font-size: 18px;
    }
    .section-pesan .sub-title.total-bayar {
        font-size: 16px;
    }
    .main-reservation .form-voucher span.icon {
        display: flex;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    /*============= Reservation step 3/ konfirmasi page - max-width 480.98px  ==========================*/
    .main-reservation .card_metodebayar .methodpay-item {
        padding: var(--padding-xs);
    }
    .main-reservation .card_metodebayar .methodpay-item::before,
    .main-reservation .card_metodebayar .methodpay-item::after {
        display: none;
    }
    .main-reservation .card_metodebayar .methodpay-item .text-payment {
        margin-left: 0px;
        max-width: calc(100% - 60px);
        font-size: 14px;
    }
    .main-reservation .card_metodebayar span.tfbank {
        font-size: 11px;
        line-height: 1;
    }
    .main-reservation .card_metodebayar .methodpay-item .img-bank {
        max-width: 60px;
        padding-left: 10px;
    }
    .form-sk .btn.btn-link {
        text-align: left;
    }
    /*Modal Pilih voucher*/
    .listVoucher .modal-dialog {
        margin: 0px;
    }
    .listVoucher .modal-content {
        border: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    .listVoucher .modal-body {
        padding: 16px 6px 10px;
    }
    .listVoucher .voucher-card .left-content {
        width: 110px;
    }
    .listVoucher .voucher-card .content-disc {
        width: calc(100% - 110px);
    }
    .listVoucher .voucher-card .disc-text {
        font-size: 20px;
    }
    /*================= Page Cabang - max-width 480.98px ===================*/
    .section-cabang, .padding-page {
        padding-top: 70px;
    }
    .section-cabang .body-content {
        padding: 30px 0;
    }
    .cabang-item .row-wrapper {
        margin: 4px 0px;
    }
    .cabang-item .icon {
        max-width: 38px;
        max-height: 38px;
    }

    .content-header .background-header {
        position: relative;
        min-height: 120px;
        width: 100%
        background: rgb(194,13,20);
        background: -moz-radial-gradient(circle, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        background: -webkit-radial-gradient(circle, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        background: radial-gradient(circle, rgba(194,13,20,1) 0%, rgba(131,6,14,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c20d14",endColorstr="#83060e",GradientType=1);
        border-radius: 0 0 50% 50%/0 0 20% 20%;
    }
    .main-page .content-header {
        padding-top: 0px;
    }
    .content-header img {
        display: none;
    }
    .content-title-pg .wrap-content {
        padding-top: 20px;
    }
    /*====================== Page Profile saya max width 480px ===========================*/
    .section-profile .body-content {
        padding-top: 16px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .section-profile .wrap-content {
        margin: 0px;
    }
    .section-profile .left-content.aside, .section-profile .content-page {
        width: 100%;
        padding: 0px;
    }
    .section-profile .sidebar {
        position: relative;
        top: 0px;
        padding: 0px;
        min-height: auto;
        margin-bottom: 20px;
    }
    .section-profile .sidebar::before {
        display: none;
    }

    .section-profile .menu-sidebar {
        padding: 0px
    }
    .section-profile .menu-sidebar .user_content {
        display: flex;
        align-items: center;
        text-align: left;
        margin-bottom: 16px;
        gap: 10px;
    }
    .section-profile .menu-sidebar .data-user p {
        margin: 0px;
        margin-bottom: 6px;
    }
    .section-profile .nav-tabs {
        flex-wrap: nowrap;
        overflow: scroll;
        border-color: var(--gray-2);
        padding-bottom: 10px;
        grid-gap: 8px
    }
    .section-profile .sidebar ul li a.active {
        color: var(--dark-1);
        background: var(--gray-1);
    }
    /*========================= section rute favorit - max 480px ==================*/
    .section-rute .list-rute {
        grid-gap: 12px;
    }
    .section-rute .rute-item {
        width: calc(50% - 6px);
    }
    .section-rute .card-rute {
        padding: var(--padding-md) var(--padding-xs);
        border-radius: var(--radius-md);
    }
    .section-rute .card-rute .thumb-icon {
        border-radius: var(--radius-md);
    }
    .section-rute .card-rute .thumb-icon img {
        border-radius: var(--radius-sm);
    }
    .section-rute .card-rute .title {
        font-size: 14px;
        font-weight: bold
    }
    /*========================= section penghargaan - max 480px ==================*/
    .section-award .swiper.award-slider {
        margin: 0px;
    }
    .section-award .swiper-slide {
        padding: 0px;
    }
    .section-award .card-award {
        border-radius: var(--radius-md);
    }
    .section-award .card-award .thumb-promo {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
    .section-award .card-award .label-years {
        bottom: -15px;
        padding: 4px 10px;
        font-size: 12px;
        line-height: 12px;
    }
    .section-award .card-award .body-card {
        padding: 44px var(--padding-xs) var(--padding-md);
        min-height: 186px;
    }
    .section-award .card-award .title {
        font-size: 16px;
    }
    .section-award .card-award .desc {
        font-size: 12px;
    }


}


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}ientation:landscape) {
}