@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {
    --blue: #06BEFE;
    --dark_blue: #2f3c4f;
    --light_blue: #dfeeff;
    --white: #fff;
    --bg_light: #F9FAFD;
    --yellow: #ffa500;
    --red: red;
    --light-green: seagreen;
    --light_gray: #302e2e36;
    --hr_line_color: #D9D9D9;
}  

body {
    margin: 0px;
    background-color: var(--bg_light);
}
body, h1, h2, h3, h4, h5, h6, p, button, input {
    font-family: "Jost", sans-serif !important;    
}
h1 {
    font-size: 22px !important;
}
.row {
    display: flex;
}
.container {
    max-width: 1240px;
    margin: 0px auto;
    padding: 0px 20px;
    width: 100%;
}
.row{
    display:flex; 
    flex-flow: row wrap; 
   }

.col1{
   width: 8.33%;
}
.col2{ 
   width: 16.66%;
}
.col3{ 
   width: 25%;
}
.col4{ 
   width: 33.33%;
}
.col5{ 
   width: 41.66%;
}
.col6{ 
   width: 50%;
}
.col7{ 
   width: 58.33%;
}
.col8{ 
   width: 66.66%;
}
.col8-1 {
    width: 66.66%;
}
.col9{ 
   width: 75%;
}
.col10{ 
   width: 83.33%;
}
.col11{ 
   width: 91.66%;
}
.col12{ 
   width: 100%;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
h2 {
    /* text-transform: capitalize;*/
    font-size: 48px;
    margin: 10px 0px;
    line-height: 48px;
    font-weight: 700;
    color: var(--dark_blue);
}
h2 span {
    color: var(--blue) !important;
}

h3 {
    text-transform: capitalize;
    font-size: 32px;
    margin: 10px 0px;
    line-height: 38px;
}
h4 {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 10px;
    font-weight: 600;
}
h5 {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 500;
    margin-top: 20px;
}
.whitebg_btn {
    background-color: var(--white);
    padding: 12px 30px;
    display: inline-block;
    margin-top: 20px;
    border-radius: 20px;
    border: 2px solid var(--dark_blue);
    color: var(--dark_blue);
    font-weight: 600;
}

.whitebg_btn:hover {
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--white);
}
.text_center {
    text-align: center;
}
.bg_white {
    background-color: var(--white);
}
.padding {
    padding: 60px 0px;
}
.marb30 {
    margin-bottom: 30px;
}
.white{
    color: var(--white)
}
body, html {
    overflow-x: hidden;
}
.align_center {
    align-items: center;
}
p { 
    font-size: 17px;
    line-height: 21px;
}
/* global css close here*/
/* header css start here */
.login-img img {
    width: 100%;
    max-width: 45px;
    border-radius: 100px;
    height: 45px;
    object-fit: cover;
    margin-right: 10px;
}
.login-img {
    display: flex;
    align-items: center;
}

header {
    padding: 8px 0px;
    background-color: var(--white);
    box-shadow: 0 0 4px 3px rgba(0,0,0,.12) !important;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
header .main_menu {
    display: flex;
    align-items: center;
    justify-content: end;
}
header .main_menu a {
    color: var(--dark_blue);
    font-size: 16px;
    border-bottom: 2px solid transparent;
    padding-bottom: 0px;
    font-weight: 500;
    line-height: 16px;
    padding-bottom: 2px;
}
.antbtn.mobile {
        display: none;
    }
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* btn animation css start here*/
@keyframes shadow-pulse
{
  0% {
    box-shadow: 0 0 0 0 var(--blue);
}
100% {
    box-shadow: 0 0 2px 10px rgba(0, 112, 244, 0);
}
}
.animatbtn {
    animation: shadow-pulse 1.5s infinite;
    background-color: var(--blue);
    /*padding: 12px 25px !important;*/
    padding: 5px 16px !important;
    border-radius: 50px;
    color: var(--white) !important;
    border: 2px solid var(--blue);
    transition: 0.5s;
    white-space: nowrap;
}

.animatbtn:hover {
    background-color: var(--white) !important;
    transition: 0.5s;
    color: var(--blue) !important;
}
.animat-location {
    animation: shadow-pulse 1.5s infinite;
    background-color: var(--blue);
    color: var(--white) !important;
    border: 10px solid var(--blue);
    transition: 0.3s;
}
/*.header_logo .logo a, .footer_logo .logo a {
    font-size: 32px;
    font-weight: 600;
    color: var(--dark_blue);
    letter-spacing: -1px;
}*/
header .main_menu li {
    margin-right: 60px;
}
.header_logo .logo::first-letter, .footer_logo .logo::first-letter {
    font-size: 54px;
color: var(--dark_blue);
    letter-spacing: -13px;
}
header .main_menu li:hover a, header .main_menu .active {
    color: var(--blue) !important;
    border-color: var(--blue) !important;
}
.hero_section h2 {
    color: var(--white);
    margin-bottom: 20px;
}

.hero_section {
    margin-top: 30px;
    text-align: center;    
    background-repeat: no-repeat;
    background-size: cover;
    /*background-color: #060606d1;*/
    background-blend-mode: overlay;
    /* background-attachment: fixed; */
    background-position: center;
    height: 580px;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}
 .bannerconatnt {
    max-width: 756px;
    margin: 0px auto;
}


 .banner_menu {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 25px;
}
 .banner_menu a {
    color: var(--blue);
    padding: 8px 30px;
    transition: 0.5s;
}
 .banner_menu a:hover {
    background-color: var(--blue);
    color: var(--white);
}
 .banner_menu li:nth-child(even) a {
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: var(--blue);
}

.restaurants_booknow {
    background-color: var(--light_blue);
}
.restaurants_booknow .swiper-container {
    width: 100%;
    height: 100%;
}
.restaurants_booknow .swiper-slide {
text-align: center;
font-size: 18px;
background: var(--dark_blue);
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--dark_blue);
-webkit-transition: all 0.3s ease-in-out !important;
}

.restaurants_booknow .swiper-slide:hover{
background-color: var(--blue);
border-color: var(--blue);
-webkit-transition: all 0.3s ease-in-out !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
    content: "\f104";
    font-family: 'FontAwesome';
    background: var(--dark_blue);
    font-size: 40px;
    border-radius: 100px;
    padding: 8px 22px;
    color: var(--white);
    opacity: 0.7;
}
.swiper-button-next::after {
    content: "\f105";
    right: 0px;
    position: absolute;
   
}
.swiper-button-prev, .swiper-button-next {
    background: none !important;
}
.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
    opacity: 1;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--dark_blue);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--dark_blue);
}
.swiper-slide .hotelinfo {
    padding: 20px;
    color: var(--white);
}

/* hotel city */
.restaurants_beauty img {
    width: 100%;
    aspect-ratio: 1.3;
    object-fit: cover;
}
.hotel_in_city .city_menus {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 25px;
}
.hotel_in_city .city_menus li {
    border: 1px solid var(--dark_blue);
    padding: 8px 40px;
    margin: 5px 5px;
    text-align: center;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-in-out !important;
}

.hotel_in_city {
    text-align: center;
}

.hotel_in_city .city_menus li a {
    color: var(--dark_blue);
    font-weight: 500;
    font-size: 16px;
}

.hotel_in_city .city_menus li:hover {
    background-color: var(--dark_blue) !important;
}

.hotel_in_city .city_menus li:hover a {
    color: var(--white) !important;
}
.hotel_in_city {
    background-color: var(--white);
}

/*************/
.visit_places .visithere {
    margin: 15px;
    background-color: var(--dark_blue);
    border-radius: 10px;
    overflow: hidden;
    height: 95%;
    color: var(--white);
    border: 1px solid var(--dark_blue);
}
.visit_places .visithere:hover {
    background: var(--blue);
    border-color: var(--blue);
    transition: 1s;
}
.visit_places .visithere:hover {
    box-shadow: 0px 2px 21px 2px #ccc;
}

.visit_places .readvisit_place {
    padding: 20px;
}
.visit_places img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1.3;
}
.visit_places .visithere:hover .whitebg_btn {
    border-color: var(--white);
    background-color: transparent;
    color: var(--white);
}
.visit_places {
    border-top: 1px dashed var(--blue);
    background-color: #f3f3f3;
    border-bottom: 1px dashed var(--blue);
}
.visit_places p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.visit_places h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
}
    /**************************************************Blog list******************************/

.visit_places_list {
    
}
.city-link{color:var(--dark_blue);}
.city-link:hover {
    text-decoration:underline;
}
.whitebg_btn_list {
    background-color: var(--white);
    padding: 5px 20px;
    display: inline-block;
    margin-top: 20px;
    border-radius: 20px;
    border: 2px solid var(--dark_blue);
    color: var(--dark_blue);
    font-weight: 600;
}
    .visit_places_list .visithere {
        margin: 15px;
        background-color: var(--dark_blue);
        border-radius: 5px;
        overflow: hidden;
        height: 95%;
        color: var(--white);        
    }

        .visit_places_list .visithere:hover {
            background: var(--blue);
            border-color: var(--blue);
            transition: 1s;
            box-shadow: 0 0 10px 3px #000 !important;
        }

        .visit_places_list .visithere:hover {
            box-shadow: 0px 2px 21px 2px #ccc;
        }

.visit_places_list .readvisit_place {
    padding: 15px;
}

.visit_places_list img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1.3;
}

.visit_places_list .visithere:hover .whitebg_btn {
    border-color: var(--white);
    background-color: transparent;
    color: var(--white);
}


    .visit_places_list p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .visit_places_list h4 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 15px;font-size:19px;
    }
/**********************************************************/
/******* traveling offers css start here  *************/
.traveling_offers {
    /* background-image: url('../images/kampala.jpg');*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    background-color: #00000091;
    background-attachment: fixed;
}
.traveling_offers * {
    color: var(--white);
}


.traveling_offers .travellist li {
    font-size: 16px;
    padding: 4px 0px 6px 30px;
    position: relative;
}

.traveling_offers .travellist li strong {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 700;
}

.traveling_offers .travellist li::after {
    content: "\f058";
    font-family: FontAwesome;
    left: 0;
    position: absolute;
    top: 7px;
    font-size: 21px;
}
.traveling_offers .travelingnum {
    width: 90%;
    margin: 0px auto;
}
.traveling_offers .travelingnum h2 {
    text-align: center;
    margin-bottom: 30px;
}
.popup_contant * {
    color: var(--dark_blue) !important;
}

.free_stay_city {
    display: grid;
    grid-template: revert;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 30px;
    position: relative;
    border-bottom: 0px;
    border-right: 0px;
}

.free_stay_city .staypromise {
    padding: 60px 30px;
    position: relative;
    text-align: center;
    border-top: 0;
}
.free_stay_city h4 {
    font-size: 25px;
    color: var(--blue);
    margin: 20px 0px 10px;
    text-transform: capitalize;
    line-height: 28px;
}
.free_stay_city i.fa {
    font-size: 42px;
    color: var(--dark_blue);
}


.free_stay_city .staypromise:hover {
    background-color: var(--light_blue);
    transition: 0.2s;
}

.free_stay_city .free_stay {
    background-color: #f7f7f7;
}
.travelsknow * {
    color: var(--white);
    word-break: break-all;
}
.travel_important .cultarl {
    padding: 45px 25px;
    margin: 15px 15px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid;
    transition: 1s;
    height: 90%;
}
.travel_important .cultarl i.fa{
    color: var(--blue);
    font-size: 50px;
    margin-bottom: 20px;
}
.travel_important .cultarl h3 {
    color: var(--dark_blue);
    font-size: 23px;
    line-height: 25px;
    margin-bottom: 18px;
}
.travel_important .cultarl:hover * {
    color: var(--white);
}

.travel_important .cultarl:hover {
    background-color: var(--dark_blue);
}
.travel_important .cultarl:hover i.fa {
    color: var(--white);
}
/* home form css start here */
section.contactnow {
    background-color: var(--light_blue);
}
.homeform form {
    display: flex;
    background: var(--blue);
    width: 80%;
    margin: 0px auto;
    padding: 15px 10px;
    /*margin-top: -50px;*/
    margin-top: -300px;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.homeform form input {
    padding: 7px 10px;
    font-size: 16px;
    font-family: 'Jost';
    /*font-weight: 500;*/
    border: 1px solid var(--dark_blue);
    margin: 0px 5px;
    color: var(--dark_blue);
    width: 23%;
}
.homeform form input::placeholder {
    color: var(--dark_blue);
}
.homeform form input[type="submit"] {
    background-color: var(--dark_blue);
    color: var(--white) !important;
    transition: 1s;
}
.homeform form input[type="submit"]:hover {
    background-color: var(--white);
    color: var(--dark_blue) !important;
}
/****** distancecount *******/

.distancecount {
    background-color: var(--light_blue);
}
.distancecount h3 {
    margin-top: 13px;
}
.center {
    text-align: center;
}

/*popup css start here*/
.imgpopup img {
    height: 100% !important;
    object-fit: cover;
    object-position: top center;
}

.imgpopup {
    height: 100%;
    border: 1px solid;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 10px 10px 0px 0px var(--dark_blue);
}

.popup_contant h2 {
    font-size: 30px;
    line-height: 32px;
}
.popup_contant li {
    margin: 9px 0px;
    display: inline-block;
    padding-left: 20px;
    position: relative;
}

.popup_contant .arrowpopup li::before {
    content: "\f101";
    font-family: FontAwesome;
    left: 5px;
    position: absolute;
    top: 3px;
    color: var(--blue);
}
.popup-container:target{
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }

.show-popup {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

  ul.arrowpopup strong {
    color: var(--blue) !important;
}
.popup-content a.close:hover{
    background-color: var(--blue);
  }
  .popup_contant {
      padding-right: 30px;
  }
.popup-content {    
    background-color: #fefefe;
    margin: auto;
    margin-top: 100px;
    padding: 40px 35px;
    border: 1px solid var(--dark_blue);
    width: 75%;
    color: var(--dark_blue);
    position: relative;
    /* height: 90%; */
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
}
.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
    overflow-y: scroll;
}

.popup-content a.close {
    color: var(--white);
    font-size: 28px;
    background: var(--dark_blue);
    padding: 2px 16px 4px;
    border-radius: 100px;
    position: absolute;
    right: 0px;
    top: 0px;
}
.travels_know {
    background-color: var(--dark_blue);
    color: var(--white);
    padding: 40px 0px;
}
.travels_know .popupbtn {
    background-color: var(--white);
    padding: 10px 30px;
    display: inline-block;
    border-radius: 15px;
    color: var(--dark_blue);
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 15px;
}

.yootravelsauto_slider {
    overflow: hidden !important;
}
.travels_know img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.cityname {
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    top: 2px;
    left: 3px;
    /*z-index: 999;*/
    background: var(--dark_blue);
    padding: 2px 14px;
    box-shadow: 0px 0px 10px 0px #0000009e;
    color: var(--white);
}
.travels_know .slide {
    position: relative;margin-right:12px;
}

.slider_autogallery .slide-track {
   /* -webkit-animation: scroll 40s linear infinite;
    animation: scroll 20s linear infinite;*/
    display: flex;
    width: calc(300px * 11);
}

@-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-250px * 7));
      transform: translateX(calc(-250px * 7));
    }
  }
  @keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-250px * 7));
      transform: translateX(calc(-250px * 7));
    }
  }
  .slider_autogallery::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
  .slider_autogallery::before {
    left: 0;
    top: 0;
  }
/* footer css start here */

footer .footermenu {
    text-align: right;
}

footer .footermenu li::after {
    content: "\f058";
    font-family: FontAwesome;
}

footer .footer_mrnu a {
    padding-right: 10px;
    color: var(--dark_blue);
}

footer {
    padding: 40px 0px;
    border-top: 1px solid var(--blue);
    background-color: var(--light_blue);
}
footer * {
    color: var(--dark_blue);
}

footer .footer_mrnu li:hover a {
    color: var(--blue);
}
footer .footermenu li:hover::after {
    color: var(--blue);
}


/* K Hotel Page css start here */
.hotel_tabs .panel-title{
    font-size:1.5em;
    font-weight:bold
  }
/* hotel tabs css start here*/
.hotel_tabs .warpper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .hotel_tabs .tab {
      cursor: pointer;
      padding: 30px 20px;
      background: var(--white);
      color: var(--dark_blue);
      width: 100%;
      box-shadow: 0px 0px 10px 0px #ccc;
      text-align: center;
      border: 1px solid var(--blue);
      position: relative;
  }
  
  .hotel_tabs .panels p {
      margin-bottom: 10px;
  }
  .hotel_tabs .tabs {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.tabs h4 {
    margin-bottom: 0px;
}
.hotel_tabs .tab i.fa {
    font-size: 38px;
    margin-bottom: 15px;
}
.hotel_tabs .panel {
    /* display:none;*/
    animation: fadein .8s;
}
  @keyframes fadein {
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  
  .hotel_tabs .radio{
    display:none;
  }
  .hotel_tabs #one:checked ~ .panels #one-panel,
  .hotel_tabs #two:checked ~ .panels #two-panel,
  .hotel_tabs #three:checked ~ .panels #three-panel,
  .hotel_tabs #four:checked ~ .panels #four-panel,
  .hotel_tabs #five:checked ~ .panels #five-panel,
    .hotel_tabs #six:checked ~ .panels #six-panel{
    display:block
  }
  .hotel_tabs #one:checked ~ .tabs #one-tab,
   .hotel_tabs #two:checked ~ .tabs #two-tab, 
   .hotel_tabs #three:checked ~ .tabs #three-tab, 
   .hotel_tabs #four:checked ~ .tabs #four-tab,
    .hotel_tabs #five:checked ~ .tabs #five-tab,
    .hotel_tabs #six:checked ~ .tabs #six-tab {
background: var(--dark_blue);
color: var(--white);
border-color: var(--dark_blue);
}
  .hotel_tabs #one:checked ~ .tabs #one-tab::after,
  .hotel_tabs #two:checked ~ .tabs #two-tab::after,
  .hotel_tabs #three:checked ~ .tabs #three-tab::after,
  .hotel_tabs #four:checked ~ .tabs #four-tab::after, 
  .hotel_tabs #five:checked ~ .tabs #five-tab::after,
  .hotel_tabs #six:checked ~ .tabs #six-tab::after{
        content: "";
      position: absolute;
      height: 20px;
      width: 20px;
      background: var(--dark_blue);
      bottom: -10px;
      transform: rotate(45deg);
      left: 40%;
  }
  .hotel_tabs .tab:hover:hover,
   .hotel_tabs #one:checked  .tabs #one-tab,
    .hotel_tabs #two:checked  .tabs #two-tab, 
    .hotel_tabs #three:checked  .tabs #three-tab,
     .hotel_tabs #four:checked  .tabs #four-tab,
      .hotel_tabs #five:checked ~ .tabs #five-tab,
      .hotel_tabs #six:checked ~ .tabs #six-tab {
      background: var(--dark_blue) !important;
      color: var(--white);
      border-color: var(--dark_blue);
      transition: 0.4s;
  }
  .hotel_tabs .roommenulist {
      width: 60%;
  }
  .hotel_tabs .rightsidetab {
      width: 38%;
  }
  
  .hotel_tabs .addresshotel {
      background: var(--dark_blue);
      padding: 20px 20px;
  }

.hotel_tabs .panels {
    /*background: var(--white);
    border: 1px solid var(--blue);        
    padding: 40px 40px;*/
    width: 100%;
    overflow: hidden;
}
  
  .hotel_tabs .panels .fa.fa-star {
      color: var(--yellow);
      margin: 0px 2px;
      font-size: 20px;
  }
  .hotel_tabs .panels .panel-title {
      display: flex;
      font-size: 25px;
      color: var(--dark_blue);
      margin-bottom: 10px;
      text-transform: capitalize;
  }
  .hotel_tabs .panels .rating {
      margin-left: 20px;
  }

.selectedRooms {
    position: fixed;
    z-index: 1;
    bottom: 10px;
    background-color: var(--dark_blue);
    color: #fff;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
}
  
  .hotel_tabs .tabsinner_content {
      display: flex;
      gap: 20px;
      justify-content: space-between;
  }
  .hotel_tabs .addresshotel i.fa {
      border-right: 1px solid var(--white);
      width: 45px;
      height: 45px;
      text-align: center;
      font-size: 16px;
      line-height: 45px;
      margin-right: 8px;
      color: var(--white);
  }
  .hotel_tabs .addresshotel p {
      font-size: 15px;
      border: 1px solid var(--white);
      color: var(--white);
      margin: 15px 0px;
  }
  
  .hotel_tabs .addresshotel p:hover {
      background-color: var(--blue);
      border-color: var(--blue);
  }
  
  .hotel_tabs .whatsapp {
      margin: 12px 0px 5px;
      display: inline-block;
  }
  
  .hotel_tabs .panels img {
      width: 100%;
  }
  
  .hotel_tabs .right_inner.smallimgs img {
      aspect-ratio: 1.9;
      object-fit: cover;
  }
.small-text {font-size:14px;
}

.hotel_tabs .tabsinner_content .roommenulist .roomviews {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}
  .hotelalltabs {
    background-color: var(--light_blue);
}
  .hotel_tabs .holteamenities {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      justify-content: space-between;
  }
  .hotel_tabs .hotellist_full .holteamenities li {
      width: 20% !important;
  }
  .hotel_tabs .roomprice li span {
      display: inline-block;
      background: var(--dark_blue);
      padding: 10px 45px;
      color: var(--white);
      margin: 0px 1px 0px 0px;
  }
  .hotel_tabs .roomprice {
      margin-top: 15px;
  }
  .hotel_tabs .listheading {
      width: 100% !important;
  }
  
  .hotel_tabs .holteamenities li {
      width: 32%;
      color: var(--dark_blue);
  }
  .hotel_tabs .padding_zero p {
      margin: 0px;
  }
  
  .hotel_tabs .full_width li {
      width: 100% !important;
  }
  .hotel_tabs .holteamenities.full_width {
      margin-top: 20px;
  }
  .hotel_tabs .listheading strong {
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      text-transform: capitalize;
      font-weight: 600;
  }

  .hotel_tabs .extracharges {
    color: var(--yellow)  !important;
}

/* tabs css close here */
.padding_bottom_zero{
    padding-bottom: 0px;
}

.headergallery {
    margin: 20px 0px  10px;
}
.margintop {
    margin-top: 90px;
}
/* gallery section css start here*/

.gallery-section .gallery-menu {
    text-align: center;
  }
  .gallery-section .control {
      color: var(--dark_blue);
      padding: 10px 25px;
      border: 1px solid var(--dark_blue);
      margin: 0px 5px;
      cursor: pointer;
      transition: all 0.5s ease;
      background-color: transparent;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 14px;
  }
  .gallery-section .control:hover {
      background: var(--dark_blue);
      color: var(--white);
  }
  .gallery-section .mixitup-control-active {
    color: var(--white);
    background: var(--dark_blue);
  }
  .gallery-section .fancybox-container button:focus {
    outline: 0;
    box-shadow: none;
  }
  .gallery-section .gallery-item {
    padding-top: 0px;
  }
  .gallery-section .pd {
      padding: 0px 2px;
  }
  .gallery-section .pd img {
      /* height: 180px; */
      transition: all 0.5s;
      width: 100%;
      aspect-ratio: 1.5;
  }
  .gallery-section .gallery-overlay {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 99%;
      height: 97%;
      text-align: center;
      visibility: hidden;
      transition: all 0.5s;
      transform: scale(0);
      overflow: hidden;
  }
  .gallery-section .gallery-overlay p,
  .gallery-section .gallery-overlay a {
    position: relative;
    z-index: 4;
  }
  .gallery-section .gallery-overlay::before {
    content: "";
    width: 0;
    height: 0;
    border-width: 0;
    position: absolute;
    left: 10%;
    top: 10%;
    transition: 50ms height ease 150ms;
    z-index: 3;
  }
  .gallery-section .gallery-overlay::after {
    content: "";
    width: 0;
    height: 0;
    border-width: 0;
    position: absolute;
    right: 10%;
    bottom: 10%;
    transition: 100ms width ease 200ms;
    z-index: 3;
  }
  .gallery-section .gallery-item:hover .gallery-overlay::before {
    width: 80%;
    height: 80%;
    border-top: 1px solid #50977f;
    border-right: 1px solid #50977f;
    transition: width 0.1s ease 0.3s, height 0.1s ease 0.5s;
  }
  .gallery-section .gallery-item:hover .gallery-overlay::after {
    width: 80%;
    height: 80%;
    border-bottom: 1px solid #50977f;
    border-left: 1px solid #50977f;
    transition: width 0.1s ease 0.6s, height 0.1s ease 0.7s;
  }
  .gallery-section .gallery-item li:hover .gallery-overlay {
    visibility: visible;
    transform: scale(1);
  }
  .gallery-section .gallery-overlay .category {
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
  }
  .gallery-section .gallery-overlay .magnify-icon {
      height: 100%;
      width: 100%;
      border-radius: 20px;
      margin: 0 5px;
      cursor: pointer;
      transition: all 0.25s;
  }
  .gallery-section .overlay-content {
      height: 100% !important;
      width: 100%;
      position: absolute;
  }
  .gallery-section .fa.fa-search {
      color: transparent;
  }
  .gallery-section .gallery-item li {
      position: relative;
      width: 14%;
  }
  .gallery-section{
    padding-bottom: 15px;
  }
  .formhotal {
      background: var(--dark_blue);
      padding: 30px 30px;
  }
  .formhotal input {
    width: 100%;
    padding: 10px;
    border: none;
    text-transform: capitalize;
    color: var(--dark_blue);
}
  .hotelk {
      margin-bottom: 10px;
      color: var(--white);
  }
  
  .formhotal input[type="submit"] {
      background-color: var(--blue);
      padding: 16px;
      text-transform: uppercase;
      margin-top: 10px;
      font-weight: 600;
  }
.formhotal input[type="button"] {
    background-color: var(--blue);
    padding: 16px;
    text-transform: uppercase;
    margin-top: 10px;color:#fff;
    font-weight: 600;cursor:pointer;
}
.formhotal input[type="button"]:hover {
    opacity:60%;
}
  
  .gallery-section .map {
      margin-top: 10px;
  }
  .gallery-section .col9 {
      padding-left: 30px;
  }
  
  /* review css start here */
.reviews .client_review {
    padding: 30px;
    border: 1px solid var(--blue);
    border-radius: 15px;
    background-color: var(--light_blue);
    color: var(--dark_blue);
    box-shadow: 0px 0px 14px 0px #64646426;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.reviews .client_review:hover {
    background-color: var(--bg_light);
    border-color: var(--light_blue);
}
.reviews .imageclient {
    width: 70px;
    margin-right: 12px;
    overflow: hidden;
}
.reviews .imageclient img {
    object-fit: cover !important;
    display: inline-block;
    width: 100%;
    border-radius: 100px;
}
.reviews .client_review .service_side {
    display: flex;
    align-items: center;font-size:14px;
}
.reviews i.fa.fa-star {
    color: var(--yellow);
}
.reviews .reviewbox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    padding-top: 25px;
    width: 100%;
}
.reviews .pera {
    padding: 10px 0px;
}
.headergallery a {
    color: var(--dark_blue);
}
/* list page css start here */
.filter_left_side {
    /* border: 1px solid var(--blue);
    color: var(--dark_blue);
    box-shadow: 0px 0px 14px 0px #00000030;
    background-color: var(--light_blue);
    border-radius: 10px;*/
    overflow: hidden;
    margin-top: 20px;
}
    .filter_left_side .book_room {
        border-top: 1px dotted var(--light_gray);
        padding: 20px;
    }
.filter_left_side h4 {
    padding: 0px 20px;
}

.filter_left_side .book_room li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;line-height:30px;
}

.filter_left_side .book_room li strong {
    line-height: 18px;
    margin-bottom: 5px;
    text-transform: capitalize;
}
.filter_left_side h4 {
padding: 20px;
margin: 0px;
}
.formhotal.border_radius {
    border-radius: 10px;
}
/* right side */
.select_room:hover {
    /*background-color: var(--bg_light);*/
    box-shadow: 0px 0px 10px 0px #302e2e36;
    border-color: #ccc;
}
.select_room .roomimg img {
    height: 100%;
    border-radius: 4px;
    width: 100%;
    /*object-fit: cover;*/
}
 .filter_right_side {
    gap: 20px;
    display: grid;
    margin-left: 20px;
}
.filter_right_side .search-ul-service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 10px 0px;
}
.select_room {
    padding: 10px 10px;
    color: var(--dark_blue);
    border: 1px solid #302e2e36;
    /* box-shadow: 0px 0px 10px 0px #302e2e36;
        background-color: var(--light_blue);
    border: 1px solid var(--blue);*/
    display: flex;
    gap: 15px;
    border-radius: 4px;
}

.select_room .roomimg {
    width: 25%;
}

.select_room .roomset {
    width: 50%;
}

.select_room .result {
    width: 20%;
}

.select_room h5 {
    margin: 0px;
    font-size: 18px;
}
.u-rating {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.select_room .u-rating .highlight {
    background: var(--dark_blue);
    padding: 5px;
    display: inline-block;
    border-radius: 10px 10px 10px 0px;
    color: var(--white);
}

.select_room .check_btn {
    background: var(--dark_blue);
    border: none;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 8px;
    margin: 7px 0px;
    color: var(--white);
    text-transform: capitalize;
}
.select_room .list-whatsapp-img {
    width: 100%;
}

.select_room .location {
    display: flex;
    gap: 10px;
}

.select_room a {
    color: var(--dark_blue);
}
.select_room a:hover {
    text-decoration:underline;
}
/* food menu **/
/

.food_menu {
    display: flex;
    margin: 15px 0px;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--dark_blue);
    padding-bottom: 14px;
}

.food_list {
    width: 850px;
    margin: 0px auto;
    padding: 20px 25px;
    background-color: #fff;
    color: var(--dark_blue);
    max-width: 100%;
}

    .food_list h4 {
        margin: 0px;
        font-size: 18px;
        display: inline;
    }

.food_rate strong {
    color: var(--blue);
    display: block;
    text-align: center;
}

.food_disc {
    margin: 0px 15px;
    width: 85%;
}

.food_image img {
    width: 75px;
    border-radius: 100px;
    overflow: hidden;
    object-fit: cover;
    height: 70px;
}

.our-manu-section.padding {
    background-image: url('images/bg-food.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #0000008f;
    background-blend-mode: overlay;
    background-attachment: fixed;
}

.menu_read {
    display: flex;
    justify-content: space-between !important;
    width: 90%;
}

.food_rate {
    width: 25%;
    display: flex;
    justify-content: space-between;
}

.food_image {
    width: 10%;
}

.food_list h5 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 20px;
    text-align: center;
    padding: 10px 0px;
}


.ctabtnf a {
    padding: 0px 15px;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 18px;
}




ul.food_menu_top {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 20px;
    justify-content: center;
}

.food_menu_top i.fa {
    color: var(--blue);
    font-size: 18px;
}

.table_food {
    font-size: 16px;
    line-height: 16px;
    padding: 7px 20px;
    width: 100%;
    max-width: 435px;
    font-family: 'Jost';
    border-radius: 6px;
    margin-top: 15px;
}

.foodtable {
    width: 850px;
    margin: 0px auto;
    text-align: center;
    max-width: 100%;
}

form.food_form {
    display: flex;
    align-items: center;
}

    form.food_form textarea, form.food_form select {
        height: 27px;
        max-width: 300px;
        margin-right: 10px;
        padding: 3px 10px;
        font-family: 'Jost';
        width: 100%;
    }

.checkboxfood {
    margin-top: 5px;
}



.menufoodd:hover ul.menu_drop {
    display: block;
}

.menufoodd ul.menu_drop a {
    padding: 0px;
}





.food_disc input[type="checkbox"]:checked ~ .hidden-content {
    display: block;
}

.hidden-content {
    display: none;
    padding-top: 8px;
}

.food_disc input {
    margin-right: 5px;
}

.ctabtnf li {
    list-style: none;
    width: 100%;
    height: 100%;
}


/* Responsive css start here */
@media only screen and (max-width:1180px){
.hotel_tabs .addresshotel i.fa {
    border-right: 0px;
    width: max-content;
    height: max-content;
}
.hotel_tabs .addresshotel p {
    padding: 10px 20px;
}

}

  @media only screen and (max-width:1024px){
    h2 {
        font-size: 39px;
    }

    .free_stay_city .staypromise {
        padding: 20px 20px;
    }
     h4 {
        font-size: 20px;
    }
    .whitebg_btn {
        padding: 9px 25px;
    }
    .visit_places .visithere {
        margin: 8px;
        height: 97%;
    }
    .travel_important .cultarl {
        padding: 20px 15px;
        height: 95%;
        margin: 10px;
    }
    .traveling_offers .travelingnum {
        width: 95%;
    }
    .hotel_in_city .city_menus li {
        padding: 7px 30px;
        margin: 3px 3px;
    }
    .hotel_tabs .tabs {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .hotel_tabs #one:checked ~ .tabs #one-tab::after, .hotel_tabs #two:checked ~ .tabs #two-tab::after, .hotel_tabs #three:checked ~ .tabs #three-tab::after, .hotel_tabs #four:checked ~ .tabs #four-tab::after, .hotel_tabs #five:checked ~ .tabs #five-tab::after, .hotel_tabs #six:checked ~ .tabs #six-tab::after {
        left: 50%;
    }


    .select_room {
        flex-wrap: wrap;
    }
    .select_room .roomimg {
        width: 40%;
    }
    .select_room .roomset {
        width: 55%;
    }
    .select_room .result {
        width: 35%;
    }

    .property-heading a {
        width: 100%;
        display: inline-block;
    }
  }

  @media only screen and (max-width: 991px){
    
    header .main_menu li {
        margin-right: 18px;
    }
    .animatbtn {
        padding: 10px 20px !important;
    }
    .free_stay_city {
        grid-template-columns: 1fr 1fr;
    }

   .visit_places .row .col4 {
        width: 50%;
    }
   
    .padding {
        padding: 40px 0px;
    }
    .travel_important .cultarl i.fa {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .hotel_tabs .roommenulist, .hotel_tabs .rightsidetab {
        width: 100% !important;
    }
    .hotel_tabs .tabsinner_content {
        flex-wrap: wrap;
    }
    .hotel_tabs .panels {
        /* padding: 20px 20px;*/
    }

    .gallery-section .control {
        padding: 8px 13px;
        font-size: 13px;
    }
    .gallery-section .gallery-item {
        padding-top: 15px;
    }
    .gallery-section .col3, .filter .col3 {
        width: 35%;
    }
    
    .gallery-section .col9, .filter .col9 {
        width: 65%;
    }
    .gallery-section .col9 {
        padding-left: 10px;
    }
    .select_room .roomset {
        width: 100%;
    } 
    .select_room .result {
        width: 100%;
    }
    .select_room .list-whatsapp-img {
        width: 200px;
        display: block;
    }
    .select_room .roomimg {
        width: 100%;
    }
    .formhotal {
        padding: 25px 25px;
    }

    .food_list {
        width: 90%;
    }

    .food_image img {
        width: 65px;
        height: 65px;
    } 

  }
  @media only screen and (max-width: 767px){    
    .gallery-section {
        padding-bottom: 30px;
    }
  .homeform form {
    width: 100%;
  }
  h2 {
    font-size: 32px;
    line-height: 38px;
}

  .row {
    flex-wrap: wrap;
}
.free_stay_city .staypromise {
    padding: 20px 10px;
}
 h4 {
    font-size: 20px !important;
    line-height: 22px;
}
.travel_important .col4 {
    width: 50%;
}

/* header icon css start here */
header #toggle {
    width: 28px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 25px;
    /* margin-top: -15px; */
}

.antbtn.desktop {
    display: none;
}
.antbtn.mobile {
    display: block;
}
.animatbtn {
    margin-top: 20px;
    display: inline-block;
}
header #menu li {
    margin: 20px 0px;
}
header #toggle div {
  width: 100%;
  height: 5px;
  background: var(--dark_blue);
  margin: 4px auto;
  transition: all 0.3s;
  backface-visibility: hidden;
}
header #toggle.on .one {
  transform: rotate(45deg) translate(5px, 5px);
}
header #toggle.on .two {
  opacity: 0;
}
header #toggle.on .three {
  transform: rotate(-45deg) translate(7px, -8px);
}
header #menu {
    display: none;
}
header #menu {
    position: absolute;
    width: 100%;
    background: #000000db;
    padding: 0px 20px 0px 40px;
    top: 40px;
    margin-top: 37px;
    height: 100vh;
    transform: translate(0px, 3px);
    right: 0;
    float: left;
    overflow: hidden;
}
header .main_menu a {
    color: #fff !IMPORTANT;
}

header .row {
    flex-wrap: nowrap;
}

.gallery-section .control {
    padding: 8px 9px;
    font-size: 10px;
    margin: 2px !important;
}
.reviews .client_review {
    padding: 20px;
}
.filter .col3 {
    width: 45%;
}
.filter .col9 {
    width: 55%;
}
.filter_right_side .search-ul-service {
    grid-template-columns: 1fr;
}
    ul.food_menu_top {
        display: block;
    }

    .ctabtnf a {
        padding: 5px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 16px;
        height: 100%;
    }

  

    .food_list {
        width: 100%;
    }

      
    .food_list {
        padding: 20px;
    }

        .food_list h5 {
            font-size: 16px;
            margin-top: 10px;
            padding: 5px 0px;
        }

    .food_menu {
        display: block;
    }

    .menu_read {
        display: block;
        width: 100%;
    }

    .food_disc {
        margin: 10px 0px;
        width: 100%;
    }

    .food_rate {
        width: 100%;
    }

    .menufoodd:hover ul.menu_drop {
        width: 100% !important;
        padding-bottom: 0px !important;
    }

   

    .menufoodd:hover ul.menu_drop {
        width: 100% !important;
    }

    li.menufoodd {
        position: relative;
    }

    .ctabtnf > li {
        width: 49.8%;
    }
    .slider_autogallery .slide-track {
         -webkit-animation: scroll 40s linear infinite;
    animation: scroll 20s linear infinite;
        display: flex;
        width: calc(300px * 11);
    }
}

@media only screen and (max-width: 600px){
    .slider_autogallery .slide-track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 20s linear infinite;
        display: flex;
        width: calc(300px * 11);
    }
    .row > div {
        width: 100% !important;
    }
    footer .footermenu {
        text-align: left;
    }
    footer .footermenu li::after {
        left: -20px !important;
        top: 2px;
        position: absolute;
    }
    ul.footer_mrnu li{
        position: relative;
    }
    ul.footer_mrnu {
        padding-left: 20px;
    }
    h3 {
        font-size: 26px;
        margin: 5px 0px;
    }
    .hotel_in_city .city_menus li {
        padding: 3px 18px;
        margin: 2px 2px;
    }
    .hotel_in_city .city_menus li a {
        font-size: 14px;
    }
    .travel_important .col4, .col4 {
        width: 100% !important;
    }
    .travel_important .cultarl {
        margin: 10px 0px;
    }
    .traveling_offers .travelingnum {
        width: 100%;
    }
    h2 {
        font-size: 26px;
        line-height: 32px;
    }
    .marb30 {
        margin-bottom: 15px;
    }
    .free_stay_city {
        grid-template-columns: 1fr;
    }
    section.travels_know .row {
        gap: 20px;
    }

    .homeform form input {
        margin: 3px 0px;
        width: 100%;
    }

    .hero_section {
        /* height: 60vh;*/
    }
    .hotel_tabs .tabs {
        grid-template-columns: 1fr 1fr;
    }
    .hotel_tabs .roomprice li span {
        padding: 10px 16px;
    }
    .hotel_tabs .holteamenities li, .hotel_tabs .hotellist_full .holteamenities li {
        width: 47% !important;
    }

    .roomprice-li {
        background-color:var(--dark_blue);
        color:var(--white);
    }

    .control {
        padding: 6px 17px !important;
        font-size: 13px !important;
    }
    .reviews .reviewbox {
        grid-template-columns: 1fr;
    }
    .filter_right_side {
        margin-left: 0px;
        padding-top: 20px;
    }
    .popup-content {
        padding: 30px 15px !important;
    }
}


@media only screen and (max-width: 420px){
    .slider_autogallery .slide-track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 20s linear infinite;
        display: flex;
        width: calc(300px * 11);
    }
    .hotel_tabs .tabs {
        grid-template-columns: 1fr;
    }
    .hotel_tabs .panels .rating {
        width: 100%;
        margin: 0px;
    }
    .hotel_tabs .panels .panel-title {
        font-size: 28px;
        flex-wrap: wrap;
    }
    .headergallery {
        margin-top: 0px;
    }
}