/*! -----------------------------------------------------------------------------------

    Template Name: Wahana Travel 2024
    Description: This is WahanaTravel theme
    Author: RakaArdiansyah

-----------------------------------------------------------------------------------s
/*------------------------------------------------------------------
[Table of contents]

	+ General
		- general Styles
		- common-style
		- Preloader
		- theme-btn
		- button-shared
		- padding
		- margin
		- preloader
		- section-heading
		- custom-checkbox
		- Back To Top
		- and more
	+ Header
		- Logo
		- login
		- sign up
		- Main Navigation
		- Dropdown
		- mobile menu
	+ Content
		+ Main Files
			- index.html
			- index2.html
			- index3.html
			- index4.html
			- index5.html
			- index6.html
	+ Banner Area
			- Breadcrumb
	+ Tour
	        - Tour Full Width
	        - Tour Grid
	        - Tour List
	        - Tour Left Sidebar
	        - Tour Right Sidebar
	        - Tour Details
	        - Tour Booking
	+ Cruise
	        - Cruises
	        - Cruise List
	        - Cruise Sidebar
	        - Cruise Details
	        - Cruise Booking
	+ Pages
			- Dashboard
			- User Profile
			- Become Local Expert
			- Destinations
			- About
			- Our Services
			- Payment
			- Faq
			- Contact
			- 404 Page
			- Recover Password
			- Coming Soon
	+ blog
			- Blog Full Width
			- Blog Grid
			- Blog Sidebar
			- Blog Detail
	+ Flight
	        - Flight Grid
	        - Flight List
	        - Flight Sidebar
	        - Flight Details
	        - Flight Booking
	 + Hotel
	        - Hotel Grid
	        - Hotel List
	        - Hotel Sidebar
	        - Hotel Details
	        - Hotel Booking
	 + Car
	        - Car Grid
	        - Car List
	        - Car Sidebar
	        - Car Details
	        - Car Booking
	+ Footer
		+ Top Footer
			- Company Details
			- Other Licks
			- Subscriber form
		+ Bottom Footer
		    - Copyright
		    - Terms & Conditions
		    - Privacy Policy
		    - Help Center
		    - Social Profile
	+ Responsive Design Styles
		    - $laptop_l: '(max-width: 1440px)';
            - $laptop_m: '(max-width: 1366px)';
            - $laptop_m_two: '(max-width: 1280px)';
            - $laptop_m_three: '(max-width: 1200px)';
            - $laptop_m_four: '(max-width: 1199px)';
            - $laptop_m_five: '(max-width: 1024px)';
            - $laptop_ls: 'only screen and (max-width: 1279px) and (min-width: 320px)';
            - $medium_device: 'only screen and (min-width: 992px) and (max-width: 1200px)';
            - $ms_device: 'only screen and (max-width: 1200px) and (min-width: 320px)';
            - $tab_device: 'only screen and (min-width: 768px) and (max-width: 1100px)';
            - $tab_device_two: '(max-width: 768px)';
            - $large_mobile: 'only screen and (min-width: 480px) and (max-width: 767px)';
            - $large_mobile_two: ' (max-width: 600px)';
            - $large_mobile_three: ' (max-width: 480px)';
            - $small_mobile: 'only screen and (min-width: 320px) and (max-width: 479px)';
            - $small_mobile_four: '(max-width: 425px)';
            - $small_mobile_three: '(max-width: 400px)';
            - $small_mobile_five: '(max-width: 375px)';
            - $small_mobile_two: '(max-width: 320px)';
-------------------------------------------------------------------*/
/*---------------- css loader ----------------*/
:root {
    --theme-primary: #ca262c;
    --theme-secondary: #d9d9d9;
    --theme-tertiary: #ed1c24;
}

/**=====================
       Reset css start
  ==========================**/
.font-roboto {
    font-family: Roboto, sans-serif;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes infinite-blink {
    0% {
        opacity: 1;
        top: 0;
    }

    30% {
        opacity: 1;
        top: 30%;
    }

    70% {
        opacity: 0;
        top: 30%;
    }

    100% {
        opacity: 0;
        top: 0;
    }
}

/*============== play-button-pulse ==============*/
@-webkit-keyframes play-button-pulse {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

@-moz-keyframes play-button-pulse {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

@-ms-keyframes play-button-pulse {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

@-o-keyframes play-button-pulse {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes play-button-pulse {
    0% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
}

/*== heartBeat ==*/
@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    40% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(1.04);
        -moz-transform: scale(1.04);
        -ms-transform: scale(1.04);
        -o-transform: scale(1.04);
        transform: scale(1.04);
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes cluster-animation {
    0%,
    100% {
        -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
    }

    50% {
        -webkit-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.1);
    }
}

/*====== starsAnimation ========*/
@keyframes starsAnimation {
    from {
        transform: translateY(-2000px);
    }

    to {
        transform: translateY(0px);
    }
}

/*====== background-move ========*/
@keyframes background-move {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 100vw 0, 0 0;
        background-position: max(100vw, 40em) 0, 0 0;
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    margin: 0px 0px;
    list-style-type: none;
}

input:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

body {
    line-height: 28px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*---------------- fonts ----------------*/

.font-size-20 {
    font-size: 20px !important;
}

.font-size-15 {
    font-size: 15px !important;
}

.font-size-14 {
    font-size: 14px !important;
}

.font-size-11 {
    font-size: 11px !important;
}

/*---------------- font-weight ----------------*/
.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-semi-bold {
    font-weight: 600 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

/*---------------- line-height ----------------*/

.line-height-26 {
    line-height: 26px !important;
}

.section-bg {
    background-color: #ffffff;
}

.section-bg-2 {
    background-color: #333333;
}

.section-bg-3 {
    height: auto;
    width: initial;
    background-position: right;
    background-repeat: no-repeat;
    filter: alpha(opacity = 40);
    -webkit-filter: alpha(opacity = 40);
    background-image: url(../images/background/bg2_2.jpg);
}

.gradient-bg {
    background: -moz-linear-gradient(-45deg, #ca262c 0%, #bdd2ef 100%);
    background: -webkit-linear-gradient(-45deg, #ca262c 0%, #bdd2ef 100%);
    background: linear-gradient(135deg, #ca262c 0%, #bdd2ef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CA262C', endColorstr='#bdd2ef',GradientType=1 );
}

.section-block {
    height: 1px;
    background-color: #f5f7fc;
}

/*==== border color =====*/
.border {
    border-color: rgba(128, 137, 150, 0.3) !important;
}

.border-top {
    border-top-color: rgba(128, 137, 150, 0.1) !important;
}

.border-bottom {
    border-bottom-color: rgba(128, 137, 150, 0.1) !important;
}

/*---------------- text-color ----------------*/
.text-black {
    color: #333333 !important;
}

/*---------------- container ----------------*/
.container {
    max-width: 1200px;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

/*---------------- responsive-column will be visible on responsive ----------------*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .responsive-column {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive-column {
        max-width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .responsive-column {
        max-width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 1024px) {
    .responsive-column-m {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive-column-m {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .responsive-column-m {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .responsive-column--m {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*=== theme-btn-submit ====*/
.btn-submit {
    margin: 2px 0px;
    font-size: 15px;
    color: #fff;
    line-height: 25px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.btn-submit:hover {
    background-color: #db575c;
    color: #fff;
}

/*=== theme-btn ====*/
/* (GLOBAL) CHANGED AFFECTS ALL */
.theme-btn {
    font-size: 14px;
    color: #fff;
    line-height: 33px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid var(--theme-primary);
    font-weight: 500;
}

.btn-detail-cart-flight {
    position: relative;
    display: inline-block;
}

.theme-btn-detail-cart-flight {
    color: var(--theme-primary);
    background-color: transparent !important;
    border: none;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
    justify-content: end;
    display: flex;
}

.theme-btn-detail-cart-flight .dx-button-content {
    padding: 0 !important;
}

.theme-btn-detail-cart-flight::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--theme-primary);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.theme-btn-detail-cart-flight:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.theme-btn-filter {
    font-size: 15px;
    color: var(--theme-primary);
    line-height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid var(--theme-primary);
    font-weight: 500;
}

.theme-btn:hover {
    background-color: #fff;
    color: #db575c;
    border: 1px solid #db575c;
}
.dx-button-mode-contained.dx-button-default .dx-icon:hover,
.dx-button-mode-contained.dx-button-default .dx-icon:active,
.dx-button-mode-contained.dx-button-default .dx-icon:focus {
    color: #db575c !important;
}

/*=== theme-btn-smaller ====*/
.theme-btn-smaller {
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

/*=== theme-btn-small ====*/
.theme-btn-small {
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
}

/*=== theme-btn-gray ====*/
.theme-btn-gray {
    background-color: rgba(128, 137, 150, 0.1);
    color: #333333;
    border-color: rgba(128, 137, 150, 0.1);
}

.theme-btn-gray:hover {
    background-color: rgba(128, 137, 150, 0.2);
    color: #333333;
}

.recommended-tag.active {
    background-color: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

.undo-btn {
    display: none;
    color: var(--theme-primary);
    cursor: pointer;
    padding: 2px;
}

.undo-btn.active {
    display: inline-block;
}

/*=== theme-btn-transparent ====*/
.theme-btn-transparent {
    background-color: #fff;
    color: var(--theme-primary);
}

.theme-btn-transparent:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.theme-btn-transparent-navbar {
    background-color: #fff;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    font-weight: bold;
}

.theme-btn-transparent-navbar:hover {
    background-color: var(--theme-primary);
    color: white;
    font-weight: bold;
}

/*=== theme-btn-rgb ====*/
.theme-btn-rgb {
    border: none;
    background-color: rgba(40, 125, 250, 0.1);
    color: var(--theme-primary);
}

.theme-btn-rgb:hover {
    background-color: rgba(40, 125, 250, 0.1);
}

/*=== theme-btn-danger-rgb ====*/
.theme-btn-danger-rgb {
    background-color: rgba(220, 54, 67, 0.1);
    color: var(--theme-primary);
}

.theme-btn-danger-rgb:hover {
    background-color: rgba(220, 54, 67, 0.1);
    color: var(--theme-primary);
}

/*=== theme-btn-hover-gray ====*/
.theme-btn-hover-gray {
    color: #333333;
    font-weight: 500;
}

.theme-btn-hover-gray:focus {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.theme-btn-hover-gray:hover {
    background-color: rgba(128, 137, 150, 0.1);
    color: #333333;
}

/*==== btn-text ======*/
.btn-text {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 15px;
}

.btn-text i {
    padding-left: 1px;
    font-size: 13px;
}

.btn-text:hover {
    color: var(--theme-primary);
}

.section-customer-review {
    height: auto;
    width: initial;
    position: relative;
    padding-bottom: 100px;
    background-color: #f0f0f0;
    background-image: url(../images/background/bg4.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    filter: alpha(opacity=40);
    -webkit-filter: alpha(opacity=40);
}

.section-padding-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.section-padding-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.section-padding-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section--padding {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .section--padding {
        padding-top: 0px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .section--padding {
        padding-top: 0px;
    }
}

@media only screen and (min-width: 376px) and (max-width: 480px) {
    .section--padding {
        padding-top: 210px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 376px) {
    .section--padding {
        padding-top: 280px;
    }
}

/*===== padding-top ========*/

.padding-top-60px {
    padding-top: 60px;
}

.padding-top-50px {
    padding-top: 50px;
}

.padding-top-30px {
    padding-top: 30px;
}

.padding-top-20px {
    padding-top: 20px;
}

.padding-top-10px {
    padding-top: 10px;
}

/*===== padding-bottom ========*/

.padding-bottom-60px {
    padding-bottom: 60px;
}

.padding-bottom-35px {
    padding-bottom: 35px;
}

.padding-bottom-20px {
    padding-bottom: 20px;
}

/*===== padding-right ========*/

.padding-right-100px {
    padding-right: 100px;
}

/*===== padding-left ========*/

.padding-left-100px {
    padding-left: 100px;
}

/*===== margin ====*/
.margin-top-20px {
    margin-top: 20px;
}

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

/*========= preloader ==========*/
.preloader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader .spinner {
    animation: rotate 1s linear infinite;
    z-index: 2;
    width: 50px;
    height: 50px;
}

.loader .spinner .path {
    stroke: var(--theme-primary) !important;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

/*====================================================
    cd-words-wrapper
 ====================================================*/
.cd-words-wrapper b {
    font-weight: 700;
}

/*====================================================
    section-heading
 ====================================================*/
.section-heading .sec__title {
    width: 100%;
    text-align: center;
    font-size: 32px;
    color: #333333;
    font-weight: 700;
}

.section-heading .sec__title span {
    color: #ca262c;
    margin-left: 7px;
}

@media (max-width: 425px) {
    .section-heading .sec__title {
        padding-top: 0px;
        font-size: 26px;
        line-height: 42px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .section-heading .sec__title br {
        display: none;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .section-heading .sec__title br {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .section-heading .sec__title br {
        display: none;
    }
}

.section-heading .sec__desc {
    font-size: 18px;
    color: #5d646d;
    line-height: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .section-heading .sec__desc br {
        display: none;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .section-heading .sec__desc br {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .section-heading .sec__desc br {
        display: none;
    }
}

/*==== curve-shape =====*/
.curve-shape {
    position: relative;
    display: inline-block;
}

.curve-shape::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: attr(data-text);
    color: transparent;
    text-decoration-style: wavy;
    text-decoration-color: var(--theme-primary);
    text-decoration-line: underline;
}

/*==== stroke-shape =====*/
.stroke-shape {
    position: relative;
    display: inline-block;
}

.stroke-shape::before,
.stroke-shape::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    height: 2px;
    width: 45px;
    background-color: var(--theme-primary);
}

.stroke-shape::after {
    width: 7px;
    background-color: #fff;
    left: 25px;
}

/*====================================================
    custom-checkbox
 ====================================================*/
.img-payment {
    width: 80px;
    height: auto;
    display: flex;
    justify-content: start;
    margin-top: 3px;
    margin-bottom: 3px;
}

.label-payment {
    font-size: 15px;
    text-wrap: wrap;
}

@media only screen and (min-width: 320px) and (max-width: 370px) {
    .label-payment {
        font-size: 12px;
    }
}

@media only screen and (min-width: 370px) and (max-width: 479px) {
    .label-payment {
        font-size: 14px;
    }
}

.custom-checkbox {
    display: block;
    margin-bottom: 8px;
}

.custom-checkbox label {
    color: #5d646d;
    font-size: 13px;
    display: block;
    margin-bottom: 0;
    cursor: pointer;
}
/* TODO: custom-checkbox span BERIMBAS KESEMUA PAGE */
.custom-checkbox span {
    width: 100%;
    font-size: medium;
    font-weight: 400;
    /* display: block !important; */
    margin-bottom: 1.5em !important;
}

.custom-checkbox .title-addon {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
}

.custom-checkbox label a {
    color: var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.custom-checkbox label a:hover {
    color: #333333;
}

.custom-checkbox input[type="checkbox"]:not(:checked),
.custom-checkbox input[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

.custom-checkbox input[type="checkbox"]:not(:checked) + label,
.custom-checkbox input[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 20px;
}

.custom-checkbox input[type="checkbox"]:not(:checked) + label:before,
.custom-checkbox input[type="checkbox"]:checked + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    margin-left: -3px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background-color: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.custom-checkbox input[type="checkbox"]:not(:checked) + label:after,
.custom-checkbox input[type="checkbox"]:checked + label:after {
    content: "\f00c";
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 12px;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-family: FontAwesome;
    font-weight: 900;
}

.custom-checkbox input[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    visibility: hidden;
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
    opacity: 1;
    visibility: visible;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/*======= social-profile ========*/
.social-profile li {
    display: inline-block;
    margin-right: 3px;
}

.social-profile li:last-child {
    margin-right: 0;
}

.social-profile li a {
    display: block;
    color: #fff;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background-color: var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.social-profile li a img {
    width: 35px;
}

/*======= social--profile ========*/
.social--profile li a {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.social--profile li a:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

/*======= info-list ========*/
.info-list li {
    display: block;
    color: #5d646d;
    margin-bottom: 6px;
}

.info-list li:last-child {
    margin-bottom: 0;
}

.info-list li a {
    color: #5d646d;
}

.info-list li .icon-element {
    color: var(--theme-primary);
    font-size: 16px;
    width: 30px;
    height: 30px;
    background-color: rgba(40, 125, 250, 0.1);
    line-height: 30px;
}

.info-list li:hover a {
    color: var(--theme-primary);
}

.info-list li:hover .icon-element {
    background-color: var(--theme-primary);
    color: #fff;
}

/*======= list-items ========*/
.list-items li {
    margin-bottom: 5px;
    color: #333333;
    font-family: "Roboto", sans-serif;
}

.list-items li a {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.list-items li a:hover {
    color: var(--theme-primary);
}

/*======= list--items ========*/
.list--items a {
    position: relative;
    display: inline-block;
}

.list--items a::before {
    position: absolute;
    content: "";
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--theme-primary);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.list--items a:hover::before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/*======= list-items-flush ========*/
.list-items-flush li {
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.list-items-flush li:last-child {
    border-bottom: 0;
}

/*===== toggle-drop-menu =======*/
.toggle-drop-menu {
    display: none;
}

@media (max-width: 768px) {
    .modern-slider .item h6 {
        margin-bottom: 15px;
        font-size: 18px;
    }

    .modern-slider .item h4 {
        margin-bottom: 25px;
        font-size: 28px;
        line-height: 36px;
        letter-spacing: 1px;
    }

    .modern-slider .item p {
        max-width: 570px;
        line-height: 25px;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wizard .steps ul > li {
        width: 100%;
    }
}

/*======== toggle-menu =========*/
.toggle-menu li .toggle-menu-icon .fa {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.toggle-menu li.active .toggle-menu-icon .fa {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/*================= pagination ==================*/
.page-item .page-link-nav:first-child,
.page-item .page-link-nav:last-child {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.page-link-nav {
    color: var(--theme-primary);
    margin-right: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: rgba(40, 125, 250, 0.07);
    width: 34px;
    line-height: 34px;
    padding: 0;
    text-align: center;
    height: 34px;
}

.page-link-nav:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

/*======== filter-top =========*/
@media (max-width: 375px) {
    .filter-top {
        display: block !important;
    }
}

/*======== filter-bar =========*/
.filter-bar {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    padding: 20px;
    border: 1px solid rgba(128, 137, 150, 0.1);
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .filter-bar {
        display: block !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .filter-bar {
        display: block !important;
    }
}

.filter-option {
    margin-right: 20px;
}

@media (max-width: 575px) {
    .filter-option {
        margin-right: 10px;
    }
}

@media (max-width: 375px) {
    .filter-option {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.filter-option .dropdown-contain .dropdown-menu {
    width: 245px;
    margin-top: 15px;
}

@media (max-width: 575px) {
    .filter-option .dropdown-contain .dropdown-menu {
        left: -90px !important;
    }

    .rtl .faq-accordion .faq-header svg {
        left: 15px;
    }

    .rtl .f1 .f1-buttons {
        text-align: left;
    }

    .rtl .f1 .f1-steps .f1-step {
        float: right;
    }
}

@media (max-width: 425px) {
    .filter-option .dropdown-contain .dropdown-menu {
        left: -20px !important;
    }
}

@media (max-width: 375px) {
    .filter-option .dropdown-contain .dropdown-menu {
        left: 0 !important;
    }
}

.filter-option .price-slider-amount .amounts {
    background-color: transparent;
    text-align: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/*-========= filter-bar-filter =========-*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .filter-bar-filter {
        padding-bottom: 20px;
    }
}

@media (max-width: 375px) {
    .filter-bar-filter {
        display: block !important;
        padding-bottom: 10px;
    }
}

@media (max-width: 375px) {
    .bootstrap-select .dropdown-toggle .filter-option {
        margin-bottom: 0;
    }
}

/*-========= select-contain =========-*/
.select-contain {
    position: relative;
    width: max-content;
}

.select-contain .bootstrap-select {
    width: 100% !important;
}

.select-contain .bootstrap-select .flag-icon {
    width: 23px;
    line-height: inherit;
}

.select-contain .dropdown-toggle {
    padding: 14px 20px;
    border-color: rgba(128, 137, 150, 0.2) !important;
    background-color: #fff !important;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.select-contain .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    top: 14px;
    right: 20px;
}

.select-contain .dropdown-toggle:focus {
    outline: none !important;
    border-color: #ca262c !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.select-contain .dropdown-menu {
    border: 1px solid rgba(128, 137, 150, 0.2);
}

.select-contain .dropdown-menu .bs-searchbox {
    display: none;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar {
    width: 8px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-track {
    background-color: rgba(128, 137, 150, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-thumb {
    background-color: rgba(128, 137, 150, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 137, 150, 0.6);
}

.select-contain .dropdown-item {
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 15px;
}

.select-contain .dropdown-item.active {
    background-color: var(--theme-primary);
    color: #fff;
}

.select-contain .dropdown-item.active:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.select-contain .dropdown-item:focus {
    outline: none;
}

.select-contain .dropdown-item:hover {
    background-color: rgba(40, 125, 250, 0.1);
    color: var(--theme-primary);
}

/* select--contain */
.select--contain .dropdown-toggle::after {
    top: 3px;
    right: 3px;
    font-size: 12px;
}

/*-========= select-contain =========-*/
.select-contain {
    position: relative;
    width: max-content;
}

.select-contain .bootstrap-select {
    width: 100% !important;
}

.select-contain .bootstrap-select .flag-icon {
    width: 23px;
    line-height: inherit;
}

/* TODO: FIELD IMPACT KE SEMUA     */
.select-contain .dropdown-toggle {
    padding: 14px 15px;
    border-color: rgba(128, 137, 150, 0.2) !important;
    background-color: #fff !important;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.select-contain .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    top: 14px;
}

.select-contain .dropdown-toggle:focus {
    outline: none !important;
    border-color: #ca262c !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.select-contain .dropdown-menu {
    border: 1px solid rgba(128, 137, 150, 0.2);
}

.select-contain .dropdown-menu .bs-searchbox {
    display: none;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar {
    width: 8px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-track {
    background-color: rgba(128, 137, 150, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-thumb {
    background-color: rgba(128, 137, 150, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.select-contain .dropdown-menu .inner::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 137, 150, 0.6);
}

.select-contain .dropdown-item {
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 15px;
}

.select-contain .dropdown-item.active {
    background-color: var(--theme-primary);
    color: #fff;
}

.select-contain .dropdown-item.active:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.select-contain .dropdown-item:focus {
    outline: none;
}

.select-contain .dropdown-item:hover {
    background-color: rgba(40, 125, 250, 0.1);
    color: var(--theme-primary);
}

/* select--contain */
.select--contain .dropdown-toggle::after {
    top: 3px;
    right: 3px;
    font-size: 12px;
}

/* select-wrap-form */
.select-wrap-form {
    position: relative;
}

.select-wrap-form .form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #333333;
    cursor: pointer;
}

.select-wrap-form .form-control:focus {
    border-color: var(--theme-primary);
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.select-wrap-form::after {
    position: absolute;
    right: 10px;
    top: 5px;
    border: none;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-size: 14px;
    font-weight: 900;
    color: #5d646d;
}

/*======= qty =======*/
.qty-box label {
    color: #333333;
    font-size: 15px;
    margin-bottom: 0;
}

.qty-box label span {
    display: block;
    font-size: 13px;
    margin-top: -10px;
    color: #5d646d;
}

.roomInc,
.roomDec,
.qtyInc,
.qtyDec {
    width: 28px;
    height: 28px;
    line-height: 29px;
    font-size: 18px;
    background-color: rgba(128, 137, 150, 0.08);
    color: #333333;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.roomInc:hover,
.roomDec:hover,
.qtyInc:hover,
.qtyDec:hover {
    background-color: #ca262c;
    color: #fff;
}

.roomBtn input,
.qtyBtn input {
    width: 35px;
    border: none;
    text-align: center;
    color: #333333;
    font-weight: 500;
}

/*======= price-slider-amount =======*/
.price-slider-amount .amounts {
    width: 100%;
    border: none;
    color: var(--theme-primary);
    font-weight: 700;
    background-color: rgba(40, 125, 250, 0.06);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

/*======== back-to-top =========*/
#back-to-top {
    position: fixed;
    right: -150px;
    bottom: 40px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
    -moz-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
    box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2);
    color: #333333;
    font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

#back-to-top:hover {
    background-color: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
}

#back-to-top.active {
    right: 30px;
    opacity: 1;
    visibility: visible;
    bottom: 85px;
}

@media (min-width: 768px) {
    #back-to-top.active {
        bottom: 50px;
    }
}

/*====================================================
    card-view (global)
 ====================================================*/
.card-view {
    margin: 10px 0px;
    padding: 15px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    border: 1px solid #eeeeee !important;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.ck-editor__main ul {
    list-style: disc;
}

.ck.ck-toolbar {
    border-color: rgba(128, 137, 150, 0.2) !important;
}

.ck.ck-editor__editable_inline {
    padding-right: 25px !important;
    padding-left: 25px !important;
    border-color: rgba(128, 137, 150, 0.2) !important;
}

.ck.ck-editor__editable_inline:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.arrow-separator {
    width: 0;
    height: 0;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
    border-bottom: 25px solid #fff;
    z-index: 2;
}

/*==== icon-element ======*/
.icon-element {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--theme-primary);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    font-size: 25px;
    color: #fff;
}

.icon-element-disabled {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #dddddd;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    font-size: 25px;
    color: #dc3545 !important;
}

.icon-element-disabled:hover {
    background-color: #dc3545;
    color: #fff !important;
    border-color: #dc3545;
}

/*====================================================
    contact-form-action
 ====================================================*/
.label-text {
    line-height: 20px;
}
.label-text-otp {
    font-size: 15px;
    color: #333333;
    text-align: left;
}

.label-area-center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.label-area-center .label-login1 {
    font-size: 14px;
    color: #333333;
}

.label-area-center .label-login1 a {
    font-weight: bolder;
    position: relative;
    display: inline-block;
}

.label-area-center .label-login1 a::before {
    position: absolute;
    content: "";
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--theme-primary);
    color: var(--theme-primary);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.label-area-center .label-login1 a:hover::before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.contact-form-action .form-group {
    position: relative;
    padding: 0px;
}

.contact-form-action .form-group .form-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #5d646d;
    font-size: 18px;
}

.contact-form-action .form-group .search-btn,
.contact-form-action .form-group .submit-btn {
    position: absolute;
    top: 4px;
    right: 8px;
}
.form-content li {
    line-height: 1.5rem;
}

.contact-form-action .form-group .search-btn {
    background-color: transparent;
    border: none;
    padding: 3px 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #333333;
}

.contact-form-action .form-group .search-btn:hover {
    color: var(--theme-primary);
}

.contact-form-action .form-input {
    height: auto;
    line-height: inherit;
    padding: 10px 20px 10px 40px;
    font-size: 13px;
    color: #333333;
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
}

.contact-form-action .form-control {
    height: auto;
    line-height: inherit;
    padding: 10px 20px 10px 37px;
    font-size: 13px;
    color: #333333;
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
}

.contact-form-action .form-control:focus {
    border-color: var(--theme-primary);
}

.contact-form-action .message-control {
    height: 130px;
}

.cart-theme-btn {
    width: 100% !important;
    background-color: var(--theme-primary);
    color: #fff;
    font-weight: bolder;
    border-color: var(--theme-primary);
    border-radius: 0px;
    transition: all 0.3s;
    font-size: 15px;
    padding: 10px 0px;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}

.cart-theme-btn:hover {
    background-color: #fff;
    color: var(--theme-primary);
    border-color: var(--theme-primary);
}

@media (min-width: 767px) {
    .cart-theme-btn {
        width: 300px !important;
    }

    .contact-form-action .form-group {
        padding: 5px 5px 5px 0px;
    }
}

#resume_text {
    display: none;
}

#singleMap,
#map {
    width: 100%;
    height: 465px;
}

/*==== leaflet-bar ======*/
.leaflet-bar {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.leaflet-bar a {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-bottom: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 4px;
    font-size: 20px;
}

.leaflet-bar a:hover {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-bottom: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #ca262c;
    color: #fff;
}

/*================== form-box ===================*/
.form-box {
    width: 100%;
    border: 1px solid rgba(128, 137, 150, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.form-box .form-title-wrap .verifyacc-img {
    width: 100%;
    padding: 0px 130px;
    background-color: white;
    position: static;
    justify-content: center;
    align-items: center;
    display: flex;
}

.form-box .form-title-wrap .verifyacc-img img {
    width: 350px;
    height: 350px;
    object-fit: contain;
    object-position: center;
}

.form-title-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-title-wrap .account-titledesc {
    width: 100%;
    display: block;
}

.form-title-wrap .account-edit {
    display: block;
    color: var(--theme-primary);
}

.form-title-wrap .account-titledesc h4 {
    width: 100%;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .account-titledesc h5 {
    width: 100%;
    margin: 5px 0px;
    font-size: 20px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .account-titledesc h6 {
    width: 100%;
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .title-account {
    width: 100%;
    margin: 5px 0px;
    display: block;
}

.form-title-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.form-title-wrap .detail-purchashed {
    background-color: #fff8f8;
    padding: 5px 15px;
    margin: 0px 2px;
    border-radius: 3px;
}

.form-title-wrap .detail-purchashed h4 {
    width: 100%;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-purchashed h5 {
    width: 100%;
    margin: 5px 0px;
    font-size: 20px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-purchashed h6 {
    width: 100%;
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-purchashed p {
    font-size: small;
    display: block;
}

/* form-passengers */
.form-title-wrap .detail-passengers {
    margin: 10px 0px;
    padding: 15px 0px;
    background-color: #f0f0f0;
    border-radius: 10px;
    border: 1px solid rgba(212, 212, 212, 0.2);
}

.form-title-wrap .detail-passengers h4 {
    width: 100%;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-passengers h5 {
    width: 100%;
    margin: 5px 0px;
    font-size: 20px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-passengers h6 {
    width: 100%;
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .detail-passengers p {
    margin: 3px 0px;
    font-size: small;
    display: block;
}

.form-title-wrap .detail-passengers .bgpassengers {
    width: 100%;
    height: 100%;
    padding: 0px 15px;
    border-radius: 5px;
    color: white;
    font-size: medium;
    background-color: var(--theme-primary);
    align-items: center;
    display: flex;
}

.form-title-wrap .account-titlepassengers h5 {
    width: 100%;
    font-size: 20px;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .account-titlepassengers h6 {
    width: 100%;
    font-size: 18px;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
}

.btn-user-account {
    width: 100% !important;
    background-color: var(--theme-primary);
    color: #fff;
    font-weight: bolder;
    border-color: var(--theme-primary);
    border-radius: 0px;
    transition: all 0.3s;
    font-size: 15px;
    padding: 2px 0px;
    font-weight: 700;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border-color: var(--theme-primary) !important;
    border: 1px solid !important;
}

.btn-user-account:hover {
    background-color: #fff;
    color: var(--theme-primary);
    font-weight: 700;
}

@media (min-width: 900px) {
    .btn-user-account {
        width: 300px !important;
    }
}

/* end-form-passengers */

/* change password */
.form-title-wrap .account-titlechangepass h5 {
    width: 100%;
    font-size: 20px;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .account-titlechangepass h6 {
    width: 100%;
    font-size: 18px;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
}
/* end change password */

/* account-helpcenter */
.form-title-wrap .account-titlehelpcenter h5 {
    width: 100%;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}

.form-title-wrap .account-titlehelpcenter h6 {
    width: 100%;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}
/* end account helpcenter */

/* CARD-MYORDERS */

.header-myorders {
    padding: 13px 25px;
    margin-top: 13px;
    height: 70px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* background: linear-gradient(90deg, var(--theme-primary), #A0172F,#7A0D29); */
    background-image: url("/images/bg_AccountCardHeader.jpg");
    background-repeat: no-repeat;
    object-fit: cover;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}
.header-search-booking {
    color: var(--theme-primary);
    padding: 13px 25px;
    margin-top: 13px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}
.header-search-booking h2 {
    color: var(--theme-primary);
    font-size: 24px;
}

.img-banner-account {
    width: 26px;
}

.img-banner-flight {
    width: 36px;
    padding-bottom: 5px;
}

.img-banner-purchaselist {
    width: 29px;
    padding-bottom: 5px;
}

.img-banner-helpcenter {
    width: 29px;
}

.img-banner-promotion {
    width: 35px;
}

.img-banner-passengers {
    width: 35px;
    padding-top: 7px;
}

.header-myorders h2 {
    color: #fff;
    font-size: 21px;
    margin-left: 15px;
}

@media (max-width: 767px) {
    .header-myorders {
        background-image: url("/images/bg_AccountCardHeaderMobile.jpg");
        background-size: cover;
    }

    .img-banner-flight {
        width: 40px;
        padding-bottom: 0px;
    }

    .header-myorders h2 {
        margin-left: 8px;
        font-size: 16px;
        margin-left: 8px;
    }
}

@media (max-width: 767px) {
    .img-banner-purchaselist {
        width: 22px;
    }
}
/* FLIGHT */
.card-myorders {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px 15px 10px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.card-myorders .myorders-flights-orders {
    width: 100%;
    /* background-color: #F0F0F0; */
    text-align: center;
    border-radius: 10px 10px 0px 0px;
}

/* NEW STYLE */
/* Desktop */
/* Flight details myorders */
.details-flight-myorders-popup {
    background-color: rgb(240, 240, 240);
    padding: 10px 20px 10px 10px;
    border-radius: 5px;
}

.details-flight-myorders-popup img {
    width: 40px;
}

.details-flight-myorders-popup span {
    font-size: 14px;
}

.detials-flight {
    padding: 15px 0px !important;
    border-bottom: 0.5px dashed #d1d3d7;
}

.detials-flight h6 {
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 17px;
    color: #111827;
}

.detials-flight p {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
}

.detials-flight span {
    font-size: 14px;
    color: #1a1414;
}

@media only screen and (max-width: 1068px) {
    .details-flight-myorders-popup {
        padding: 10px;
    }

    .details-flight-myorders-popup img {
        width: 35px;
    }

    .details-flight-myorders-popup span {
        font-size: 12px;
    }

    .details-flight-myorders-popup b {
        font-size: 10px;
    }

    .details-flight-myorders-popup b {
        font-size: 10px;
    }

    .details-flight-myorders-popup
        #txtMyActiveETicketListBookingFlightDetails_DepartureAirportTerminal,
    #txtMyActiveETicketListBookingFlightDetails_AirlineNumber {
        font-size: 11px;
    }
}
/* purchaselist details myorders */
.details-purchaselist-myorders-popup {
    background-color: rgb(240, 240, 240);
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
}

.details-purchaselist-myorders-popup img {
    width: 40px;
}

.details-purchaselist-myorders-popup span {
    font-size: 16px;
    font-weight: 600;
}

.details-purchaselist-myorders-popup p {
    font-size: 12px;
    color: #4e5561;
}

.detials-purchaselist {
    padding-bottom: 15px !important;
    border-bottom: 0.5px dashed #d1d3d7;
    padding-top: 8px;
}

.detials-purchaselist h6 {
    font-weight: 600;
    font-size: 17px;
    color: #111827;
}

.detials-purchaselist p {
    font-weight: 600;
    font-size: 13px;
    color: #111827;
}

@media only screen and (max-width: 1068px) {
    .detials-purchaselist h6 {
        font-size: 18px;
    }

    .accordion-purchaselist {
        margin-bottom: 70px;
    }
}

.user-id-container {
    background-color: #f5f7fc;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.user-id-container:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.user-id-icon {
    font-size: 1.2rem;
    color: #6c757d;
}

.user-id-text {
    font-size: 1.1rem;
    color: #343a40;
}

.img-verified {
    width: 20px;
    margin-left: 2px;
    cursor: pointer;
}

/* Flight */

.account-flight {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.badge-status-purchaselist {
    font-size: 14px;
    padding: 3px 22px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal !important;
}

.account-flight-info {
    width: 150px;
}

.account-flight-info img {
    width: 50px;
    margin: 0px 15px 0px 12px;
}

.account-flight-info span {
    font-size: 14px;
    font-weight: bold;
    text-wrap: wrap;
    max-width: 70px;
    width: 100%;
}

.account-flight-info .code-flight {
    font-size: 11px;
    font-weight: 400;
    margin-top: 3px;
    color: #5d646d;
}

.account-flight-info-rute {
    font-size: 12px;
    width: 100%;
    max-width: 475px;
}

.account-flight-info-rute-box {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    width: 100%;
    text-wrap: wrap;
}

.account-flight-info-depart-detail,
.account-flight-info-return-detail {
    width: 115px;
}

.account-flight-info-rute-schedule {
    width: 100%;
    font-weight: bold;
    align-items: center;
    display: flex;
}

.account-flight-info-rute-schedule h5 {
    width: fit-content;
    font-size: 16px;
    text-align: left;
    display: block;
    text-wrap: wrap;
}

.account-flight-info-rute p {
    font-size: 11px;
    color: #5d646d;
    font-weight: 400;
}

.account-flight-info-rute span {
    font-size: 13px;
    font-weight: 600;
}

.account-flight-info-rute img {
    width: 100px;
}

.account-flight-info-booking-code {
    padding-bottom: 10px;
}

.account-flight-info-booking-code p {
    font-size: 12px;
    color: #5d646d;
}

.account-flight-info-booking-code span {
    font-size: 12px;
    font-weight: bold;
}

.BookingCode-desktop {
    font-size: 16px;
    font-weight: bold;
    color: var(--theme-primary);
    padding: 4px 7px;
    border: 1px dashed var(--theme-primary);
    margin-right: 5px;
}

.check-in-desktop {
    font-size: 14px !important;
    padding: 6px;
    background-color: green;
    color: white !important;
    border: 1px solid green;
    border-radius: 3px;
}

.check-in-desktop :hover {
    background-color: white;
    border: 1px solid green;
    color: green !important;
}

.account-flight-info-price {
    font-size: 18px;
    font-weight: bold;
}

.badge-myorders {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 0 50px 50px 0;
    margin-left: -10px;
}

.badge-sejam {
    background-color: #efab51;
}

.account-flight a {
    font-size: 14px;
    font-weight: 500;
}

.account-flight-no-data-content {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    width: 100%;
    flex-direction: column;
}

.account-flight-no-data-content img {
    width: 200px;
    margin-bottom: 20px;
}
/* tablet */
@media only screen and (max-width: 1068px) {
    .card-myorders {
        padding: 10px;
    }

    .account-flight-info-rute {
        max-width: 400px;
    }

    .header-myorders {
        padding: 11px 18px;
    }

    .account-flight-mobile h6 {
        font-size: 16px;
        font-weight: 600;
        color: #1a2b48;
        text-wrap: wrap;
    }

    .account-flight-mobile span {
        font-size: 14px;
        margin-left: 5px;
    }

    .account-flight-mobile img {
        width: 20px;
    }

    .account-flight-mobile-info {
        font-size: 10px;
    }

    .account-flight-mobile-info span {
        font-size: 12px;
        font-weight: 600;
    }

    .account-flight-mobile-info .maskapai {
        font-size: 12px;
        font-weight: 600;
    }

    .account-flight-mobile-info-flight-schedule {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 5px;
        margin-top: 5px;
    }

    .account-flight-mobile-info-flight-schedule p {
        font-size: 13px;
        color: #95a0a8;
    }

    .account-flight-mobile-info-flight-schedule span {
        font-size: 13px;
        margin: 0px;
        color: #1a2b48;
        font-weight: 500;
        text-wrap: wrap;
    }

    .account-flight-mobile-info-flight-schedule .BookingCode {
        font-size: 17px;
        font-weight: bold;
        color: var(--theme-primary);
        padding: 3px 7px;
        border: 1px dashed var(--theme-primary);
        margin-right: 10px;
    }

    .check-in {
        background-color: #149146;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
    }

    .badge-myorders {
        margin-left: -21px;
    }
}
/* mobile */
@media only screen and (max-width: 768px) {
    /* mobile */
    .card-myorders {
        padding: 10px;
    }

    .account-flight-mobile h6 {
        font-size: 16px;
        font-weight: 600;
        color: #1a2b48;
        text-wrap: wrap;
    }

    mobile span {
        font-size: 14px;
        margin-left: 5px;
    }

    .account-flight-mobile .countdown-timer {
        font-size: 8px;
        margin-left: -10px;
    }

    .account-flight-mobile img {
        width: 20px;
    }

    .account-flight-mobile-info {
        font-size: 10px;
    }

    .account-flight-mobile-info span {
        font-size: 13px;
        font-weight: 600;
    }

    .account-flight-mobile-info .maskapai {
        font-size: 12px;
        font-weight: 600;
    }

    .account-flight-mobile-info-flight-schedule {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 5px;
        margin-top: 5px;
    }

    .account-flight-mobile-info-flight-schedule p {
        font-size: 12px;
        color: #95a0a8;
    }

    .account-flight-mobile-info-flight-schedule span {
        font-size: 13px;
        margin: 0px;
        color: #1a2b48;
        font-weight: 500;
        text-wrap: wrap;
    }

    .account-flight-mobile-info-flight-schedule .BookingCode {
        font-size: 17px;
        font-weight: bold;
        color: var(--theme-primary);
        padding: 3px 7px;
        border: 1px dashed var(--theme-primary);
        margin-right: 10px;
    }

    .check-in {
        background-color: #149146;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
    }
}

@media only screen and (max-width: 390px) {
    .account-flight-mobile .countdown-timer {
        font-size: 6px;
        margin-left: -10px;
    }
}

/* HOTELS */
.card-myorders .myorders-hotels-orders {
    width: 100%;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
}


/* NEW STYLE TOUR */

.account-tour {
    width: 100%;
    padding: 0px 10px;
}

.account-tour img {
    width: 200px;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
    margin: 10px 0px;
}

.account-tour-title h1 {
    font-size: 20px;
    font-weight: bold;
    color: var(--theme-primary);
    margin-bottom: 0px;
}

.account-tour-title p {
    font-size: 13px;
    font-weight: 500;
}

.account-tour-detail {
    margin-top: 10px;
}

.account-tour-detail h5 {
    margin: 0px;
    font-size: 13px;
}

.account-tour-detail p {
    margin: 0px;
    font-size: 10px;
}

.account-tour-detail i {
    font-size: 17px;
    padding-right: 10px;
    color: var(--theme-primary);
}

.account-tour-person {
    margin-left: 3rem;
}

.account-tour-price {
    margin-left: auto;
}

.account-tour-price span {
    color: var(--theme-primary);
    font-weight: bold;
    font-size: 20px;
}

.account-tour-price h6 {
    font-size: 10px;
    text-align: center;
    margin-right: 5px;
    font-weight: normal;
}

.account-tour-price p {
    font-size: 10px;
    font-weight: bold;
}

@media only screen and (max-width: 1068px) {
    .account-tour {
        width: 100%;
        padding: 0px 10px;
    }

    .account-tour img {
        width: 200px;
        height: 120px;
        object-fit: cover;
        border-radius: 5px;
        margin: 10px 0px;
    }

    .account-tour-title h1 {
        font-size: 17px;
        font-weight: bold;
        color: var(--theme-primary);
        margin-bottom: 0px;
    }

    .account-tour-title p {
        font-size: 9px;
        font-weight: 500;
    }

    .account-tour-detail {
        margin-top: 10px;
    }

    .account-tour-detail h5 {
        margin: 0px;
        font-size: 10px;
    }

    .account-tour-detail p {
        margin: 0px;
        font-size: 7px;
    }

    .account-tour-detail i {
        font-size: 15px;
        padding-right: 10px;
        color: var(--theme-primary);
    }

    .account-tour-person {
        margin-left: 3rem;
    }

    .account-tour-price {
        margin-left: auto;
    }

    .account-tour-price span {
        color: var(--theme-primary);
        font-weight: bold;
        font-size: 16px;
    }

    .account-tour-price h6 {
        font-size: 8px;
        text-align: center;
        margin-right: 5px;
        font-weight: normal;
    }

    .account-tour-price p {
        font-size: 8px;
        font-weight: bold;
    }
}

@media only screen and (max-width: 768px) {
    .account-tour {
        width: 100%;
        padding: 0px 10px;
    }

    .account-tour img {
        width: 130px;
        height: 90px;
        object-fit: cover;
        border-radius: 5px;
        margin: 10px 0px;
    }

    .account-tour-title h1 {
        font-size: 11px;
        font-weight: bold;
        color: var(--theme-primary);
        margin-bottom: 0px;
    }

    .account-tour-title p {
        font-size: 7px;
        font-weight: 500;
    }

    .account-tour-detail {
        margin-top: 10px;
    }

    .account-tour-detail h5 {
        margin: 0px;
        font-size: 5px;
    }

    .account-tour-detail p {
        margin: 0px;
        font-size: 4px;
    }

    .account-tour-detail i {
        font-size: 8px;
        padding-right: 4px;
        color: var(--theme-primary);
    }

    .account-tour-person {
        margin-left: 13px;
    }

    .account-tour-price {
        margin-left: auto;
    }

    .account-tour-price span {
        color: var(--theme-primary);
        font-weight: bold;
        font-size: 10px;
    }

    .account-tour-price h6 {
        font-size: 6px;
        text-align: center;
        margin-right: 3px;
        font-weight: normal;
    }

    .account-tour-price p {
        font-size: 6px;
        font-weight: bold;
    }
}

/* END NEW STYLE TOUR */

/* NEW STYLE CAR RENTAL */

.text-content-header-carrental {
    padding: 50px 50px 0px 50px;
}

.text-content-header-carrental h1 {
    color: black;
    font-size: 100px;
    font-weight: bold;
    font-family: Serif, "Roboto", sans-serif !important;
}

.text-content-header-carrental span {
    font-size: 16px;
}

.account-carrental {
    width: 100%;
    padding: 0px 20px;
}

.account-carrental img {
    width: 200px;
    height: 135px;
    object-fit: cover;
    border-radius: 5px;
    margin: 10px 0px;
}

.account-carrental-title h1 {
    font-size: 20px;
    font-weight: bold;
    color: var(--theme-primary);
    margin-bottom: 0px;
}

.account-carrental-title p {
    font-size: 16px;
    font-weight: 500;
}

.account-carrental-detail {
    margin-top: 10px;
}

.account-carrental-detail h5 {
    margin: 0px;
    font-size: 13px;
}

.account-carrental-detail p {
    margin: 0px;
    font-size: 10px;
}

.account-carrental-detail i {
    font-size: 17px;
    padding-right: 10px;
    color: var(--theme-primary);
}

.account-carrental-person {
    margin-left: 3rem;
}

.account-carrental-price {
    margin-left: auto;
}

.account-carrental-price span {
    color: var(--theme-primary);
    font-weight: bold;
    font-size: 20px;
}

.account-carrental-price h6 {
    font-size: 10px;
    text-align: center;
    margin-right: 5px;
    font-weight: normal;
}

.account-carrental-price p {
    font-size: 10px;
    font-weight: bold;
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    gap: 8px;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dots .dot.active {
    background-color: var(--theme-primary);
}

@media only screen and (max-width: 1068px) {
    .account-carrental {
        width: 100%;
        padding: 0px 20px;
    }

    .account-carrental img {
        width: 200px;
        height: 120px;
        object-fit: cover;
        border-radius: 5px;
        margin: 10px 0px;
    }

    .account-carrental-title h1 {
        font-size: 17px;
        font-weight: bold;
        color: var(--theme-primary);
        margin-bottom: 0px;
    }

    .account-carrental-title p {
        font-size: 9px;
        font-weight: 500;
    }

    .account-carrental-detail {
        margin-top: 10px;
    }

    .account-carrental-detail h5 {
        margin: 0px;
        font-size: 10px;
    }

    .account-carrental-detail p {
        margin: 0px;
        font-size: 7px;
    }

    .account-carrental-detail i {
        font-size: 15px;
        padding-right: 10px;
        color: var(--theme-primary);
    }

    .account-carrental-person {
        margin-left: 3rem;
    }

    .account-carrental-price {
        margin-left: auto;
    }

    .account-carrental-price span {
        color: var(--theme-primary);
        font-weight: bold;
        font-size: 16px;
    }

    .account-carrental-price h6 {
        font-size: 8px;
        text-align: center;
        margin-right: 5px;
        font-weight: normal;
    }

    .account-carrental-price p {
        font-size: 8px;
        font-weight: bold;
    }
}

@media only screen and (max-width: 768px) {
    .account-carrental {
        width: 100%;
        padding: 0px 5px;
    }

    .account-carrental img {
        width: 100px;
        height: 85px;
        object-fit: cover;
        border-radius: 5px;
        margin: 10px 0px;
    }

    .account-carrental-title h1 {
        font-size: 11px;
        font-weight: bold;
        color: var(--theme-primary);
        margin-bottom: 0px;
    }

    .account-carrental-title p {
        font-size: 8px;
        font-weight: 500;
    }

    .account-carrental-detail {
        margin-top: 10px;
    }

    .account-carrental-detail h5 {
        margin: 0px;
        font-size: 8px;
    }

    .account-carrental-detail p {
        margin: 0px;
        font-size: 7px;
    }

    .account-carrental-detail i {
        font-size: 12px;
        padding-right: 6px;
        color: var(--theme-primary);
    }

    .account-carrental-person {
        margin-left: 11px;
    }

    .account-carrental-price {
        display: flex;
        justify-content: end;
        width: 100px;
    }

    .account-carrental-price span {
        color: var(--theme-primary);
        font-weight: bold;
        font-size: 9px;
    }

    .account-carrental-price h6 {
        font-size: 8px;
        text-align: center;
        margin-right: 5px;
        font-weight: normal;
    }

    .account-carrental-price p {
        font-size: 8px;
        font-weight: bold;
    }
}

/* END NEW STYLE CAR RENTAL */

/* PURCHASE LIST */
/* DESKTOP */
.account-purchaselist {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 15px 0px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.status-purchaselist-success {
    width: 100%;
    background-color: #f0fdf4;
    height: 30px;
    color: #33a558;
    margin-top: -15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 20px 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-purchaselist-waiting {
    width: 100%;
    background-color: #fff8e1;
    height: 30px;
    color: #f9a825;
    margin-top: -15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-purchaselist-error {
    width: 100%;
    background-color: #f9d6d6;
    height: 30px;
    color: #e63946;
    margin-top: -15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 20px 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-purchaselist-success span {
    font-size: 11px;
}

.status-purchaselist-waiting span {
    font-size: 11px;
}

.status-purchaselist-error span {
    font-size: 11px;
}

.account-purchaselist .image-purchaselist {
    background-color: #fef1f1;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.badge-purchaselist {
    font-size: 10px;
    padding: 4px 30px;
    border-radius: 0 50px 50px 0;
    margin-left: -21px;
}

.account-purchaselist img {
    width: 26px;
}

.image-purchaselist i {
    font-size: 20px;
    color: #ca262c;
}

.type-purchaselist {
    font-size: 13px;
    color: #5d646d;
}

.title-purchaselist {
    font-size: 15px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;
}

.title-purchaselist i {
    font-size: 12px;
    font-weight: bold;
}

.order-id-purchaselist {
    font-size: 13px;
    color: #5d646d;
    text-align: right;
}

.invoice-purchaselist {
    font-size: 13px;
    font-weight: 500;
}

.border-purchaselist {
    height: 1px;
    background-color: #d1d3d7;
}

.title-total-purchaselist {
    font-size: 13px;
    color: #5d646d;
}

.total-purchaselist {
    font-size: 15px;
    font-weight: bold;
}

.account-purchase-content-badge {
    padding: 2px 10px;
    border-radius: 50px;
    display: flex;
    font-weight: 500;
    font-size: 11px;
}

@media only screen and (max-width: 767px) {
    .account-purchaselist {
        padding: 15px;
    }
    .title-purchaselist {
        line-height: 21px;
    }
    .invoice-purchaselist {
        line-height: 22px;
    }
}

.status-flight-success {
    width: 100%;
    background-color: #f0fdf4;
    height: 30px;
    color: #33a558;
    margin-top: -10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-flight-waiting {
    width: 100%;
    background-color: #fff8e1;
    height: 30px;
    color: #f9a825;
    margin-top: -10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-flight-error {
    width: 100%;
    background-color: #f9d6d6;
    height: 30px;
    color: #e63946;
    margin-top: -10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-radius: 10px 10px 0 0;
}

.status-flight-success span {
    font-size: 11px;
}

.status-flight-waiting span {
    font-size: 11px;
}

.status-flight-error span {
    font-size: 11px;
}

.main-menu-content-timer-status-payment {
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    font-weight: bold;
}

.main-menu-content-timer-status-payment .time-payment {
    margin: 0px 10px;
    color: var(--theme-primary);
}

.main-menu-content-timer-status-payment .tenor-gif-embed {
    height: 25px;
    margin: 0px 10px;
    color: var(--theme-primary);
}

/* END ACCOUNT PURCHASE */

/* QUICK PASSENGER */
.account-quickpassenger {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 15px 0px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.account-quickpassenger i {
    font-size: 18px;
    margin-right: 15px;
    color: #0d233e;
}

.account-quickpassenger .fullname {
    font-size: 16px;
    color: #0d233e;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;
}

#tmpltAddPassengerAndIdentity {
    position: relative;
}

.button-save-passenger {
    position: absolute;
    bottom: 0px;
    padding: 20px 0px;
    width: 100%;
    right: 25px;
    background-color: white;
}

/* END QUICK PASSENGER */

/* PROMOTION */

.promotion-title {
    margin: 10px 0px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding: 5px 30px 5px 30px;
    background-color: var(--theme-primary);
    overflow: hidden;
}

.promotion-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: -101px;
    width: 100px;
    height: 100%;
    background-color: white;
    transform: skewX(-28deg);
    transform-origin: top right;
}

.promo-block-scroll {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    max-height: 482px;
    overflow-y: auto;
    padding: 10px;
    background: #f5f7fc;
    border: 1px solid #ffffff;
    border-radius: 10px;
    box-shadow: inset 0px 4px 6px rgb(255 255 255 / 10%);
}

.promo-block-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f5f7fc;
}

.promo-block-scroll::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 10px;
}

.promo-block-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa;
}

.promo-block-scroll::-webkit-scrollbar-track {
    background-color: #f5f7fc;
    border-radius: 10px;
}

.promo-card {
    border-radius: 10px;
    overflow: hidden;
    margin-left: 2px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.promo-card-image {
    border-bottom: 1px dashed #ccc;
    overflow: hidden;
    position: relative;
}

.promo-card-image i {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 15px;
    z-index: 9999;
}

.promo-card-image img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.promo-card-text {
    color: #0d233e;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
}

.promo-card-code-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0px 13px;
}

.copy-button-promo {
    font-size: 14px;
    font-family: Roboto;
    color: #fff;
    line-height: 33px;
    text-wrap: nowrap;
    padding: 0 15px;
    background-color: var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid var(--theme-primary);
    font-weight: 500;
    margin: 0px;
}

.copy-button-promo:hover {
    background-color: #fff;
    color: var(--theme-primary);
    font-weight: 500;
}

.promo-card-code {
    color: var(--theme-primary);
    padding: 2px 15px;
    text-align: center;
    width: 100%;
    margin-right: 10px;
    font-size: 15px;
    font-weight: bold;
    line-height: 27px;
    border: 1px dashed var(--theme-primary);
    display: inline-block;
}

.promo-card-body {
    padding: 15px 5px;
    text-align: center;
    position: relative;
    background-color: #fff;
    border-radius: 0 0 10px 10px;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .promo-block-scroll {
        grid-template-columns: 1fr;
    }

    .promo-card-text {
        font-size: 13px;
    }
}

/* END PROMOTION */
/* MOBILE */
.account-purchase-type-mobile {
    padding-bottom: 5px;
    margin-top: 20px;
}

.account-purchase-type-mobile i {
    color: var(--theme-primary);
    padding-left: 12px;
    font-size: 25px;
}

.account-purchase-type-mobile span {
    font-size: 20px;
    margin-left: 20px;
}

.account-purchase-info-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.account-purchase-info-mobile h6 {
    text-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
}

.account-purchase-info-mobile b {
    font-size: 13px;
}

.account-purchase-info-mobile p {
    color: #95a0a8;
    font-size: 12px;
}

.account-flight-info-price span {
    font-weight: bold;
    font-size: 16px;
}

.pay-now {
    color: white !important;
    font-weight: bold;
    background-color: #149146;
    font-size: 12px;
    padding: 7px 18px;
    border-radius: 5px;
    border: 1px solid #149146;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.pay-now:hover {
    color: #149146 !important;
    background-color: white;
    border: 1px solid #149146;
}

@media only screen and (max-width: 761px) {
    .account-purchase-type-mobile {
        padding-bottom: 5px;
        margin-top: 0px;
    }

    .account-purchase-type-mobile i {
        color: var(--theme-primary);
        padding-left: 5px;
        font-size: 15px;
    }

    .account-purchase-type-mobile span {
        font-size: 14px;
        margin-left: 0px;
    }
}

/* SKELETON LIST TOUR HOME PAGE */
:root {
    --loading-grey: #e5e7eb;
}

.grid-card-loading-tour {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.card-loading-tour-list-home-page {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.image img {
    display: block;
    width: 100%;
    height: inherit;
    object-fit: cover;
}

.content {
    padding: 1rem 0.8rem;
}

h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.description-tour {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description-tour {
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 0.7s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 2rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

.loading .description-tour {
    min-height: 16rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .grid-card-loading-tour {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width: 479px) and (max-width: 1200px) {
    .grid-card-loading-tour {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* END SKELETON LIST TOUR HOME PAGE */

/* SKELETON LIST INSTAGRAM FEED */
:root {
    --loading-grey: #e5e7eb;
}

.grid-card-loading-instagram-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.card-loading-instagram-feed {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.image img {
    display: block;
    width: 100%;
    height: inherit;
    object-fit: cover;
}

.content {
    padding: 1rem 0.8rem;
}

h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.description-instagram-feed {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description-instagram-feed {
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 0.7s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 2rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

.loading .description-instagram-feed {
    min-height: 16rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

@media only screen and (max-width: 767px) {
    .grid-card-loading-instagram-feed {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* END SKELETON LIST TOUR HOME PAGE */

/* SKELETON PURCHASE LIST */
:root {
    --loading-grey: #e5e7eb;
}

.card-loading {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.image img {
    display: block;
    width: 100%;
    height: inherit;
    object-fit: cover;
}

.content {
    padding: 1rem 0.8rem;
}

h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.description {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description {
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 0.7s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 1.6rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

.loading .description {
    min-height: 4rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}
/* END SKELETON PURCHASE LIST */

/* SKELETON FILTER FLIGHT */
.card-loading-filter-flight {
    width: 100%;
    overflow: hidden;
}

.content-filter-flight {
    padding: 1px;
}

.card-loading-filter-flight h4 {
    margin: 1rem 0px;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.card-loading-filter-flight .description {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description {
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 0.7s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 1.6rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

/* END SKELETON FILTER FLIGHT */
.label-text-quick-passangers {
    color: #6c757d !important;
}
/* SKELETON SEARCH FLIGHT */
:root {
    --loading-grey: #e5e7eb;
}

.card-loading-search-flight {
    margin: 15px 0px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.image img {
    display: block;
    width: 100%;
    height: inherit;
    object-fit: cover;
}

.content {
    padding: 1rem 0.8rem;
}

h4 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.description {
    font-size: 1rem;
    line-height: 1.4rem;
}

.loading .image,
.loading h4,
.loading .description {
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 0.7s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 2rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}

.loading .description {
    min-height: 6rem;
    border-radius: 4px;
    animation-delay: 0.06s;
}
/* mobile */
@media screen and (min-width: 320px) and (max-width: 767px) {
    .loading h4 {
        min-height: 3rem;
    }

    .loading .description {
        min-height: 8rem;
    }
}
/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .loading h4 {
        min-height: 4rem;
    }

    .loading .description {
        min-height: 6rem;
    }
}
/* END SKELETON SEARCH FLIGHT */

/* SKELETON SEARCH HOTEL */

:root {
    --loading-grey: #f0f0f0;
}

.card-loading-search-hotel {
    display: flex;
    margin: 15px 0px;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.skeleton-search-hotel-image {
    flex: 0 0 200px;
    height: 180px;
    border-radius: 6px 0 0 6px;
    background-color: var(--loading-grey);
    animation: loading 0.8s infinite ease-in-out;
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
}

.skeleton-search-hotel-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skeleton-search-hotel-title,
.skeleton-search-hotel-subtitle,
.skeleton-search-hotel-price,
.skeleton-search-hotel-button {
    background-color: var(--loading-grey);
    border-radius: 6px;
    animation: loading 0.8s infinite ease-in-out;
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
}

.skeleton-search-hotel-title {
    width: 70%;
    height: 20px;
    margin-bottom: 0.5rem;
}

.skeleton-search-hotel-subtitle {
    width: 50%;
    height: 16px;
    margin-bottom: 0.7rem;
}

.skeleton-search-hotel-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 1rem;
}

.skeleton-search-hotel-icons .icon {
    width: 45px;
    height: 20px;
    border-radius: 4px;
    background-color: var(--loading-grey);
    animation: loading 0.8s infinite ease-in-out;
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
}

.skeleton-search-hotel-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-search-hotel-price {
    width: 80px;
    height: 20px;
}

.skeleton-search-hotel-button {
    width: 120px;
    height: 36px;
    border-radius: 8px;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .card-loading-search-hotel {
        flex-direction: column;
    }
    .skeleton-search-hotel-image {
        width: 100%;
        height: 180px;
    }
    .skeleton-search-hotel-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* END SKELETON SEARCH HOTEL */

/* SKELETON PROMOTION ACCOUNT */
:root {
    --loading-grey: #e5e7eb;
}

.promotion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Original Card Styles */
.account-promotion {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    position: relative;
    overflow: hidden;
}

.account-promotion img {
    width: 100%;
    object-fit: cover;
    height: 180px;
    border-radius: 8px 8px 0 0;
}

/* Skeleton Loading Styles */
.account-promotion-loading {
    width: 100%;
    margin-top: 15px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.account-promotion-loading:nth-child(n + 3) {
    margin-top: 0px;
}

.promotion-loading-image {
    width: 100%;
    height: 100px;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

.promotion-loading-content {
    padding: 15px;
}

.promotion-loading-title {
    min-height: 1.6rem;
    border-radius: 4px;
    margin-bottom: 8px;
    animation-delay: 0.06s;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

.promotion-loading-description {
    min-height: 2rem;
    border-radius: 4px;
    animation-delay: 0.06s;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

@media (max-width: 768px) {
    .promotion-grid {
        grid-template-columns: 1fr;
    }
}
/* END SKELETON PROMOTION ACCOUNT */

/* SKELETON PROMOTION  */
:root {
    --loading-grey: #e5e7eb;
}

.promotion-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Original Card Styles */
.promotion-page {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    position: relative;
    overflow: hidden;
}

.promotion-page img {
    width: 100%;
    object-fit: cover;
    height: 180px;
    border-radius: 8px 8px 0 0;
}

/* Skeleton Loading Styles */
.promotion-page-loading {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.promotion-page-loading:nth-child(n + 3) {
    margin-top: 0px;
}

.promotion-page-loading-image {
    width: 100%;
    height: 140px;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

.promotion-page-loading-content {
    padding: 15px;
}

.promotion-page-loading-title {
    min-height: 1.6rem;
    border-radius: 4px;
    margin-bottom: 8px;
    animation-delay: 0.06s;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

.promotion-page-loading-description {
    min-height: 2rem;
    border-radius: 4px;
    animation-delay: 0.06s;
    background-color: var(--loading-grey);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 60%
        )
        var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

@media (max-width: 768px) {
    .promotion-page-grid {
        grid-template-columns: 1fr;
    }
}
/* END SKELETON PROMOTION */

/* NO DATA PURCHASE  */
.account-purchase-no-data-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.account-purchase-no-data-content img {
    width: 260px;
    margin-bottom: 20px;
}

/* END PURCHASE LIST */
/* NO DATA SEARCH FLIGHT */
.account-search-flight-no-data-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    width: 100%;
    flex-direction: column;
}

.account-search-flight-no-data-content img {
    width: 230px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
    .account-search-flight-no-data-content img {
        width: 150px;
    }

    .account-purchase-no-data-content img {
        width: 150px;
    }

    .account-hotel-no-data-content img {
        width: 150px;
    }
}
/* END NO DATA SEARCH FLIGHT */

/*====================================================
Form-Wizard
====================================================*/

.wizard .row .wizard-area .wizard-icon-wrap {
    display: table;
    height: 35px;
    width: 35px;
    background: #e0e3e4;
    border-radius: 50%;
    float: left;
    text-align: center;
    position: relative;
}

.wizard .row .wizard-area .wizard-icon-wrap:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-primary);
    border-radius: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.wizard .row .wizard-area .wizard-icon-wrap i {
    display: table-cell;
    vertical-align: middle;
    color: #6f7a7f;
    font-size: 21px;
    position: relative;
    z-index: 2;
}

.wizard .wizard-head-text-wrap {
    display: inline-block;
    margin-left: 10px;
    padding-top: 7px;
}

.wizard .wizard-head-text-wrap > span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #324148;
    text-transform: uppercase;
}

.wizard .wizard-head-text-wrap .step-count {
    color: #adb3b6;
    font-size: 13px;
}

.wizard > .content {
    background: #fff;
    border-radius: 0;
    min-height: 100px;
    margin: 0;
    border: none;
    padding-bottom: 10px;
}

.wizard > .content > .body {
    width: 100%;
    height: auto;
    padding: 30px;
    position: static;
}

.wizard > .content > .body input {
    border-width: 2px;
    border-color: #eaecec;
}

.wizard > .content > .body ul > li {
    display: inherit;
}

.wizard > .actions {
    background: #fff;
    padding: 20px 30px;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    background: var(--theme-primary);
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--theme-primary);
    text-transform: capitalize;
    outline: none;
    border-width: 2px;
    border-radius: 0.25rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
    background: #cecece;
    color: #fff;
    border: 1px solid #cecece;
    opacity: 0.65;
}

.wizard > .actions > ul > li {
    margin: 0 0.3em;
}

.wizard > .steps {
    margin-top: 30px;
    margin-bottom: 5px;
}

.wizard > .steps > ul > li {
    width: auto;
    margin-right: 30px;
    margin-bottom: 20px;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
    background: transparent;
    color: inherit;
}

.wizard > .steps .current a .wizard-icon-wrap,
.wizard > .steps .current a:hover .wizard-icon-wrap,
.wizard > .steps .current a:active .wizard-icon-wrap {
    background: transparent;
}

.wizard > .steps .current a .wizard-icon-wrap:before,
.wizard > .steps .current a:hover .wizard-icon-wrap:before,
.wizard > .steps .current a:active .wizard-icon-wrap:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.wizard > .steps .current a .wizard-icon-wrap i,
.wizard > .steps .current a:hover .wizard-icon-wrap i,
.wizard > .steps .current a:active .wizard-icon-wrap i {
    color: #fff;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
    background: transparent;
    color: inherit;
    overflow: hidden;
}

.wizard > .steps .done a .wizard-icon-wrap,
.wizard > .steps .done a:hover .wizard-icon-wrap,
.wizard > .steps .done a:active .wizard-icon-wrap {
    background: #e78386;
}

.wizard > .steps .done a .wizard-icon-wrap:before,
.wizard > .steps .done a:hover .wizard-icon-wrap:before,
.wizard > .steps .done a:active .wizard-icon-wrap:before {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.wizard > .steps .done a .wizard-icon-wrap i,
.wizard > .steps .done a:hover .wizard-icon-wrap i,
.wizard > .steps .done a:active .wizard-icon-wrap i {
    color: #fff;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {
    background: transparent;
    color: inherit;
}

/*====================================================
Form Wizard Two Start
====================================================*/
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}

.stepwizard .stepwizard-row {
    display: table-row;
}

.stepwizard .stepwizard-row:before {
    top: 16px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}

.stepwizard .stepwizard-row .stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.stepwizard .stepwizard-row .stepwizard-step p {
    margin-top: 10px;
    color: white;
}

.stepwizard .stepwizard-row .stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

/*====================================================
    Form Wizard Three Start
 ====================================================*/
.f1 fieldset {
    display: none;
}

.f1 .input-error {
    border-color: #dc3545;
}

.f1 .f1-steps {
    overflow: hidden;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.f1 .f1-steps .f1-progress {
    position: absolute;
    top: 24px;
    width: 100%;
    height: 1px;
    background: #ffffff;
}

.f1 .f1-steps .f1-progress .f1-progress-line {
    height: 1px;
    background: var(--theme-primary);
    width: 16%;
}

.f1 .f1-steps .f1-step {
    position: relative;
    float: left;
    width: 33.333333%;
    text-align: center;
}

.f1 .f1-steps .f1-step.activated .f1-step-icon {
    background: #fff;
    border: 1px solid #820e12;
    color: #820e12;
    line-height: 38px;
}

.f1 .f1-steps .f1-step.activated p {
    color: #820e12;
}

.f1 .f1-steps .f1-step.active .f1-step-icon {
    width: 48px;
    height: 48px;
    background: #820e12;
    font-size: 22px;
    line-height: 20px;
    color: #ffffff;
}

.f1 .f1-steps .f1-step.active p {
    color: #ffffff;
}

.f1 .f1-steps .f1-step p {
    color: #ffffff;
}

.f1 .f1-steps .f1-step .f1-step-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #ffffff;
    font-size: 16px;
    color: #820e12;
    line-height: 20px;
    border-radius: 50%;
}

.f1 .f1-buttons {
    text-align: right;
}

.f1-buttons {
    text-align: right;
}

/*Form Wizard Three ends*/

/*====================================================
    Wizard Icons
 ====================================================*/

.hk-pg-wrapper {
    width: 100%;
}

.hk-pg-wrapper .row h3 {
    margin: 5px 2px;
}

.hk-pg-wrapper .row .wizard-area {
    margin: 5px 5px;
}

.hk-pg-wrapper .row .wizard-area .wizard-icon-wrap {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: large;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hk-pg-wrapper,
.tabcontrol {
    display: block;
    width: 100%;
}

.hk-pg-wrapper > .steps {
    margin-top: 30px;
    margin-bottom: 5px;
}

.hk-pg-wrapper > .steps .current a,
.hk-pg-wrapper > .steps .current a:hover,
.hk-pg-wrapper > .steps .current a:active {
    background: transparent;
    color: inherit;
}

.hk-pg-wrapper .wizard-head-text-wrap {
    display: inline-block;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.hk-pg-wrapper .wizard-head-text-wrap > span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #324148;
    text-transform: uppercase;
}

.hk-pg-wrapper .wizard-head-text-wrap .step-count {
    color: #adb3b6;
    font-size: 13px;
}

.hk-pg-wrapper > .steps {
    position: relative;
    display: block;
    width: 100%;
}

.hk-pg-wrapper > .steps > ul > li {
    width: 25%;
}

.hk-pg-wrapper ul > li,
.hk-pg-wrapper .tabcontrol ul > li {
    display: block;
    padding: 0;
}

.hk-pg-wrapper .row .wizard-area .wizard-icon-wrap {
    display: table;
    height: 35px;
    width: 35px;
    background: #e0e3e4;
    border-radius: 50%;
    float: left;
    text-align: center;
    position: relative;
}

.hk-pg-wrapper .row .wizard-area .wizard-icon-wrap-active {
    display: table;
    height: 40px;
    width: 40px;
    color: white;
    background: var(--theme-primary);
    border-radius: 50%;
    float: left;
    text-align: center;
    position: relative;
}

.hk-pg-wrapper .row .wizard-area .wizard-icon-wrap i {
    display: inline-block;
    font-size: large;
    margin: 12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hk-pg-wrapper .row .wizard-area .wizard-icon-wrap-active i {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: large;
    margin: 12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hk-pg-wrapper > .steps .current a .wizard-icon-wrap:before,
.hk-pg-wrapper > .steps .current a:hover .wizard-icon-wrap:before,
.hk-pg-wrapper > .steps .current a:active .wizard-icon-wrap:before {
    transform: scale(1);
}

/*====================================================
    breadcrumb-area
 ====================================================*/
.breadcrumb-area {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    background-size: cover;
    background-position: center;
}

.breadcrumb-area .breadcrumb-promotion {
    padding: 0px 5px;
    background-position: center;
}

.breadcrumb-area .breadcrumb-promotion .card-item .card-img {
    width: 100%;
    height: auto;
    background-position: center center;
    align-items: center;
    display: flex;
    padding: 0px;
}

.breadcrumb-area .breadcrumb-promotion .card-item .card-img img {
    width: 100%;
    height: auto;
    position: relative;
}
 
.breadcrumb-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--theme-primary);
    background-position: 50% 50%;
    animation: background-move 20s linear infinite;
    background-size: 100vw auto, 100% 100%;
}

/*====================================================
BUTTON SWAP FLIGHT
====================================================*/
.row-swap-flight {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
}

.button-swap {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background-color: var(--theme-primary);
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border: 2px solid #db575c;
    margin-top: 16px;
}

@media only screen and (max-width: 479px) {
    .button-swap {
        font-size: 20px;
        top: 63px;
        right: 10px;
        z-index: 999;
        position: absolute;
        width: 40px;
        height: 33px;
        background-color: transparent;
        color: var(--theme-primary);
        border: none;
    }
}

.button-swap:active,
.button-swap:hover {
    background-color: #fff;
    color: var(--theme-primary) !important;
    transition: none;
}

/* Field Swap */
input {
    padding: 10px;
    margin: 5px;
}

button {
    padding: 5px 10px;
    margin: 2px 0px;
    background-color: var(--theme-primary);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #fff5f5;
    font-weight: 500;
}
/* END BUTTON SWAP FLIGHT */

.breadcrumb-wrap .breadcrumb-area-action .input-box .form-group {
    position: relative;
}

.breadcrumb-wrap
    .breadcrumb-area-action
    .input-box
    .form-group
    .label-text-filter {
    font-size: 14px;
    color: #ffffff;
}

.breadcrumb-wrap .breadcrumb-area-action .input-box .form-group .form-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #5d646d;
    font-size: 18px;
}

.breadcrumb-wrap .breadcrumb-area-action .input-box .form-group .search-btn,
.breadcrumb-wrap .breadcrumb-area-action .input-box .form-group .submit-btn {
    position: absolute;
    top: 7px;
    right: 8px;
}

.breadcrumb-wrap .breadcrumb-area-action .input-box .form-group .search-btn {
    background-color: transparent;
    border: none;
    padding: 3px 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #333333;
}

.breadcrumb-wrap .breadcrumb-area-action .form-group .search-btn:hover {
    color: var(--theme-primary);
}

.breadcrumb-wrap .breadcrumb-area-action .form-control {
    height: auto;
    line-height: inherit;
    padding: 10px 20px 10px 40px;
    font-size: 13px;
    color: #333333;
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
}

.breadcrumb-wrap .breadcrumb-area-action .form-control:focus {
    border-color: var(--theme-primary);
}

.breadcrumb-wrap .breadcrumb-area-action .message-control {
    height: 130px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .breadcrumb-area .image-box {
        display: none;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .breadcrumb-area .image-box {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .breadcrumb-area .image-box {
        display: none;
    }

    .row-swap-flight {
        flex-direction: column;
    }
}

/* TODO: ADD POSITION HEADER SEARCH */

.arrow-blink {
    color: #333333;
    font-size: 20px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 125px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    -webkit-box-shadow: 0 4px 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 4px 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 4px 40px rgba(82, 85, 90, 0.1);
}

.arrow-blink i {
    position: relative;
    animation: infinite-blink 2s linear infinite;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wizard .steps ul > li {
        width: 100%;
    }
}

/*====================================================
    header
 ====================================================*/
.header-top-nav {
    background: linear-gradient(to right, #ffffff 70%, #f5f7fc);
    padding-top: 10px;
    padding-bottom: 10px;
}

.header-top-nav .header-top-content {
    width: auto;
}

.header-top-nav .header-top-content .slogan {
    font-family: cursive;
    margin: 2px 2px;
    font-size: small;
    display: block;
    font-weight: bold;
}

.header-top-bar {
    background-color: var(--theme-primary);
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
}

@media (max-width: 1366px) {
    .header-top-nav {
        padding-right: 0;
        padding-left: 0;
    }

    .header-top-bar {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .header-top-nav {
        padding-top: 10px;
        padding-bottom: 18px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header-top-bar {
        padding-top: 10px;
        padding-bottom: 18px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .header-top-nav {
        padding-top: 10px;
        padding-bottom: 18px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header-top-bar {
        padding-top: 10px;
        padding-bottom: 18px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .header-top-nav {
        padding-top: 10px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header-top-bar {
        padding-top: 10px;
        padding-bottom: 18px;
        display: none;
        height: auto !important;
        border-bottom: 1px solid rgba(128, 137, 150, 0.1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .header-top-content {
        text-align: center;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .header-top-content {
        text-align: center;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .header-top-content {
        text-align: center;
    }
}

.header-top-content .list-items li {
    padding-right: 13px;
    margin-bottom: 5px;
    display: inline-block;
    color: #333333;
    text-transform: inherit;
    font-size: 14px;
}

.header-top-content .list-items li:last-child {
    padding-right: 0;
}

.header-top-content .list-items li .la {
    margin-right: 3px;
}

.header-top-content .list-items li a {
    color: #333333;
}

.header-top-content .list-items li a:before {
    display: none;
}

.header-top-content .social-profile a {
    background-color: rgba(255, 255, 255, 0.1);
    width: 33px;
    height: 33px;
    line-height: 33px;
}

.header-top-content .social-profile a:hover {
    background-color: #fff;
    color: var(--theme-primary);
}

/*========== header-right ========*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .header-right {
        padding-top: 5px;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .header-right {
        padding-top: 5px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .header-right {
        padding-top: 5px;
    }
}

@media (max-width: 375px) {
    .header-right {
        padding-top: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .header-right.justify-content-end {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .header-right.justify-content-end {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .header-right.justify-content-end {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 600px) {
    .header-right .list-items {
        margin-right: 0 !important;
    }
}

@media (max-width: 600px) {
    .header-right .header-right-action .select-contain {
        margin-right: 0;
    }
}

/*========== header-right-action ========*/

@media (max-width: 375px) {
    .header-right-action .select-contain {
        margin-right: 0;
    }
}

.header-right-action .select-contain .bs-searchbox {
    display: none;
}

.header-right-action .select-contain .dropdown-toggle {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 14px;
}

.header-right-action .select-contain .dropdown-menu {
    padding-top: 0;
    margin-top: 10px;
}

.header-right-action .select-contain .dropdown-item {
    font-size: 14px;
    padding: 8px 10px;
    min-width: 80px;
}

.header-right-action .theme-btn {
    font-size: 14px;
}

/*===== header-menu-wrapper ========*/
.header-menu-wrapper {
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    background-color: #fff;
    z-index: 1024;
}

@media (max-width: 1366px) {
    .header-menu-wrapper {
        padding-right: 0;
        padding-left: 0;
    }
}

.header-menu-wrapper.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

@media (max-width: 1199px) {
    .header-menu-wrapper.header-fixed {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/*===== menu-wrapper ========*/
.nav-menu-wrapper {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-flex-align: center;
    /* align-items: center; */
    position: relative;
}

.nav-menu-wrapper-timer {
    height: 70px;
    display: -webkit-flex;
    display: -ms-flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
    -ms-flex-align: center;
    /* align-items: center; */
    position: relative;
}

/* @media only screen and (min-width: 320px) and (max-width: 479px) {
    .nav-menu-wrapper img {
        width: 230px;
    }

    .nav-menu-wrapper-timer img {
        width: 230px;
    }
} */

/*===== menu-wrapper ========*/
.menu-wrapper {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .nav-menu-wrapper {
        padding-top: 15px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .nav-menu-wrapper-timer {
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: nowrap;
    }

    .menu-wrapper {
        padding-top: 15px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .wizard .steps ul > li {
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .nav-menu-wrapper {
        padding-top: 15px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .nav-menu-wrapper-timer {
        padding-top: 15px;
        padding-bottom: 25px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .menu-wrapper {
        padding-top: 5px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .nav-menu-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .nav-menu-wrapper-timer {
        padding-top: 15px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .menu-wrapper {
        padding-top: 5px;
        padding-bottom: 15px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.nav-down-button {
    position: absolute;
    top: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 30px;
    text-align: center;
    height: 22px;
    line-height: 20px;
    background-color: rgba(128, 137, 150, 0.1);
    color: #5d646d;
    display: none;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    z-index: 3;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.nav-down-button .fa {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.nav-down-button.active .fa {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.nav-down-button:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

.down-button {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 30px;
    text-align: center;
    height: 22px;
    line-height: 20px;
    background-color: rgba(128, 137, 150, 0.1);
    color: #5d646d;
    display: none;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    z-index: 3;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.down-button .la {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.down-button.active .la {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.down-button:hover {
    position: relative;
    color: #fff;
    width: 50%;
    background-color: var(--theme-primary);
    padding: 20px 5px;
    margin-top: 2px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    border-radius: 0px 0px 10px 10px;
}

.sticky-div {
    position: relative;
}

.sticky-div.fixed {
    padding: 0px 3px 0px 3px;
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: mistyrose;
    color: #333333;
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .down-button {
        position: relative;
        display: block;
        width: 50%;
        padding: 20px 5px;
        margin-top: 2px;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        border-radius: 0px 0px 10px 10px;
    }

    .sticky-div {
        position: relative;
    }

    .sticky-div.fixed {
        padding: 0px 3px 0px 3px;
        position: fixed;
        top: 65px;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: mistyrose;
        color: #333333;
    }

    .sticky-div img {
        height: 70px;
    }
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .nav-down-button {
        display: block;
    }

    .down-button {
        position: relative;
        display: block;
        width: 50%;
        padding: 20px 5px;
        margin-top: 2px;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        border-radius: 0px 0px 10px 10px;
    }

    .sticky-div {
        position: relative;
    }

    .sticky-div.fixed {
        padding: 0px 3px 0px 3px;
        position: fixed;
        top: 65px;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: mistyrose;
        color: #333333;
    }

    .sticky-div img {
        height: 70px;
    }
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .nav-down-button {
        display: block;
    }

    .down-button {
        position: relative;
        display: block;
        width: 50%;
        padding: 20px 5px;
        margin-top: 2px;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        border-radius: 0px 0px 10px 10px;
    }

    .sticky-div {
        position: relative;
    }

    .sticky-div .fixed {
        position: fixed;
        top: 42px;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: mistyrose;
        color: #333333;
    }

    .sticky-div img {
        height: 50px;
    }
}

.logo {
    z-index: 2;
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .logo {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .logo {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

/* RESPONSIVE SCREEN SIZE SETTINGS */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
        width: auto;
    }

    .img-area,
    .form-area {
        flex: none;
    }

    .img-area {
        margin-bottom: 20px;
    }

    .nav-down-button {
        display: block;
    }

    .logo {
        width: 100%;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.logo a {
    display: inline-block;
}

.logo-2 {
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .logo-2 {
        display: flex;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .logo-2 {
        display: flex;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .logo-2 {
        display: flex;
    }
}

.user-menu-open,
.side-menu-close,
.menu-toggler {
    width: 45px;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: none;
    margin-left: auto;
    background-color: rgba(128, 137, 150, 0.1);
    color: #333333;
    font-size: 26px;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .user-menu-open,
    .side-menu-close,
    .menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .user-menu-open,
    .side-menu-close,
    .menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .user-menu-open,
    .side-menu-close,
    .menu-toggler {
        display: block;
    }
}

.user-menu-open .la-bars,
.side-menu-close .la-bars,
.menu-toggler .la-bars {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.user-menu-open .la-times,
.side-menu-close .la-times,
.menu-toggler .la-times {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.user-menu-open.active .la-bars,
.side-menu-close.active .la-bars,
.menu-toggler.active .la-bars {
    opacity: 0;
    visibility: hidden;
}

.user-menu-open.active .la-times,
.side-menu-close.active .la-times,
.menu-toggler.active .la-times {
    opacity: 1;
    visibility: visible;
}

.user-menu-open {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 22px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .user-menu-open {
        margin-left: 5px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .user-menu-open {
        margin-left: 5px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .user-menu-open {
        margin-left: 5px;
    }
}

.user-menu-open:hover {
    background-color: #fff;
    color: #ca262c;
}

.side-menu-close {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 22px;
    margin-left: 10px;
    margin-top: 10px;
}

.side-menu-close .la-times {
    opacity: 1;
    visibility: visible;
}

/*======== main-menu-content =========*/

.main-menu-content {
    padding-top: 22px;
    margin-left: auto;
}

.main-menu-content .row {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
}

/*TIMER STYLE PAYMENT*/
.main-menu-content-timer {
    display: flex;
    justify-content: start;
    align-items: center;
}

.main-menu-content-timer .row {
    display: flex;
    flex-wrap: nowrap;
    font-weight: bold;
}

.main-menu-content-timer .row .time-payment {
    margin: 0px 10px;
    color: var(--theme-primary);
}

.main-menu-content-timer .row .tenor-gif-embed {
    height: 25px;
    margin: 0px 10px;
    color: var(--theme-primary);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content {
        display: none;
        margin-left: 0 !important;
        padding: 15px 0 0 0;
        width: 100%;
    }

    .main-menu-content .row {
        display: flex;
        flex-wrap: wrap;
        font-weight: bold;
    }

    /*TIMER STYLE PAYMENT*/
    .main-menu-content .row .time-payment {
        margin: 0px 10px;
        color: var(--theme-primary);
    }

    .main-menu-content .row .tenor-gif-embed {
        height: 25px;
        margin: 0px 10px;
        color: var(--theme-primary);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content {
        display: none;
        margin-left: 0 !important;
        padding: 15px 0 0 0;
        width: 100%;
    }

    .main-menu-content-timer {
        display: none;
    }

    .main-menu-content-lang {
        display: block;
    }

    .main-menu-content .row {
        display: flex;
        flex-wrap: wrap;
        font-weight: bold;
    }

    /*TIMER STYLE PAYMENT*/
    .main-menu-content .row .time-payment {
        margin: 0px 10px;
        color: var(--theme-primary);
    }

    .main-menu-content .row .tenor-gif-embed {
        height: 25px;
        margin: 0px 10px;
        color: var(--theme-primary);
    }
}

@media only screen and (min-width: 20px) and (max-width: 479px) {
    .main-menu-content {
        display: none;
        margin-left: 0 !important;
        padding: 15px 0 0 0;
        width: 100%;
    }

    .main-menu-content-timer {
        display: none;
    }

    .main-menu-content-lang {
        display: block;
    }

    .main-menu-content .row {
        display: flex;
        flex-wrap: wrap;
        font-weight: bold;
    }

    /*TIMER STYLE PAYMENT*/
    .main-menu-content .row .time-payment {
        margin: 0px 10px;
        color: var(--theme-primary);
    }

    .main-menu-content .row .tenor-gif-embed {
        height: 25px;
        margin: 0px 10px;
        color: var(--theme-primary);
    }
}

.main-menu-content ul li {
    display: inline-flex;
    text-transform: capitalize;
    padding-right: 25px;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li {
        display: block;
        padding-bottom: 15px;
        padding-right: 0;
    }
}

.main-menu-content ul li .drop-menu-toggler {
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #333333;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: none;
    outline: none;
    z-index: 2;
    background-color: transparent;
}

.btn-travel-docs {
    background-color: transparent;
    color: black;
    border: none;
    padding: 0px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
}

.btn-travel-docs:hover {
    background-color: transparent;
    color: var(--theme-primary);
}

.main-menu-content ul li .drop-menu-toggler .fa-angle-down {
    font-size: 16px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .drop-menu-toggler .fa-angle-down {
        display: block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .drop-menu-toggler .fa-angle-down {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .drop-menu-toggler .fa-angle-down {
        display: block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .drop-menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .drop-menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .drop-menu-toggler {
        display: block;
    }
}

.main-menu-content ul li .drop-menu-toggler:hover {
    background-color: rgba(128, 137, 150, 0.1);
}

.main-menu-content ul li a {
    color: #333333;
    display: block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    font-size: 17px;
    padding-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li a {
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li a {
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li a {
        padding-bottom: 0;
    }
}

.main-menu-content ul li a .fa-angle-down {
    font-size: 15px;
    color: #5d646d;
    margin-left: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li a .fa-angle-down {
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li a .fa-angle-down {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li a .fa-angle-down {
        display: none;
    }
}

.main-menu-content ul li a:hover {
    color: var(--theme-primary);
}

.main-menu-content ul li .dropdown-menu-item {
    text-align: left;
    position: absolute;
    top: 38px;
    left: 0;
    width: 200px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    z-index: 4;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    transform-origin: top;
    -webkit-transform: perspective(250px) rotateX(-15deg);
    -moz-transform: perspective(250px) rotateX(-15deg);
    -ms-transform: perspective(250px) rotateX(-15deg);
    -o-transform: perspective(250px) rotateX(-15deg);
    transform: perspective(250px) rotateX(-15deg);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .dropdown-menu-item {
        opacity: 1;
        visibility: visible;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        display: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        position: relative;
        top: auto;
        left: auto;
        background-color: transparent;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
        width: 8px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
        background-color: rgba(128, 137, 150, 0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
        background-color: rgba(128, 137, 150, 0.2);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content
        ul
        li
        .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
        background-color: rgba(128, 137, 150, 0.4);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .dropdown-menu-item {
        opacity: 1;
        visibility: visible;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        display: none;
        width: 100%;
        /*height: 210px;*/
        overflow-x: auto;
        overflow-y: auto;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        position: relative;
        top: auto;
        left: auto;
        padding-bottom: 0;
        background-color: transparent;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
        width: 8px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
        background-color: rgba(128, 137, 150, 0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
        background-color: rgba(128, 137, 150, 0.2);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content
        ul
        li
        .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
        background-color: rgba(128, 137, 150, 0.4);
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .dropdown-menu-item {
        opacity: 1;
        visibility: visible;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        display: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        position: relative;
        top: auto;
        left: auto;
        padding-bottom: 0;
        background-color: transparent;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar {
        width: 8px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-track {
        background-color: rgba(128, 137, 150, 0.1);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content ul li .dropdown-menu-item::-webkit-scrollbar-thumb {
        background-color: rgba(128, 137, 150, 0.2);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .main-menu-content
        ul
        li
        .dropdown-menu-item::-webkit-scrollbar-thumb:hover {
        background-color: rgba(128, 137, 150, 0.4);
    }
}

.main-menu-content ul li .dropdown-menu-item li {
    display: block;
    padding-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .dropdown-menu-item li {
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .dropdown-menu-item li {
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .dropdown-menu-item li {
        padding-bottom: 0;
    }
}

.main-menu-content ul li .dropdown-menu-item li a {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 3px 25px;
    color: #5d646d;
    font-size: 15px;
}

.main-menu-content ul li .dropdown-menu-item li a .la-plus {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .dropdown-menu-item li a .la-plus {
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .dropdown-menu-item li a .la-plus {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .dropdown-menu-item li a .la-plus {
        display: none;
    }
}

.main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 2;
    outline: none;
    border: none;
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler {
        display: block;
    }
}

.main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler .la-plus {
    display: block;
}

.main-menu-content ul li .dropdown-menu-item li a .sub-menu-toggler:hover {
    background-color: rgba(128, 137, 150, 0.1);
}

.main-menu-content ul li .dropdown-menu-item li a:hover {
    color: var(--theme-primary);
}

.main-menu-content ul li .dropdown-menu-item li .sub-menu {
    position: absolute;
    top: -10px;
    left: 200px;
    width: 200px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.2);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    transform-origin: top;
    -webkit-transform: perspective(250px) rotateX(-15deg);
    -moz-transform: perspective(250px) rotateX(-15deg);
    -ms-transform: perspective(250px) rotateX(-15deg);
    -o-transform: perspective(250px) rotateX(-15deg);
    transform: perspective(250px) rotateX(-15deg);
    visibility: hidden;
    opacity: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .dropdown-menu-item li .sub-menu {
        width: 100%;
        position: inherit;
        top: auto;
        left: auto;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        opacity: 1;
        visibility: visible;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        padding: 5px 0 5px 25px;
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .dropdown-menu-item li .sub-menu {
        width: 100%;
        position: inherit;
        top: auto;
        left: auto;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        opacity: 1;
        visibility: visible;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        padding: 5px 0 5px 25px;
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .dropdown-menu-item li .sub-menu {
        width: 100%;
        position: inherit;
        top: auto;
        left: auto;
        -webkit-transform: perspective(0) rotateX(0);
        -moz-transform: perspective(0) rotateX(0);
        -ms-transform: perspective(0) rotateX(0);
        -o-transform: perspective(0) rotateX(0);
        transform: perspective(0) rotateX(0);
        opacity: 1;
        visibility: visible;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
        padding: 5px 0 5px 25px;
        display: none;
    }
}

.main-menu-content ul li .dropdown-menu-item li:hover a .la-plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.main-menu-content ul li .mega-menu {
    width: 625px;
    left: -453px;
    padding-top: 0;
    padding-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-menu-content ul li .mega-menu {
        left: auto;
        width: 100%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-menu-content ul li .mega-menu {
        left: auto;
        width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-menu-content ul li .mega-menu {
        left: auto;
        width: 100%;
    }
}

.main-menu-content ul li .mega-menu .mega-menu-item {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0;
}

.main-menu-content ul li .mega-menu .mega-menu-item + .mega-menu-item {
    border-left: 1px solid rgba(128, 137, 150, 0.1);
}

@media (max-width: 800px) {
    .main-menu-content ul li .mega-menu .mega-menu-item + .mega-menu-item {
        border-left: none;
    }
}

.main-menu-content ul li.active .drop-menu-toggler {
    background-color: rgba(128, 137, 150, 0.1);
}

.main-menu-content ul li.active .drop-menu-toggler::before {
    content: "\f113";
}

.main-menu-content ul li:last-child {
    padding-right: 0;
}

@media (min-width: 992px) {
    .main-menu-content ul li:hover .dropdown-menu-item {
        -webkit-transform: perspective(300px) rotateX(0);
        -moz-transform: perspective(300px) rotateX(0);
        -ms-transform: perspective(300px) rotateX(0);
        -o-transform: perspective(300px) rotateX(0);
        transform: perspective(300px) rotateX(0);
        opacity: 1;
        visibility: visible;
    }

    .main-menu-content ul li .dropdown-menu-item li:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        -webkit-transform: perspective(250px) rotateX(0);
        -moz-transform: perspective(250px) rotateX(0);
        -ms-transform: perspective(250px) rotateX(0);
        -o-transform: perspective(250px) rotateX(0);
        transform: perspective(250px) rotateX(0);
    }
}

/*======== nav-btn =========*/
.nav-btn {
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .nav-btn {
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .nav-btn {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .nav-btn {
        display: none;
    }
}

/*---------------- fixed-nav ----------------*/
.fixed-nav .header-top-nav {
    border: none;
}

.fixed-nav .header-top-bar {
    border: none;
}

.fixed-nav .header-menu-wrapper {
    position: fixed;
    top: -2px;
    width: 100%;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

/*===== modal-backdrop =====*/
.modal-backdrop.show {
    opacity: 0.8;
}

/*===== modal-popup =====*/
.modal-popup .modal-header,
.modal-popup .modal-body,
.modal-popup .modal-footer {
    padding: 20px;
}

/*===== Modal-Content =====*/
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.modal-content .modal-body {
    width: 100%;
    padding: 20px;
}

.modal-content .modal-body .row {
    padding: 2px;
}

.modal-content .modal-body ul {
    padding: 2px 0px;
}

.modal-content .modal-body ul li {
    padding: 2px 15px;
}

.modal-content .modal-body p {
    display: block;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 0;
    margin-right: 0;
}

.modal-content .modal-body h1 {
    display: block;
    font-size: 60px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body h2 {
    display: block;
    font-size: 50px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body h3 {
    display: block;
    font-size: 35px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body h4 {
    display: block;
    font-size: 25px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body h5 {
    display: block;
    font-size: 20px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body h6 {
    display: block;
    font-size: 18px;
    margin: 5px 0px;
    font-weight: bold;
}

.modal-content .modal-body button {
    margin: 10px 0px;
    border-radius: 5px;
}

.modal-content .modal-body .btn-cancel {
    color: #333333;
    background: #d9d9d9;
}

.modal-content .modal-body .booking-flight-desc {
    color: var(--theme-primary);
    font-weight: 600;
}

.modal-content .modal-body .contact-form-action {
    justify-content: center;
    align-items: center;
    display: flex;
}

.modal-content .modal-body .change-flight-form-modal {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.modal-content .modal-body .modal-change-flight {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.modal-content .modal-body .img-visa {
    width: 100%;
    margin: 10px 0px 25px 0px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

/*more lang*/
.more_lang {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
    cursor: pointer;
    display: none;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
    transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
}

.translate_wrapper.active .more_lang {
    display: block;
    position: absolute;
    background-color: #fff;
    top: 47px;
    right: 0;
    -webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
}

.translate_wrapper.active .more_lang:before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    content: "";
    top: -7px;
    position: absolute;
    right: 20px;
    z-index: 2;
}

.translate_wrapper.active .more_lang:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #bdc2c5;
    content: "";
    top: -7px;
    position: absolute;
    right: 20px;
    z-index: 1;
}

.more_lang.active {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.more_lang .lang {
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.more_lang .lang:hover {
    background: var(--theme-deafult);
    color: #fff;
}

.more_lang .lang:hover span {
    color: #cf7474;
}

.translate_wrapper.active .more_lang .lang {
    border-bottom: 1px solid #eaeaea;
    justify-content: left;
    align-items: center;
    text-align: left;
    display: flex;
}

/**=====================
     76. Language CSS start
==========================**/
.current_lang {
    cursor: pointer;
    text-transform: uppercase;
    overflow: hidden;
}

.current_lang::after {
    border: none;
    content: "\f107";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    top: 0px;
    right: 8px;
    border-radius: 100%;
}

.lang.selected {
    display: none;
}

.lang span.lang-txt {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 8px;
    font-weight: 500;
}

.lang span span {
    color: #999;
    font-weight: 400;
    margin-left: 5px;
}

/*more lang*/
.more_lang {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
    cursor: pointer;
    display: none;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
    transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
}

.translate_wrapper.active .more_lang {
    display: block;
    position: absolute;
    background-color: #fff;
    top: 47px;
    right: 0;
    -webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
}

.translate_wrapper.active .more_lang:before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    content: "";
    top: -7px;
    position: absolute;
    right: 20px;
    z-index: 2;
}

.translate_wrapper.active .more_lang:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #bdc2c5;
    content: "";
    top: -7px;
    position: absolute;
    right: 20px;
    z-index: 1;
}

.more_lang.active {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.more_lang .lang {
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.more_lang .lang:hover {
    background: var(--theme-deafult);
    color: #fff;
}

.more_lang .lang:hover span {
    color: #cf7474;
}

.translate_wrapper.active .more_lang .lang {
    border-bottom: 1px solid #eaeaea;
    justify-content: left;
    align-items: center;
    text-align: left;
    display: flex;
}

.icon-hover-bottom .icon-popup div .flag-icon {
    width: 30px;
    height: auto;
}

.page-wrapper .page-header .header-wrapper .nav-right > ul li .flag-icon {
    font-size: 14px !important;
}

/*===== copy-to-clipboard =====*/
.copy-to-clipboard {
    position: relative;
    margin-bottom: 15px;
}

.copy-to-clipboard .contact-form-action .form-input {
    padding: 10px 20px;
}

.copy-to-clipboard .contact-form-action .form-control {
    padding: 10px 20px;
}

.copy-to-clipboard .theme-btn {
    margin-left: 5px;
}

/*===== text-success-message =====*/
.text-success-message {
    background-color: #28d5a7;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 3px 6px;
    position: absolute;
    top: -10px;
    left: 50%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.text-success-message.active {
    top: -40px;
    opacity: 1;
    visibility: visible;
}

.text-success-message:after {
    position: absolute;
    content: "";
    bottom: -4px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    -o-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    background-color: #28d5a7;
    width: 8px;
    height: 8px;
}

/*===== copy-tooltip =====*/
.copy-tooltip {
    position: relative;
    display: inline-block;
}

.copy-tooltip .tooltip-text {
    width: 140px;
    background-color: #333333;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    line-height: 30px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -70px;
    display: none;
}

.copy-tooltip .tooltip-text:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333333 transparent transparent transparent;
}

.copy-tooltip:hover .tooltip-text {
    display: block;
}
/*============ avatar ===============*/
.avatar {
    background-color: #5d646d;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    height: 48px;
    width: 48px;
}

.avatar img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.avatar-lg {
    width: 80px;
    height: 80px;
}

.avatar-sm {
    width: 36px;
    height: 36px;
}

/*==== tag-list =====*/
.tag-list li {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 15px;
    margin-right: 3px;
}

.tag-list li a {
    border: 1px solid rgba(128, 137, 150, 0.2);
    color: #5d646d;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding: 4px 18px;
    display: block;
}

.tag-list li:hover a {
    color: #ca262c;
    border-color: #ca262c;
}

#particles-js {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

/*======== progress-item ========*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .review-bars {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .review-bars {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .review-bars {
        margin-top: 40px;
    }
}

/*======== progress-item ========*/
.progress-item {
    margin-bottom: 10px;
    position: relative;
}

.progressbar-box {
    width: calc(100% - 53px);
    margin-right: 10px;
}

.progressbar-line {
    position: relative;
    display: block;
    width: 100%;
    background-color: #e4e4e4;
    height: 5px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.progressbar-line-item {
    height: 5px;
    width: 0;
    background-color: #5d646d;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/*======= card ========*/
.card {
    border-radius: 10px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #eeeeee;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}

.card-header {
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    transition: all 0.3s;
    position: relative;
}

/* (GLOBAL) CHANGED AFFECTS ALL */
.card-body {
    border-radius: 10px;
    margin: 10px 0px;
}

.card-item {
    margin-bottom: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #eeeeee !important;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.card-item:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.card-item .card-img-voucher {
    padding: 7px 4px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.card-item .card-img-voucher img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.promotion-card .card-img-voucher .btn-coupon {
    background-color: var(--theme-primary);
    padding: 5px 10px;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.promotion-card .card-img-voucher .btn-coupon:hover {
    background-color: #db575c;
    color: #fff;
}

.card-item .card-img {
    padding: 5px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.card-item .card-img img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-item .card-img .badge {
    position: absolute;
    background-color: var(--theme-primary);
    bottom: -12px;
    right: 40px;
    padding: 6px 11px;
    font-size: 16px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 5px;
    font-weight: 500;
    z-index: 1;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-item .card-img .badge-ribbon {
    left: auto;
    right: 20px;
    background-color: #f9b851;
}

.card-item .card-img .add-to-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    cursor: pointer;
    color: #333333;
    background-color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-item .card-img .add-to-wishlist:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.card-item .card-title {
    font-size: 22px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 2px;
}

.card-item .card-title a {
    color: var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-item .card-title a:hover {
    color: #ca262c;
}

.card-item .avail-dates {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary);
}

.card-item .card-meta {
    font-size: 13px;
}

.card-item .card-meta .post-dot {
    width: 4px;
    height: 4px;
    background-color: rgba(128, 137, 150, 0.4);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    position: relative;
    top: -3px;
}

.card-item .card-body {
    padding: 15px 20px;
    min-height: auto;
    background-color: rgba(255, 255, 255, 0.7);
}

.card-item .card-filters {
    padding: 15px 20px;
    min-height: auto;
    background-color: rgba(255, 255, 255, 0.6);
}

.card-item .card-price {
    font-size: 15px;
    /* text-decoration: underline; */
}

.card-price p {
    font-weight: 600;
}

@media (max-width: 1199px) {
    .card-item .card-price {
        display: block !important;
    }

    .faq-accordion {
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .card-item .card-price {
        margin-top: 5px !important;
        display: flex !important;
    }

    .rtl .faq-accordion .faq-header svg {
        left: 20px;
    }

    .rtl .f1 .f1-buttons {
        text-align: left;
    }

    .rtl .f1 .f1-steps .f1-step {
        float: right;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item .card-price {
        display: flex !important;
    }
}
.promo-card-image-wrapper {
    margin-bottom: 10px;
}
.promo-card-container {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: #f7f7f7;
}

.promo-card-container img {
    border-radius: 10px;
    width: 100% !important;
    height: 150px;
    object-position: center;
    object-fit: cover;
    background-color: white;
}

.promo-card-btn {
    background-color: var(--theme-primary);
    color: #fff;
    padding: 4px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    border: 2px solid var(--theme-primary);
    transition: all 0.3s;
}

.promo-card-btn:hover {
    background-color: white;
    border: 2px solid var(--theme-primary);
    color: var(--theme-primary);
}

/*======= TODO: INDEX FLIGHT CARD CSS ========*/

/* section padding for flight */
.section--padding--flight {
    padding: 50px 0px;
}

.indexflight-carrental {
    margin: 50px 0px 50px 0px;
    background-color: #fff;
    position: relative;
}

.section--padding--home {
    padding: 70px 0px 30px 0px;
}

@media only screen and (min-width: 1280px) {
    .section--padding--home {
        padding: 110px 0px 30px 0px;
    }
}

.indexflight-carrental .carrental-card {
    position: relative;
    overflow: hidden;
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.02);
}

.indexflight-carrental .section-heading {
    margin-top: 130px;
    text-align: center;
}

.indexflight-carrental .section-heading h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
    color: #212529;
}

.indexflight-carrental .section-heading span {
    color: #ca262c;
    margin-left: 7px;
}

.indexflight-carrental .section-heading h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.indexflight-carrental .section-heading h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: 500;
}

.indexflight-carrental .section-heading h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: 500;
}

.indexflight-carrental .section-heading h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
    color: #5d646d;
}

.indexflight-carrental .section-heading p {
    font-size: small;
}

/* end section padding for flight */

/* syarat & ketentuan car rental */

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

.cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-service-type {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.card-content {
    display: flex;
    position: relative;
    z-index: 1;
}

.card-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #fccdcd;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-text {
    flex: 1;
}

.card-title {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.card-description {
    font-size: 0.875rem;
    color: #6b7280;
}

.card-bg {
    position: absolute;
    top: 0;
    right: -2rem;
    width: 6rem;
    height: 100%;
    background-color: #fff8f8;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    z-index: 0;
}
/* end syarat & ketentuan car rental */

/* card popular car rental */
.card-slider-container-carrental {
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.card-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding: 10px 5px;
    margin-top: 40px;
}

.card-slider::-webkit-scrollbar {
    display: none;
}

.card-popular {
    flex: 0 0 auto;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-image {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-price {
    font-size: 16px;
    font-weight: 700;
    color: #ca262c;
    margin-bottom: 5px;
}

.price-period {
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

.card-features {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}

.feature-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transmission {
    background-color: #f0f0f0;
    color: #666;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: auto;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    width: 40px;
    height: 40px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.nav-next {
    right: -15px;
}

.nav-prev {
    left: -15px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .indexflight-carrental .section-heading {
        margin-top: 60px;
    }
    .indexflight-carrental .section-heading h2 {
        font-size: 36px;
    }
}

@media only screen and (min-width: 390px) and (max-width: 479px) {
    .indexflight-carrental .section-heading h6 {
        font-size: 16px;
    }
    .indexflight-carrental .section-heading {
        margin-top: 60px;
    }
    .indexflight-carrental .section-heading h2 {
        font-size: 34px;
    }
    .promo-card-container img {
        height: 180px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 390px) {
    .indexflight-carrental .section-heading h6 {
        font-size: 16px;
    }
    .indexflight-carrental .section-heading {
        margin-top: 60px;
    }
    .indexflight-carrental .section-heading h2 {
        font-size: 34px;
    }
    .tab-btn {
        font-size: 12px !important;
    }
    .promo-card-container img {
        height: 160px;
    }
}

/* end card popular car rental */

/* tabs ganeral car rental condition */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    margin-top: 40px;
}

.tab-btn {
    background: #fff8f8;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    margin: 0 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    font-weight: bold;
    color: var(--theme-primary);
}

.tab-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--theme-primary);
    transition: all 0.3s ease;
    font-weight: bold;
}

.tab-btn.active {
    background: var(--theme-primary);
    color: white;
    transform: translateY(-5px);
    font-weight: bold;
}

.tab-btn.active::before {
    width: 100%;
    opacity: 0.2;
    font-weight: bold;
}

.tab-btn:not(.active):hover {
    font-weight: bold;
    transform: translateY(-3px);
}

.tab-btn i {
    margin-right: 8px;
}

/* Tab Content */
.tab-content-carrental {
    display: none;
    animation: fadeIn 0.5s ease forwards;
}

.tab-content-carrental.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sections */
.info-card {
    background: var(--section-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
    overflow: hidden;
}

.info-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.info-header:hover {
    background-color: rgba(67, 97, 238, 0.05);
}

.info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    flex-shrink: 0;
}

.info-title {
    font-weight: 600;
    font-size: 1.1rem;
    flex-grow: 1;
}

.info-content-carrental {
    padding: 20px;
}

.info-list {
    list-style-type: none;
}

.info-list li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

.info-list li::before {
    padding-top: 5px;
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    top: -5px;
}

.highlight {
    color: var(--accent-color);
    font-weight: 600;
}

.note {
    background-color: rgba(76, 201, 240, 0.1);
    border-left: 4px solid var(--success-color);
    padding: 15px;
    margin-top: 15px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.note-title {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    color: var(--secondary-color);
}

/* end tabs ganeral car rental condition */

/* section padding for car rental */
.section--padding--flight {
    padding: 50px 0px;
}

.indexflight-destination {
    margin: 250px 0px 50px 0px;
    background-color: #fff;
    position: relative;
}

.section--padding--home {
    padding: 70px 0px 30px 0px;
}

@media only screen and (max-width: 885px) {
    .indexflight-destination {
        margin: 150px 0px 50px 0px;
    }
}

@media only screen and (min-width: 1280px) {
    .section--padding--home {
        padding: 110px 0px 30px 0px;
    }
}

.indexflight-destination .destination-card {
    position: relative;
    overflow: hidden;
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.02);
}

.indexflight-destination .section-heading {
    text-align: center;
}

.indexflight-destination .section-heading h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
    color: #212529;
}

.indexflight-destination .section-heading span {
    color: #ca262c;
    margin-left: 7px;
}

.indexflight-destination .section-heading h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.indexflight-destination .section-heading h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: 500;
}

.indexflight-destination .section-heading h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: 500;
}

.indexflight-destination .section-heading h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
    color: #5d646d;
}

.indexflight-destination .section-heading p {
    font-size: small;
}

/* end section padding for car rental */

.card-item .card-indexflight-img {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.card-item .card-indexflight-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.card-item .card-indexflight-img:hover img {
    transform: scale(1.1);
}

.card-item .card-indexflight-img .card-content {
    width: 100%;
    margin-right: 50px;
    margin-bottom: 15px;
    color: white;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: right;
    bottom: 0;
    z-index: 1;
}

.card-item .card-indexflight-img .card-content i {
    color: white;
    margin-right: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.card-item .card-indexflight-img .card-content .icon-marker {
    width: fit-content;
    height: auto;
    border-radius: 50%;
}

.card-item .card-indexflight-img .card-content .icon-marker img {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
    margin-right: 2px;
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}

.card-item .card-indexflight-img .card-content h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.card-item .card-indexflight-img .card-content p {
    font-size: small;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 1280px) {
    .card-item .card-indexflight-img .card-content h6 {
        font-size: 14px;
    }
}

/* (GLOBAL) index-flight: index-aboutbest-services */
.index-aboutbest-services {
    position: relative;
    z-index: 1;
}

.index-aboutbest-services::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dfdfdf;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.index-aboutbest-services .title-bestservices {
    margin: 15px 15px;
    padding-bottom: 5px;
    color: #333333;
}

.index-aboutbest-services .title-bestservices h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
}

.index-aboutbest-services .title-bestservices h2 span {
    color: #ca262c;
}

.index-aboutbest-services .title-bestservices h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.index-aboutbest-services .title-bestservices h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: 500;
    color: #333333;
}

.index-aboutbest-services .title-bestservices h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: 500;
}

.index-aboutbest-services .title-bestservices h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
}

.index-aboutbest-services .title-bestservices p {
    font-size: small;
}

.index-aboutbest-services .bestservices-icon {
    width: fit-content;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-flex-negative: 0;
}

.index-aboutbest-services .bestservices-icon img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}

.index-aboutbest-services .bestservices-content {
    width: 100%;
    height: auto;
}

.index-aboutbest-services .bestservices-content h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
    color: #333333;
}

.index-aboutbest-services .bestservices-content h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.index-aboutbest-services .bestservices-content h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: 600;
}

.index-aboutbest-services .bestservices-content h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: 500;
    color: #333333;
    text-shadow: 1px 1px 2px rgb(105 105 105 / 50%);
}

.index-aboutbest-services .bestservices-content h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
}

.index-aboutbest-services .bestservices-content p {
    font-size: medium;
    line-height: 1.6;
}
/* end index-flight: index-aboutbest-services */

/* (GLOBAL) index-flight: index-faq-services */
.index-faq-services {
    position: relative;
    z-index: 1;
}

.index-faq-services::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dfdfdf;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.index-faq-services .title-faq {
    margin: 15px 15px;
    padding-bottom: 5px;
    color: #333333;
}

.index-faq-services .title-faq h2 {
    font-size: 45px;
    margin: 15px 0px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.index-faq-services .faq-item .toggle-menu li {
    margin-bottom: 10px;
}

.index-faq-services .faq-item .toggle-menu li a {
    color: #333333;
    font-weight: bold;
    font-size: large;
}

/* end index-flight: index-faq-services */
/* (GLOBAL) index-flight: index-airline-partners */
.index-airline-partners {
    position: relative;
    z-index: 1;
}

.index-airline-partners::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fcfcfc;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.index-airline-partners .airline-heading {
    width: 100%;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 25px 0px;
    -ms-flex-negative: 0;
}

.index-airline-partners .airline-heading h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
    color: #333333;
}

.index-airline-partners .airline-heading h2 span {
    color: #ca262c;
}

.index-airline-partners .airline-heading h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.index-airline-partners .airline-heading h4 {
    margin: 5px 0px;
    font-size: 30px;
    display: block;
    font-weight: bold;
    color: #333333;
}

/* Custom scrollbar airline partners */
.index-airline-partners .airline-content {
    width: 100%;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.grid-container-airline-partners {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.grid-item-airline-partners {
    display: flex;
    justify-content: center;
    align-items: center;
}

.airline-icon-airline-partners img {
    width: inherit;
    height: 35px;
}

/* Custom scrollbar */
.index-airline-partners .airline-content::-webkit-scrollbar {
    width: 6px;
}

.index-airline-partners .airline-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.index-airline-partners .airline-content::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 5px;
}

.index-airline-partners .airline-content::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.index-airline-partners .airline-content .airline-icon {
    width: fit-content;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-flex-negative: 0;
}

.index-airline-partners .airline-content .airline-icon img {
    width: fit-content;
    height: 35px;
    margin: 5px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}
/* end index-flight: index-airline-partners */

/* (GLOBAL) index-flight: index-airline-promotion-b2b */
.index-airline-promotion-b2b {
    position: relative;
    z-index: 1;
}

.index-airline-promotion-b2b::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/index-flight/bg-promotion-b2b.png);
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.index-airline-promotion-b2b .title-promotionb2b {
    width: fit-content;
    margin: 60px 0px;
}

.index-airline-promotion-b2b .title-promotionb2b h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
    color: #333333;
}

.index-airline-promotion-b2b .title-promotionb2b h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.index-airline-promotion-b2b .title-promotionb2b h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: 500;
}

.index-airline-promotion-b2b .title-promotionb2b h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: 500;
}

.index-airline-promotion-b2b .title-promotionb2b h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 500;
}

.index-airline-promotion-b2b .title-promotionb2b p {
    font-size: small;
}
/* end index-flight: index-airline-promotion-b2b */

/* (GLOBAL) INDEX FLIGHT CARD CSS: index-airline-cssupport */
.index-airline-cssupport {
    position: relative;
    z-index: 1;
}

.index-airline-cssupport::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background/bg2_2.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.index-airline-cssupport .row .cssupport-heading {
    width: fit-content;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-flex-negative: 0;
}

.index-airline-cssupport .row .cssupport-heading img {
    width: 60px;
    height: 60px;
    margin: 15px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}

.index-airline-cssupport .row .cssupport-content {
    width: fit-content;
    margin: 0px 5px;
    height: auto;
    -moz-border-radius: 50%;
    -ms-flex-negative: 0;
    justify-content: center;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.index-airline-cssupport .row .cssupport-content h2 {
    display: block;
    font-size: 45px;
    margin: 5px 0px;
    font-weight: bold;
}

.index-airline-cssupport .row .cssupport-content h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.index-airline-cssupport .row .cssupport-content h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: bold;
}

.index-airline-cssupport .row .cssupport-content h5 {
    margin: 5px 0px;
    font-size: 23px;
    display: block;
    font-weight: bold;
}

.index-airline-cssupport .row .cssupport-content h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.index-airline-cssupport .row .cssupport-content p {
    font-size: small;
    line-height: 1.6;
}
/*======= END INDEX TOURS CARD CSS ========*/

/*======= destination-card ========*/
.destination-card {
    position: relative;
    overflow: hidden;
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.02);
}

.destination-card .card-img .badge {
    top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #ca262c;
}

.destination-card .card-img .badge-ribbon {
    background-color: #f9b851;
}

.destination-card .card-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.destination-card .card-body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-radius: 10px;
    margin: 0px;
    z-index: 2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.destination-card .card-filters {
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.destination-card .card-title {
    color: #333333;
    margin-bottom: 0;
}

.destination-card .card-title a {
    color: #fff;
}

.destination-card .card-title a:hover {
    color: #fff;
}

.destination-card .card-rating {
    padding-top: 4px;
    padding-bottom: 5px;
}

.destination-card .card-rating .rating__text {
    color: #fff;
}

.destination-card .tour__text {
    font-weight: 300;
    color: #333333;
}

.destination-card .card-price {
    color: #fff;
}

.destination-card .card-price .price__num {
    color: #fff !important;
}

.destination-card:hover .card-body {
    bottom: 0;
}

.destination-card:hover .card-filters {
    bottom: 0;
}

/*======= end destination--card ========*/

/*======= promotion-card ========*/
.promotion-card .card-img {
    overflow: hidden;
    position: relative;
}

.promotion-card .card-img img {
    transition: all 0.3s;
    width: 100%;
    height: 200px;
    display: block;
    object-position: center;
    object-fit: cover;
}

.promotion-card .card-img .btn-coupon {
    background-color: var(--theme-primary);
    padding: 5px 10px;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.promotion-card .card-img .btn-coupon:hover {
    background-color: #db575c;
    color: #fff;
}

.promotion-card .card-img .badge {
    top: 20px;
}

.promotion-card .card-img:hover img {
    transform: scale(1.1);
}

.promotion-card .card-img img:hover {
    height: auto;
}

.promotion-card:hover {
    transform: none;
}

.promotion-card .card-rating {
    padding-bottom: 14px;
}

.promotion-card .card-body {
    margin-top: 5px;
    margin-bottom: 5px;
}

.promotion-card .card-title {
    margin-bottom: 0;
    margin-top: 2px;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .index-airline-promotion-b2b .title-promotionb2b h2 {
        font-size: 32px;
    }
    .index-airline-promotion-b2b .title-promotionb2b h6 {
        font-size: 16px;
    }
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.text-center {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.text-left {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.text-left-cbx {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: -1.5px;
    margin: 0;
    padding: 0;
}

/*====================================================
    FLIGHT-PAGE
 ====================================================*/
.button-filter {
    font-size: 15px;
    color: var(--theme-primary);
    display: inline-flex;
}

.button-filter:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.card-filter {
    border-radius: 5px;
    position: relative;
    background-color: #ffffff;
    border: 1px solid rgba(128, 137, 150, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.card-filter-flight {
    color: white;
    background-color: #eb5b00;
    padding: 8px 0px;
    border-radius: 5px;
    position: relative;
    border: 1px solid rgba(128, 137, 150, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.card-filter-flight .bgiconflight {
    height: 70px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.card-filter-flight .bgiconflight img {
    height: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    display: flex;
}

.card-filter-flight .bgiconflight img:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.card-filter-flight .title-airport {
    width: 100%;
    font-weight: bold;
    align-items: center;
    display: flex;
}

.card-filter-flight .title-airport i {
    margin: 0px 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.card-filter-flight .title-airport h2 {
    width: fit-content;
    display: block;
    text-align: left;
    font-size: 50px;
    margin: 0px 10px;
    font-weight: bold;
}

.card-filter-flight .title-airport h3 {
    width: fit-content;
    font-size: 35px;
    text-align: left;
    display: block;
    margin: 0px 10px;
    font-weight: bold;
}

.card-filter-flight .title-airport h4 {
    width: fit-content;
    font-size: 20px;
    text-align: left;
    display: block;
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-filter-flight .title-airport h5 {
    width: fit-content;
    margin: 0px 10px;
    font-size: medium;
    display: block;
    font-weight: bold;
}

.card-filter-flight .title-airport h6 {
    width: fit-content;
    margin: 0px 10px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.card-filter-flight .title-airport p {
    font-size: small;
}

.card-filter-flight .date-flight-passengers {
    width: 100%;
    font-weight: bold;
    font-weight: 400;
    display: flex;
    align-items: center;
    display: flex;
}

.card-filter-flight .date-flight-passengers i {
    margin: 0px 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.card-filter-flight .date-flight-passengers h3 {
    width: fit-content;
    font-size: 35px;
    margin: 0px 7px;
    display: block;
    font-weight: bold;
}

.card-filter-flight .date-flight-passengers h4 {
    width: fit-content;
    margin: 0px 7px;
    font-size: 25px;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.card-filter-flight .date-flight-passengers h5 {
    width: fit-content;
    margin: 2px 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.card-filter-flight .date-flight-passengers h5 span {
    margin: 0px 10px;
    font-size: 14px;
    font-weight: 400;
}

.card-filter-flight .date-flight-passengers h6 {
    width: fit-content;
    margin: 0px 7px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.card-filter-flight .date-flight-passengers p {
    font-size: small;
}

.card-filter-flight .filter-change-flight {
    width: 100%;
    justify-content: start;
    align-items: start;
    text-align: center;
    display: flex;
}

.card-filter-flight .filter-change-flight button {
    font-size: 15px;
    color: white;
    line-height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid white;
    font-weight: 600;
}

.card-filter-flight .filter-change-flight button:hover {
    font-size: 15px;
    color: var(--theme-primary);
    line-height: 35px;
    position: relative;
    display: inline-block;
    border: 1px solid var(--theme-primary);
    font-weight: 600;
}

.bottom-bar-account-search-flight {
    position: fixed;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 999;
    border-top: 1px solid rgba(128, 137, 150, 0.1);
    width: 100%;
    font-size: 10px;
    background-color: white;
    font-weight: 500;
}

.content-bottom-bar-search-flight {
    display: flex;
    justify-content: center;
    padding: 12px 20px 22px 20px;
}

.content-bottom-bar-search-flight i {
    color: var(--theme-primary);
    font-size: 14px;
}

.content-bottom-bar-search-flight .fa-sort {
    color: var(--theme-primary);
    font-size: 18px;
}

.content-bottom-bar-search-flight p {
    margin-left: 6px;
    color: var(--theme-primary);
    font-size: 15px;
    line-height: 10px;
    text-align: center;
}

.disabled-filter-bar-search-flight {
    pointer-events: none;
    opacity: 0.5;
}

.disabled-filter-bar-search-flight p,
.disabled-filter-bar-search-flight i {
    color: #5b676d !important;
}

.hover-effect-search-flight {
    transition: all 0.3s;
    width: 100%;
}

.hover-effect-search-flight:hover {
    color: var(--theme-primary) !important;
    text-decoration: none !important;
}

.hover-effect-search-flight.active {
    color: var(--theme-primary) !important;
}

.filter-change-flight-bar {
    position: fixed;
    top: 75px;
    width: 100%;
    background-color: #eb5b00;
    z-index: 99 !important;
}

.filter-change-flight-bar h4 {
    font-size: 18px !important;
}

.filter-change-flight-bar h4 i {
    font-size: 14px !important;
}

.filter-change-flight-bar .fa-chevron-down {
    position: absolute;
    right: 7px;
    font-size: 16px;
}

.filter-counter-search-flight {
    position: relative;
    top: -13px;
    left: -9px;
}

#filterCounterBar {
    padding-top: 1px;
    position: absolute;
    left: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 14px;
    height: 13px;
    font-size: 9px;
    color: white;
    background-color: var(--theme-primary);
}

#dRouteInfo h5 {
    font-size: 13px !important;
    position: relative;
}

.content-bottom-bar-search-flight .fa-check {
    display: flex;
    font-size: 7px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 13px;
    margin-left: 6px;
    height: 13px;
    color: white;
    background-color: #28a745;
}

.arrow-icon {
    transition: transform 0.3s ease-in-out;
}

[data-toggle="collapse"][aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}

[data-toggle="collapse"][aria-expanded="true"] .border-search-flight-bar {
    border-bottom: 1px dashed #f1f1f1 !important;
}

@media only screen and (min-width: 320px) and (max-width: 750px) {
    .card-filter-flight {
        border-radius: 5px 5px 0px 0px;
        z-index: 99 !important;
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .card-filter-flight .bgiconflight {
        padding: 0px;
        margin-right: 10px;
    }

    .card-filter-flight .date-flight-passengers h5 span {
        margin: 0px 5px;
    }

    .card-filter-flight .bgiconflight img {
        height: 100%;
        padding: 10px 0px;
    }

    .card-filter-flight .title-airport i {
        margin: 0px 5px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 385px) {
    .content-bottom-bar-search-flight p {
        font-size: 13px;
    }

    .card-filter-flight .title-airport h4 {
        font-size: 15px;
    }

    .card-filter-flight .date-flight-passengers h5 {
        font-size: 9px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .index-faq-services .title-faq h2 {
        font-size: 26px;
    }
}

@media only screen and (min-width: 385px) and (max-width: 450px) {
    .card-filter-flight .title-airport h4 {
        font-size: 18px;
    }

    .card-filter-flight .date-flight-passengers h5 {
        font-size: 10px;
    }
    .index-faq-services .title-faq h2 {
        font-size: 29px;
    }
}

@media only screen and (min-width: 414px) and (max-width: 767px) {
    .card-filter-flight .date-flight-passengers h5 {
        font-size: 11px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .filter-change-flight-bar {
        top: 86px;
    }
}

/* Toogle switch */
.flight-card .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.flight-card .row-toogle-switch {
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.flight-card .switch input {
    display: none;
}

.flight-card .switch input:checked + .switch-state {
    background-color: #ca2626;
}

.flight-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.flight-card .switch input:checked + .switch-state:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

.flight-card .switch-state:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
}

.flight-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4a4a4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.flight-card .switch-sm .switch {
    width: 25px;
    height: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.flight-card .switch-sm.icon-state .switch .switch-state:after {
    top: 4px;
    left: 4px;
    font-size: 8px;
}

.flight-card .switch-sm.icon-state .switch input:checked + .switch-state:after {
    left: 13px;
    top: 4px;
}

.flight-card .switch-sm .switch .switch-state:before {
    height: 8px;
    width: 8px;
    left: 4px;
    bottom: 4px;
}

.flight-card .switch-sm input:checked + .switch-state:before {
    left: -13px;
}

/* START */
.flight-card-wrap {
    margin: 10px 0px;
    display: block;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.flight-card-wrap .card-flight-date {
    border: 1px solid rgba(128, 137, 150, 0.1);
    padding: 5px 0px;
    margin: 0px 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 7px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.flight-card-wrap .card-flight-date:hover {
    border: 1px solid #fed9da;
    background-color: #fed9da;
    color: var(--theme-primary);
}

.flight-card-wrap .card-flight-date h3 {
    width: 100%;
    margin: 4px 0px;
    font-size: larger;
    display: block;
    font-weight: bold;
}

.flight-card-wrap .card-flight-date h4 {
    width: 100%;
    margin: 4px 0px;
    font-size: large;
    display: block;
    font-weight: bold;
}

.flight-card-wrap .card-flight-date h5 {
    width: 100%;
    margin: 4px 0px;
    font-size: medium;
    display: block;
    font-weight: bold;
    text-decoration: underline;
    color: #c36e71;
    font-weight: 400;
}

.flight-card-wrap .card-flight-date h5 i {
    margin-left: 10px;
}

.flight-card-wrap .card-flight-date h5:hover {
    width: 100%;
    margin: 4px 0px;
    font-size: medium;
    display: block;
    font-weight: bold;
    color: #c36e71;
}

.flight-card-wrap .card-flight-date p:hover {
    width: max-content;
    display: block;
    color: white;
}

.flight-card-wrap .card-flight-date .btn-text {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 15px;
}

.flight-card {
    align-items: center;
    padding: 15px 5px;
    margin: 10px 0px;
    border-radius: 10px;
    border: 1px solid rgba(128, 137, 150, 0.2);
    background-color: #fff;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}

.flight-card .btn-verify {
    width: 100%;
    margin-bottom: 1rem;
    padding: 7px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.flight-card .btn-verify:hover {
    background-color: #db575c;
    color: #fff;
}

.flight-card .row-promo-code .btn-verify {
    width: 100%;
    margin-bottom: 1rem;
    padding: 7px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.flight-card .title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
}

.flight-card .form-content {
    padding: 20px;
}

.flight-card .form-content .label-text {
    font-size: large;
    font-weight: 600;
    color: #333333;
}

.flight-card .row-payment {
    align-items: center;
    display: flex;
    margin: 0px 15px;
}

.flight-card .row-payment2 {
    align-items: center;
    display: flex;
    margin: 15px;
}

.flight-card .row-norek {
    position: relative;
    background-color: #ebebeb;
    align-items: center;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    margin: 15px;
}

.flight-card .row-norek i {
    padding: 15px 15px;
    cursor: pointer;
}

.flight-card .row-norek i:hover {
    padding: 15px 15px;
    color: var(--theme-primary);
}

.flight-card .row-norek .label-norek {
    font-size: larger;
    align-items: center;
    padding: 5px 10px 10px 10px;
    font-weight: 500;
    background-color: transparent;
    border: none;
}

.flight-card .row-norek .label-norek-title {
    font-size: 15px;
    align-items: center;
    padding: 10px 10px 0px 10px;
    font-weight: 500;
}

.flight-card .row-norek .label-norek span {
    width: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.flight-card .label-text {
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    margin: 10px 0px;
}

.flight-card .time-out {
    width: 100%;
    height: auto;
    font-weight: bold;
    font-size: 16px;
    color: #bc3737;
    justify-content: right;
    align-items: center;
    display: flex;
}

.flight-card .row-time-payment {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-weight: bold;
    align-items: center;
}

@media only screen and (min-width: 375px) and (max-width: 479px) {
    .flight-card .row-time-payment {
        gap: 3px;
        font-size: 13px;
    }
}

.flight-card .row-time-payment .time-payment {
    margin: 0px 10px;
    color: var(--theme-primary);
}

.flight-card .card-body {
    padding: 10px 0px 0px 0px;
}

.flight-card .card-body img {
    margin-bottom: 8px;
}

.flight-card .card-price {
    padding-top: 12px;
}

.flight-card .row-addons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flight-card .row .profile-card-img {
    padding: 5px;
    display: flex;
}

.flight-card .row .profile-card-img .img-hotel {
    width: 65px;
    height: 65px;
    padding: 15px 10px;
    background-color: #fff;
    border-radius: 10px;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.flight-card .row .profile-title-login {
    text-align: left;
    display: flex;
}

.flight-card .row .profile-title-login h3 {
    font-size: 1.37em;
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.flight-card .row .profile-title-login h4 {
    font-size: 1.13em;
    display: block;
    font-weight: bold;
}

.flight-card .row .profile-title-login h5 {
    font-size: 0.93em;
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.flight-card .row .profile-desc {
    text-align: left;
    display: flex;
}

.flight-card .row .profile-desc p {
    font-size: medium;
    display: block;
    margin-bottom: 10px;
}

.flight-card .title-addone {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
    color: var(--theme-primary);
}

.flight-card .desc-addone {
    width: 100%;
    height: auto;
    margin: 0px 0px;
    font-size: small;
    font-weight: 600;
    text-align: left;
}

.flight-card .desc-addone li {
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    font-family: "Roboto", sans-serif;
    color: #5d646d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flight-card .desc-payment-method {
    width: 100%;
    height: auto;
    margin: 20px 5px;
    font-size: medium;
    text-align: left;
}

.flight-card .desc-payment-method li {
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    font-family: "Roboto", sans-serif;
    color: #5d646d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flight-card .flight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.flight-card .flight .flight-details img {
    width: 60px;
    height: 100%;
    align-items: center;
    display: flex;
}

.flight-card .card-flight-img {
    width: 100%;
    text-align: center;
}

.flight-card .flight-img img {
    width: -webkit-fill-available;
}

.flight-card .title-flight {
    width: 100%;
    height: auto;
    font-size: small;
    text-transform: capitalize;
    /*font-weight: 600;*/
}

.flight-card .type-of-plane {
    font-size: x-small;
    width: 100%;
}

.flight-card .no-flight {
    font-size: x-small;
    width: 100%;
}

.flight-card .row-facility {
    display: flex;
    gap: 19px;
    padding-left: 13px;
}

.flight-card .row-facility img {
    width: 20px;
    height: auto;
    margin-bottom: 5px;
}
.flightMinInfo-details h6 {
    font-size: 12px;
    font-weight: 700;
}
.flightMinInfo-details span {
    font-size: 11px;
}
.flightMinInfo-price span {
    font-size: 15px !important;
    color: var(--theme-primary);
    font-weight: bold;
}
.flightMinInfo-details .fa-calendar-day {
    font-size: 12px !important;
}
.btn-flightMinInfo-details {
    z-index: 1;
    position: absolute;
    left: 37%;
    top: -7px;
    width: 130px;
    font-size: 14px;
    padding: 1px 0px;
    border: 1px dashed var(--theme-primary);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 5px;
    font-weight: 500;
}
.btn-flightMinInfo-details:hover {
    position: absolute;
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary);
}
#flightMinInfo,
#flightMaxInfo {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    overflow: hidden;
}

#flightMinInfo {
    padding-bottom: 4px;
    max-height: 500px;
    opacity: 1;
}

#flightMaxInfo {
    max-height: 0;
    opacity: 0;
}

@media only screen and (min-width: 320px) and (max-width: 376px) {
    .flight-card .row-facility {
        display: flex;
        font-size: 9px;
        gap: 0px;
    }
    .btn-flightMinInfo-details {
        left: 33%;
    }
    .flightMinInfo-details span {
        font-size: 10px;
    }
    .flight-card .title {
        font-size: 16px;
    }
    .flight-card .row-facility img {
        width: 15px;
    }
    .flight-card .title-flight {
        font-size: 17px;
        font-weight: 900;
    }
    .flight-card .row .profile-title-login h4 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 376px) and (max-width: 479px) {
    .flight-card .row-facility {
        display: flex;
        font-size: 12px;
        gap: 0px;
    }
    .btn-flightMinInfo-details {
        left: 34%;
    }
    .flight-card .title-flight {
        font-size: 19px;
        font-weight: 900;
    }

    .flight-card .title {
        font-size: 18px;
    }

    .flight-card .row .profile-title-login h4 {
        font-size: 15px;
    }
}

.flight-card .row-airport {
    width: 100%;
    justify-content: center;
    display: flex;
}

.flight-card .row-airport .airport-name {
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: 800;
    text-wrap: wrap;
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
    .flight-card .row-airport .airport-name {
        font-size: 13px;
    }
}

@media only screen and (min-width: 375px) and (max-width: 479px) {
    .flight-card .row-airport .airport-name {
        font-size: 15px;
    }
}

.flight-card .row-airport .airport-desc {
    width: 100%;
    height: auto;
    font-size: 12px;
    margin: 3px 0px;
}

.flight-card .row-airport .airport-date {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: bold;
    margin: 3px 0px;
}

.flight-card .row-airport .flight-icon {
    width: 100%;
    height: auto;
    text-align: center;
}

.flight-card .row-airport .flight-icon img {
    width: inherit;
    height: auto;
    padding: 0px 10px;
    position: relative;
}

@media only screen and (min-width: 720px) and (max-width: 1024px) {
    .flight-card .row-airport .flight-icon img {
        width: 145px;
    }
    .btn-flightMinInfo-details {
        left: 41%;
    }
}

.flight-card .row-airport .flight-icon p {
    font-size: small;
    line-height: 1.5;
}

.flight-card .row-price-flight {
    padding-right: 5px;
    width: 100%;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.flight-card .row-all-info {
    width: 100%;
    height: auto;
    padding: 5px 30px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.flight-card .row-all-info .btn-box {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0px 15px;
    padding: 0px 5px;
}

.flight-card .row-price-flight h4 {
    width: 100%;
    height: auto;
    font-size: 25px;
    margin: 5px 0px;
    font-weight: bold;
}

.flight-card .row-price-flight h5 {
    width: 100%;
    height: auto;
    font-size: 20px;
    margin: 5px 0px;
    font-weight: bold;
}

.text-pax {
    font-size: 15px;
    font-weight: 500;
}

.flight-card .row-price-flight h6 {
    width: 100%;
    height: auto;
    font-size: 18px;
    margin: 5px 0px;
    font-weight: bold;
}

.flight-card .booking-flight {
    width: 100%;
    padding: 10px 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    /*border: 1px solid rgb(217 81 86);*/
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}

.flight-card .booking-flight .flight-details {
    height: 100%;
    /*padding: 15px;*/
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.flight-card .booking-flight .flight-details img {
    width: 100px;
    align-items: center;
    display: flex;
}

.flight-card .booking-flight h1 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight h2 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight h3 {
    margin: 5px 0px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight h4 {
    margin: 5px 0px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight h5 {
    margin: 5px 0px;
    font-size: 20px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight h6 {
    margin: 3px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.flight-card .booking-flight p {
    font-size: small;
    display: block;
}

.flight-card .booking-flight .btn-booking-details {
    font-size: smaller;
    width: 100%;
    margin: 5px 0px;
    padding: 5px 10px;
    color: #fff;
    border: 1px solid var(--theme-primary);
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.flight-card .booking-flight .btn-booking-details:hover {
    color: #fff;
    background-color: #db575c;
}

.flight-card .row-promo-code {
    width: 100%;
    height: auto;
    padding: 5px 0px;
    align-items: center;
    display: flex;
}

.flight-card .row-promo-code h4 {
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.flight-card .row-promo-code h5 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.flight-card .row-promo-code h6 {
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.flight-card .row-promo-code .booking-title {
    width: 100%;
    height: auto;
    display: flex;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.flight-card .row-flight-routes {
    width: 100%;
    height: auto;
    padding: 5px 0px;
}

.flight-card .row-flight-routes h3 {
    width: 100%;
    height: auto;
    font-size: x-large;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.flight-card .row-flight-routes h3 {
    width: 100%;
    height: auto;
    font-size: larger;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.flight-card .row-flight-routes h4 {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    /*margin: 25px 0px;*/
    text-align: left;
}

.flight-card .row-flight-routes h5 {
    width: 100%;
    height: auto;
    font-size: medium;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.flight-card .row-promo-code .booking-total-price {
    width: 100%;
    height: auto;
    font-size: larger;
    font-weight: 700;
    color: var(--theme-primary);
    text-align: right;
}

.flight-card .row-promo-code .booking-total-price span {
    width: 100%;
    height: auto;
    font-size: x-large;
    font-weight: 700;
    color: var(--theme-primary);
    text-align: right;
}

.flight-card .row-promo-code .booking-total-price .includetax {
    font-size: small;
    font-weight: 400;
    color: #333333;
}

.flight-card .row-total-details {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
}

.flight-card .row-total-details h1 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    background-color: var(--theme-primary);
}

.flight-card .row-total-details h2 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    background-color: var(--theme-primary);
}

.flight-card .row-total-details h3 {
    margin: 5px 0px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .row-total-details h3 span {
    background-color: var(--theme-primary);
}

.flight-card .row-total-details h4 {
    margin: 5px 0px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .row-total-details h5 {
    margin: 5px 0px;
    font-size: 18px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .row-total-details h6 {
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: 400;
}

.flight-card .row-total-details p {
    font-size: 15px;
}

.flight-card .row-total-details .flight-desc-price {
    width: 100%;
    text-wrap: nowrap;
    margin: 5px 0px;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    text-align: right;
    justify-content: right;
    display: flex;
}

.flight-card .row-total-details .flight-desc-price p {
    font-size: 15px;
    font-weight: 400;
}

.flight-card .row-total-details .flight-desc-price span {
    font-size: 15px;
    color: var(--theme-primary);
}

.flight-card .row-total-details .flight-desc-price .includetax {
    width: 100%;
    font-size: small;
    font-weight: 400;
    color: #333333;
}

.flight-card .row-total-details .btn-change-flight {
    background-color: #fff;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    padding: 2px 20px;
    /* margin: 2px 25px; */
    font-size: small;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
}

.flight-card .row-total-details .btn-change-flight:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

.flight-card .row-total-details .btn-change-flight.active:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

.flight-card .row-promo-code input {
    text-transform: uppercase;
}

/* Flight Payment */
.flight-card .payment-flight {
    margin-top: 17px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.flight-card .payment-flight h1 {
    margin: 5px 0px;
    font-size: 60px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h2 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h3 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h4 {
    padding-left: 2px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h5 {
    padding-left: 2px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h6 {
    padding-left: 2px;
    font-size: 14px;
    display: block;
    font-weight: bold;
}

.flight-card .payment-flight h6 span {
    font-size: small;
    margin-right: 5px;
    padding: 2px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.flight-card .payment-flight p {
    font-size: small;
    display: block;
}

.flight-card .payment-flight .btn-depart-return {
    font-size: medium;
    width: 100%;
    margin: 2px 10px;
    padding: 2px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.flight-card .payment-flight .payment-flight-title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 5px 0px;
    text-align: left;
}

.flight-card .payment-flight .payment-flight-desc {
    width: 100%;
    height: auto;
    font-size: large;
    margin: 5px 15px;
    text-align: left;
}

.flight-card .payment-flight .payment-title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 5px 15px;
    text-align: left;
}

.flight-card .payment-flight .payment-airport {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 5px 15px;
    text-align: right;
}

/* Flight>> Card Info Desc */
.flight-card .bg-card-info {
    border-radius: 10px;
    margin-top: 15px;
    align-items: center;
    padding: 15px 15px;
    color: #333333;
    background-color: #f4f4f4;
}

.flight-card .bg-card-info h4 {
    font-size: 1.13em;
    display: block;
    font-weight: bold;
}

.flight-card .bg-card-info .card-changeplanes {
    margin: 12px 0px;
    padding: 5px 0px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--theme-primary);
    font-weight: 500;
    justify-content: center;
    align-items: center;
    display: flex;
    background: white;
}

.flight-card .bg-card-info .card-changeplanes i {
    height: auto;
    width: auto;
    margin: 2px 5px;
}

.flight-card .bg-card-info .card-changeplanes h5 {
    margin: 5px -8px;
    font-size: 18px;
    margin-left: 5px;
    display: block;
    font-weight: bold;
}

.flight-card .bg-card-info .card-changeplanes h6 {
    margin: 5px -8px;
    font-size: 15px;
    margin-left: 5px;
    display: block;
    font-weight: bold;
}

.flight-card .bg-card-info .card-changeplanes p {
    font-size: small;
}

.flight-card .bg-card-info h4 span {
    color: var(--theme-primary);
}

.flight-card .bg-card-info h5 {
    color: var(--theme-primary);
}

.flight-card .bg-card-info h5 span {
    color: var(--theme-primary);
}

.flight-card .bg-card-info p {
    font-size: small;
}

.flight-card .bg-card-info .flight-icon {
    width: 100%;
    height: auto;
    font-size: 13px;
}

.flight-card .bg-card-info .row-info {
    display: flex;
    flex-wrap: wrap;
}

.flight-card .row-info h2 {
    display: block;
    font-size: 50px;
    margin: 5px 0px;
    font-weight: bold;
}

.flight-card .row-info h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.flight-card .row-info h4 {
    margin: 5px -8px;
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.flight-card .row-info h5 {
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.flight-card .row-info h6 {
    margin: 5px -8px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.flight-card .bg-card-info .row-info i {
    height: auto;
    width: auto;
    margin: 2px 5px;
}

.info-title-desc-time {
    width: 50px;
}

.info-baggage-detail-myorder-flight {
    font-size: 13px;
}

.flight-card .bg-card-info .row-info img {
    height: 130px;
    margin: 2px 0px;
}

.img-maskapai-info {
    height: 20px;
    width: auto;
    padding-right: 5px;
}

.detail-include-maskapai {
    font-size: 20px;
}

.flight-card .bg-card-info .row-info .img-maskapai-info {
    height: 20px;
    width: auto;
}

.flight-card .bg-card-info .row-info .info-desc-flight {
    font-size: x-small;
    font-weight: bold;
}

.flight-card .bg-card-info .row-info .info-desc-flight span {
    height: 20px;
    width: auto;
}

.flight-card .bg-card-info .row-info .info-desc-flight-right {
    font-size: small;
}

.flight-card .bg-card-info .row-info .info-desc-flight-right span {
    font-size: small;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: underline;
}

.flight-card .row-info .info-detailtitle-flight {
    margin: 5px 0px;
    font-size: small;
    font-weight: bold;
    text-align: right;
}

.flight-card .row-info .info-detailtitle-flight span {
    margin: 5px 0px;
    font-size: small;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: underline;
}

.flight-card .row-info .info-detaildesc-flight-right {
    color: var(--theme-primary);
    margin: 5px 0px;
    font-size: small;
    font-weight: bold;
    text-align: right;
    justify-content: right;
    display: flex;
    text-decoration: underline;
}

.flight-card .row-info .info-detaildesc-flight-right span {
    margin: 5px 0px;
    font-size: small;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: underline;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flight-card .row-price-flight h5 {
        font-size: 15px;
    }
}

/**=====================
    GLOBAL FILTER
==========================**/

.filter-properties {
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-left: 1px;
    font-size: 16px;
}

.filter-properties i {
    font-size: 9px;
}

.filter-properties-mobile {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

.filter-properties-mobile i {
    font-size: 11px !important;
}

.card-filter .sortby {
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.sortby h4 {
    font-size: 1.13em;
    display: block;
    font-weight: bold;
}

.sortby h4 span {
    color: var(--theme-primary);
}

.sortby h5 {
    font-size: 0.93em;
    display: block;
    margin-top: 0.85em;
    margin-bottom: 0.85em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.sortby h5 span {
    color: var(--theme-primary);
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-filter .filter-properties h4 {
        font-size: 14px;
    }

    .sortby h4 {
        font-size: 14px;
        white-space: nowrap;
    }
}

.row-price h4 {
    width: 100%;
    display: block;
    font-size: 25px;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

.row-price h4 span {
    width: 100%;
    display: block;
    font-weight: bold;
    margin-left: 5px;
    font-size: 25px;
    color: var(--theme-primary);
}

.row-price h5 {
    width: 100%;
    display: block;
    font-size: 20px;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

.row-price h5 span {
    width: 100%;
    display: block;
    font-weight: bold;
    margin-left: 5px;
    font-size: 20px;
    color: var(--theme-primary);
}

.row-price h6 {
    font-size: 13px;
    margin-top: 2px;
    font-weight: 400;
}

.row-price h6 span {
    width: 100%;
    display: block;
    font-weight: bold;
    margin-left: 5px;
    font-size: 19px;
    font-weight: bold;
    color: var(--theme-primary);
}

.row-price p {
    font-size: small;
    display: block;
}

/**=====================
 TOURS STYLE CSS
==========================**/
.card-tours {
    margin-bottom: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    border: 1px solid #eeeeee !important;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.card-tours:hover {
    color: #444444;
}

.card-tours .img-tours {
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.card-tours .img-tours img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-tours .img-tours:hover img {
    height: auto;
    border-radius: 5px;
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04);
}

.card-tours .img-tours .badge {
    position: absolute;
    background-color: var(--theme-primary);
    bottom: -15px;
    right: 20px;
    padding: 6px 11px;
    font-size: 16px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 5px;
    font-weight: 500;
    z-index: 1;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-tours .card-tours-content {
    height: 250px;
}

.card-tours .card-body-tours {
    color: #333333;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0px 0px 10px 10px;
}

@media (max-width: 767px) {
    .card-tours .card-body-tours {
        min-height: auto;
    }
}

.card-tours .card-body-tours .avail-dates {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary);
}

.card-tours .card-body-tours .avail-dates h4 {
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .avail-dates h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .avail-dates h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .avail-dates p {
    font-size: small;
    display: block;
}

.card-tours .card-body-tours .tours-title {
    font-size: 22px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 2px;
    text-wrap: wrap;
}

.card-tours .card-body-tours .tours-title h4 {
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .tours-title h4 span {
    background-color: var(--theme-primary);
}

.card-tours .card-body-tours .tours-title h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-tours .card-body-tours .tours-title h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .tours-title p {
    font-size: small;
    display: block;
}

.card-tours .card-body-tours .tour-destination {
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    color: #5d646d;
    margin: 0px 0px 7px 0px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;
}

.card-tours .card-body-tours .card-price {
    margin-top: 10px;
    font-size: 15px;
}

.card-tours .card-body-tours .card-price h3 {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .card-price h3 span {
    background-color: var(--theme-primary);
}

.card-tours .card-body-tours .card-price h4 {
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.card-tours .card-body-tours .card-price h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .card-price span {
    background-color: var(--theme-primary);
}

.card-tours .card-body-tours .card-price h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.card-tours .card-body-tours .card-price p {
    font-size: small;
    display: block;
    color: rgb(51, 51, 51);
}

.icon-box {
    width: 100%;
    position: relative;
    z-index: 1;
}

.icon-layout-2 .info-content h6 {
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

.icon-layout-2 .info-content p {
    font-size: 11px;
}

.card-price .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: ruby;
}

/* CODE LAMA */

/**=====================
 CARD HOTEL
==========================**/

.popular-hotel {
    margin-top: 30px;
}
.card-hotel-wrapper {
    width: 100%;
    padding: 0px 5px;
}

.card-hotel .img-hotel {
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.card-hotel .img-hotel img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-hotel .img-hotel:hover img {
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04);
}

.card-hotel .img-hotel .badge {
    position: absolute;
    background-color: var(--theme-primary);
    bottom: -15px;
    right: 20px;
    padding: 6px 11px;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 5px;
    font-weight: 500;
    z-index: 1;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.card-hotel .card-hotel-content {
    height: 210px;
}

.card-hotel .card-body-hotel {
    color: #333333;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0px 0px 10px 10px;
}

@media (max-width: 767px) {
    .card-hotel .card-body-hotel {
        min-height: auto;
    }
}

.card-hotel .card-body-hotel .avail-dates {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary);
}

.card-hotel .card-body-hotel .avail-dates p {
    font-size: small;
    display: block;
}

.card-hotel .card-body-hotel .hotel-title {
    font-size: 22px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 2px;
    text-wrap: wrap;
}

.card-hotel .card-body-hotel .hotel-title h4 {
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.card-hotel .card-body-hotel .hotel-title h4 span {
    background-color: var(--theme-primary);
}

.card-hotel .card-body-hotel .hotel-title h5 {
    margin: 0px;
    font-size: 17px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-hotel .card-body-hotel .hotel-title h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.card-hotel .card-body-hotel .hotel-title p {
    font-size: small;
    display: block;
}

.card-hotel .card-body-hotel .tour-destination {
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: #5d646d;
    margin: 0px 0px 7px 0px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;
}

.card-hotel .card-body-hotel .card-price {
    margin-top: auto;
    font-size: 15px;
}

.card-hotel .card-body-hotel .card-price h3 {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.card-hotel .card-body-hotel .card-price h3 span {
    background-color: var(--theme-primary);
}

.card-hotel .card-body-hotel .card-price h4 {
    margin: 5px 0px;
    font-size: 17px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.card-hotel .card-body-hotel .card-price h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.card-hotel .card-body-hotel .card-price span {
    background-color: var(--theme-primary);
}

.card-hotel .card-body-hotel .card-price h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.card-hotel .card-body-hotel .card-price p {
    font-size: 10px;
    display: block;
    color: rgb(51, 51, 51);
}

.icon-box {
    width: 100%;
    position: relative;
    z-index: 1;
}

.icon-layout-2 .info-content h6 {
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
}

.icon-layout-2 .info-content p {
    font-size: 9px;
}

.card-price .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: ruby;
}

.desc-detail-tours {
    margin: 5px 15px;
    padding: 5px;
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.desc-detail-tours .tours-title {
    width: 100%;
    height: auto;
}

.desc-detail-tours .tours-title h1 {
    margin: 10px 0px;
    font-size: 28px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h2 {
    font-size: x-large;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h3 {
    margin: 0px -15px;
    font-size: larger;
    margin-top: 5px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h3 span {
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h4 {
    margin: 0px -15px;
    font-size: large;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h5 {
    margin: 0px -15px;
    font-size: medium;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-title h6 {
    width: max-content;
    font-size: small;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-tours .tours-desc {
    width: 100%;
    font-size: medium;
    display: block;
}

.desc-detail-tours .tours-desc i {
    color: var(--theme-primary);
    line-height: 38px;
    text-align: center;
}

.desc-detail-tours .tours-desc span {
    font-size: medium;
    color: var(--theme-primary);
    font-weight: bold;
}

.desc-detail-tours .tours-desc .subtitle {
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    color: #5d646d;
}

.desc-detail-tours .tours-desc .duration {
    font-size: 15px;
    font-weight: 500;
    color: #5d646d;
}

.desc-detail-tours .tours-desc p {
    font-size: 16px;
    line-height: 18px;
    color: #4e5561;
    display: block;
}

.desc-detail-tours .tours-desc2 {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: center;
    display: flex;
}

.desc-detail-tours .row-tours-desc {
    margin: -5px -22px;
    justify-content: center;
    display: flex;
}

.desc-detail-tours .tours-details {
    margin: 0px -20px;
    display: flex;
    flex-direction: initial;
    align-items: center;
}

.desc-detail-tours .tours-details .col-lg-2 {
    width: 100%;
    position: static;
}

.desc-detail-tours .tours-details .col-lg-10 {
    width: 100%;
    position: static;
}

.desc-detail-tours .tours-details .bg-image-tours {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.desc-detail-tours .tours-details .bg-image-tours img {
    width: 25px;
    align-items: center;
    display: flex;
}

.desc-detail-tours .tours-details h4 {
    width: max-content;
    margin-bottom: 2px;
    font-size: medium;
    display: block;
    font-weight: bold;
}

.desc-detail-tours .tours-details h5 {
    width: max-content;
    margin-bottom: 2px;
    font-size: small;
    display: block;
    font-weight: bold;
}

.desc-detail-tours .tours-details h6 {
    width: max-content;
    margin-bottom: 2px;
    font-size: smaller;
    display: block;
    font-weight: bold;
}

.desc-detail-tours .tours-details p {
    width: max-content;
    font-size: x-small;
    display: block;
}

/* date tours */
.card-tours-date-wrap {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    position: relative;
}

.desc-detail-tours .card-tours-date {
    padding: 0px 23px;
    margin: 5px 5px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #0d233e;
    border: 1px solid var(--theme-primary);
    text-align: center;
}

.desc-detail-tours .card-tours-date h5 {
    width: 100%;
    margin-bottom: -3px;
    font-size: medium;
    display: block;
    font-weight: bold;
}

.desc-detail-tours .card-tours-date p {
    font-weight: 500;
}

.card-tours-date:hover {
    border: 1px solid #fff;
    background-color: #fff8f8;
    color: #212529;
    border: 1px solid var(--theme-primary);
}

/* CODE BARU SEARCH TOURS */
.thumbnail-tours {
    width: 100%;
    height: 100%;
    border-radius: 10px 0px 0px 10px;
    object-fit: cover;
    padding: 7px;
}

.search-tours-details {
    margin: 10px 0px;
}

.search-tours-details h1 {
    color: var(--theme-primary);
    font-size: 20px;
    margin: 0px;
    text-wrap: wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-tours-details p {
    max-width: 700px;
    padding-right: 5px;
    font-size: 14px;
    text-wrap: wrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container-badges-search-tours {
    width: 100%;
    max-width: 700px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
/*   */

.scrolling-content {
    display: inline-flex;
}

/* Fade out effect di kanan */
.container-badges-search-tours::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
    pointer-events: none;
}

/* Animasi */
@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.badge-search-tours {
    color: white !important;
    margin-left: 5px;
}

.scroll-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: white;
    color: gray;
    border: none;
    border-radius: 50%;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.scroll-button:active {
    background-color: var(--theme-primary) !important;
    color: white;
    transform: translateY(-50%) scale(0.7);
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

.scroll-button.visible {
    display: flex;
}

@media (max-width: 767px) {
    .desc-detail-tours .tours-desc p {
        font-size: 12px;
        font-weight: 500;
    }

    .scroll-button {
        top: 53%;
        width: 35px;
        height: 35px;
    }
}

/* end date tours */

/* CODE BARU SEARCH CARS RENTAL RESULT */
.thumbnail-carrental {
    width: 100%;
    height: 100%;
    border-radius: 10px 0px 0px 10px;
    object-fit: cover;
    padding: 7px;
}

.search-carrental-details {
    margin: 10px 0px;
}

.search-carrental-details h1 {
    color: var(--theme-primary);
    font-size: 20px;
    margin: 0px;
    text-wrap: wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-carrental-details p {
    padding-right: 5px;
    font-size: 14px;
    text-wrap: wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-carrental-details-list {
    margin-top: 5px;
}

.search-carrental-details-list img {
    width: 25px;
}

.search-carrental-details-list span {
    font-size: 12px;
    line-height: 12px;
    color: #5d646d;
}

.search-carrental-details-list p {
    font-size: 13px;
    font-weight: bold;
    color: #111827;
}

.search-carrental-details-price {
    line-height: 15px;
}

.search-carrental-details-price h6 {
    font-size: 20px;
    color: #111827;
    font-weight: bold;
    margin: 0px;
    padding-right: 10px;
}

.search-carrental-details-price span {
    font-size: 10px;
    margin: 10px -9px 0px 0px;
}

.search-carrental-details-price p {
    font-size: 10px;
    text-align: right;
    margin-right: 11px;
}

.badge-search-carrental {
    color: white !important;
    margin-left: 5px;
}

.btn-search-carrental-details {
    padding: 7px 20px 0px 5px;
}

.btn-search-carrental-details h6 {
    font-size: 14px;
    color: var(--theme-primary);
}

.btn-search-carrental-details button {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
    border-color: var(--theme-primary);
    border-radius: 0px;
    transition: all 0.3s;
    font-size: 14px !important;
    padding: 10px 20px !important;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid var(--theme-primary);
    font-weight: 500;
}

.btn-search-carrental-details button:hover {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary);
}

.counter-image-tour {
    position: absolute;
    top: 90px;
    right: 40px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.blur {
    filter: blur(2px);
}

@media (min-width: 500px) and (max-width: 991px) {
    .counter-image-tour {
        top: 48px;
        right: 18px;
        font-size: 12px;
    }
}

@media (min-width: 991px) and (max-width: 1279px) {
    .counter-image-tour {
        top: 70px;
        right: 32px;
        font-size: 15px;
    }
}

.card-tours-date:focus {
    border: 1px solid #fff;
    background-color: var(--theme-primary);
    color: #fff;
}

.tours-card .card-body {
    padding: 20px 0px 0px 0px;
}

.tours-card .card-filters {
    padding: 20px 0px 0px 0px;
}

.thumbnail-details-tour1 {
    width: 100%;
    display: flex;
    -webkit-box-align: start;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.thumbnail-details-tour1 a {
    width: 100%;
    /* margin: 5px 0px; */
    height: auto;
    align-items: center;
    display: flex;
}

.thumbnail-details-tour1 img {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
    border-radius: 5px;
}

.thumbnail-details-tour2 {
    width: 100%;
    display: flex;
    -webkit-box-align: start;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.thumbnail-details-tour2 a {
    width: 100%;
    /* margin: 5px 0px; */
    height: auto;
    align-items: center;
    display: flex;
}

.thumbnail-details-tour2 img {
    width: 100%;
    margin: 5px 5px;
    height: auto;
    border-radius: 5px;
    align-items: center;
    display: flex;
}

.sidebar-about {
    width: 100%;
    /* margin: 5px 0px; */
    height: auto;
    align-items: center;
    display: flex;
}

.tab-content-details-tour {
    margin-top: 20px;
    width: 100%;
    align-items: center;
    background-color: #fff;
    border: 1px solid #eeeeee !important;
    border-radius: 10px;
}

.sticky-nav {
    position: sticky;
    top: 65px;
    background: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.border-sticky-nav {
    border: 1.5px solid var(--theme-primary);
    border-radius: 5px 5px 0px 0px;
}

@media (min-width: 320px) and (max-width: 767px) {
    .sticky-nav {
        top: 76px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .sticky-nav {
        top: 87px;
    }
}

.sticky-nav::-webkit-scrollbar {
    display: none;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
}

.nav-row {
    display: flex;
    border-radius: 5px 5px 0 0;
}

.nav-item {
    text-align: center;
}
.nav-item-right {
    flex: 1;
    display: flex;
}
.nav-item-left {
    width: 500px;
    padding-right: 12px;
    justify-content: end;
    display: flex;
}

.tab-link {
    color: #0d233e;
    text-decoration: none;
    padding: 10px 25px;
    display: block;
    transition: all 0.1s ease;
    font-weight: bold;
    font-size: 14px;
}

.tab-link:hover {
    color: black;
}

.tab-link.active {
    background-color: var(--theme-primary);
    color: white;
}

.content-section {
    border-bottom: 1px solid #f5f7fc;
}

.content-section b {
    font-size: 18px;
}

.content-section:last-child {
    border-bottom: none;
}

@media (max-width: 767px) {
    .desc-detail-tours .tours-title h1 {
        font-size: 20px;
    }

    .desc-detail-tours .tours-desc {
        font-size: 15px;
    }

    .desc-detail-tours .card-tours-date {
        font-size: 10px;
        padding: 7px 16px;
        line-height: 12px;
        border-radius: 5px;
    }

    .desc-detail-tours .card-tours-date h5 {
        font-size: 12px;
        margin: 0px;
    }

    .row-details-tours .start-from h4 span {
        font-size: 12px;
    }

    .tab-link {
        padding: 8px 25px;
        font-size: 14px;
    }

    .desc-detail-tours .tours-title {
        margin: 0px;
    }

    .desc-detail-tours .tours-title h2 {
        font-size: 16px;
    }
}

/* end tab details tour */

/* Dummy Detail Tour Content */
.tab-content-details-tour h1 {
    margin-top: 20px;
    font-weight: 500;
    color: #0d233e;
    font-size: 28px;
}

#abouttours p,
#completefacilities p,
#terms p {
    margin-bottom: 30px;
}

#terms h5 {
    padding-top: 10px;
    font-weight: 600;
}

#terms ul {
    list-style-type: disc;
    margin-left: 20px;
}

#terms ul li {
    margin-top: 10px;
    color: #5d646d;
}

/* itenery */

.itinerary-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    counter-reset: step-counter;
    color: #71747d;
    font-weight: 500;
}

.itinerary-list li {
    list-style-type: none;
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    counter-increment: step-counter;
}

.itinerary-list li::before {
    content: counter(step-counter);
    position: absolute;
    list-style-type: none;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: var(--theme-primary);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
}

.itinerary-list li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 20px;
    width: 2px;
    height: calc(100% + 10px);
    background-color: #ccc;
}

.itinerary-list li:last-child::after {
    display: none;
}

.itinerary-list h3 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #0d233e;
}

.itinerary-list p {
    margin: 0;
    font-size: 14px;
    color: #5d646d;
}

@media (max-width: 767px) {
    .itinerary-list h3 {
        font-weight: 600;
    }

    .tab-content-details-tour h1 {
        font-size: 24px;
    }

    .itinerary-list p {
        line-height: 20px;
    }
}

/* end itenery */

.row-header-tours {
    margin: 5px 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}

.media-left img {
    width: 400px;
}

.desc-detail-tours .tours-ratings {
    margin: 2px 15px;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.desc-detail-tours .tours-mid-desc {
    margin: 15px 15px;
    font-size: medium;
    display: block;
}

.desc-detail-tours .tours-mid-desc p {
    margin: 15px 15px;
    font-size: medium;
    display: block;
}

.desc-detail-tours .tours-mid-desc span {
    margin: 15px 15px;
    font-size: medium;
    display: block;
}

.desc-detail-tours .tours-ratings span {
    margin-bottom: 5px;
}

.icon-rating {
    width: 22px;
    height: auto;
    margin-top: 1px;
    margin-bottom: 6px;
}

.row-details-tours {
    margin: 25px 15px 10px 0px;
    align-items: center;
    text-align: center;
    display: flex;
}

.row-details-tours .start-from {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.row-details-tours .bookingnow {
    width: max-content;
    justify-content: right;
    align-items: center;
    display: flex;
}

.row-details-tours .start-from h4 {
    margin-left: 5px;
    font-size: 25px;
    color: var(--theme-primary);
    font-weight: bold;
}

.row-details-tours .start-from span {
    font-weight: 500;
    margin-bottom: 5px;
}

/* Toogle switch */
.tours-card .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.tours-card .row-toogle-switch {
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.tours-card .switch input {
    display: none;
}

.tours-card .switch input:checked + .switch-state {
    background-color: #ca2626;
}

.tours-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.tours-card .switch input:checked + .switch-state:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

.tours-card .switch-state:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
}

.tours-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4a4a4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.tours-card .switch-sm .switch {
    width: 25px;
    height: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.tours-card .switch-sm.icon-state .switch .switch-state:after {
    top: 4px;
    left: 4px;
    font-size: 8px;
}

.tours-card .switch-sm.icon-state .switch input:checked + .switch-state:after {
    left: 13px;
    top: 4px;
}

.tours-card .switch-sm .switch .switch-state:before {
    height: 8px;
    width: 8px;
    left: 4px;
    bottom: 4px;
}

.tours-card .switch-sm input:checked + .switch-state:before {
    left: -13px;
}

/* START */
.tours-card-wrap {
    margin: 15px;
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.tours-card-wrap .card-tours-date {
    border: 1px solid rgba(128, 137, 150, 0.1);
    padding: 10px 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.tours-card-wrap .card-tours-date:hover {
    border: 1px solid #fff;
    background-color: var(--theme-primary);
    color: #fff;
}

.tours-card-wrap .card-tours-date h3 {
    width: 100%;
    margin: 4px 0px;
    font-size: larger;
    display: block;
    font-weight: bold;
}

.tours-card-wrap .card-tours-date h4 {
    width: 100%;
    margin: 4px 0px;
    font-size: large;
    display: block;
    font-weight: bold;
}

.tours-card-wrap .card-tours-date h5 {
    width: 100%;
    margin: 4px 0px;
    font-size: medium;
    display: block;
    font-weight: bold;
    text-decoration: underline;
    color: #d39093;
    font-weight: 400;
}

.tours-card-wrap .card-tours-date h5 i {
    margin-left: 10px;
}

.tours-card-wrap .card-tours-date h5:hover {
    width: 100%;
    margin: 4px 0px;
    font-size: medium;
    display: block;
    font-weight: bold;
    color: white;
}

.tours-card-wrap .card-tours-date p:hover {
    width: max-content;
    display: block;
    color: white;
}

.tours-card-wrap .card-tours-date .btn-text {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 15px;
}

.tours-card {
    align-items: center;
    padding: 15px 15px;
    margin: 10px 0px;
    border-radius: 10px;
    border: 1px solid rgba(128, 137, 150, 0.2);
    background-color: #fff;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}

.tours-card .row h6 {
    width: 100%;
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.tours-card .row h6 span {
    width: 100%;
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: 400;
}

.tours-card .row p {
    width: 100%;
    font-size: small;
    display: block;
}

.tours-card .row-total-details h1 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    background-color: var(--theme-primary);
}

.tours-card .row-total-details h2 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    background-color: var(--theme-primary);
}

.tours-card .row-total-details h3 {
    margin: 5px 0px;
    font-size: 34px;
    margin: 5px 0px;
    display: block;
}

.tours-card .row-total-details h3 span {
    background-color: var(--theme-primary);
}

.tours-card .row-total-details h4 {
    margin: 5px 0px;
    font-size: 27px;
    margin: 5px 0px;
    display: block;
}

.tours-card .row-total-details h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: 400;
}

.tours-card .row-total-details h6 {
    margin: 5px 0px;
    font-size: 17px;
    display: block;
    font-weight: 400;
}

.tours-card .row-total-details h6 span {
    font-weight: bold;
}

.tours-card .row-total-details p {
    font-size: small;
    display: block;
}

.tours-card .row-total-details .tours-desc-price {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
    text-align: right;
}

.tours-card .btn-verify {
    width: 100%;
    margin-bottom: 1rem;
    padding: 7px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.tours-card .row-promo-code .btn-verify {
    width: 100%;
    margin-bottom: 1rem;
    padding: 7px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.tours-card .title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 15px 10px;
    text-align: left;
}

.tours-card .form-content {
    padding: 20px;
}

.tours-card .form-content .label-text {
    font-size: large;
    font-weight: 600;
    color: #333333;
}

.tours-card .row-payment {
    width: 100%;
    align-items: center;
    display: flex;
}

.tours-card .row-norek {
    width: 100%;
    background-color: #ebebeb;
    align-items: center;
    display: flex;
    margin: 20px 0px;
}

.tours-card .row-norek i {
    padding: 15px 25px;
}

.tours-card .row-norek i:hover {
    padding: 15px 25px;
    color: var(--theme-primary);
}

.tours-card .row-norek .label-norek {
    font-size: larger;
    align-items: center;
    padding: 15px 25px;
    font-weight: 500;
}

.tours-card .row-norek .label-norek span {
    width: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.tours-card .label-text {
    width: 100%;
    height: auto;
    font-size: 16px;
    margin: 10px 0px;
    color: #333333;
}

.tours-card .time-out {
    width: 100%;
    height: auto;
    font-weight: bold;
    font-size: 16px;
    color: #bc3737;
    justify-content: right;
    align-items: center;
    display: flex;
}

.tours-card .card-body {
    padding: 10px 0px 0px 0px;
}

.tours-card .card-body img {
    margin-bottom: 8px;
}

.tours-card .card-price {
    padding-top: 12px;
}

.tours-card .row {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px 0px;
}

.tours-card .row-addons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tours-card .row .profile-card-img {
    height: 60px;
    width: 60px;
    background-color: #fff;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    padding: 10px;
    border-radius: 10px;
    justify-content: center;
    display: flex;
}

.tours-card .row .profile-card-img img {
    width: 100%;
}

.tours-card .row .profile-title-login {
    text-align: left;
    display: flex;
}

.tours-card .row .profile-title-login h3 {
    font-size: 1.37em;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.tours-card .row .profile-title-login h4 {
    font-size: 1.13em;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.tours-card .row .profile-title-login h5 {
    font-size: 0.93em;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.tours-card .row .profile-desc {
    text-align: left;
    display: flex;
}

.tours-card .row .profile-desc p {
    font-size: medium;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

.tours-card .title-addone {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
    color: var(--theme-primary);
}

.tours-card .desc-addone {
    width: 100%;
    height: auto;
    margin: 0px 20px;
    font-size: medium;
    text-align: left;
}

.tours-card .desc-payment-method {
    width: 100%;
    height: auto;
    margin: 0px 20px;
    font-size: medium;
    text-align: left;
}

.tours-card .desc-addone li {
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    font-family: "Roboto", sans-serif;
    color: #5d646d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tours-card .tours {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.tours-card .tours .tours-details img {
    width: 60px;
    height: 100%;
    align-items: center;
    display: flex;
}

.tours-card .card-tours-img {
    width: 100%;
    text-align: center;
}

.tours-card .tours-img img {
    width: -webkit-fill-available;
}

.tours-card .title-tours {
    width: 100%;
    height: auto;
    font-size: small;
    font-weight: bold;
}

.tours-card .type-of-plane {
    font-size: x-small;
    width: 100%;
}

.tours-card .no-tours {
    font-size: x-small;
    width: 100%;
}

.tours-card .row-facility {
    padding: 0px 5px;
    display: flex;
}

.tours-card .row-facility img {
    width: 22px;
    height: auto;
    margin-right: 5px;
    margin-bottom: 8px;
}

.tours-card .tours-icon img {
    width: inherit;
}

.tours-card .row-price-tours {
    width: 100%;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.tours-card .row-all-info {
    width: 100%;
    height: auto;
    padding: 5px 30px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.tours-card .row-all-info .btn-box {
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0px 15px;
    padding: 0px 5px;
}

.tours-card .row-price-tours h3 {
    width: 100%;
    height: auto;
    font-size: 28px;
    font-weight: 600;
    margin: 30px 0px;
}

.tours-card .booking-tours {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
}

.tours-card .booking-tours .tours-details {
    width: 100%;
    height: auto;
    padding: 5px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.tours-card .booking-tours .tours-details img {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
}

.tours-card .booking-tours h1 {
    margin: 5px 0px;
    font-size: 60px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours h2 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours h3 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours h4 {
    margin: 5px 0px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours h5 {
    margin: 5px 0px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours h6 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.tours-card .booking-tours p {
    font-size: small;
    display: block;
}

.tours-card .booking-tours .tours-details {
    height: 100%;
    padding: 5px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.tours-card .booking-tours .btn-booking-details {
    font-size: x-small;
    width: 100%;
    margin: 2px 0px;
    padding: 2px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary);
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.tours-card .row-promo-code {
    width: 100%;
    height: auto;
    padding: 5px 0px;
    margin: 10px 0px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.tours-card .row-promo-code .booking-title {
    width: 100%;
    height: auto;
    display: flex;
}

.tours-card .row-tours-routes {
    width: 100%;
    height: auto;
    padding: 5px 0px;
    justify-content: center;
    text-align: left;
    display: flex;
}

.tours-card .row-tours-routes h3 {
    width: 100%;
    height: auto;
    font-size: x-large;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.tours-card .row-tours-routes h3 {
    width: 100%;
    height: auto;
    font-size: larger;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.tours-card .row-tours-routes h4 {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.tours-card .row-tours-routes h5 {
    width: 100%;
    height: auto;
    font-size: medium;
    font-weight: 600;
    margin: 25px 0px;
    text-align: left;
}

.tours-card .row-promo-code .booking-total-price {
    width: 100%;
    height: auto;
    font-size: x-large;
    font-weight: 700;
    color: var(--theme-primary);
    text-align: right;
}

.tours-card .row-promo-code .booking-total-price span {
    width: 100%;
    height: auto;
    font-size: x-small;
    font-weight: 400;
    color: #333333;
    text-align: right;
}

.tours-card .row-total-details {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
}

.tours-card .row-total-details .btn-change-tours {
    background-color: #fff;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    padding: 2px 10px;
    margin: 2px 12px;
    font-size: small;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
}

.tours-card .row-total-details .btn-change-tours:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

.tours-card .row-total-details .btn-change-tours.active:hover {
    color: #fff;
    background-color: var(--theme-primary);
}

.tours-card .row-promo-code input {
    text-transform: uppercase;
}

/* tours Payment */
.tours-card .payment-tours {
    margin: 0px 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tours-card .payment-tours h1 {
    margin: 5px 0px;
    font-size: 60px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h2 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h3 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h4 {
    margin: 5px 0px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h5 {
    margin: 5px 0px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h6 {
    margin: 5px 5px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.tours-card .payment-tours h6 span {
    font-size: medium;
    width: 100%;
    margin: 5px 0px;
    padding: 2px 15px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.tours-card .payment-tours p {
    font-size: small;
    display: block;
}

.tours-card .payment-tours .btn-depart-return {
    font-size: medium;
    width: 100%;
    margin: 2px 10px;
    padding: 2px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.tours-card .payment-tours .payment-tours-title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 5px 0px;
    text-align: left;
}

.tours-card .payment-tours .payment-tours-desc {
    width: 100%;
    height: auto;
    font-size: large;
    margin: 5px 15px;
    text-align: left;
}

.tours-card .payment-tours .payment-title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 5px 15px;
    text-align: left;
}

/* tours>> Card Info Desc */
.tours-card .bg-card-info {
    border-radius: 10px;
    margin-top: 15px;
    align-items: center;
    padding: 15px 15px;
    color: #333333;
    background-color: #f4f4f4;
}

.tours-card .bg-card-info h4 {
    font-size: 1.13em;
    display: block;
    font-weight: bold;
}

.tours-card .bg-card-info h4 span {
    color: var(--theme-primary);
}

.tours-card .bg-card-info h5 {
    font-size: 0.93em;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.tours-card .bg-card-info h5 span {
    color: var(--theme-primary);
}

.tours-card .bg-card-info p {
    font-size: small;
}

.tours-card .bg-card-info .tours-icon {
    width: 100%;
    height: auto;
    font-size: 13px;
}

.tours-card .bg-card-info .row-info {
    display: flex;
}

.tours-card .bg-card-info .row-info i {
    height: 40px;
    width: auto;
    margin: 2px 5px;
    color: var(--theme-primary);
}

.tours-card .bg-card-info .row-info img {
    height: 40px;
    width: auto;
    margin: 2px 0px;
}

.tours-card .bg-card-info .row-info .img-maskapai-info {
    height: 20px;
    width: auto;
}

.tours-card .bg-card-info .row-info .info-desc-tours {
    font-size: x-small;
    font-weight: bold;
}

.tours-card .bg-card-info .row-info .info-desc-tours span {
    height: 20px;
    width: auto;
}

.tours-card .bg-card-info .row-info .info-desc-tours-right {
    font-size: small;
}

.tours-card .bg-card-info .row-info .info-desc-tours-right span {
    font-size: small;
    font-weight: bold;
    margin-left: 10px;
    text-decoration: underline;
}

.tours-time {
    border-top: 1px solid rgba(128, 137, 150, 0.1);
}

.tours-time-item {
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
    padding-top: 15px;
    padding-bottom: 15px;
}

.tours-time-item .la {
    color: #ca262c;
    font-size: 26px;
}

/*======== addon-search-tours ========*/
.addon-search-tours {
    width: 100%;
    padding: 0px 0px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.addon-search-tours .row-search-tours img {
    width: 55%;
    webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -webkit-transition: all 0.3s;
}

/*======= END TOURS CARD ========*/

/**=====================
 CARS STYLE CSS
==========================**/

.thumbnail-carsrentals {
    width: 100%;
    display: flex;
    -webkit-box-align: start;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.thumbnail-carsrentals img {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals {
    margin: 10px 0px;
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.desc-detail-carsrentals .carsrentals-title {
    width: 100%;
    margin: 0px 10px;
    height: auto;
}

.desc-detail-carsrentals .carsrentals-title h1 {
    font-size: xx-large;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h2 {
    font-size: x-large;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h3 {
    margin: 0px -15px;
    font-size: larger;
    margin-top: 5px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h3 span {
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h4 {
    font-size: large;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h5 {
    font-size: medium;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-title h6 {
    width: max-content;
    font-size: small;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals .carsrentals-desc {
    width: 100%;
    margin: 0px 10px;
    font-size: medium;
    display: block;
}

.desc-detail-carsrentals .carsrentals-desc i {
    color: var(--theme-primary);
    margin: 5px;
    line-height: 38px;
    text-align: center;
}

.desc-detail-carsrentals .carsrentals-desc span {
    margin: 0px 5px;
    font-size: medium;
    color: var(--theme-primary);
    font-weight: bold;
}

.desc-detail-carsrentals .carsrentals-desc h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: 400;
}

.desc-detail-carsrentals .carsrentals-desc p {
    font-size: small;
    display: block;
}

.desc-detail-carsrentals .row-carsrentals-desc {
    margin: -5px -22px;
    justify-content: center;
    /* align-items: center; */
    display: flex;
}

.desc-detail-carsrentals .cars-details {
    margin: 0px -20px;
    display: flex;
    flex-direction: initial;
    align-items: center;
}

.desc-detail-carsrentals .cars-details .col-lg-2 {
    width: 100%;
    /* margin: 0px -10px; */
    position: static;
}

.desc-detail-carsrentals .cars-details .col-lg-10 {
    width: 100%;
    /* margin: 0px -5px; */
    position: static;
}

.desc-detail-carsrentals .cars-details .bg-image-cars {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals .cars-details .bg-image-cars img {
    width: 25px;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals .cars-details h4 {
    width: max-content;
    margin-bottom: 2px;
    font-size: medium;
    display: block;
    font-weight: bold;
}

.desc-detail-carsrentals .cars-details h5 {
    width: max-content;
    margin-bottom: 2px;
    font-size: small;
    display: block;
    font-weight: bold;
}

.desc-detail-carsrentals .cars-details h6 {
    width: max-content;
    margin-bottom: 2px;
    font-size: smaller;
    display: block;
    font-weight: bold;
}

.desc-detail-carsrentals .cars-details p {
    width: max-content;
    font-size: x-small;
    display: block;
}

.row-booking-cars {
    margin-top: 2px;
    margin-bottom: 6px;
    justify-content: right;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals2 {
    margin: 10px 0px;
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.desc-detail-carsrentals2 h1 {
    font-size: xx-large;
    margin: 10px 0px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h2 {
    font-size: x-large;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h3 {
    margin: 0px -15px;
    font-size: larger;
    margin-top: 5px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h3 span {
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h4 {
    font-size: large;
    margin-top: 3px;
    display: block;
    font-weight: bold;
}

.desc-detail-carsrentals2 h4 span {
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h5 {
    font-size: medium;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 h6 {
    width: max-content;
    font-size: small;
    margin-top: 3px;
    display: block;
    font-weight: bold;
    color: var(--theme-primary);
}

.desc-detail-carsrentals2 i {
    color: var(--theme-primary);
    margin: 5px;
    line-height: 38px;
    text-align: center;
}

.desc-detail-carsrentals2 span {
    margin: 0px 5px;
    font-size: medium;
    color: var(--theme-primary);
    font-weight: bold;
}

.desc-detail-carsrentals2 .cars-details2 {
    margin: 12px -20px;
    display: flex;
    flex-direction: initial;
    align-items: center;
}

.desc-detail-carsrentals2 .cars-details2 .bg-image-cars2 {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals2 .cars-details2 .bg-image-cars2 img {
    width: 40px;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals2 .cars-details2 h2 {
    width: max-content;
    font-size: xx-large;
    display: block;
    font-weight: 500;
}

.desc-detail-carsrentals2 .cars-details2 h3 {
    width: max-content;
    font-size: x-large;
    display: block;
    font-weight: 500;
}

.desc-detail-carsrentals2 .cars-details2 h4 {
    width: max-content;
    font-size: large;
    display: block;
    font-weight: 500;
}

.desc-detail-carsrentals2 .cars-details2 h5 {
    width: max-content;
    font-size: medium;
    display: block;
    font-weight: 500;
}

.desc-detail-carsrentals2 .cars-details2 h6 {
    width: max-content;
    font-size: small;
    display: block;
    font-weight: 500;
}

.desc-detail-carsrentals2 .cars-details2 p {
    width: max-content;
    font-size: medium;
    display: block;
}

.desc-detail-carsrentals2 .start-from {
    width: 70%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.desc-detail-carsrentals2 .start-from h4 {
    margin: 5px 0px;
    font-size: medium;
    display: block;
    font-weight: 400;
}

.desc-detail-carsrentals2 .start-from h4 span {
    margin: 0px 5px;
    font-size: xx-large;
    color: var(--theme-primary);
    font-weight: bold;
}

.desc-detail-cars2 {
    margin: 5px 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: grid;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.desc-detail-cars2 .cars2-mid-desc {
    margin: 15px 30px;
    font-size: medium;
    display: block;
}

.desc-detail-cars2 .cars2-mid-desc h3 {
    margin-bottom: 15px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.desc-detail-cars2 .cars2-mid-desc h3 span {
    background-color: var(--theme-primary);
}

.desc-detail-cars2 .cars2-mid-desc h4 {
    margin-bottom: 15px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.desc-detail-cars2 .cars2-mid-desc h5 {
    margin-bottom: 15px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.desc-detail-cars2 .cars2-mid-desc h6 {
    margin-bottom: 15px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.desc-detail-cars2 .cars2-mid-desc p {
    font-size: small;
    display: block;
}

.desc-detail-cars2 .cars2-mid-desc ul {
    margin-bottom: 5px;
}

.desc-detail-cars2 .cars2-mid-desc ul li {
    margin-bottom: 5px;
}
/* FIXME:Lanjut disini flight ganti cars rentals */

.cars-card {
    align-items: center;
    padding: 15px 15px;
    margin: 10px 0px;
    border-radius: 10px;
    border: 1px solid rgba(128, 137, 150, 0.2);
    background-color: #fff;
    box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
}

.cars-card .row {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px 5px;
}

.cars-card .title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 15px 10px;
    text-align: left;
}

.cars-card .label-text {
    width: 100%;
    height: auto;
    font-size: 16px;
    margin: 10px 0px;
    color: #333333;
}

.cars-card .row-payment {
    width: 100%;
    align-items: center;
    display: flex;
}

.cars-card .row-norek {
    width: 100%;
    background-color: #ebebeb;
    align-items: center;
    display: flex;
    margin: 20px 0px;
}

.cars-card .row-norek i {
    padding: 15px 25px;
}

.cars-card .row-norek i:hover {
    padding: 15px 25px;
    color: var(--theme-primary);
}

.cars-card .desc-payment-method {
    width: 100%;
    height: auto;
    margin: 0px 20px;
    font-size: medium;
    text-align: left;
}

.cars-card .desc-payment-method li {
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    font-family: "Roboto", sans-serif;
    color: #5d646d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cars-card .row-norek .label-norek {
    font-size: larger;
    align-items: center;
    padding: 15px 25px;
    font-weight: 500;
}

.cars-card .time-out {
    width: 100%;
    height: auto;
    font-weight: bold;
    font-size: 16px;
    color: #bc3737;
    justify-content: right;
    align-items: center;
    display: flex;
}

/* Toogle switch */
.cars-card .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.cars-card .row-toogle-switch {
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.cars-card .switch input {
    display: none;
}

.cars-card .switch input:checked + .switch-state {
    background-color: #ca2626;
}

.cars-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f4f4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.cars-card .switch input:checked + .switch-state:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

.cars-card .switch-state:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
}

.cars-card .switch-state {
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4a4a4;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.cars-card .switch-sm .switch {
    width: 25px;
    height: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.cars-card .switch-sm.icon-state .switch .switch-state:after {
    top: 4px;
    left: 4px;
    font-size: 8px;
}

.cars-card .switch-sm.icon-state .switch input:checked + .switch-state:after {
    left: 13px;
    top: 4px;
}

.cars-card .switch-sm .switch .switch-state:before {
    height: 8px;
    width: 8px;
    left: 4px;
    bottom: 4px;
}

.cars-card .switch-sm input:checked + .switch-state:before {
    left: -13px;
}

.cars-card .row-addons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.cars-card .title-addone {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
    color: var(--theme-primary);
}

.cars-card .row-promo-code {
    width: 100%;
    height: auto;
    padding: 5px 0px;
    margin: 10px 0px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.cars-card .row-promo-code h4 {
    margin: 5px 0px;
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.cars-card .row-promo-code h5 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.cars-card .row-promo-code h6 {
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.cars-card .row-promo-code .booking-total-price {
    width: 100%;
    height: auto;
    font-size: x-large;
    font-weight: 700;
    color: var(--theme-primary);
    text-align: right;
}

.cars-card .row-promo-code .booking-total-price span {
    width: 100%;
    height: auto;
    font-size: x-small;
    font-weight: 400;
    color: #333333;
    text-align: right;
}

.cars-card .booking-cars {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
}

.cars-card .booking-cars .cars-details {
    width: 100%;
    height: 50%;
    align-items: center;
    display: flex;
}

.cars-card .booking-cars .cars-details img {
    width: 100%;
    height: fit-content;
    align-items: center;
    display: flex;
}

.cars-card .booking-cars h3 {
    margin: 5px 0px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.cars-card .booking-cars h3 span {
    background-color: var(--theme-primary);
}

.cars-card .booking-cars h4 {
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.cars-card .booking-cars h5 {
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.cars-card .booking-cars h6 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.cars-card .booking-cars p {
    font-size: small;
    display: block;
}

.cars-card .row-total-details {
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
}

.cars-card .row-promo-code .booking-title {
    width: 100%;
    height: auto;
    display: flex;
}

.cars-card .btn-verify {
    width: 100%;
    margin-bottom: 1rem;
    padding: 7px 5px;
    color: #fff;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.cars-card .row-total-details h1 {
    margin: 5px 0px;
    font-size: 50px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    background-color: var(--theme-primary);
}

.cars-card .row-total-details h2 {
    margin: 5px 0px;
    font-size: 40px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
    background-color: var(--theme-primary);
}

.cars-card .row-total-details h3 {
    margin: 5px 0px;
    font-size: 30px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.cars-card .row-total-details h3 span {
    background-color: var(--theme-primary);
}

.cars-card .row-total-details h4 {
    margin: 5px 0px;
    font-size: 25px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.cars-card .row-total-details h5 {
    margin: 5px 0px;
    font-size: 20px;
    margin: 5px 0px;
    display: block;
    font-weight: bold;
}

.cars-card .row-total-details h6 {
    margin: 5px 8px;
    font-size: 15px;
    display: block;
    font-weight: 400;
}

.cars-card .row-total-details p {
    font-size: small;
    display: block;
}

.cars-card .row-total-details .cars-desc-price {
    width: 100%;
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
    text-align: right;
}

/*======= END CARS CARD ========*/

/* CONTACT US GLOBAL */
.contact-us {
    position: relative;
    border-radius: 10px;
    margin: 30px 0px 40px 0px;
    background-image: url(../images/index-flight/bg-promotion-b2b.png);
    background-size: cover;
    background-position: center;
    object-position: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.overlay-us {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 35, 62, 0.85);
    z-index: 1;
}

.contact-content-us {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 20px 40px;
    width: 100%;
}

.contact-content-us h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.title-contact-info h1 {
    margin-top: 50px;
    font-size: 30px;
}

.contact-content-us span {
    font-size: 17px;
    line-height: 20px;
    margin-bottom: 15px;
    color: #ffffff;
}

.contact-content-us a {
    display: inline-block;
    color: white;
    background-color: var(--theme-primary);
    padding: 7px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.contact-content-us a:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}
/* CONTACT US GLOBAL */

/* SIDEBAR GLOBAL */
.sidebar-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    width: 100%;
    max-width: 900px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: transform 0.2s;
    padding: 8px;
    border-radius: 50%;
}

.close-btn i {
    margin-top: 2px;
    font-size: 25px;
}

.close-btn:hover {
    color: #333;
    transform: rotate(90deg);
    background-color: #f5f5f5;
}

.header-detail {
    display: flex;
    flex-direction: column;
}
/* END SIDEBAR GLOBAL */

/* HEADER GLOBAL */
.header-career {
    background-color: var(--theme-primary);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 178px;
    color: white;
}

.header-career h1 {
    font-size: 48px;
    font-weight: 500;
}

.header-career span {
    font-size: 27px;
}

@media (min-width: 320px) and (max-width: 767px) {
    .sidebar-content {
        width: 100%;
        padding: 10px;
    }
    .header-career h1 {
        font-size: 32px;
    }

    .header-career span {
        font-size: 17px;
    }
    .contact-us{
        min-height: 210px;
    }
    .contact-content-us {
        padding: 0px 20px;
    }
    .contact-content-us h1 {
        font-size: 25px;
    }
}

/* END HEADER GLOBAL */

/*======= untuk flight,hotels,tours 
title-total-details-left & 
desc-top-total-details-right ======*/
.take-off .la {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.landing .la {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
}

/*====  deal-list ========*/
.deal-list {
    padding: 12px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    border: 1px solid rgba(128, 137, 150, 0.2);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.deal-list .title a {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.deal-list .title a:hover {
    color: #ca262c;
}

.deal-list:hover {
    border-color: #ca262c;
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
}

.btn-back-to-home {
    width: 100% !important;
    max-width: 300px !important;
    background-color: var(--theme-primary);
    color: #fff;
    font-weight: bolder;
    border-color: var(--theme-primary);
    border-radius: 0px;
    transition: all 0.3s;
    font-size: 15px;
    padding: 13px 0px;
    font-weight: 700;
    display: block;
    text-align: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 5px;
    border-color: var(--theme-primary) !important;
    border: 1px solid !important;
}

.btn-back-to-home i {
    margin-left: 2px;
}

.btn-back-to-home:hover {
    background-color: #fff;
    color: var(--theme-primary);
    font-weight: 700;
}

@media (max-width: 767px) {
    .btn-back-to-home {
        width: 100% !important;
        max-width: 600px !important;
    }
}

/*======= Payment-Card ========*/
.payment-card {
    text-align: center;
    padding: 15px 8px;
}

.payment-card .payment-body {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    margin: 15px 0px;
    padding: 15px 10px;
    background-color: #f5f5f5;
}

.payment-card .row {
    text-align: left;
}

.payment-card .row-center {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.payment-card .row .card-item {
    border-radius: 10px;
    padding: 15px 10px;
    /* border: 1px solid #eeeeee !important; */
    background-color: #f5f5f5;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    /* transition: all 0.3s; */
    /* position: relative; */
}

.payment-card .row .card-item .lbl-download-ticket {
    margin-bottom: 25px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #eeeeee !important;
    background-color: #f5f5f5;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}

.payment-card .row .card-item .lbl-download-result {
    margin: 5px 15px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
    font-size: large;
    text-decoration: underline;
    font-style: italic;
    text-decoration: underline;
    color: var(--theme-primary);
}

.payment-card .row .payment-icon {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px solid #eeeeee !important;
    background-color: #fff;
    position: relative;
}

.payment-card .row .payment-icon img {
    width: 30px;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.payment-card .row .payment-icon i {
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    color: var(--theme-primary);
    font-size: 20px;
}

.payment-card .row-order-detail {
    /* margin: 0px 5px;
        justify-content: center;*/
    display: flex;
}

.payment-card .row-order-detail .row-point {
    justify-content: center;
    align-items: center;
    display: flex;
}

.payment-card .row-order-detail .row-point img {
    width: auto;
    height: 20px;
    margin-right: 2px;
}

.payment-card .order-detail-result {
    margin: 3px 0px;
    width: 100%;
    height: auto;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .payment-card .order-detail-result {
        font-size: 14px;
        text-wrap: wrap;
    }
}

.payment-card .title-booking-flight {
    font-size: large;
    font-weight: bold;
    margin-bottom: 10px;
}

.payment-card .row-order-detail .title-order-detail {
    text-wrap: nowrap;
    margin: 3px 0px;
    width: 100%;
    height: auto;
    font-size: 15px;
    color: #333333;
    font-family: "Roboto", sans-serif;
}

.btn-apply-filter {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
}

@media only screen and (min-width: 20px) and (max-width: 376px) {
    .payment-card .row-order-detail .title-order-detail {
        font-size: 14px;
    }
}

.payment-card .row-order-detail .title-order-detail .invoice-detail {
    margin: 0px 3px;
}

.payment-card .row-order-detail .title-order-detail .filter-cards-view {
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px 0px;
}

.payment-card .row-booking-flight {
    width: 100%;
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.payment-card .title {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    margin: 25px 20px;
    text-align: left;
}

.payment-card .desc {
    width: 100%;
    height: auto;
    font-size: medium;
    font-weight: 600;
    margin: 25px 20px;
    text-align: left;
}

.payment-card .payment-img {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
}

.payment-card .payment-img img {
    width: 150px;
    height: 150px;
}

.payment-card h1 {
    font-size: 65px;
    display: block;
    margin: 5px 0px;
    font-weight: bold;
    text-decoration: underline;
    color: var(--theme-primary);
}

.payment-card h2 {
    font-size: 45px;
    display: block;
    margin: 5px 0px;
    font-weight: bold;
    text-decoration: underline;
    color: var(--theme-primary);
}

.payment-card h3 {
    font-size: 35px;
    display: block;
    margin: 5px 0px;
    font-weight: bold;
    text-decoration: underline;
    color: var(--theme-primary);
}

.payment-card h4 {
    font-size: 23px;
    display: block;
    margin: 5px 0px;
    font-weight: bold;
}

.payment-card h4 span {
    color: var(--theme-primary);
}

.payment-card h5 {
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.payment-card h6 {
    font-size: 18px;
    display: block;
    margin: 5px 0px;
    font-weight: bold;
}

.payment-card h6 span {
    color: var(--theme-primary);
}

.payment-card p {
    font-size: 16px;
    display: block;
    font-weight: bold;
    line-height: 1.4;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .payment-card .payment-img img {
        width: 100px;
        height: 100px;
    }

    .payment-card h3 {
        font-size: 25px;
    }

    .payment-card h4 {
        font-size: 20px;
    }

    .payment-card p {
        font-size: 15px;
    }
}

.payment-card .lbl-download-result {
    margin: 0px 10px;
    text-align: right;
    justify-content: right;
    align-items: center;
    display: flex;
}

.payment-card .lbl-download-result h4 {
    margin: 5px 0px;
    font-size: 28px;
    display: block;
    font-weight: bold;
}

.payment-card .lbl-download-result h5 {
    margin: 5px 0px;
    font-size: 23px;
    font-weight: 500;
    color: var(--theme-primary);
}

.payment-card .lbl-download-result h6 {
    margin: 5px 0px;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    color: var(--theme-primary);
    text-decoration: underline;
}

.payment-card .lbl-download-result h6:hover {
    color: #99161b;
}

.payment-card .lbl-download-result p {
    font-size: small;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

.payment-card .lbl-download-result .txt-downloadinvoice {
    margin: 5px 0px;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    color: var(--theme-primary);
    text-decoration: underline;
}

/*========== end-payment-card =========== */

/*======= card-item-list ========*/
.card-item-list {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list {
        display: block;
    }
}

.card-item-list .card-img-carousel {
    width: 33%;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list .card-img-carousel {
        width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list .card-img-carousel {
        width: 100%;
    }
}

.card-item-list .card-img-carousel .card-img img {
    height: 310px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .card-item-list .card-img-carousel .card-img img {
        height: 358px;
    }

    .faq-accordion .faq-header {
        padding: 20px !important;
    }

    .faq-accordion .faq-header svg {
        right: 20px;
        top: 20px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list .card-img-carousel .card-img img {
        height: auto;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list .card-img-carousel .card-img img {
        height: auto;
    }
}

.card-item-list .card-img {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list .card-img {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list .card-img {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
}

.card-item-list .card-img img {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    object-fit: cover;
    height: 223px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list .card-img img {
        height: auto;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list .card-img img {
        height: auto;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
}

.card-item-list .card-body {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

/*==== card-item-list-2 ========*/
.card-item-list-2 .card-img {
    width: 100%;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card-item-list-2 .card-img img {
    width: 50px;
    height: auto;
}

.card-item-list-2 .card-body {
    padding-top: 0;
    padding-left: 20px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .card-item-list-2 .card-body {
        padding-left: 0;
        padding-top: 20px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .card-item-list-2 .card-body {
        padding-left: 0;
        padding-top: 20px;
    }
}

.recent-post-card:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*======= blog-single-card ========*/
.blog-single-card {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.blog-single-card .card-img img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.blog-single-card:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*======= profile-card ========*/
.profile-card {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
    border: 1px solid rgba(128, 137, 150, 0.1);
}

.profile-card:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*================== booking-detail-form ===================*/
.booking-detail-form .card-item {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

@media (max-width: 425px) {
    .booking-detail-form .card-item .list-items li span {
        width: 150px;
    }
}

/* room-card */
@media (max-width: 425px) {
    .room-card .card-attributes ul {
        flex-wrap: wrap;
    }
}

.room-card:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    z-index: 2;
}

/* card-img-carousel */
.card-img-carousel .owl-nav {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
}

.card-img-carousel .owl-dots {
    padding-top: 0 !important;
    position: absolute;
    bottom: 10px;
}

.card-img-carousel:hover .owl-nav {
    opacity: 1;
    visibility: visible;
}

/* gallery-card */
.gallery-card {
    overflow: hidden;
    margin-bottom: 30px;
}

.gallery-card img {
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.gallery-card img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* grid-masonry-item */
.grid-masonry-item img {
    object-fit: cover;
}

.grid-masonry-item-width-1 img {
    height: 350px;
}

.grid-masonry-item-width-2 img {
    height: 450px;
}

.grid-masonry-item-width-3 img {
    height: 500px;
}

.grid-masonry-item-width-4 img {
    height: 400px;
}

/*======= flip-box-item ==========*/
.flip-box {
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.flip-box .flip-img {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    width: 100%;
}

.flip-box .flip-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
    -webkit-transform: translateZ(70px) scale(0.9);
    -moz-transform: translateZ(70px) scale(0.9);
    -ms-transform: translateZ(70px) scale(0.9);
    -o-transform: translateZ(70px) scale(0.9);
    transform: translateZ(70px) scale(0.9);
    color: #fff;
}

.flip-box .flip-title {
    color: #fff;
    font-size: 20px;
}

.flip-box .flip-subtitle {
    font-weight: 600;
}

.flip-box:hover .flip-box-front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-front,
.flip-box-back {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -ms-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
}

.flip-box-front:after,
.flip-box-back:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #333333;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    opacity: 0.7;
}

.flip-box-front {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/*========= package-item =========*/
.package-card {
    background-color: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(127, 137, 150, 0.1);
}

.package-card .package-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.package-card .package-tooltip .package__tooltip {
    background-color: #ca262c;
    color: #fff;
    font-weight: 600;
    text-align: center;
    display: block;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    padding: 15px 0;
    font-size: 35px;
    position: relative;
    z-index: 1;
}

.package-card .package-title {
    margin-bottom: 30px;
    padding: 30px 0 35px 0;
    position: relative;
    background-color: #f5f7fc;
}

.package-card .package-title .package__title {
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #333333;
}

.package-card .package-title .package__price {
    font-size: 50px;
    font-weight: 700;
    color: var(--theme-primary);
}

.package-card .package-title .package__month {
    color: var(--theme-primary);
    font-size: 15px;
    padding-top: 3px;
}

.package-card .package-title .hero-svg {
    height: 40px;
    width: 101%;
    left: -1px;
    bottom: -1px;
}

.package-card .list-items li.text-disabled {
    color: rgba(128, 137, 150, 0.5);
    text-decoration: line-through;
}

.package-card .list-items li:last-child {
    margin-bottom: 0;
}

.package-card .btn-box {
    padding: 30px;
}

.package-card .btn-box .theme-btn {
    display: block;
    text-align: center;
}

/*========= package-card-active =========*/
.package-card-active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 3;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .package-card-active {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .package-card-active {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .package-card-active {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.package-card-active .package-title {
    background-color: #ca262c;
}

.package-card-active .package-title .package__price,
.package-card-active .package-title .package__month,
.package-card-active .package-title .package__title {
    color: #fff;
}

/*====================================================
    faq area
 ====================================================*/
.accordion-item .card-sidebar {
    -webkit-box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    -moz-box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.accordion-item .card-sidebar:not(:last-of-type),
.accordion-item .card-sidebar:not(:first-of-type) {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(128, 137, 150, 0.2);
}

.accordion-item .card {
    -webkit-box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    -moz-box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    box-shadow: 0 0 14px rgba(82, 85, 90, 0.01);
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.accordion-item .card:not(:last-of-type),
.accordion-item .card:not(:first-of-type) {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(128, 137, 150, 0.2);
}

.accordion-item .card-header {
    padding: 0;
    background-color: #fff;
    border-bottom: none;
    margin-bottom: 0;
    border-radius: 10px;
}

.accordion-item .card-header .btn {
    width: 100%;
    text-align: left;
    color: #333333;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px 20px;
}

@media (max-width: 375px) {
    .accordion-item .card-header .btn {
        font-size: 16px;
    }
}

.accordion-item .card-header .btn .la {
    width: 30px;
    height: 30px;
    line-height: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #333333;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0px 0px 0px 5px rgba(82, 85, 90, 0.1);
    box-shadow: 0px 0px 0px 5px rgba(82, 85, 90, 0.1);
    color: #fff;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 16px;
    display: none;
}

.accordion-item .card-header .btn[aria-expanded="false"] i.la-plus {
    display: block;
}

.accordion-item .card-header .btn[aria-expanded="true"] i.la-minus {
    display: block;
}

.accordion-item .card-body {
    padding: 0 20px 25px 20px;
    font-weight: 400;
}

.accordion-item .list-items li {
    color: #5d646d;
    margin-bottom: 4px;
    position: relative;
    padding-left: 15px;
    line-height: 24px;
    font-weight: 400;
}

.accordion-item .list-items li:last-child {
    margin-bottom: 0;
}

.accordion-item .list-items li::before {
    position: absolute;
    content: "";
    top: 10px;
    left: 0;
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(128, 137, 150, 0.5);
}

/*===== faq-item =======*/
.faq-item {
    margin-bottom: 30px;
}

.faq-item .icon-element {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    background-color: rgba(30, 125, 250, 0.1);
    color: var(--theme-primary);
}

.faq-item .toggle-menu li {
    margin-bottom: 10px;
}

.faq-item .toggle-menu li a {
    color: #333333;
}

/*===== main-search-wrapper ======*/
.main-search-wrapper {
    position: relative;
    z-index: 1;
}

/*===== search-fields-container ======*/
/*Search Hero-Box (GLOBAL)*/
.search-fields-container {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.search-indexbox-modul {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #eeeeee !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .search-fields-container {
        border-radius: 0px 0px 8px 8px;
    }

    .search-fields-container .pl-0 {
        padding-left: 15px !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .search-fields-container {
        border-radius: 0px 0px 8px 8px;
    }

    .search-fields-container .pl-0 {
        padding-left: 15px !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .search-fields-container {
        border-radius: 0px 0px 8px 8px;
    }

    .search-fields-container .pl-0 {
        padding-left: 15px !important;
    }
}

/*==== collapse-btn ======*/
.collapse-btn[aria-expanded="true"] {
    background-color: rgba(128, 137, 150, 0.1);
}

.collapse-btn[aria-expanded="true"] i::before {
    content: "\f106";
}

/*==== add-flight-btn ======*/
.add-flight-btn {
    background-color: rgba(40, 125, 250, 0.03);
    color: var(--theme-primary);
    border-color: rgba(40, 125, 250, 0.3);
    outline: none;
}

.add-flight-btn:focus {
    outline: none;
}

.add-flight-btn:hover {
    background-color: rgba(40, 125, 250, 0.1);
}

/*====== multi-flight-delete-wrap ========*/
.multi-flight-delete-wrap {
    display: none;
}

.search-fields-container-shape {
    margin-bottom: -10px;
    margin-top: 14px;
    position: relative;
}

.search-fields-container-shape::before,
.search-fields-container-shape::after {
    position: absolute;
    content: "";
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.08);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.08);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.08);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 100%;
    z-index: -1;
}

.search-fields-container-shape::before {
    left: 15px;
    bottom: -13px;
    width: calc(100% - 30px);
}

.search-fields-container-shape::after {
    left: 30px;
    width: calc(100% - 60px);
    bottom: -26px;
}

.search-fields-container-inner {
    position: relative;
    z-index: 1;
}

/*======== flight-area =========*/
@media (max-width: 575px) {
    .flight-area.padding-right-100px {
        padding-right: 0;
        padding-left: 0;
    }
}

/*======== room-type-content =========*/
.room-type-content {
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.room-type-content .image-box img {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.room-type-content .image-box a:hover img {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03);
}

.room-type-content .image-box a:hover .room-type-link {
    right: 30px;
}

/*======== room-type-link =========*/
.room-type-link {
    position: absolute;
    bottom: 30px;
    right: 50px;
    background-color: #fff;
    color: #333333;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 15px 30px;
    text-transform: uppercase;
    font-size: 17px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.room-type-link:hover {
    background-color: #ca262c;
    color: #fff;
}

/*======= dateorder-card-carousel ========*/
.dateorder-card-carousel .owl-stage-outer {
    overflow: inherit;
}

.dateorder-card-carousel
    .owl-stage-outer
    .owl-item:not(.active)
    .card-item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 1;
}

.owl-stage-outer .owl-item .active {
    margin: 0px;
}

.dateorder-card-carousel
    .owl-stage-outer
    .owl-item:not(.active)
    .card-item:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*======= dateorder-card-carousel-2 ========*/
.dateorder-card-carousel-2 .card-item {
    margin-bottom: 0;
}

.dateorder-card-carousel-2 .card-item .card-img .badge {
    top: 20px;
}

/*===== discount-area ======*/
.discount-area {
    margin-top: -100px;
}

/*===== discount-box ======*/
.discount-box {
    position: relative;
}

.discount-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
    opacity: 0.3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.company-logo,
.discount-content {
    position: absolute;
}

.discount-img img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .discount-img img {
        object-fit: cover;
        height: 250px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .discount-img img {
        object-fit: cover;
        height: 250px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .discount-img img {
        object-fit: cover;
        height: 250px;
    }
}

@media (max-width: 320px) {
    .discount-img img {
        height: 280px;
    }
}

.discount-content {
    top: 50%;
    left: 100px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .discount-content {
        left: 30px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .discount-content {
        left: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .discount-content {
        left: 30px;
    }
}

@media (max-width: 375px) {
    .discount-content {
        left: 20px;
    }
}

@media (max-width: 320px) {
    .discount-content {
        top: 20px;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .discount-content .section-heading .sec__title {
        font-size: 24px;
        line-height: 30px !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .discount-content .section-heading .sec__title {
        font-size: 24px;
        line-height: 30px !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .discount-content .section-heading .sec__title {
        font-size: 24px;
        line-height: 30px !important;
    }
}

/* company-logo */
.company-logo {
    bottom: 20px;
    right: 20px;
}

/* total-price */
.total-price input {
    border: none;
    background-color: transparent;
    font-weight: 700;
    font-size: 20px;
    color: #333333;
    width: 68px;
}

/* join-us-box */
.join-us-box .discount-content {
    left: 0;
    padding-right: 50px;
    padding-left: 50px;
    width: 100%;
}

/*====================================================
    team-card
 ====================================================*/
.team-card {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding-top: 20px;
    margin-bottom: 60px;
}

.team-card .card-img {
    width: 190px;
    height: 190px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 8px solid #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px;
}

.team-card .card-img img {
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.team-card .card-body {
    padding: 20px;
}

/*======= table-form ========*/
.table-form .table {
    margin-bottom: 0;
}

.table-form thead th {
    border: none;
    background-color: rgba(128, 137, 150, 0.1);
}

.table-form th {
    color: #333333;
}

.table-form th,
.table-form td {
    font-size: 15px;
    vertical-align: middle;
    border-top-color: rgba(128, 137, 150, 0.1);
}

.table-form td {
    text-wrap: nowrap;
    color: #5d646d;
}

.table-content img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-right: 10px;
}

.table-content .title {
    font-size: 15px;
}

.table-content .title.table-price {
    font-size: 19px;
}

/*======= product-content ========*/
.product-content img {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-right: 15px;
}

/*======= table-layout-2 ========*/
.table-layout-2 th,
.table-layout-2 td {
    border: none;
}

.table-layout-2 tbody tr:nth-child(even) {
    background-color: rgba(128, 137, 150, 0.03);
}

/*======= file upload ========*/
.file-upload-wrap {
    position: relative;
}

.file-upload-wrap .file-upload-input {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    border: 2px dashed rgba(128, 137, 150, 0.2);
    height: 120px;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 10rem 0 0 0;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.file-upload-wrap .file-upload-input:hover {
    border-color: rgba(128, 137, 150, 0.6);
    background-color: rgba(128, 137, 150, 0.04);
}

.file-upload-wrap .file-upload-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    line-height: 170px;
    text-align: center;
    font-size: 18px;
    color: rgba(128, 137, 150, 0.8);
}

.file-upload-wrap .MultiFile-list > .MultiFile-label {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(128, 137, 150, 0.06);
    display: inline-block;
    border: 2px solid rgba(128, 137, 150, 0.1);
    padding: 16px;
    position: relative;
    width: 100%;
}

.file-upload-wrap .MultiFile-list > .MultiFile-label + .MultiFile-label {
    margin-top: 20px;
}

.file-upload-wrap .MultiFile-list span.MultiFile-label {
    box-shadow: 0 0.2rem 0.7rem 0 rgba(0, 0, 0, 0.08);
    position: relative;
    text-align: center;
    display: inline-block;
    margin: 10px;
}

.file-upload-wrap .MultiFile-list .MultiFile-remove {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    color: #333333;
    width: 30px;
    height: 30px;
    text-align: center;
    top: -16px;
    right: -16px;
    z-index: 1;
}

.file-upload-wrap .MultiFile-list .MultiFile-remove:hover {
    color: #e1306c;
}

.file-upload-wrap .MultiFile-list .MultiFile-title {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 16px;
    bottom: 0;
    text-align: center;
    width: 100%;
    line-height: 24px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.file-upload-wrap .MultiFile-list .MultiFile-preview {
    max-width: 15rem !important;
    max-height: 15rem !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/*======== file-upload-wrap-2 =======*/
.file-upload-wrap-2 .file-upload-input {
    width: 185px;
    border: 1px solid rgba(128, 137, 150, 0.1);
    height: 30px;
    padding-top: 3rem;
    background-color: rgba(128, 137, 150, 0.04);
}

.file-upload-wrap-2 .file-upload-text {
    width: auto;
    left: 25px;
    line-height: 50px;
    font-size: 16px;
}

/*======== file-upload-wrap-3 =======*/
.file-upload-wrap-3 .file-upload-input {
    height: 70px;
    padding-top: 5rem;
}

.file-upload-wrap-3 .file-upload-text {
    line-height: 90px;
    font-size: 16px;
}

.resumre-wrap .MultiFile-list span.MultiFile-label {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

.resumre-wrap .MultiFile-list .MultiFile-title {
    position: inherit;
    background-color: transparent;
    color: #5d646d;
    padding: 0;
    bottom: auto;
    text-align: inherit;
    width: auto;
    line-height: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/*====================================================
   error-area
 ====================================================*/
.error-img svg {
    width: 100%;
}

@media (max-width: 480px) {
    .error-img svg {
        height: 200px;
    }
}

.error-img image {
    width: 100%;
}

@media (max-width: 480px) {
    .error-img image {
        height: 100%;
    }
}

/*=================== destination-btn-box ========================*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .btn--box.text-right {
        text-align: left !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .btn--box.text-right {
        text-align: left !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .btn--box.text-right {
        text-align: left !important;
    }
}

.rtl .f1 .f1-buttons {
    text-align: left;
}

.rtl .f1 .f1-steps .f1-step {
    float: right;
}

.rtl-btn,
.ltr-btn {
    position: fixed;
    top: 30%;
    right: -69px;
    z-index: 1024;
    background: #fff;
    color: #333333;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    padding: 5px 15px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-shadow: 0 15px 15px rgba(82, 85, 90, 0.2);
    -moz-box-shadow: 0 15px 15px rgba(82, 85, 90, 0.2);
    box-shadow: 0 15px 15px rgba(82, 85, 90, 0.2);
}

.rtl-btn:hover,
.ltr-btn:hover {
    color: #ca262c;
    right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .btn--box {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .btn--box {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .btn--box {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .about-content {
        margin-bottom: 50px;
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .about-content {
        margin-bottom: 50px;
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .about-content {
        margin-bottom: 50px;
        padding-right: 0 !important;
    }
}

.about-img-box::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 200px;
    top: -30px;
    right: -50px;
    background-image: url("../images/dot-shape.png");
    background-size: cover;
    z-index: -1;
}

/*===== icon-bg =======*/
.info-bg {
    z-index: 1;
    position: relative;
}

.info-bg::before {
    position: absolute;
    opacity: 0.2;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/color-bg.png");
    z-index: -1;
}

.info-area {
    position: relative;
}

.info-area .arrow-separator {
    position: absolute;
    top: -25px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.info-area2 {
    background-color: #fff;
    -webkit-box-shadow: 0 15px 15px rgba(82, 85, 90, 0.03);
    -moz-box-shadow: 0 15px 15px rgba(82, 85, 90, 0.03);
    box-shadow: 0 15px 15px rgba(82, 85, 90, 0.03);
}

/* dropdown-contain */
.dropdown-contain .dropdown-menu {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    border: none;
    width: 100%;
}

.dropdown-contain .dropdown-item:hover {
    background-color: transparent;
}

.extra-service-select {
    width: 100px;
}

/* dropdown-btn */
.dropdown-btn {
    cursor: pointer;
    display: block;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    padding: 9px 15px;
    color: #333333;
    border: 1px solid rgba(128, 137, 150, 0.2);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.dropdown-btn::after {
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    right: 15px;
}

.dropdown-btn:focus {
    border-color: #ca262c;
}

.dropdown-btn:hover {
    color: #333333;
}

/* dropdown--btn */
.dropdown--btn {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
    color: #5d646d;
    font-size: 16px;
}

.dropdown--btn::after {
    position: relative;
    top: 2px;
    right: auto;
    margin-left: 2px;
}

/* single-nav-sticky */
.single-nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
}

.single-nav-sticky + .single-content-box {
    padding-top: 150px;
}

/*======= single-tour-feature ========*/
.single-tour-feature:hover .icon-element {
    background-color: var(--theme-primary);
    color: #fff;
}

/*======= single-feature-icon ========*/
.single-feature-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: rgba(40, 125, 250, 0.1);
    color: var(--theme-primary);
    font-size: 22px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/*======= single-feature-titles ========*/
.single-feature-titles span {
    display: inherit;
    margin-top: -1px;
}

.single-feature-titles .list-items li {
    font-size: 13px;
    line-height: 20px;
}

/*======= single-content-nav ========*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .single-content-nav ul {
        white-space: nowrap;
        display: block;
        overflow-y: hidden;
        overflow-x: auto;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .single-content-nav ul {
        white-space: nowrap;
        display: block;
        overflow-y: hidden;
        overflow-x: auto;
    }
}

.single-content-nav ul::-webkit-scrollbar {
    height: 6px;
}

.single-content-nav ul::-webkit-scrollbar-track {
    background-color: rgba(128, 137, 150, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.single-content-nav ul::-webkit-scrollbar-thumb {
    background-color: rgba(128, 137, 150, 0.2);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.single-content-nav ul::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 137, 150, 0.4);
}

.single-content-nav ul li {
    display: inline-block;
}

.single-content-nav ul li a {
    display: block;
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding: 26px 20px;
    font-size: 15px;
    position: relative;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .single-content-nav ul li a {
        padding: 15px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .single-content-nav ul li a {
        padding: 15px;
    }
}

.single-content-nav ul li a::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) scale(0);
    -moz-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    -o-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
    width: 40px;
    height: 2px;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.single-content-nav ul li a:hover {
    color: var(--theme-primary);
}

.single-content-nav ul li a.active {
    color: var(--theme-primary);
}

.single-content-nav ul li a.active::before {
    background-color: var(--theme-primary);
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
}

/*======= cabin-type-item ========*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .cabin-type-item {
        display: block !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .cabin-type-item {
        display: block !important;
    }
}

.cabin-type-item .custom-checkbox {
    position: relative;
    top: 70px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .cabin-type-item .custom-checkbox {
        top: auto;
        margin-top: 15px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .cabin-type-item .custom-checkbox {
        top: auto;
        margin-top: 15px;
    }
}

.cabin-type-item .custom-checkbox label {
    color: #fff;
    background-color: var(--theme-primary);
    display: inline-block;
}

.cabin-type-item .custom-checkbox label:hover {
    background-color: #2273e5;
}

.cabin-type-item .custom-checkbox input[type="checkbox"]:not(:checked) + label,
.cabin-type-item .custom-checkbox input[type="checkbox"]:checked + label {
    padding-left: 35px;
}

.cabin-type-item
    .custom-checkbox
    input[type="checkbox"]:not(:checked)
    + label:before,
.cabin-type-item
    .custom-checkbox
    input[type="checkbox"]:checked
    + label:before {
    left: 10px;
    top: 8px;
    border: none;
}

.cabin-type-item
    .custom-checkbox
    input[type="checkbox"]:not(:checked)
    + label:after,
.cabin-type-item .custom-checkbox input[type="checkbox"]:checked + label:after {
    left: 13px;
}

.cabin-type-item
    .custom-checkbox
    input[type="checkbox"]:checked
    + label:before {
    background-color: #28d5a7;
}

/*======= seat-selection-item ========*/
.seat-selection-item .custom-checkbox {
    top: auto;
    margin-top: 15px;
}

/*======= cabin-type-img ========*/
.cabin-type-img {
    width: 170px;
    margin-right: 20px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .cabin-type-img {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .cabin-type-img {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.cabin-type-img img {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
}

/*======= cabin-type-detail ========*/
.cabin-type-detail {
    width: 620px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .cabin-type-detail {
        width: auto;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .cabin-type-detail {
        width: auto;
    }
}

/*======= cabin-price ========*/
.cabin-price {
    text-align: right;
    width: 200px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .cabin-price {
        width: auto;
        text-align: left !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .cabin-price {
        width: auto;
        text-align: left !important;
    }
}

/*======= cabin-type-detail ========*/
.cabin-type-detail .list-items li {
    margin-bottom: 0;
}

.cabin-type-detail .list-items li span {
    color: #333333;
    margin-right: 3px;
}

.cabin-type-detail p span {
    font-weight: 700;
}

.cabin-type-detail p .price-text {
    color: #ca262c;
    font-size: 20px;
}

/*======= single-content-item ========*/
@media (max-width: 375px) {
    .single-content-item .accordion-item .card-body {
        display: block !important;
    }
}

@media (max-width: 375px) {
    .single-content-item .accordion-item .card-body .flex-shrink-0.mr-4 {
        margin-right: 0 !important;
    }
}

.single-content-item .accordion-item .card-body img {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

@media (max-width: 375px) {
    .single-content-item .accordion-item .card-body img {
        margin-bottom: 20px;
    }
}

/*======= review-summary ========*/
.review-summary {
    border: 2px solid rgba(128, 137, 150, 0.1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px 20px 27px 20px;
    text-align: center;
}

.review-summary h2 {
    color: #ca262c;
    font-weight: 700;
    font-size: 55px;
}

.review-summary h2 span {
    font-size: 18px;
}

.review-summary p {
    font-size: 20px;
    color: #333333;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*======= action-btns ========*/
.action-btns {
    position: absolute;
    right: 20px;
    top: 20px;
}

@media (max-width: 320px) {
    .action-btns {
        position: inherit;
        top: auto;
        right: auto;
        padding: 0 20px 20px 20px;
    }
}

.action-btns .theme-btn {
    border: none;
}

.action-btns .theme-btn:nth-child(1) {
    background-color: #28d5a7;
    color: #fff;
}

@media (max-width: 320px) {
    .action-btns .theme-btn:nth-child(1) {
        margin-right: 0 !important;
        margin-bottom: 5px;
    }
}

.action-btns .theme-btn:nth-child(2) {
    background-color: #e1306c;
    color: #fff;
}

/*======= action-btns ========*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .profile-item .d-flex {
        display: block !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .profile-item .d-flex {
        display: block !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .profile-item .pr-5 {
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .profile-item .pr-5 {
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .profile-item .flex-grow-1.pr-5 {
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .profile-item .flex-grow-1.pr-5 {
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .profile-item .list-items {
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .profile-item .list-items {
        padding-right: 0 !important;
    }
}

/*===== traveler-form ======*/
@media (max-width: 1366px) {
    .traveler-form .col-lg-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .traveler-form .col-lg-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .traveler-form .col-lg-3 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1366px) {
    .traveler-form .col-lg-9 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*===== package-area ======*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .package-area .row.padding-top-60px {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .package-area .row.padding-top-60px {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .package-area .row.padding-top-60px {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .package-area .col-lg-4 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .package-area .col-lg-4 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .package-area .col-lg-4 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}

/*====================================================
    MAIN-HEADER BANNER : modern-slider & Hero-Box
 ====================================================*/
.main-banner {
    position: relative;
    width: 100%;
    z-index: 2;
    background-size: cover;
    background-position: center;
}

.section-tabs-banner {
    width: 100%;
    position: relative;
    z-index: 2;
    background-size: cover;
    background-position: center;
}

/* BANNER FLIGHT TAROK SINI */
/*MAIN BANNER FLIGHT*/
.main-banner .header-banner {
    height: max-content;
    width: inherit;
}

.main-banner .header-banner .img-index-flight {
    background-position: center center;
    height: 50vh;
    background-image: url(../images/img-slider/index-flight.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.main-banner .header-banner .flight-box,
.main-banner .header-banner .hotel-box {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: -130px;
    padding: 0px 10px 0px 10px;
}

@media only screen and (max-width: 885px) {
    .main-banner .header-banner .img-index-flight {
        height: 27vh;
    }

    .main-banner .header-banner .flight-box {
        position: static;
        padding: 0px;
    }
}

/*END MAIN BANNER FLIGHT*/
/* END BANNER FLIGHT */

/* BANNER HOTELS */
/*MAIN BANNER HOTELS*/
.main-banner .header-banner {
    height: max-content;
    width: inherit;
}

.main-banner .header-banner .hotels-box {
    position: absolute;
    left: 0;
    right: 0;
    /* width: 100%; */
    bottom: 0;
}
/*END MAIN BANNER HOTELS*/
/* END BANNER HOTELS */

/* BANNER TOURS */
/*MAIN BANNER TOURS*/

.text-content-header-tour {
    padding: 50px 50px 0px 50px;
}

.text-content-header-tour h1 {
    color: black;
    font-size: 100px;
    font-weight: bold;
    font-family: Serif, "Roboto", sans-serif !important;
}

.text-content-header-tour span {
    font-size: 18px;
}

.search-page-tour {
    margin-top: 70px;
    border: #fff;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

/* popular-destinations */
.badge-section-tour {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: start;
    margin: 15px auto;
}

/* .badge-section-tour span {
    background-color: #6c757d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
    width: 60px;
    height: 25px;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.badge-section-tour span:hover {
    background-color: white;
    color: #6c757d;
    transform: scale(1.05);
} */

.main-banner-cards {
    margin-top: 30px;
}

.title-section-tour {
    width: 70%;
    text-align: center;
    font-size: 30px;
    color: #333333;
    font-weight: 700;
    margin-top: 40px;
}

.container-cards {
    display: flex;
    gap: 10px;
    width: 100%;
}

.card-hover-tour {
    flex: 1;
    height: 500px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: flex-grow 0.3s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.card-hover-tour img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.card-hover-tour.active {
    flex-grow: 2.1;
}

.card-hover-tour:hover {
    flex-grow: 2.1;
    cursor: pointer;
}

.card-hover-tour.active img,
.card-hover-tour:hover img {
    transform: none;
}

.card-hover-tour div {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

.card-hover-tour span {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-hover-tour-mobile {
    margin-top: 15px;
    padding: 0px 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    height: 300px;
    width: 100% !important;
}

.card-hover-tour-mobile img {
    border-radius: 10px;
    height: 300px;
    width: 100% !important;
}

.card-hover-tour-mobile div {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

.card-hover-tour-mobile span {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Add a subtle gradient overlay to make text more readable */
.card-hover-tour::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
    pointer-events: none;
}

@media (max-width: 1440px) {
    .text-content-header-tour h1 {
        font-size: 60px;
    }
    .text-content-header-carrental h1 {
        font-size: 60px;
    }
}

@media (max-width: 1024px) {
    .text-content-header-tour h1 {
        font-size: 54px;
    }
    .search-page-tour {
        margin: 20px 0px 40px 0px;
        padding: 0px;
    }

    .text-content-header-carrental h1 {
        font-size: 50px;
    }

    .text-content-header-carrental h1 {
        font-size: 50px;
    }

    .badge-section-tour span {
        font-size: 12px;
        padding: 0px 12px;
    }
}
/*END MAIN BANNER TOURS*/
/* END BANNER TOURS */

/* BANNER CARS */
/*MAIN BANNER CARS*/
.main-banner .header-banner {
    height: max-content;
    width: inherit;
}

.main-banner .header-banner .img-index-cars {
    background-position: center center;
    height: 50vh;
    background-image: url(../images/img-slider/index-cars2.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.main-banner .header-banner .cars-box {
    position: absolute;
    left: 0;
    right: 0;
    /* width: 100%; */
    bottom: 0;
}
/*END MAIN BANNER CARS*/
/* END BANNER CARS */

/*====================================================
    main-header> modern-slider & Hero-Box
 ====================================================*/
/* ================= Slick =================== */
.blocks-box,
.slick-slider {
    margin: 0;
    padding: 0 !important;
}

.main-banner .slick-slide {
    float: left;
    padding: 0;
}

.main-banner .modern-slider .item .img-fill {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    object-fit: cover;
    height: 20vh;
    width: 100%;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-banner .modern-slider .item .img-fill {
        height: 23vh;
    }
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1199px) {
    .main-banner .modern-slider .item .img-fill {
        height: 125vh;
    }
}

/* Desktop biasa */
@media (min-width: 1200px) and (max-width: 1439px) {
    .main-banner .modern-slider .item .img-fill {
        height: 82vh;
    }
}

/* Desktop besar */
@media (min-width: 1440px) {
    .main-banner .modern-slider .item .img-fill {
        height: 87vh;
    }
}

.main-banner .modern-slider .text-content {
    text-align: left;
    width: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-banner .modern-slider .item h6 {
    width: min-content;
    margin-bottom: 15px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #a4c639;
    animation: fadeOutRight 1s both;
}

.main-banner .modern-slider .item h4 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #fff;
    overflow: hidden;
    animation: fadeOutLeft 1s both;
}

.main-banner .modern-slider .item p {
    max-width: 570px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 40px;
}

.main-banner .modern-slider .item a {
    margin: 0 5px;
}

.main-banner .modern-slider .item.slick-active h6 {
    animation: fadeInDown 1s both 1s;
}

.main-banner .modern-slider .item.slick-active h4 {
    animation: fadeInLeft 1s both 1.5s;
}

.main-banner .modern-slider .item.slick-active {
    animation: Slick-FastSwipeIn 1s both;
}

.main-banner .modern-slider .buttons {
    position: relative;
}

.main-banner .modern-slider {
    background-color: transparent;
}

/* ==== Slick Slider Css Ruls === */
.main-banner .slick-slider {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.main-banner .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.main-banner .slick-list:focus {
    outline: none;
}

.main-banner .slick-list.dragging {
    cursor: hand;
}

.main-banner .slick-slider .slick-track,
.main-banner .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.main-banner .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.main-banner .slick-track:before,
.main-banner .slick-track:after {
    display: table;
    content: "";
}

.main-banner .slick-track:after {
    clear: both;
}

.main-banner .slick-loading .slick-track {
    visibility: hidden;
}

.main-banner .slick-slide {
    display: none;
    float: left /* If RTL Make This Right */;
    height: 100%;
    min-height: 1px;
}

.main-banner .slick-slide.dragging img {
    pointer-events: none;
}

.main-banner .slick-initialized .slick-slide {
    display: block;
}

.main-banner .slick-loading .slick-slide {
    visibility: hidden;
}

.main-banner .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.main-banner .slick-dots {
    position: absolute;
    bottom: 3px;
    width: 100%;
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-banner .slick-dots li {
    margin: 0 5px;
}

.main-banner .slick-dots li button {
    border: none;
    background: none;
    font-size: 0;
    color: transparent;
    cursor: pointer;
}

.main-banner .slick-dots li button:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 20px;
    color: #fff;
    opacity: 0.75;
    content: "•";
}

.main-banner .slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--theme-primary);
}

.main-banner .PrevArrow,
.main-banner .NextArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.main-banner .PrevArrow:active,
.main-banner .NextArrow:active {
    color: var(--theme-primary);
}

.main-banner .PrevArrow {
    left: 10px;
}

.main-banner .NextArrow {
    right: 10px;
}

@media only screen and (min-width: 1200px) {
    .main-banner .PrevArrow,
    .main-banner .NextArrow {
        display: none !important;
    }
}

/*====================================================
    main-header> Hero-Box & modern-slider
====================================================*/
.main-banner .hero-box {
    position: absolute;
    z-index: 2;
    right: 0px;
    top: 225px;
    width: 100%;
    padding: 10px;
}

@media (max-height: 700px) {
    .main-banner .hero-box {
        top: 70px;
    }
}

@media (min-height: 721px) and (max-height: 800px) {
    .main-banner .hero-box {
        top: 125px;
    }
}

.main-banner .Modern-Slider .img-index-flight .flight-box {
    width: 100%;
    position: static;
    z-index: 2;
    padding: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.main-banner .hero-box .container {
    position: relative;
    right: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.main-banner .hero-box #fullscreen-slide-contain {
    position: absolute !important;
    height: 100% !important;
}

/*===== hero-svg ======*/
.main-banner .hero-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    fill: #fff;
}

@media (max-width: 1199px) {
    .main-banner .hero-box {
        position: static;
        margin-top: 0px;
        padding: 0px;
    }
}

@media (min-width: 1200px) {
    .main-banner .hero-box {
        width: 58%;
    }
}

@media (min-width: 1400px) {
    .main-banner .hero-box {
        width: 52%;
    }
}

@media (min-width: 1800px) {
    .main-banner .hero-box {
        width: 42%;
    }
}

/*===== hero-bg ======*/
.main-banner .hero-bg {
    background-image: url("../images/hero-bg.jpg");
}

.main-banner .hero-bg-2 {
    background-image: url("../images/hero-bg2.jpg");
}

.main-banner .hero-bg-3 {
    background-image: url("../images/hero-bg3.jpg");
}

.main-banner .hero-bg-4 {
    background-image: url("../images/hero-bg4.jpg");
}

.main-banner .hero-bg-5 {
    background-image: url("../images/hero-bg5.jpg");
}

.main-banner .hero-bg-6 {
    background-image: url("../images/hero-bg6.jpg");
}

/*===== hero-content ======*/
.main-banner .hero-content .section-heading .sec__desc {
    font-size: 20px;
    color: #fff;
}

@media (max-width: 375px) {
    .main-banner .hero-content .section-heading .sec__desc {
        font-size: 18px;
    }
}

.main-banner .hero-content .section-heading .sec__title {
    font-size: 50px;
    margin-bottom: 0;
    color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-banner .hero-content .section-heading .sec__title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-banner .hero-content .section-heading .sec__title {
        font-size: 40px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-banner .hero-content .section-heading .sec__title {
        font-size: 40px;
    }
}

@media (max-width: 425px) {
    .main-banner .hero-content .section-heading .sec__title {
        font-size: 30px;
    }
}

/*==== hero-list-box =======*/
.main-banner .hero-list-box {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 30px;
    display: inline-block;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .main-banner .hero-list-box {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-banner .hero-list-box {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-banner .hero-list-box {
        margin-bottom: 40px;
    }
}

.main-banner .hero-list-box .list-items li {
    margin-bottom: 20px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.main-banner .hero-list-box .list-items li:last-child {
    margin-bottom: 0;
}

.main-banner .hero-list-box .list-items li span {
    font-weight: 500;
    color: #333333;
}

.main-banner .hero-list-box .list-items li svg {
    width: 32px;
    height: 32px;
    fill: #333333;
    margin-right: 10px;
}

/*====================================================
    hero-wrapper2
 ====================================================*/
.main-banner .hero-wrapper2 .search-fields-container {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/*====================================================
    hero-wrapper3
 ====================================================*/
.main-banner .hero-content-3 .section-heading .sec__title {
    line-height: 65px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .main-banner .hero-content-3 .section-heading .sec__title {
        line-height: 50px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-banner .hero-content-3 .section-heading .sec__title {
        line-height: 45px;
    }
}

/*====================================================
    hero-wrapper4
 ====================================================*/
.main-banner .hero-wrapper4 .hero-box {
    padding-top: 120px;
    padding-bottom: 20px;
}

/*====================================================
    hero-wrapper5
 ====================================================*/
.main-banner .hero-wrapper5 .hero-box {
    padding-top: 110px;
}

/*====================================================
    hero-wrapper6
 ====================================================*/
.main-banner .hero-wrapper6 .hero-box {
    padding-top: 100px;
    padding-bottom: 160px;
}

/*====================================================
    hero-wrapper7
 ====================================================*/
.main-banner .hero-wrapper7 .hero-box {
    padding-top: 150px;
}

/*======= carousel-action ========*/
.carousel-action .owl-nav div {
    position: absolute;
    top: 45%;
    -webkit-transform: translateY(-45%);
    -moz-transform: translateY(-45%);
    -ms-transform: translateY(-45%);
    -o-transform: translateY(-45%);
    transform: translateY(-45%);
    width: 45px;
    height: 45px;
    line-height: 45px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .carousel-action .owl-nav div {
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .carousel-action .owl-nav div {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .carousel-action .owl-nav div {
        display: none;
    }
}

.carousel-action .owl-nav div.owl-next {
    right: -22px;
}

.carousel-action .owl-nav div.owl-prev {
    left: -22px;
}

.carousel-action .owl-nav div:hover {
    background-color: var(--theme-primary);
    color: #fff;
}

.carousel-action .owl-dots {
    width: 100%;
    text-align: center;
    padding-top: 40px;
}

.carousel-action .owl-dots div {
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid rgba(19, 41, 104, 0.1);
    display: inline-block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin: 0 2px;
}

.carousel-action .owl-dots div.active {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/*======= carousel--action ========*/
.carousel--action .owl-nav div {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
}

.carousel--action .owl-nav div.owl-next {
    right: 15px;
}

.carousel--action .owl-nav div.owl-prev {
    left: 15px;
}

.carousel--action .owl-dots div {
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
}

/*======= full-width-slider ========*/
.full-width-slider.carousel-action .owl-nav div.owl-next {
    right: 15px;
}

.full-width-slider.carousel-action .owl-nav div.owl-prev {
    left: 15px;
}

.card-area-flight {
    margin-bottom: 100px;
}

#loading-container {
    height: 78vh;
}

#missing-maskapai {
    padding-bottom: 150px;
    width: 100%;
    height: 100vh;
}

#missing-maskapai img {
    width: 200px;
}

#missing-maskapai h1 {
    font-size: 36px;
}

#missing-maskapai p {
    color: #6c757d;
}

@media (max-width: 1024px) {
    .card-area.padding-right-100px {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/*====== step-bar-list ========*/
@media (max-width: 375px) {
    .step-bar-list {
        display: block !important;
    }
}

.step-bar-list .step-bar {
    position: relative;
    z-index: 1;
}

.step-bar-list .step-bar::before,
.step-bar-list .step-bar::after {
    display: block;
    position: absolute;
    background-color: #f5f7fc;
    height: 4px;
    content: "";
    width: 50%;
    left: 0;
    top: 25px;
    z-index: -1;
}

.step-bar-list .step-bar::after {
    left: auto;
    right: 0;
}

.step-bar-list .step-bar .icon-element {
    text-indent: 0;
    background-color: #fff;
    color: #333333;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    border: 2px solid rgba(128, 137, 150, 0.2);
}

.step-bar-list .step-bar.step-bar-active .icon-element {
    text-indent: -9999px;
    position: relative;
    background-color: #40cc6f;
    border-color: #40cc6f;
}

.step-bar-list .step-bar.step-bar-active .icon-element::before {
    position: absolute;
    content: "\f00c";
    font-family: FontAwesome;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    font-size: 26px;
    text-indent: 0;
    font-weight: 900;
}

.step-bar-list .step-bar.step-bar-active::before,
.step-bar-list .step-bar.step-bar-active::after {
    background-color: #40cc6f;
}

.step-bar-list .step-bar.step-bar-error::before,
.step-bar-list .step-bar.step-bar-error::after {
    background-color: #e94235;
}

.step-bar-list .step-bar.step-bar-error .icon-element {
    text-indent: -9999px;
    position: relative;
    background-color: #e94235;
    border-color: #e94235;
}

.step-bar-list .step-bar.step-bar-error .icon-element::before {
    position: absolute;
    content: "\f00d";
    font-family: FontAwesome;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
    font-size: 26px;
    text-indent: 0;
    font-weight: 900;
}

/*===== payment-received-list =======*/
.payment-received-list .icon-element {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    background-color: #40cc6f;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .payment-received-list .card-body .btn-box .theme-btn.mr-2 {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    #loading-container {
        margin-bottom: 130px;
    }
    .payment-received-list .card-body .btn-box .theme-btn.mr-2 {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }
}

@media (max-width: 375px) {
    .payment-received-list .card-body .btn-box .theme-btn {
        line-height: 25px;
    }
}

.payment-received-list:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

/*===== payment-received-card =======*/

.payment-received-card:hover {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.product-info .product-info-label {
    font-weight: 400;
    margin-right: 5px;
}

.product-info .product-info-value {
    color: #5d646d;
    font-weight: 400;
}

.product-info .form-control {
    width: 40px;
    text-align: center;
}

.product-info .form-control:focus {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.remove-wrap .btn {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.remove-wrap .btn:hover {
    color: var(--theme-primary);
}

.remove-wrap .btn:focus {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

@media (max-width: 425px) {
    .cart-actions {
        flex-direction: column;
    }
}

@media (max-width: 425px) {
    .cart-actions .contact-form-action {
        margin-bottom: 20px;
    }
}

.img-cartloading {
    width: 300px;
    height: 30px;
    object-fit: cover;
    display: block;
}

.text-cartloading {
    text-align: center;
    font-weight: 500;
    font-size: 17px;
}

/*====================================================
    cta-area
 ====================================================*/

.cta-area {
    position: relative;
    background-size: cover;
}

.cta-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
    opacity: 0.6;
}

.row-subscriber-heading {
    width: 100%;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 10px 5px;
    -ms-flex-negative: 0;
}

.row-subscriber-heading h4 {
    font-size: 30px;
    display: block;
    font-weight: bold;
    line-height: 30px;
    color: #333333;
}

.align-items-center .row-subscriber {
    width: fit-content;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 20px 10px;
    -ms-flex-negative: 0;
}

.align-items-center .row-subscriber h3 {
    font-size: 35px;
    display: block;
    font-weight: bold;
    color: #333333;
}

.align-items-center .row-subscriber h4 {
    font-size: 21px;
    display: block;
    font-weight: bold;
    margin-bottom: 0px;
    color: #333333;
}

.align-items-center .row-subscriber h5 {
    font-size: 18px;
    display: block;
    font-weight: bold;
    color: #333333;
    font-weight: 400;
}

.align-items-center .row-subscriber h6 {
    font-size: 15px;
    display: block;
    font-weight: bold;
    color: #333333;
    font-weight: 400;
}

.align-items-center .row-subscriber p {
    font-size: small;
}

.align-items-center .subscriber-heading {
    width: fit-content;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 10px 10px;
    -ms-flex-negative: 0;
    align-items: center;
    display: flex;
}

.align-items-center .subscriber-heading h4 {
    margin: 5px 2px;
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.align-items-center .subscriber-heading h6 {
    margin: 5px -8px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.align-items-center .subscriber-heading p {
    font-size: small;
}

.align-items-center .subscriber-heading img {
    width: 64px;
    height: 64px;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}

.input-group-subscribe {
    position: relative;
}

#txtSubscribeEmail {
    height: 50px;
}

@media (max-width: 1250px) {
    .align-items-center .subscriber-heading img {
        width: 50px;
        height: 50px;
    }

    .align-items-center .row-subscriber h4 {
        font-size: 15px;
    }

    .align-items-center .row-subscriber h6 {
        font-size: 15px;
    }
}

@media (max-width: 450px) {
    .cta-area .section-heading .sec__title {
        font-size: 30px !important;
    }

    .align-items-center .subscriber-heading img {
        width: 34px;
        height: 34px;
    }

    .row-subscriber h4 {
        font-size: 13px;
    }
}

/*===== cta-svg =====*/
.cta-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    fill: #f0f0f0;
    stroke: none;
}

/*===== cta-bg =====*/
.cta-bg {
    background-image: url("../images/hero-bg.jpg");
}

.cta-bg-2 {
    background-image: url("../images/team-cta-bg.jpg");
}

/*===== video-bg =====*/
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/*====== ========*/
.register-app {
    /*   position: relative;
    z-index: 1;*/
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}

.register-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url(../images/background/color-bg.png); */
    background-color: #c5c5c5;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.register-app .register-img {
    width: 100%;
    padding: 0px 130px;
    background-color: white;
    position: static;
    justify-content: center;
    align-items: center;
    display: flex;
}

.register-app .register-img img {
    width: auto;
    object-fit: contain;
    object-position: center;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20px;
    width: 800px;
    height: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.register-app .register-area {
    flex: 1;
    text-align: center;
}

.register-app .register-area img {
    max-width: 100%;
    height: auto;
}

.content-account-1 {
    width: 50%;
    background-color: #f8f9fa;
}

.content-account-2 {
    width: 50%;
}

.form-register {
    width: 100%;
    padding: 0px 100px;
}

@media only screen and (min-width: 969px) and (max-width: 1280px) {
    .form-register {
        padding: 30px 50px 0px 50px;
    }
}

@media (max-width: 968px) {
    .form-register {
        padding: 0px 10px;
    }

    .register-app {
        overflow: auto;
    }

    .content-account-1 {
        display: none;
    }

    .content-account-2 {
        margin-bottom: 40px;
        padding: 0px 5px;
        flex: none;
        width: 100%;
    }
}

.h-custom-2 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.h-custom-2 form {
    height: fit-content;
    object-fit: contain;
    object-position: center;
}

.h-custom-2 .btn-register button {
    background-color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: white;
}

.h-custom-2 .btn-register button:hover {
    background-color: #a6262a;
    border: 1px solid #d05256;
    color: white;
}

.h-custom-2 h3 {
    font-size: 35px;
    letter-spacing: 1px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: #333333;
}

.h-custom-2 h4 {
    font-size: 27px;
    letter-spacing: 1px;
    margin: 1px 0px;
    /* display: block; */
    font-weight: bold;
}

.h-custom-2 h4 span {
    font-size: 27px;
    letter-spacing: 1px;
    margin: 1px 0px;
    /* display: block; */
    font-weight: bold;
    color: var(--theme-primary);
}

.h-custom-2 h5 {
    margin: 1px 0px;
    font-size: 18px;
    /* display: block; */
    font-weight: bold;
}

.h-custom-2 h6 {
    margin: 1px 0px;
    font-size: 15px;
    /* display: block;   */
    font-weight: bold;
}

.h-custom-2 p {
    line-height: 18px;
    letter-spacing: 0.2px;
    font-size: 13px;
}

.h-custom-2 .custom-checkbox label {
    font-size: 14px;
    letter-spacing: 1px;
}

.h-custom-2 .custom-checkbox label a {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}

#txtLoginEmail .dx-texteditor-container .dx-texteditor-buttons-container {
    border-right: 1px solid #f0efef;
}

#txtSubscribeEmail .dx-texteditor-buttons-container {
    border-right: 1px solid #f0efef;
}

#txtLoginOtp .dx-texteditor-container .dx-texteditor-buttons-container {
    border-right: 1px solid #f0efef;
}

.form-area {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-area h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.mobile-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url(../images/background/color-bg.png); */
    background-color: #c5c5c5;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.mobile-app .mobile-img {
    position: absolute;
    bottom: -100px;
    right: 0;
}
/* LAYOUT INSTAGRAM */
.img-block-1 {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;
}

.img-promo {
    padding: 30px 0px;
}

.img-block-2 {
    object-position: top;
    border-radius: 10px;
    width: 100%;
    height: 245px;
    object-fit: cover;
    position: relative;
}

.img-block-2:hover {
    opacity: 0.8;
    filter: blur(2px);
}

.img-block-2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.6s;
}

.img-block-2:hover::before {
    opacity: 1;
}

.card-body-1 {
    padding: 20px;
    background-color: var(--theme-primary);
    color: white;
    border-radius: 10px;
    text-align: center;
}

.card-body-2 {
    padding: 20px;
    z-index: 10;
    height: 285px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 93%;
}

.card-body-3 {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}

.card-title {
    color: #333333 !important;
    font-size: 1.25rem;
    font-weight: bold;
}

.news-item {
    display: flex;
    margin-bottom: 20px;
}

.news-item:hover {
    background-color: #dedede;
    border-radius: 10px;
    color: white;
    transition: 0.3s;
}

.news-item:last-child {
    margin-bottom: 0;
}

.news-item img {
    width: 120px;
    height: 100px;
    border-radius: 10px;
    margin-right: 15px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-item h5 {
    margin-top: 5px !important;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    color: #333333 !important;
    flex-grow: 1;
}

.img-profile {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background-image: linear-gradient(white, white),
        linear-gradient(to right, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.name-profile {
    color: #333333 !important;
    line-height: 17px;
    font-size: 12px;
}

.desc-profile {
    margin-top: 21px;
    color: #3a3a3a !important;
    line-height: 24px;
}

.news-item p {
    margin: 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.instagram-post {
    border-radius: 15px;
    border: 1px solid #dbdbdb;
}

.instagram-image {
    max-height: 400px;
    object-fit: cover;
}

.post-actions i {
    font-size: 1.2rem;
    margin-right: 15px;
    cursor: pointer;
}

.btn-follow-instagram {
    font-size: 14px;
    color: var(--theme-primary);
    line-height: 33px;
    padding: 0px 20px;
    background-color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid var(--theme-primary);
    font-weight: 600;
}

.btn-follow-instagram:hover {
    color: #fff;
    background-color: var(--theme-primary);
    font-weight: 600;
}

.ring-container {
    position: relative;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #62bd19;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -3px;
}

.ringring {
    border: 3px solid #62bd19;
    -webkit-border-radius: 30px;
    height: 20px;
    width: 20px;
    position: absolute;
    left: -8px;
    top: -11px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .margin-mobile-block-2 {
        margin-top: 20px;
    }

    .margin-mobile-block-3 {
        margin-top: 20px;
    }

    .card-body-2 {
        top: 220px;
    }
    .card-body-3 {
        margin-top: 260px;
    }
}

@media only screen and (min-width: 479px) and (max-width: 1200px) {
    .desc-profile {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .margin-mobile-block-3 {
        margin-top: 20px;
    }

    .card-body-2 {
        top: 209px;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .card-body-1 {
        padding: 7px 20px;
    }
}

/* END INSTAGRAM FEED */
/* VOUCHER SECTION */
.voucher-app {
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .voucher-app {
        padding-top: 200px;
    }

    .h-custom-2 h4 {
        padding-top: 30px;
    }
}

.voucher-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background/dots2.png);
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

/* TOUR DEALS */
.tourdeals-app {
    position: relative;
    z-index: 1;
}

.tourdeals-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background/color-bg.png);
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

/* SECTION OUR CLIENT */
.ourclient-app .ourclient-img {
    position: absolute;
    bottom: -100px;
    right: 0;
}

.ourclient-app {
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}

.ourclient-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #b0b0b0; */
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.ourclient-app .ourclient-img {
    position: absolute;
    bottom: -100px;
    right: 0;
}

/* SECTION OUR SERVICES WE PROVIDED */
.ourservices-app {
    position: relative;
    z-index: 1;
}

.ourservices-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background/bg5.jpg);
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.ourservices-app .ourservices-img {
    bottom: -100px;
    right: 0;
}

.ourservices-section-heading .sec_desc {
    font-size: 18px;
    color: #5d646d;
    line-height: 30px;
}

.ourservices-section-heading .sec_title {
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #333333;
    font-weight: 700;
}

.ourservices-section-heading .sec_title span {
    width: 100%;
    color: #ca262c;
    text-align: center;
    font-weight: 700;
}

.ourservices-card {
    width: 100%;
    height: 300px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    border: 1px solid rgba(128, 137, 150, 0.2);
    padding: 25px 30px 30px 30px;
}

.ourservices-card .ourservices-img {
    width: 64px;
    height: 64px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.ourservices-card .ourservices-img img {
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.05);
}

.ourservices-card .ourservices-desc-box {
    width: 100%;
    height: fit-content;
}

.ourservices-card .ourservices-desc-box span {
    color: #f9b851;
    font-size: 18px;
    font-weight: bolder;
}

.ourservices-card .ourservices-desc-box h4 {
    margin: 5px 0px;
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.ourservices-card .ourservices-desc-box h5 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.ourservices-card .ourservices-desc-box h6 {
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
}

.ourservices-card .ourservices-desc-box p {
    font-size: small;
}

.indexflight-whyuse-app {
    position: relative;
    z-index: 1;
}

.indexflight-whyuse-app::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 0.2;
}

.indexflight-whyuse-app .ourservices-img {
    bottom: -100px;
    right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .mobile-app .mobile-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .voucher-app .voucher-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .tourdeals-app .tourdeals-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourclient-app .ourclient-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourservices-app .ourservices-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .mobile-app .mobile-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }
    .ourservices-section-heading .sec_title {
        font-size: 29px;
    }

    .voucher-app .voucher-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .tourdeals-app .tourdeals-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourclient-app .ourclient-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourservices-app .ourservices-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .mobile-app .mobile-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }
    .ourservices-section-heading .sec_title {
        font-size: 30px;
    }

    .voucher-app .voucher-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .tourdeals-app .tourdeals-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourclient-app .ourclient-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }

    .ourservices-app .ourservices-img {
        position: inherit;
        bottom: auto;
        right: auto;
    }
}

/*===== mobile-app-content======*/
.mobile-app-content {
    margin-bottom: 60px;
}

.mobile-app-content .info-list li {
    color: #333333;
    font-size: 18px;
}

.mobile-app-content .info-list li .icon-element {
    margin-right: 10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
}

.mobile-app-content .btn-box .theme-btn:nth-child(2) {
    margin-left: 8px;
}

@media (max-width: 375px) {
    .mobile-app-content .btn-box .theme-btn:nth-child(2) {
        margin-left: 0;
        margin-top: 10px;
    }
}

/*===== mobile-img ======*/
.mobile-img img {
    width: 100%;
}

/*===== index-subscriber-area ======*/
.subscriber-area {
    position: relative;
    z-index: 1;
}

.subscriber-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: transparent;
    background-image: url(../images/background/bg2_2.jpg);
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
}

@media (max-width: 375px) {
    .subscriber-area .section-heading .sec__title {
        line-height: 40px !important;
        margin-bottom: 10px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .subscriber-box {
        margin-top: 20px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .subscriber-box {
        margin-top: 20px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .subscriber-box {
        margin-top: 20px;
    }
}

/*===== video-content ======*/
.video-content {
    position: relative;
    margin-bottom: -110px;
}

.video-content .ripple-bg canvas {
    z-index: 1 !important;
}

.video-content-img {
    position: relative;
}

.video-content-img img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .video-content-img img {
        height: 350px;
        object-fit: cover;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .video-content-img img {
        height: 350px;
        object-fit: cover;
    }
}

.video-content-img::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333333;
    opacity: 0.3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/*===== sidebar-nav =======*/
.user-canvas-container,
.sidebar-nav {
    position: fixed;
    background-color: #fff;
    border-top: 2px solid var(--theme-primary) !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 310px;
    overflow-x: hidden;
    z-index: 999;
    -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    -moz-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    -ms-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    -o-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1);
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .user-canvas-container,
    .sidebar-nav {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .user-canvas-container,
    .sidebar-nav {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .user-canvas-container,
    .sidebar-nav {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.user-canvas-container .author-content,
.sidebar-nav .author-content {
    padding: 20px;
}

.user-canvas-container.active,
.sidebar-nav.active {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.sidebar-nav .side-menu-close {
    margin-left: auto;
    margin-right: 10px;
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .sidebar-nav .side-menu-close {
        display: block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .sidebar-nav .side-menu-close {
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .sidebar-nav .side-menu-close {
        display: block;
    }
}

/*===== user-canvas-container =======*/
.user-canvas-container {
    left: auto;
    right: 0;
    width: 350px;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

@media (max-width: 375px) {
    .user-canvas-container {
        width: 320px;
    }
}
.sidenav .sidebar-menu {
    padding: 0px;
}

.sidenav .sidebar-menu .side-menu-icon {
    position: absolute;
    right: 0;
    top: 0;
    color: #5d646d;
    padding: 7px 12px;
    cursor: pointer;
    border-left: 1px solid transparent;
}

.sidenav .sidebar-menu .side-menu-icon i {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.sidenav .sidebar-menu li {
    position: relative;
    margin-bottom: 2px;
}

.sidenav .sidebar-menu li a {
    display: block;
    padding: 4px 18px 0px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sidenav .sidebar-menu li a span {
    padding: 7px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.sidenav .sidebar-menu li a i {
    margin-right: 5px;
    font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.sidenav .sidebar-menu li.active > a,
.sidebar-menu li.page-active > a {
    background-color: var(--theme-primary);
    color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
    -moz-box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
    box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
}

.sidenav .sidebar-menu li.active > a i,
.sidebar-menu li.page-active > a i {
    color: #fff;
}

.sidenav .sidebar-menu li.active .side-menu-icon,
.sidebar-menu li.page-active .side-menu-icon {
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.1);
}

.sidenav .sidebar-menu li.active .side-menu-icon {
    border-left-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidenav .sidebar-menu li.active .side-menu-icon i {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.sidenav .sidebar-menu li:hover .side-menu-icon {
    color: #fff;
    border-left-color: rgba(255, 255, 255, 0.1);
}

.sidenav .sidebar-menu li:hover > a {
    margin-left: 2px;
    background-color: var(--theme-primary);
    color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
    -moz-box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
    box-shadow: 0 0 40px rgba(40, 125, 250, 0.1);
}

.sidenav .sidebar-menu li:hover > a i {
    margin-right: 5px;
    color: #fff;
}

.sidenav .sidebar-menu li.active > a {
    background-color: var(--theme-primary);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 40px rgba(40, 125, 250, 0.2);
}

.sidenav .sidebar-menu li .toggle-drop-menu {
    background-color: rgba(40, 125, 250, 0.1);
    margin-top: 3px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sidenav .sidebar-menu li > .toggle-drop-menu li a {
    padding-left: 36px;
    padding: 5px 0px;
    line-height: 26px;
}

.sidenav .sidebar-menu li > .toggle-drop-menu li:hover a {
    background-color: transparent;
    color: var(--theme-primary);
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.sidenav .sidebar-menu li > ul {
    background-color: #fff8f8;
    padding: 5px 15px;
    margin: 0px 2px;
    border-radius: 3px;
}

.sidenav .sidebar-menu li > ul li:hover a {
    background-color: transparent;
    color: var(--theme-primary);
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */

/*===== dashboard-area =======*/

.dashboard--nav {
    background-color: #333333;
}

/*===== dashboard-search-box =======*/
@media (max-width: 1024px) {
    .dashboard-search-box {
        display: none;
    }
}

.dashboard-search-box .contact-form-action .form-input {
    width: 320px;
    padding-left: 20px;
    border: none;
}

.dashboard-search-box .contact-form-action .form-control {
    width: 320px;
    padding-left: 20px;
    border: none;
}

/*===== dashboard-area =======*/
.dashboard-area {
    margin-left: 310px;
    height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .dashboard-area {
        margin-left: 0;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .dashboard-area {
        margin-left: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .dashboard-area {
        margin-left: 0;
    }
}

/*===== chart-pagination =======*/
@media (max-width: 425px) {
    .chart-pagination {
        margin-bottom: 10px;
    }
}

@media (max-width: 425px) {
    .chart-pagination li {
        display: inline-block;
        margin-bottom: 5px;
    }
}

@media (max-width: 425px) {
    .chart-pagination li a {
        margin-right: 0 !important;
    }
}

/*======== user-pro-img =========*/
@media (max-width: 480px) {
    .order-card .drop-reveal-list .list-group-item .theme-btn {
        opacity: 1;
        visibility: visible;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .order-card .drop-reveal-list .list-group-item .msg-body {
        display: block !important;
    }
}

/*======== user-profile-action =========*/
@media (max-width: 480px) {
    .user-profile-action {
        display: block !important;
    }
}

@media (max-width: 375px) {
    .user-profile-action .upload-btn-box .d-flex {
        display: block !important;
    }
}

@media (max-width: 375px) {
    .user-profile-action .upload-btn-box .theme-btn {
        margin-left: 0 !important;
    }
}

/*======== user-pro-img =========*/
.user-pro-img {
    position: relative;
    margin-right: 25px;
}

@media (max-width: 480px) {
    .user-pro-img {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

.user-pro-img img {
    width: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgba(128, 137, 150, 0.01);
}

/*======== sparkline-chart-item =========*/
.sparkline-chart-item {
    margin-bottom: 25px;
}

.jqstooltip {
    height: 24px !important;
    width: 70px;
}

.list-group-flush .list-group-item {
    border-bottom-color: rgba(128, 137, 150, 0.1);
}

/*====================================================
   clientlogo-area
 ====================================================*/
.airline-logo-item {
    justify-content: center;
    align-items: center;
    display: flex;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    padding: 20px 20px;
}

.airline-logo-item img {
    /* filter: grayscale(100%); */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.airline-logo-item:hover img {
    filter: grayscale(0);
}

.airline-logo-item-2 img {
    filter: grayscale(0);
}
/*====================================================
   testimoniTour-area
 ====================================================*/
.testimonial-card {
    background-color: white;
    color: #03121a;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
    max-width: 370px;
    height: 280px; /* Ukuran card fixed agar seragam */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s;
    border: 1px solid #edeef0;
}

.testimonial-card:hover {
    background-color: #fff7f7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.owl-carousel .owl-item .testimonial-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
}

.testimonial-card p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-card .author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 17px;
    border-top: 1px solid #edeef0;
}

.testimonial-card .author-name {
    font-weight: bold;
}

.testimonial-card .rating {
    color: #ffd740;
}

@media only screen and (min-width: 1024px) {
    .text-content-header-tour {
        padding-top: 100px;
    }

    .text-content-header-carrental {
        padding-top: 45px;
    }
}
/*=============== comments ===============*/
.comment {
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
    margin-bottom: 40px;
    padding-bottom: 40px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    position: relative;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .text-content-header-carrental,
    .text-content-header-tour {
        padding: 0px;
    }
    .comment {
        text-align: center;
        display: block;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .text-content-header-carrental,
    .text-content-header-tour {
        padding: 0px;
    }
    .comment {
        text-align: center;
        display: block;
    }
}

/*=============== comments-avatar ===============*/
.comment-avatar .avatar__img {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 25px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: 4px solid #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .comment-avatar .avatar__img {
        margin-right: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .comment-avatar .avatar__img {
        margin-right: 0;
    }
}

/*=============== meta-data ===============*/
.meta-data {
    position: relative;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .meta-data {
        margin-top: 15px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .meta-data {
        margin-top: 15px;
    }
}

.meta-data .comment__meta {
    font-size: 14px;
}

.meta-data .comment__meta a {
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.meta-data .comment__meta a:hover {
    color: #ca262c;
}

.meta-data .comment__author {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
}

.meta-data .comment__date {
    font-size: 14px;
}

/*=============== meta-data-inner ===============*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .meta-data-inner {
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 3px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .meta-data-inner {
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 3px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .meta-data-inner .rating-stars,
    .meta-data-inner .comment__meta {
        margin-right: 0 !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .meta-data-inner .rating-stars {
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/*=============== comment-content ===============*/
.comment-content {
    font-size: 16px;
    color: #5d646d;
    margin-top: 8px;
    margin-bottom: 15px;
}

/*=============== comment-reply ===============*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .comment-reply {
        display: block;
        text-align: center;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .comment-reply {
        display: block;
        text-align: center;
    }
}

.comment-reply .theme-btn {
    line-height: 35px;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 14px;
    background-color: rgba(128, 137, 150, 0.1);
    color: #5d646d;
    border: none;
}

.comment-reply .theme-btn:hover {
    background-color: rgba(128, 137, 150, 0.2);
    color: #333333;
}

/*=============== reviews-reaction ===============*/
.reviews-reaction a {
    margin-right: 15px;
}

.reviews-reaction a:last-child {
    margin-right: 0;
}

.reviews-reaction a.comment-like {
    color: #28d5a7;
}

.reviews-reaction a.comment-dislike {
    color: #ff8c2a;
}

.reviews-reaction a.comment-love {
    color: #f9b851;
}

/*=============== comment-reply-item ===============*/
.comment-reply-item {
    margin-left: 100px;
}

@media (max-width: 1199px) {
    .comment-reply-item {
        margin-left: 20px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .comment-reply-item {
        margin-left: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .comment-reply-item {
        margin-left: 0;
    }
}

/*===== icon-box ========*/
.icon-box {
    /* margin-bottom: 30px; */
    position: relative;
    z-index: 1;
}

.icon-box .info-svg {
    width: 50px;
    fill: #333333;
}

.icon-box .info-icon {
    position: relative;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 32px;
    color: #ca262c;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.icon-box .info-icon::after,
.icon-box .info-icon::before {
    position: absolute;
    content: "";
    z-index: -1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.icon-box .info-icon::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(40, 125, 250, 0.1);
}

.icon-box .info-icon:after {
    width: 60px;
    height: 60px;
    top: 10px;
    left: 10px;
    background-color: rgba(40, 125, 250, 0.2);
    opacity: 0.5;
}

.icon-box .info__num {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 40px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(128, 137, 150, 0.3);
}

.icon-box .info-content {
    padding-top: 20px;
}

.icon-box .info__title {
    font-size: 20px;
    color: #333333;
    margin-bottom: 13px;
}

.icon-box .info__title a {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.icon-box .info__title a:hover {
    color: #ca262c;
}

.icon-box .info__desc {
    font-size: 16px;
    color: #5d646d;
    line-height: 27px;
}

.icon-box:hover .info-icon {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .icon-box.margin-top-50px {
        margin-top: 0;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .icon-box.margin-top-50px {
        margin-top: 0;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .icon-box.margin-top-50px {
        margin-top: 0;
    }
}

/*===== icon-layout-2 ========*/
.icon-layout-2 .info-icon {
    margin-left: 10px;
    margin-right: -2px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    line-height: 30px;
}

.info-icon i {
    font-size: 21px;
}

.icon-layout-2 .info-icon::before,
.icon-layout-2 .info-icon::after {
    display: none;
}

.icon-layout-2 .info__title {
    margin-bottom: 7px;
    font-size: 19px;
}

.icon-layout-2 .info-content {
    line-height: 16px;
    padding-top: 0;
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    height: 42px;
    overflow: hidden;
    position: relative;
}

.tags-wrapper-search-tour {
    display: flex;
    flex-wrap: wrap;
    height: 43px;
    overflow: hidden;
    position: relative;
}

.tags-wrapper-tablet {
    display: flex;
    flex-wrap: wrap;
    height: 51px;
    overflow: hidden;
    position: relative;
}

/*===== section-tab ======*/
/*CHANGE SOURCODE ALL : box-search-filter-header index */

.section-tab .nav-tabs {
    border-bottom: none;
    width: 100%;
    justify-content: left;
}

.section-tab .nav-tabs .nav-item {
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
}

.section-tab .nav-tabs .nav-item:last-child {
    margin-right: 0;
}

.section-tab .nav-tabs .nav-item:first-child {
    margin-left: 0px;
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
    .section-tab .nav-tabs .nav-item {
        margin-bottom: 2px;
        width: 23%;
    }

    .section-tab {
        margin-bottom: -2px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .section-tab .nav-tabs .nav-item {
        margin-bottom: 2px;
    }

    .section-tab {
        margin-bottom: -2px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .section-tab {
        margin-bottom: -2px;
    }

    .nav-link {
        padding: 3px 8px;
    }

    .section-tab .nav-tabs .nav-item:first-child {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 1200px) {
    .section-tab .nav-tabs .nav-item {
        margin-left: 0px;
        margin-right: 0px;
    }
    .section-tab .nav-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .section-tab .nav-tabs .nav-item {
        width: 100%;
    }
}

.section-tab .nav-tabs .nav-link {
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    background-color: #e5e7eb;
    color: #333333;
    border: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.section-tab .nav-tabs .nav-link i {
    font-size: 20px;
}

.section-tab .nav-tabs .nav-link.active {
    color: #ca262c;
    background-color: white;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}

/*====== section-tab 2 ========*/
/* CHANGE SOURCODE ALL? */
.section-tab-2 .nav-tabs .nav-item {
    /*margin: 0px 30px;*/
    text-align: left;
    justify-content: left;
    align-items: center;
    display: flex;
}

.section-tab-2 .nav-tabs .nav-link {
    color: #333333;
    background-color: transparent;
    padding: 2px 25px 9px 25px; /*0 0 0 20px;*/
    font-size: 14px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    position: relative;
}

.section-tab-2 .nav-tabs .nav-link::before,
.section-tab-2 .nav-tabs .nav-link::after {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: 14px;
    height: 14px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.section-tab-2 .nav-tabs .nav-link::before {
    left: 4px;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.section-tab-2 .nav-tabs .nav-link::after {
    border: 2px solid rgba(19, 41, 104, 0.2);
}

.section-tab-2 .nav-tabs .nav-link.active,
.section-tab-2 .nav-tabs .nav-link:hover {
    background-color: transparent;
    color: var(--theme-primary);
}

.section-tab-2 .nav-tabs .nav-link.active::before,
.section-tab-2 .nav-tabs .nav-link:hover::before {
    background-color: var(--theme-primary);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.section-tab-2 .nav-tabs .nav-link.active::after,
.section-tab-2 .nav-tabs .nav-link:hover::after {
    border-color: var(--theme-primary);
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .section-tab .nav-tabs .nav-link {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .section-tab .nav-tabs .nav-link {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .section-tab .nav-tabs .nav-link {
        -webkit-border-radius: 0px;
        border-radius: 0px;
    }
}

/*============ promotion-carousel ===============*/
.promotion-carousel.carousel-action .owl-nav div {
    width: 35px;
    height: 35px;
    line-height: 34px;
}

/*============ articles-area ===============*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .articles-area .section-heading {
        margin-bottom: 50px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .articles-area .section-heading {
        margin-bottom: 50px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .articles-area .section-heading {
        margin-bottom: 50px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .articles-area .btn-box.padding-top-35px {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .articles-area .btn-box.padding-top-35px {
        padding-top: 30px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .articles-area .btn-box.padding-top-35px {
        padding-top: 30px;
    }
}

/*====== faq accordion =====*/

/*(GLOBAL) CHANGED AFFECTS ALL : SearchResult, etc*/

.default-according .card-sidebar {
    margin-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.default-according .card-sidebar + .card-sidebar {
    margin-top: 10px;
}

.default-according .card-sidebar .btn-link {
    font-weight: 500;
    color: #2b2b2b;
    text-decoration: none;
}

.default-according .card-sidebar .payment-link {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
    text-align: left;
}

.default-according .card-sidebar .payment-link .animate-chk input {
    color: var(--theme-primary);
    background-color: var(--theme-primary);
}

.default-according .card-sidebar .payment-link .animate-chk img {
    width: 110px;
    height: auto;
    margin: 5px 5px;
}

.default-according .card-sidebar .btn-link:focus,
.default-according .card-sidebar .btn-link:hover {
    text-decoration: none;
}

.default-according .card-sidebar .card-header {
    padding: 10px 0px;
}

.default-according .card-sidebar .card-header i {
    position: absolute;
    left: 18px;
    font-size: 20px;
    top: 20px;
}

.default-according .card-sidebar .card-header h5 {
    margin-top: 2px;
}

.default-according .card-sidebar .card-body {
    border-top: none;
}

.default-according .card-sidebar .card-filters {
    border-top: none;
    padding: 0px 15px;
}

.default-according .card {
    margin-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.default-according .card + .card {
    margin-top: 10px;
}

.default-according .card .btn-link {
    font-weight: 500;
    color: #2b2b2b;
    text-decoration: none;
}

.default-according .card .payment-link {
    width: 100%;
    height: auto;
    font-size: large;
    font-weight: 600;
}

.default-according .card .payment-link .animate-chk input {
    color: var(--theme-primary);
    background-color: var(--theme-primary);
}

.default-according .card .payment-link .animate-chk img {
    width: 110px;
    height: auto;
    margin: 5px 5px;
}

.default-according .card .btn-link:focus,
.default-according .card .btn-link:hover {
    text-decoration: none;
}

.default-according .card .card-header {
    padding: 10px 0px;
}

.default-according .card .card-header i {
    position: absolute;
    left: 18px;
    font-size: 20px;
    top: 20px;
}

.default-according .card .card-header h5 {
    margin-top: 2px;
}

.default-according .card .card-body {
    border-top: none;
}

.default-according .card .card-filters {
    border-top: none;
    padding-right: 15px;
}

@media only screen and (min-width: 20px) and (max-width: 479px) {
    .default-according .card .card-filters {
        border-top: none;
        padding: 0px 5px;
    }
}

.default-according.style button {
    width: 100%;
    text-align: left;
}

.default-according.style button:before {
    right: 20px;
    position: absolute;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

/* (GLOBAL) CHANGED AFFECTS ALL: SearchResult */
.default-according button[aria-expanded="true"]:before {
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    right: 20px;
    /*right: 50px;*/
}

.default-according button[aria-expanded="false"]:before {
    border: none;
    content: "\f107";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 13px;
    position: absolute;
    right: 20px;
    /*right: 50px;*/
}

/*====== sidebar =====*/
.sidebar {
    border: 1px solid rgba(128, 137, 150, 0.1);
    padding: 20px 20px 0px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.sidebar .title {
    font-size: 15px;
}

/* GLOBAL sidebar filter */
.sidebar .default-according {
    margin: 10px 0px;
}

.sidebar .flight .flight-details img {
    width: 50px;
    height: 100%;
    align-items: center;
    display: flex;
}

.sidebar .title-flight {
    width: 100%;
    height: auto;
    font-size: small;
}

.sidebar .type-of-plane {
    font-size: x-small;
    width: 100%;
}

.sidebar .no-flight {
    font-size: x-small;
    width: 100%;
}

.sidebar .title-flight {
    width: 100%;
    height: auto;
    font-size: small;
}

.sidebar .type-of-plane {
    font-size: x-small;
    width: 100%;
}

.sidebar .no-flight {
    font-size: x-small;
    width: 100%;
}

.sidebar .btn-flight {
    width: 100%;
    padding: 5px 0px;
    color: #fff;
    font-size: small;
    border: 1px solid var(--theme-primary) !important;
    background-color: var(--theme-primary);
    border-radius: 5px;
}

.sidebar .row .flight-price-total {
    border-radius: 2px;
    margin: 10px 0;
    padding: 10px;
    font-size: x-larger;
    font-weight: bold;
    background-color: #f0f0f0;
}

.sidebar .row .flight-price-total span {
    width: 100%;
    font-weight: 400;
    font-size: small;
}

.sidebar .row .flight-price-total p {
    width: 100%;
    font-weight: 500;
    font-size: 15px;
}

.sidebar .row .flight-price-total .includetax {
    font-size: x-small;
    font-weight: 400;
    color: #333333;
    color: red;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .sidebar {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .sidebar {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .sidebar {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

/*====== sidebar-widget =====*/
.sticky-filter {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar */
.sticky-filter::-webkit-scrollbar {
    width: 6px; /* Lebar scrollbar */
}

.sticky-filter::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar belakang track */
    border-radius: 5px; /* Radius untuk membuat track lebih halus */
}

.sticky-filter::-webkit-scrollbar-thumb {
    background: #c5c5c5; /* Warna scrollbar */
    border-radius: 5px; /* Radius untuk membuat scrollbar lebih halus */
}

.sticky-filter::-webkit-scrollbar-thumb:hover {
    background: #ccc; /* Warna scrollbar saat di-hover */
}

.sidebar-widget-reset {
    padding: 10px;
}

.flight-title {
    width: auto;
}

.flight-title h3 {
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: var(--theme-primary);
}

.sidebar-widget-reset .flight-title h4 {
    font-size: 21px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .flight-title h5 {
    font-size: medium;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .flight-title h6 {
    font-size: small;
    display: block;
    font-weight: normal;
}

.sidebar-widget-reset .flight-title p {
    font-size: small;
}

.sidebar-widget-reset .title {
    width: inherit;
    font-size: 17px;
}

.sidebar-widget-reset .title h3 {
    color: #333333;
    margin: 5px 0px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .title h3 span {
    background-color: var(--theme-primary);
}

.sidebar-widget-reset .title h4 {
    color: #333333;
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .title h5 {
    color: #333333;
    margin: 5px 0px;
    font-size: 20px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .title h6 {
    color: var(--theme-primary);
    margin: 3px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .title p {
    width: 100%;
    height: auto;
    font-size: 12px;
    margin: 3px 0px;
}

.sidebar-widget {
    padding: 2px 0px;
}

.sidebar-widget .title {
    font-size: 17px;
    /* margin: 10px 0px; */
}

.sidebar-widget .title h3 {
    color: #333333;
    margin: 5px 0px;
    font-size: 35px;
    display: block;
    font-weight: bold;
}

.sidebar-widget .title h3 span {
    background-color: var(--theme-primary);
}

.sidebar-widget .title h4 {
    color: #333333;
    margin: 5px 0px;
    font-size: 25px;
    display: block;
    font-weight: bold;
}

.sidebar-widget .title h5 {
    color: #333333;
    margin: 5px 0px;
    font-size: 17px;
    display: block;
    font-weight: 500;
}

.sidebar-widget .title h6 {
    color: #333333;
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.sidebar-widget .title p {
    color: #333333;
    font-size: small;
    display: block;
}

.sidebar-widget .flight {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
}

.sidebar-widget .flight .flight-details {
    width: 100%;
    justify-content: center;
    display: flex;
}

.sidebar-widget .flight .flight-details img {
    width: 60px;
    height: 100%;
    align-items: center;
    display: flex;
}

.sidebar-widget-reset .flight-title-airline {
    width: 100%;
    height: auto;
}

.sidebar-widget-reset .flight-title-airline h3 {
    width: 100%;
    text-align: center;
    font-size: 35px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: #fff;
    background-color: #eb5b00;
    border-radius: 5px;
}

.sidebar-widget-reset .flight-title-airline h4 {
    width: 100%;
    text-align: center;
    font-size: 21px;
    display: block;
    margin: 1px;
    font-weight: bold;
    color: #fff;
    background-color: #eb5b00;
    border-radius: 5px;
}

.sidebar-widget-reset .flight-title-airline h5 {
    margin: 5px 0px;
    font-size: 18px;
    display: block;
    font-weight: bold;
}

.sidebar-widget-reset .flight-title-airline h6 {
    margin: 5px 0px;
    font-size: 15px;
    display: block;
    font-weight: bold;
    width: 130px;
}

@media (max-width: 479px) {
    .sidebar-widget-reset .flight-title-airline h6 {
        width: 100%;
    }
}

.sidebar-widget-reset .flight-title-airline span {
    margin: 5px 0px;
    font-size: 15px;
    font-style: italic;
    text-decoration: underline;
}

.sidebar-widget-reset .flight-title-airline p {
    font-size: small;
}

.sidebar-widget-reset .flight-title-airline img {
    width: fit-content;
}

.sidebar-widget .flight-date {
    font-size: small;
    width: 100%;
}

.sidebar-widget .flight-clock {
    font-size: small;
    width: 100%;
}

.sidebar-widget .flight-price {
    font-weight: 600;
    font-size: small;
    width: 100%;
}

.sidebar-widget .flight-desc {
    font-size: small;
    width: 100%;
    font-style: italic;
    text-decoration: underline;
}

.sidebar-widget .no-flight {
    font-size: x-small;
    width: 100%;
}

.list-popup-roundtrip {
    z-index: 9999999;
    width: 100%;
    background-color: #fff;
    color: black;
    line-height: 17px;
    font-weight: 500;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.flight-price-total {
    border-radius: 5px;
    padding: 10px 15px;
    font-size: x-larger;
    font-weight: bold;
    background-color: #f0f0f0;
}

.flight-price-total span {
    font-weight: 400;
    font-size: small;
}

.flight-price-total .includetax {
    font-size: x-small;
    font-weight: 400;
    color: #333333;
    color: red;
}

.popup-roundtrip {
    bottom: 52px;
    position: fixed;
    z-index: 999;
    background-color: var(--theme-primary);
    color: #fff;
    border: 1px solid #ccc;
    line-height: 17px;
    font-weight: 500;
}

.popup-roundtrip .fa-plane {
    font-size: 25px;
}

.popup-roundtrip span {
    font-size: 10px;
}

.button-change-flight {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    padding: 0px !important;
}

.button-change-flight:hover {
    background-color: #ed1c24 !important;
    color: #fff !important;
}

.button-change-flight-popup {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}

.button-change-flight-popup .dx-button-text {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
}

.button-change-flight-popup:hover {
    background-color: #ed1c24 !important;
    color: #fff !important;
}

.button-change-flight-popup-mobile {
    background-color: #fff !important;
    color: var(--theme-primary) !important;
    border: 1px solid var(--theme-primary) !important;
    font-weight: 500 !important;
}

.button-change-flight-popup-mobile:hover {
    background-color: #ca262c !important;
    color: #fff !important;
}

@media (min-width: 376px) and (max-width: 467px) {
    .popup-roundtrip .fa-plane {
        font-size: 16px;
    }

    .popup-roundtrip span {
        font-size: 11px;
    }

    .button-change-flight {
        font-size: 20px !important;
    }
}

@media (min-width: 467px) and (max-width: 1200px) {
    .popup-roundtrip {
        line-height: 25px;
    }

    .popup-roundtrip .fa-plane {
        font-size: 26px;
    }

    .popup-roundtrip span {
        font-size: 15px;
    }

    .button-change-flight {
        font-size: 20px !important;
    }
}

@media (max-width: 375px) {
    .sidebar-widget .section-tab-2 .nav-tabs .nav-item {
        margin-right: 10px;
    }
}

.sidebar-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/*====== sidebar-category =====*/
.sidebar-category .btn-text {
    font-size: 14px;
}

.sidebar-category .btn-text[aria-expanded="false"] .show-less {
    display: none;
}

.sidebar-category .btn-text[aria-expanded="true"] .show-more {
    display: none;
}

.sidebar-category .btn-text[aria-expanded="true"] .show-less {
    display: block;
}

/*====== sidebar-list =====*/
.sidebar-list .list-items li {
    margin-bottom: 0;
}

.sidebar-list .list-items li + li {
    border-top: 1px solid rgba(128, 137, 150, 0.1);
    padding-top: 10px;
    margin-top: 10px;
}

.sidebar-list .list-items li .icon-element {
    margin-left: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 17px;
    display: inline-block;
}

/*====================================================
    footer-area
 ====================================================*/
.footer-area {
    position: relative;
    z-index: 1;
    background-color: #f5f7fc;
}

.footer-area:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.footer-area .footer-bottom {
    width: 100%;
    background-color: var(--theme-primary);
}

.footer-area .footer-bottom p {
    color: #fff;
}

/*===== footer-item =======*/
.footer-item {
    position: relative;
    margin-bottom: 50px;
}

.footer-item .title {
    font-weight: 600;
    font-size: larger;
    color: var(--theme-primary);
}

.footer-item .footer-logo {
    height: 100%;
}

.footer-item .footer-logo .foot__logo img {
    width: 90%;
}

.footer-item .footer__desc a {
    color: #333333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.font-weight-footer {
    color: var(--theme-primary);
    font-weight: bold;
}

.footer-item .footer__desc a:hover {
    color: var(--theme-primary);
}

.footer-item .contact-form-action .form-input {
    border: none;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.footer-item .contact-form-action .form-control {
    border: none;
    -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
    box-shadow: 0 0 40px rgba(82, 85, 90, 0.1);
}

.footer-item .footer__desc {
    letter-spacing: 0.2px;
}

/*===== footer-social-box =======*/
.footer-social-box {
    display: flex;
}

.social-profile {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.social-profile li {
    display: inline-block;
}

.social-profile a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.social-profile a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-profile svg {
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
    fill: white;
}

/* Facebook hover */
.social-profile a.facebook:hover {
    background-color: #1877f2;
}
.social-profile a.facebook:hover svg {
    fill: #ffffff;
}

/* TikTok hover */
.social-profile a.tiktok:hover {
    background-color: #000000;
}
.social-profile a.tiktok:hover svg {
    fill: #ffffff;
}

/* Instagram hover */
.social-profile a.instagram:hover {
    background: linear-gradient(
        45deg,
        #405de6,
        #5851db,
        #833ab4,
        #c13584,
        #e1306c,
        #fd1d1d
    );
}
.social-profile a.instagram:hover svg {
    fill: #ffffff;
}

.d-none {
    display: none !important;
}

/*===== footer-area =======*/
.footer-area .section-block {
    background-color: rgba(128, 137, 150, 0.1);
}

.footer-area .cta-svg {
    bottom: auto;
    top: -100px;
}

/*===== copy-right =======*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .copy-right {
        text-align: center;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .copy-right {
        text-align: center;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .copy-right {
        text-align: center;
    }
}

/*===== copy__desc =======*/
.copy__desc {
    font-size: 15px;
}

.copy__desc a {
    color: #5d646d;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.copy__desc a:hover {
    color: #ca262c;
}

.copy__desc span {
    animation: heartBeat 1000ms infinite linear;
    color: #ca262c;
}

/*===== copy-right-content =======*/
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .copy-right-content {
        -ms-flex-pack: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .copy-right-content {
        -ms-flex-pack: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .copy-right-content {
        -ms-flex-pack: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* (GLOBAL) CHANGED AFFECTS ALL */
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* (GLOBAL) CHANGED AFFECTS ALL */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

.default-according .card .card-header {
    padding: 5px 0px;
}

.bottom-line-decoration:hover::before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.bottom-line-decoration::before {
    position: absolute;
    content: "";
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--theme-primary);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.label-check-out {
    font-size: 12px;
    text-wrap: nowrap;
    color: #8f8f8f;
}

/* arrow/button carosel */
.button-carosel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: white;
    color: gray;
    border: none;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s ease, background-color 0.3s, transform 0.3s,
        visibility 0.3s;
    cursor: pointer;
    z-index: 9999999999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.button-carosel-left-arrow {
    left: -19px;
}

.button-carosel-right-arrow {
    right: -14px;
}

.button-carosel-arrow:active {
    background-color: var(--theme-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}
.desc-step {
    display: none;
}
@media only screen and (min-width: 768px) {
    .desc-step {
        display: block !important;
    }
}

.disclaimer-panel {
    background-color: #f7f7f7;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.refund-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.refund-list li {
    position: relative;
    padding-left: 11px;
}

.refund-list li::before {
    content: "-";
    position: absolute;
    left: 0;
}

/* login section */
.flight-card .row .profile-card-img {
    padding: 5px;
    display: flex;
}

.flight-card .profile-card-img img {
    width: 65px;
    height: 65px;
    padding: 15px 10px;
    background-color: #fff;
    border-radius: 10px;
    color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.flight-card .row .profile-title-login {
    text-align: left;
    display: flex;
}
.flight-card .row .profile-title-login h4 {
    font-size: 1.13em;
    display: block;
    font-weight: bold;
}
.flight-card .row .profile-desc {
    text-align: left;
    display: flex;
}
.flight-card .row .profile-desc p {
    font-size: medium;
    display: block;
    margin-bottom: 10px;
}
/* end */
.dx-toast-wrapper,
.dx-toast-content {
    z-index: 999999999 !important;
}