@charset "utf-8";
/*! Site Variable Css*/
:root {
    --thc-darkblue-color: #011b43;
    --thc-blue-color:#021f4e;
    --thc-main-color:#eb7700;
    --thc-white-color:#fff;
    --thc-radius:10px;
    --thc-transition:all 0.3s ease;
    --thc-font-size:16px;
    --thc-line-height:18px;
    --thc-letter-spacing:1.5px;
    --thc-main-font: 'BarlowRegular';
    --thc-main-font-light:  'BarlowLight';
    --thc-main-font-medium: 'BarlowMedium';
    --thc-main-font-semibold: 'BarlowSemiBold';
    --thc-main-font-bold: 'BarlowBold';
  }
/*! Variable Css */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;font:inherit;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;max-width: 100%;height: auto;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none;}
caption,th{text-align:left;}
abbr,acronym{border:0;}
a{outline-style:none;text-decoration:none;color:inherit;}
a:hover{text-decoration:none;}
a[href^=tel]{text-decoration:none;}
input{border:none;color:#000000;}
input[type="button"]{cursor:pointer;border:none;background-color:transparent;}
input[type="submit"]{cursor:pointer;}
textarea{background-color:transparent;border:none;overflow:auto;}
*:focus{outline:none;}
button{border:none;background-color:transparent;cursor:pointer;padding:0px;-webkit-appearance:none;border-radius:0;}
figure{margin:0px;padding:0px;}
.h-100 {height: 100%;}
select {-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';}

/* clearfix */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%;}
.clear{clear:both;}
select::-ms-expand{display:none;}
input,textarea,button,select,a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
input{-webkit-appearance:none;}
input,textarea,select{outline:none;}
button::-moz-focus-inner,a::-moz-focus-inner{border:0;}
button:focus,button:active,a:focus,a:active{outline:0;}
img {image-rendering: -o-auto;image-rendering: -webkit-optimize-contrast;image-rendering: auto;image-rendering: optimizequality;-ms-interpolation-mode: nearest-neighbor;}
/* ========[ page style ]============ */
body{font-family: var(--thc-main-font-medium),-apple-system,BlinkMacSystemFont,Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--thc-font-size);font-weight:normal;font-variant-ligatures:none;background: var(--thc-white-color);overflow-x: hidden;}
.container-fluid  .container{padding-right:0;padding-left:0;}
/* width */
 ::-webkit-scrollbar {
    width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
    background:#222;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background:var(--thc-main-color)
}
strong,b {
    font-family: var(--thc-main-font-bold);
}
input[type="text"],input[type="password"],input[type="submit"],input[type="button"],textarea,select{outline:none;}
h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;line-height:inherit;}
[class^="flaticon-"]:before,[class*=" flaticon-"]:before,[class^="flaticon-"]:after,[class*=" flaticon-"]:after{margin:0;font-size:inherit;}
.lazyload,.lazyloading{opacity:0;visibility:hidden;}
.lazyloaded, .lazyloading{opacity:1;visibility:visible;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease;}
  
/* ========[ font  - style ]============ */
@font-face {
    font-family: 'BarlowLight';
    src: url('../fonts/BarlowLight.eot');
    src: url('../fonts/BarlowLight.eot') format('embedded-opentype'),
         url('../fonts/BarlowLight.woff2') format('woff2'),
         url('../fonts/BarlowLight.woff') format('woff'),
         url('../fonts/BarlowLight.ttf') format('truetype'),
         url('../fonts/BarlowLight.svg#BarlowLight') format('svg');
}
@font-face {
    font-family: 'BarlowRegular';
    src: url('../fonts/BarlowRegular.eot');
    src: url('../fonts/BarlowRegular.eot') format('embedded-opentype'),
         url('../fonts/BarlowRegular.woff2') format('woff2'),
         url('../fonts/BarlowRegular.woff') format('woff'),
         url('../fonts/BarlowRegular.ttf') format('truetype'),
         url('../fonts/BarlowRegular.svg#BarlowRegular') format('svg');
}

@font-face {
    font-family: 'BarlowMedium';
    src: url('../fonts/BarlowMedium.eot');
    src: url('../fonts/BarlowMedium.eot') format('embedded-opentype'),
         url('../fonts/BarlowMedium.woff2') format('woff2'),
         url('../fonts/BarlowMedium.woff') format('woff'),
         url('../fonts/BarlowMedium.ttf') format('truetype'),
         url('../fonts/BarlowMedium.svg#BarlowMedium') format('svg');
}
@font-face {
    font-family: 'BarlowSemiBold';
    src: url('../fonts/BarlowSemiBold.eot');
    src: url('../fonts/BarlowSemiBold.eot') format('embedded-opentype'),
         url('../fonts/BarlowSemiBold.woff2') format('woff2'),
         url('../fonts/BarlowSemiBold.woff') format('woff'),
         url('../fonts/BarlowSemiBold.ttf') format('truetype'),
         url('../fonts/BarlowSemiBold.svg#BarlowSemiBold') format('svg');
}

@font-face {
    font-family: 'BarlowBold';
    src: url('../fonts/BarlowBold.eot');
    src: url('../fonts/BarlowBold.eot') format('embedded-opentype'),
         url('../fonts/BarlowBold.woff2') format('woff2'),
         url('../fonts/BarlowBold.woff') format('woff'),
         url('../fonts/BarlowBold.ttf') format('truetype'),
         url('../fonts/BarlowBold.svg#BarlowBold') format('svg');
}

/* ========[ flex style ]============ */
 
 
/********* SPACE  ********/
.spacing-view {padding: 30px 0px 0;}
.view-0 { margin-bottom: 0px !important; }
.view-5 { margin-bottom: 5px !important; }
.view-6 { margin-bottom: 6px !important; }
.view-7 { margin-bottom: 7px !important; }
.view-8 { margin-bottom: 8px !important; }
.view-9 { margin-bottom: 9px !important; }
.view-10 { margin-bottom: 10px !important; }
.view-12 { margin-bottom: 12px !important; }
.view-15 { margin-bottom: 15px !important; }
.view-20 { margin-bottom: 20px !important; }
.view-25 { margin-bottom: 25px !important; }
.view-30 { margin-bottom: 30px !important; }
.view-35 { margin-bottom: 35px !important; }
.view-40 { margin-bottom: 40px !important; }
.view-45 { margin-bottom: 45px !important; }
.view-50 { margin-bottom: 50px !important; }
.view-55 { margin-bottom: 55px !important; }
.view-60 { margin-bottom: 60px !important; }
.view-65 { margin-bottom: 65px !important; }
.view-70 { margin-bottom: 70px !important; }
.view-75 { margin-bottom: 75px !important; }
.view-80 { margin-bottom: 80px !important; }
.view-85 { margin-bottom: 85px !important; }
.view-90 { margin-bottom: 90px !important; }
.view-95 { margin-bottom: 95px !important; }
.view-100 { margin-bottom: 100px !important; }
@media (min-width:768px) {
    .spacing-view {padding: 60px 0 0;}
    .view-md-0 { margin-bottom: 0px !important; }
    .view-md-5 { margin-bottom: 5px !important; }
    .view-md-10 { margin-bottom: 10px !important; }
    .view-md-12 { margin-bottom: 12px !important; }
    .view-md-15 { margin-bottom: 15px !important; }
    .view-md-20 { margin-bottom: 20px !important; }
    .view-md-25 { margin-bottom: 25px !important; }
    .view-md-26 { margin-bottom: 26px !important; }
    .view-md-30 { margin-bottom: 30px !important; }
    .view-md-35 { margin-bottom: 35px !important; }
    .view-md-40 { margin-bottom: 40px !important; }
    .view-md-45 { margin-bottom: 45px !important; }
    .view-md-50 { margin-bottom: 50px !important; }
    .view-md-55 { margin-bottom: 55px !important; }
    .view-md-60 { margin-bottom: 60px !important; }
    .view-md-65 { margin-bottom: 65px !important; }
    .view-md-70 { margin-bottom: 70px !important; }
    .view-md-75 { margin-bottom: 75px !important; }
    .view-md-80 { margin-bottom: 80px !important; }
    .view-md-85 { margin-bottom: 85px !important; }
    .view-md-90 { margin-bottom: 90px !important; }
    .view-md-95 { margin-bottom: 95px !important; }
    .view-md-100 { margin-bottom: 100px !important; }
    .order-md-6 {order:6;}
    .order-md-7 {order:7;}
    .order-md-8 {order:8;}
    .order-md-9 {order:9;}
    .order-md-10 {order:10;}
    .order-md-11 {order:11;}
    .order-md-12 {order:12;}
    .order-md-13 {order:13;}
}
@media (min-width:992px) {
    .view-lg-0 { margin-bottom: 0px !important; }
    .view-lg-5 { margin-bottom: 5px !important; }
    .view-lg-10 { margin-bottom: 10px !important; }
    .view-lg-15 { margin-bottom: 15px !important; }
    .view-lg-20 { margin-bottom: 20px !important; }
    .view-lg-25 { margin-bottom: 25px !important; }
    .view-lg-30 { margin-bottom: 30px !important; }
    .view-lg-35 { margin-bottom: 35px !important; }
    .view-lg-40 { margin-bottom: 40px !important; }
    .view-lg-45 { margin-bottom: 45px !important; }
    .view-lg-50 { margin-bottom: 50px !important; }
    .view-lg-55 { margin-bottom: 55px !important; }
    .view-lg-60 { margin-bottom: 60px !important; }
    .view-lg-65 { margin-bottom: 65px !important; }
    .view-lg-70 { margin-bottom: 70px !important; }
    .view-lg-75 { margin-bottom: 75px !important; }
    .view-lg-80 { margin-bottom: 80px !important; }
    .view-lg-85 { margin-bottom: 85px !important; }
    .view-lg-90 { margin-bottom: 90px !important; }
    .view-lg-95 { margin-bottom: 95px !important; }
    .view-lg-100 { margin-bottom: 100px !important; }
}
@media (min-width:1200px) {
    .view-xl-0 { margin-bottom: 0px !important; }
    .view-xl-5 { margin-bottom: 5px !important; }
    .view-xl-10 { margin-bottom: 10px !important; }
    .view-xl-15 { margin-bottom: 15px !important; }
    .view-xl-20 { margin-bottom: 20px !important; }
    .view-xl-25 { margin-bottom: 25px !important; }
    .view-xl-30 { margin-bottom: 30px !important; }
    .view-xl-35 { margin-bottom: 35px !important; }
    .view-xl-40 { margin-bottom: 40px !important; }
    .view-xl-45 { margin-bottom: 45px !important; }
    .view-xl-50 { margin-bottom: 50px !important; }
    .view-xl-55 { margin-bottom: 55px !important; }
    .view-xl-60 { margin-bottom: 60px !important; }
    .view-xl-65 { margin-bottom: 65px !important; }
    .view-xl-70 { margin-bottom: 70px !important; }
    .view-xl-75 { margin-bottom: 75px !important; }
    .view-xl-80 { margin-bottom: 80px !important; }
    .view-xl-85 { margin-bottom: 85px !important; }
    .view-xl-90 { margin-bottom: 90px !important; }
    .view-xl-95 { margin-bottom: 95px !important; }
    .view-xl-100 { margin-bottom: 100px !important; }
}
@media (min-width:1560px) {
.view-xxl-25 { margin-bottom: 25px !important; }
}
/********* END OF SPACE  ********/

/* ========[ general style ]============ */
.main-color {
    color: var(--thc-main-color);
}
.page-header {
    height: 250px;
    text-align: center;
    background: var(--thc-darkblue-color);
    position: relative;
    display: flex;
    align-items: center;
}
.page-header-bg {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-size: cover !important;
    opacity: 0.5;
    mix-blend-mode: overlay;
}
.page-header .page-title {
    color: var(--thc-white-color);
    font-family: var(--thc-main-font-bold);
}


.breadcrumb {
    color: #666;
    margin-bottom: 20px;
}
.breadcrumb span + span {margin-left: 10px;padding-left: 10px;}

.breadcrumb span + span:before {
    content: ">";
    position: absolute;
    left: -4px;
}

.breadcrumb span {
    position: relative;
}

.breadcrumb a {transition: var(--thc-transition);}

.breadcrumb a:hover {
    color: var(--thc-main-color);
}
.breadcrumb.type-02 {
    justify-content: center;
    color: #879cbe;
    margin-bottom: 0;
}

.breadcrumb.type-02 span + span {
    margin-left: 10px;
    padding-left: 10px;
}

.breadcrumb.type-02 span + span:before {
    content: "/";
}
.accordion-item .accordion-button {
    font-size: 16px;
    color: #666;
    font-family: var(--thc-main-font);
    padding: 21px 1.25rem 21px 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 3px solid #f1f0f8;
    line-height: 25px;
}

.accordion-item {
    border: 0;
    border-radius: 0;
}

.accordion-button:not(.collapsed) {
    background: #f5f5f5;
    border-color: #d1cbcb;
    padding-left: 1.25rem;
    font-family: var(--thc-main-font-semibold);
}

.accordion-collapse {
    background: #f5f5f5;
}

.accordion-collapse {
    border-radius: 0 0 var(--thc-radius) var(--thc-radius);
    overflow: hidden;
    line-height: 1.6;
    font-family: var(--thc-main-font);
}
.page-title {
    font-size: 24px;
    color: var(--thc-main-color);
    line-height: 1.4;
    margin-bottom: 15px;
}
.black-title {
    font-size: 35px;
    line-height: 1.22;
    color: #222;
    font-family: var(--thc-main-font-semibold);
}

.general-desc {
    font-size: 16px;
    color: #666;
    font-family: var(--thc-main-font-light);
    margin-bottom: 15px;
}

.general-desc.desc-lh {
    line-height: 1.88;
}

.hotel-title {
    font-size: 15px;
    letter-spacing: 3.75px;
    color: var(--thc-main-color);
    font-family: var(--thc-main-font-light);
    margin-bottom: 15px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.position-relative {
    position: relative !important;
}

.box-item {
    width: 100%;
}

.box-item>a {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.img-holder {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: center;
}

.img-holder:before {
    position: relative;
    display: block;
    width: 100%;
    content: "";
    background: #f7f7f7 url(../i/logo.png) no-repeat;
    background-size: 45%;
    background-position: center;
}

._51x26 .img-holder:before {
    padding-bottom: calc(26 / 51 * 100%);
}

._1x1 .img-holder:before {
    padding-bottom: calc(1 / 1 * 100%);
}

._3x4 .img-holder:before {
    padding-bottom: calc(4 / 3 * 100%);
}
._17x11 .img-holder:before {
    padding-bottom: calc(11 / 17 * 100%);
}
._72x41 .img-holder:before {
    padding-bottom: calc(41 / 72 * 100%);
}
._749x440 .img-holder:before {
    padding-bottom: calc(440 / 749 * 100%);
}
._359x363 .img-holder:before {
    padding-bottom: calc(363 / 359 * 100%);
}
._277x160 .img-holder:before {
    padding-bottom: calc(160 / 277 * 100%);
}
._554x363 .img-holder:before {
    padding-bottom: calc(363 / 554 * 100%);
}

._139x59 .img-holder:before {
    padding-bottom: calc(59 / 139 * 100%);
}

.img-holder img {
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0;
    height: auto;
}

.icon {
    display: block;
    background: url(../i/sprite.png) no-repeat;
}

.hotel-icon {
    width: 33px;
    height: 24px;
    background-position: -2px -6px;
}

.nav-link.active .hotel-icon {
    background-position: -39px -6px;
}
.form-item .form-control {
    height: 44px;
    color: #666;
    padding-left: 16px;
    border: solid 2px #f1f0f8;
    border-radius: var(--thc-radius);
    font-size: 14px;
}
.form-item.select-item {
    position: relative;
}

.form-item.select-item .icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
    filter: brightness(0);
    pointer-events: none;
}

.form-item.select-item select {
    cursor: pointer;
}
.form-submit button {
    width: 100%;
    max-width: 320px;
    margin: auto;
    height: 66px;
    background: var(--thc-main-color);
    border-radius: var(--thc-radius);
    color: var(--thc-white-color);
    transition: var(--thc-transition);
}

.form-submit button:hover {
    background: var(--thc-darkblue-color);
}
.form-item {
    margin-bottom: 13px;
}
.form-item.date {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
input[type="date"]:before{
    color:#6c757d;
    content:attr(placeholder);
    margin-right: 10px;
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}
.date-title {
    position: absolute;
    top: 1px;
    left: 1px;
    background: var(--thc-white-color);
    border-radius:
    var(--thc-radius);
    right: 1px;
    bottom: 1px;
    padding-left: 23px;
    color: #6c7592;
    pointer-events: none;
    z-index: 2;
}
.form-item textarea.form-control {
    height: 70px;
}
.contact-icon {
    width: 36px;
    height: 36px;
    background-position: -3px -72px;
}

.bedroom-icon {
    width: 25px;
    height: 21px;
    background-position: -57px -44px;
}

.arrow-left-icon {
    width: 14px;
    height: 11px;
    background-position: -190px -50px;
}

.bathroom-icon {
    width: 25px;
    height: 25px;
    background-position: -92px -41px;
}
.mail-icon {
    width: 50px;
    height: 34px;
    background-position: -8px -204px;
}

.map2-icon {
    width: 38px;
    height: 50px;
    background-position: -81px -195px;
}
.kitchen-icon {
    width: 25px;
    height: 21px;
    background-position: -127px -41px;
}

.ask-icon {
    width: 23px;
    height: 25px;
    background-position: -160px -39px;
}

.plane-icon {
    background-position: -83px -6px;
    width: 30px;
    height: 31px;
}

.nav-link.active .plane-icon {
    background-position: -120px -6px;
}

.car-icon {
    width: 33px;
    height: 19px;
    background-position: -163px -15px;
}

.nav-link.active .car-icon {
    background-position: -205px -15px;
}

.range-area.flatpickr {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.range-area.flatpickr input {
    height: 100%;
    width: 100%;
}

.datepicker-icon {
    width: 24px;
    height: 24px;
    background-position: -2px -37px;
    margin-right: 0 !important;
}

.date-icon {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
}

.select-icon {
    width: 15px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 50%;
    background-position: -32px -40px;
    transform: translate(0, -50%);
    pointer-events: none;
    margin-right: 0 !important;
}

.modal-header {
    position: absolute;
    top: 0;
    z-index: 99;
    padding: 0;
    border: 0;
    right: 0;
}

.modal-header .btn-close {
    padding: 0;
    margin: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--thc-main-color);
    opacity: 1;
}

.modal-dialog {
    max-width: 950px;
}

.text-orient {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-orient-1 {
    -webkit-line-clamp: 1;
}

.text-orient-2 {
    -webkit-line-clamp: 2;
}

.text-orient-3 {
    -webkit-line-clamp: 3;
}

.text-orient-4 {
    -webkit-line-clamp: 4;
}

.text-orient-5 {
    -webkit-line-clamp: 5;
}

.text-orient-6 {
    -webkit-line-clamp: 6;
}

.text-orient-7 {
    -webkit-line-clamp: 7;
}

@media(min-width:768px) {
    .text-orient-md {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-orient-md-1 {
        -webkit-line-clamp: 1;
    }

    .text-orient-md-2 {
        -webkit-line-clamp: 2;
    }

    .text-orient-md-3 {
        -webkit-line-clamp: 3;
    }

    .text-orient-md-4 {
        -webkit-line-clamp: 4;
    }
}

@media(min-width:1200px) {
    .text-orient-lg {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-orient-lg-1 {
        -webkit-line-clamp: 1;
    }

    .text-orient-lg-2 {
        -webkit-line-clamp: 2;
    }

    .text-orient-lg-3 {
        -webkit-line-clamp: 3;
    }

    .text-orient-lg-4 {
        -webkit-line-clamp: 4;
    }
}

@media(min-width:1400px) {
    .text-orient-xl {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .text-orient-xl-1 {
        -webkit-line-clamp: 1;
    }

    .text-orient-xl-2 {
        -webkit-line-clamp: 2;
    }

    .text-orient-xl-3 {
        -webkit-line-clamp: 3;
    }

    .text-orient-xl-4 {
        -webkit-line-clamp: 4;
    }
}

/* ========[ general style ]============ */


/* ========[ header]============ */
.header-topbar {
    background: var(--thc-darkblue-color);
}

.topbar-left a {
    line-height: 15px;
    display: block;
    transition: var(--thc-transition);
}

.header {
    letter-spacing: var(--thc-letter-spacing);
    font-size: 15px;
    position: sticky;
    top: 0;
    z-index: 99999;
    color: var(--thc-white-color);
}

.topbar-left a+a {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid var(--thc-white-color);
}

.dropdown-bar a {
    color: #fff;
}

.dropdown-bar li+li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--thc-darkblue-color);
}

.topbar-area {
    height: 50px;
}

.topbar-left,
.topbar-right {
    height: 100%;
}


.customer-tel {
    padding-left: 30px;
    margin-left: 30px;
    border-left: 1px solid #033687;
}

.topbar-left a:hover {
    color: var(--thc-main-color);
}

.downbar-icon {
    width: 10px;
    height: 5px;
    background-position: 0 0;
}

.header-mainbar {
    height: 90px;
    background: var(--thc-blue-color);
}

.dropdown-bar {
    position: absolute;
    top: 100%;
    background: #061b3a;
    right: 0;
    width: 200px;
    padding: 20px;
    border-radius: 0 0 var(--thc-radius) var(--thc-radius);
    display: none;
    border: 2px solid #061b3a;
    border-top: 0;
}

.language {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    transition: var(--thc-transition);
}

.customer-tel a,
.language a,
.menu ul li a {
    transition: var(--thc-transition);
    display: block;
    text-align: center;
}

.customer-tel a:hover,
.language a:hover,
.menu ul li a:hover,
.menu ul li.active a {
    color: var(--thc-main-color);
}
.hamburger-menu>a {
    display: block;
    width: 26px;
    height: 20px;
    background: url(../i/hamburger-icon.svg) no-repeat;
}

/* ========[ end of header]============ */

/* ========[ footer]============ */

.footer-top {
    max-width: 945px;
    margin: 0 auto -65px;
    height: auto;
    background: var(--thc-main-color) url(../i/footer-top-bg.jpg) no-repeat;
    border-radius: 20px;
    padding: 30px 20px;
    background-position: center;
}

.call-header {
    font-size: 22px;
    font-family: var(--thc-main-font-semibold);
    line-height: 2;
    width: 100%;
    color: var(--thc-white-color);
}

.call-header h5 {
    font-size: 16px;
    font-family: var(--thc-main-font);
}

.call-block {
    width: 100%;
}

.form-action .item {
    width: 180px;
}

.footer-top form .item {
    width: 100%;
}

.footer-top form .item input {
    width: 100%;
    background: none;
    color: #fff;
    padding: 9px 17px 20px 0px;
    border-bottom: 1px solid #f4f4f4;
}

.footer-top form .item input::placeholder {
    color: #fff;
}


.footer-top .submit button {
    border-radius: 23px;
    background-color: #222;
    width: 147px;
    height: 46px;
    color: var(--thc-white-color);
    justify-content: center;
    font-size: 16px;
    transition: var(--thc-transition);
}

.footer-top .submit button:hover {
    background: var(--thc-blue-color);
}

.footer-bottom {
    padding: 124px 0 33px;
    background: #222;
}

.f-about {
    font-size: 18px;
    font-family: var(--thc-main-font);
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--thc-main-color);
    gap: 20px;
    color: var(--thc-white-color);
}

.map-icon {
    width: 45px;
    height: 45px;
    background-position: -59px -78px;
}

.message-icon {
    width: 50px;
    height: 44px;
    background-position: -125px -80px;
}

.social-media-accounts ul li a {
    width: 38px;
    height: 38px;
    border: solid 2px var(--thc-main-color);
    border-radius: 100%;
}

.social-media-accounts ul {
    gap: 8px;
}

.facebook-icon {
    width: 10px;
    height: 18px;
    background-position: -9px -141px;
}

.twitter-icon {
    width: 18px;
    height: 14px;
    background-position: -30px -143px;
}

.youtube-icon {
    width: 20px;
    height: 14px;
    background-position: -59px -143px;
}

.linkedin-icon {
    width: 20px;
    height: 19px;
    background-position: -94px -139px;
}

.instagram-icon {
    width: 19px;
    height: 19px;
    background-position: -127px -141px;
}

.f-about .map-icon,
.f-about .message-icon,
.social-media-accounts h3 {
    margin-right: 30px;
}

.footer-bottom a {
    transition: var(--thc-transition);
}

.footer-bottom a:hover {
    color: var(--thc-main-color);
}

.social-media-accounts ul li a:hover {
    background: var(--thc-main-color);
}

.social-media-accounts ul li a:hover i {
    filter: brightness(0) invert(1);
}

.f-menu .title {
    font-size: 22px;
    color: var(--thc-main-color);
    font-family: var(--thc-main-font-semibold);
    margin-bottom: 25px;
}

.f-menu ul li a {
    font-size: 16px;
    color: #707070;
}

.f-menu ul li+li {
    margin-top: 10px;
}



.call-us .title {
    font-size: 22px;
    color: var(--thc-main-color);
    font-family: var(--thc-main-font-semibold);
    margin-bottom: 18px;
}

.phone-icon {
    width: 54px;
    height: 54px;
    background-position: -167px -133px;
}

.call-us a {
    font-size: 17px;
    font-family: var(--thc-main-font-semibold);
    line-height: 1.43;
    color: var(--thc-white-color);
}

.call-us .phone-icon {
    margin-bottom: 30px;
}



.brands-area {
    padding: 35px 10px;
    margin: 40px 0 30px;
    border-top: 1px solid var(--thc-main-color);
    border-bottom: 1px solid var(--thc-main-color);
}

.brand-slider .swiper-slide {
    width: 16.66%;
}

.brand-slider .swiper-slide .img {
    text-align: center;
}

.brand-slider .swiper-slide .img img {
    max-width: 100px;
    max-height: 50px;
}
.star-icon {
    width: 19px;
    height: 18px;
    background-position: -216px -45px;
}
.direction-icon {
    width: 32px;
    height: 23px;
    background-position: -194px -97px;
}
.package-slider .swiper-button-next,.package-slider .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgb(2 31 78 / 85%);
    border-radius: 100%;
    margin-top: -30px;
}

.package-slider.swiper-initialized.swiper-horizontal.swiper-pointer-events {}

.package-slider .swiper-button-next {
    right: 0;
    cursor: pointer;
}

.package-slider .swiper-button-prev {
    left: 0;
}

.package-slider .swiper-button-prev .icon {
    transform: rotate(180deg) scale(0.8) !important;
}

.package-slider .swiper-button-next:hover, .package-slider .swiper-button-prev:hover {
    background: var(--thc-blue-color);
}

.package-slider .swiper-button-prev .icon,.package-slider .swiper-button-next .icon {
    filter: brightness(0) invert(1);
    transform: scale(0.8);
}
.brands-area .swiper-button-prev {
    left: 0px;
    transform: rotate(180deg);
    width: auto;
    background: #222;
}

.brands-area .swiper-button-next {
    right: 0;
    width: auto;
    background: #222;
}

.copyright {
    font-size: 16px;
    color: #707070;
}
 .footer-top .submit {
    margin-top:20px;
}
.f-menu {
    margin-bottom: 30px;
}
.social-media-accounts {
    gap: 15px;
}
.etbis img {
    max-width: 100px;
}
/* ========[ end of footer]============ */


/* custom media queries*/


@media (min-width:768px) {
    .header {
        font-size: 12px;
    }

    .menu ul {
        gap: 10px;
    }

    .logo {
        margin-right: 20px;
    }
    .black-title {
        font-size: 45px;
    }
    .footer-top {
        padding: 0 60px;
        height: 160px;
    }
    .call-header {
        width: auto;
    }
    .footer-top form .item {
        width: 190px;
    }
    .footer-top .submit {
        margin-left: 37px;
        margin-top:0;
    }
    .f-about {
        padding-bottom: 60px;
        margin-bottom: 40px;
        gap: 30px;
    }
    .f-menu {
        margin-bottom: 0;
    }
    .f-call-area {
        max-width: 100%;
        padding-left: 20px;
        gap: 20px;
    }
    .call-us {
        border-left: 1px solid var(--thc-main-color);
    }
    .call-us a {
        font-size: 22px;
    }
    .social-media-accounts {
        gap: 0;
    }
    .breadcrumb {
        margin-bottom: 40px;
    }
    .page-title {
        font-size: 28px;
        margin-bottom: 10px;
    }
    .breadcrumb span + span {margin-left: 15px;padding-left: 15px;}
    .form-item {
        margin-bottom: 21px;
    }
    .form-item .form-control {
        height: 66px;
        padding-left: 25px;
        font-size: 1rem;
    }
    .form-item textarea.form-control {
        height: 150px;
    }
}

@media (min-width:992px) {
    .header {
        font-size: 15px;
    }

    .logo {
        margin-right: 0;
    }

    .f-about {
        gap: 0;
    }
    .f-call-area {
        flex-direction:inherit !important;
        align-items: flex-end;
    }
}


@media (min-width:1200px) {

    .menu ul {
        gap: 30px;
    }
    .call-us a {
        font-size: 28px;
    }
}

@media (max-width:767px){
    .mobile-menu-active .menu {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        z-index: 99;
    }
    .mobile-menu-active:after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        background: rgb(1 27 67 / 68%);
    }
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
        z-index: -1;
        width: 70%;
        background: var(--thc-darkblue-color);
        transform: translateX(-100%);
    }
    
    .menu ul {
        flex-flow: column;
        height: 100%;
        padding: 60px 15px;
    }
    .menu ul li a {
        text-align: left;
        padding: 10px 0;
        border-bottom: 1px solid;
    }
    
    .menu ul li {
        width: 100%;
    }
    
    .menu ul li:last-child a {
        border: 0;
    }
    .mobile-menu-active .hamburger-menu>a {
        background: url(../i/close-icon.svg) no-repeat;
        width: 20px;
    }
    .mobile-menu-active .topbar-area {
        z-index: 99999;
        position: relative;
    }
    
}