/*===============================================
Template Name: Hotelhub - Hotel Booking & Travel Resort HTML5 Template 
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Hotelhub
Tags: accommodation, bed & breakfast, booking, clean, hotel, hotel booking, hotel react template, hotel reservation, luxury, online booking, html template, restaurant, tour
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Hotelhub Nav Menu Area Css
02. HotelHub Start Hero Section
03. Hotelhub Start About Section
04. Hotel Start hotelhub Button
05. HotelHub Start Why Choose Us Section
06. HotelHub Start Service Section
07. HotelHub StartBuddy  Video section
08. HotelHub Start Testimonial Section
09. HotelHub Start Brnad Section
10. HotelHub Start hotelhub Blog Section
11. HotelHub Start Appoinment Section
12. HotelHub Start Footer Section
13. HotelHub Start About Section Style Twho
14. HotelHub Start Boking Section
15. Hotelhub Start Team Section
16. HotelHub Start Choose Sections
17. Hotelhub Start Galary Section
18. HotelHub Start Dine Section
19. HotelHub Start Over View Section
20. HotelHub Start Restaurant Section
21. HotelHub Start Pagination btn
22. HotelHub Start Single blog
23. HotelHub Start Sidebar box Css
24. HotelHub Start Blog Details Css
25. HotelHub Start faw Section
26. HotelHub Start offer Section
27. HotelHub Start Rooms Section
28. HotelHub Start Rooms Details
29. HotelHub Start Mission & Vission Section
30. HotelHub Start Join  Section
31. HotelHub Start Project Section
32. HotelHub Start nav button
33. Start Hotel Section
34. Start Dingig Coices Secttion 
35. Start Hotel Service Secttion
36. All Animation CSS
=======================*/



/* ==============================================
   COLORES PERSONALIZADOS: CUATRO LUNAS (Final)
   ============================================== */
:root {
  /* Color Principal */
  --brand-color: #483324;      
  --secondary-color: #483324;
  
  /* ESTA ERA LA VARIABLE QUE FALTABA: */
  --btn-color: #483324;        /* Fuerza el color de los botones */

  /* Resto de la paleta */
  --primary-color: #5C402E;    
  --accent-color: #6E4D37;     
  --body-color: #E1D6CA;       
  --light: #C0A891;            
  --title-color: #1e1e1e;      
  --white: #ffffff;
}

/* Ajustes específicos para forzar la lectura correcta */
.hotelhub_nav_manu, 
.sticky,
.topber_area {
    background-color: var(--brand-color) !important;
}

.footer-section {
    background-color: var(--brand-color) !important; /* Footer usa el nuevo color */
}
.footer-section p, .footer-section a, .widget-title {
    color: var(--body-color) !important; /* Texto claro contrastante */
}

/* Ocultar secciones no deseadas */
.marquee-section,
.blog-section,
.testimonial-section {
    display: none !important;
}


.mediket-category-content h6 {
  font-size: 16px;
  color: #1e1e1ead;
  line-height: 26px;
  font-weight: 400;
  font-family: "Open Sans";
}

/*================================
<--  Hotelhub Nav Menu Area Css -->
==================================*/
.hotelhub_nav_manu {
  transition: 0.5s;
  z-index: 2;
  position: relative;
  padding: 20px 13px 20px 40px;
  background-color: var(--secondary-color);
  border-bottom: 1px solid #ffffff1f;
}
.meedy_nav_manu:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background: #3C2B1E;
  z-index: -1;
}

.hotelhub_nav_manu.two {
  background-color: transparent;
  margin-bottom: -103px;
}
.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14901960784313725);
  background: var(--primary-color) !important;
  transition: 0.5s !important;
  z-index: 922;
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  animation-name: slideInDown;
}

/* hotelhub Menu Css*/
nav.meedy_menu {
  position: relative;
  z-index: 1;
  text-align: right;
  display: flex;
  justify-content: space-between;
}
.meedy_menu ul {
  list-style: none;
  display: inline-block;
  margin-right: 170px;
}

.meedy_menu > ul > li {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.meedy_menu > ul > li > a {
  display: block;
  margin: 0 14px;
  transition: 0.5s;
  padding: 17px 0;
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.meedy_nav_manu.style-2 .meedy_menu > ul > li > a:hover {
  color: var(--brand-color);
}
a.mdy-hover {
  position: relative;
}
.meedy_menu > ul > li > a >i {
  display: inline-block;
  margin-left: 3px;
  position: relative;
  font-size: 12px;
  top: -1px;
}

/*hotelhub Right Side*/

.hotelhub-right-side {
  display: flex;
  align-items: center;
  gap: 12px;
}
p.sidebar_info {
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  display: inline-block;
  margin-right: 25px;
}
.header-button a {
  padding: 6px 25px;
  background: transparent;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  border: 1px solid #fff;
}
.header-button a i {
  font-size: 13px;
  font-weight: 600;
  margin-left: 8px;
  display: inline-block;
  transform: rotate(-45deg);
  transition: 0.5s;
}

.header-button a:hover {
  color: var(--brand-color);
}

.header-button a:hover i {
  color: var(--brand-color);
}
.hotelhub_nav_manu.two .header-button a {
  background: var(--brand-color);
  border: 1px solid var(--brand-color);
}
/* Box-hover */

.hotelhub-hover-btn {
  background-color: var(--light);
  height: 100%;
  top: 0;
  opacity: 0;
  position: absolute;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 25%;
  z-index: -1;
}

.hover-btn {
  left: 0;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}
.hover-btn2 {
  left: 25%;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}

.hover-btn3 {
  left: 50%;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}

.hover-btn4 {
  left: 75%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.header-button a:hover .hotelhub-hover-btn {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Style 2 */

.style-2 .nav_scroll {
  padding: 0;
  background: transparent;
  border-radius: 30px;
}

/*** Sub Menu Style 
==========================***/

.meedy_menu ul .sub-menu {
  position: absolute;
  left: 0;
  top: 130%;
  width: 217px;
  text-align: left;
  background: #fff;
  margin: 0;
  z-index: 1;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  visibility: hidden;
  border-top: 2px solid var(--brand-color);
  opacity: 0;
}

.meedy_menu ul li:hover > .sub-menu {
  visibility: visible;
  top: 100%;
  opacity: 1;
}

.meedy_menu ul .sub-menu li {
  position: relative;
}

.meedy_menu ul .sub-menu li a {
  display: block;
  padding: 12px 20px;
  margin: 0;
  line-height: 1.3;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.5s;
  visibility: inherit !important;
  color: var(--primary-color) !important;
  position: relative;
  z-index: 1;
}

.meedy_menu ul .sub-menu li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  background: var(--secondary-color);
  z-index: -1;
  transition: 0.5s;
}

.meedy_menu ul .sub-menu li a:hover:before {
  height: 100%;
  top: 0;
}

.meedy_menu ul .sub-menu li:hover > a,
.meedy_menu ul .sub-menu .sub-menu li:hover > a,
.meedy_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.meedy_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
  background: var(--brand-color);
  color: #fff !important;
}


/* header menu style2 */

.meedy_nav_manu.style-2 {
  margin-bottom: 0;
  padding: 20px 80px 20px;
}
.sticky.meedy_nav_manu.style-2 .meedy_menu > ul > li > a {
  color: #fff;
}
.sticky.meedy_nav_manu.style-2 .meedy_menu > ul > li > a:hover {
  color: var(--secondary-color);
}

/* header menu syle four */

.hotelhub_nav_manu.style_four:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  width: 15%;
  background: #3C2B1E;
  z-index: -1;
}
/*
<!-- ============================================================== -->
<!-- HotelHub Start Hero Section -->
<!-- ============================================================== -->*/

.hero-section {
  background: url(../images/slider/banner.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 820px;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.row.hero_upper {
  padding: 112px 0 107px;
}

.hero-content h4 {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  background-color: rgba(255,255,255,0.07058823529411765);
  display: inline-block;
  padding: 11px 19px;
  margin-bottom: 22px;
}
.hero-content h4 i {
  margin-right: 8px;
}
.hero-content h1 {
  margin: 0;
  font-size: 70px;
  line-height: 74px;
  color: #ffffff;
}
.hero-content h1 span {
  color: #ECE2D7;
  display: inline-block;
}

/* hero right content */

.hero-right_content {
  margin-left: 130px;
  margin-top: 69px;
}
.hero-right_content p {
  font-size: 18px;
  line-height: 30px;
  color: #ffffff;
  margin: 0 0 28px;
}
/* hotelhub Btn */

.hotelhub-btn__hover {
  background-color: var(--primary-color);
  width: 18.66%;
  height: 0;
  display: block;
  position: absolute;
  transition: all 500ms ease;
  z-index: -1;
}

.hotelhub-btn__hover:nth-child(2),
.hotelhub-btn__hover:nth-child(4),
.hotelhub-btn__hover:nth-child(6) {
  top: 0;
}

.hotelhub-btn__hover:nth-child(2) {
  left: 16.66%;
}

.hotelhub-btn__hover:nth-child(4) {
  left: 49.98%;
}

.hotelhub-btn__hover:nth-child(6) {
  left: 83.3%;
}

.hotelhub-btn__hover:nth-child(1),
.hotelhub-btn__hover:nth-child(3),
.hotelhub-btn__hover:nth-child(5) {
  bottom: 0;
}

.hotelhub-btn__hover:nth-child(1) {
  left: 0;
}

.hotelhub-btn__hover:nth-child(3) {
  left: 33.32%;
}

.hotelhub-btn__hover:nth-child(5) {
  left: 66.64%;
}

a.hotelhub-btn:hover .hotelhub-btn__hover {
  height: 100%;
}


a.hotelhub-btn:hover {
  color: #fff;
}

/* hero thumb */
.solider-banner {
  position: relative;
  padding-right: 85px;
}
.swiper.slider-banner.swiper_right {
  margin-right: 84px;
}

.slider-arrow-box {
  position: absolute;
  top: 50%;
  left: 40px;
  z-index: 1;
  transform: translateY(-50%);
}
.slider-arrow-box button.sliders-prev, button.sliders-next {
  width: 60px;
  outline: 0 !important;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: #AD9883 !important;
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  display: block;
  transition: 0.5s;
  margin-bottom: 12px;
}
.slider-arrow-box button.sliders-prev:hover, button.sliders-next:hover {
  background: var(--brand-color) !important;
}
.slider-arrow-box button:focus {
  outline-color: 0 !important;
  border: 0 !important;
}



/*
<!-- =================== -->
<!--Booking Area-->
<!-- ===================-->*/
.booking-bx {
  background: #1E1E1E;
  position: relative;
  padding: 44px 40px 60px;
  margin-left: -77px;
  margin-right: 263px;
}
.line-shape {
  position: absolute;
  z-index: -1;
  bottom: -50px;
  right: -50px;
}
.booking-input-box input::placeholder{
  color: var(--title-color);
}

.containers h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 43px;
  text-align: center;
}
.containers form {
  display: flex;
  flex-direction: column;
}

.booking-input-box {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
}
/* .booking-bx:before {
  position: absolute;
  content: '';
  left: 10%;
  bottom: -35%;
  height: 100%;
  width: 107%;
  background: url(../images/main-home/line-shape.png);
  background-repeat: no-repeat;
  z-index: -1;
} */
.booking-input-box i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--light);
  font-size: 16px;
}
.booking-input-box input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14901960784313725);
  height: 55px;
  color: #fff;
  padding: 0 10px 0 75px;
  position: relative;
  outline: 0;
  background: transparent;
}
.booking-input-box:after {
  position: absolute;
  content: '';
  right: 0;
  color: #fff;
  background: url(../images/slider/clander-icon.png);
}
.booking-input-box:before {
  position: absolute;
  content: '';
  left: 55px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: rgba(255,255,255,0.14901960784313725);
  z-index: -1;
}
.booking-input-box select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14901960784313725);
  height: 55px;
  color: var(--title-color);
  padding: 0 10px 0 75px;
  position: relative;
  outline: 0;
  background: transparent;
}
.booking-input-box option {
  color: #222;
  display: inline-block;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(24.3) invert(15);
}

.booking-button button {
  background: var(--brand-color);
  padding: 12px 31px;
  border: transparent;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  width: 100%;
  margin-top: 9px;
}
.booking-button button i {
  font-size: 13px;
  font-weight: 700;
  margin-left: 10px;
  transform: rotate(-45deg);
  display: inline-block;
}
.booking-button button:hover{
  color: var(--btn-color);
}

.booking-button button:before{
  position: absolute;
  content: "";
  width:0;
  height: 100%;
  left: 50%;
  top: 0;
  background:#fff;
  z-index: -1;
  transition: 0.5s;

}

.booking-button button:hover:before{
  width: 100%;
  left: 0;
}

/* Hero Style four */

.banner_area_4 {
    background: url(../images/home-four/banner_bg4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 820px;
}
.swiper.banner_4 {
  background: #52614eeb;
  position: relative;
  z-index: 1;
}
.banner_area_4 .hero-content {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
}

.banner_area_4 .hero-content:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.banner_area_4 .hero-content:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.banner_area_4 .hero-content:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.banner_area_4 .hero-content:nth-child(4) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}
.swiper-slide-active .hero-content {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.banner_area_4 .hero-content h1 {
    margin: 0;
    font-size: 70px;
    line-height: 74px;
    color: #ffffff;
    font-weight: 600;
}
.banner_area_4 .hero-content p {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    width: 80%;
    margin: 25px 0 33px;
}

.booking-bx.style_two {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0;
    background: var(--brand-color);
    margin-right: 0;
    margin-left: 76px;
    padding: 23px 65px 42px 40px;
}
.booking-bx.style_two .booking-input-box input:focus, button:focus {
  outline-color: #ffffff8c;
  border: 1px solid #ffffff8c !important;
}

.swiper-slide-active .booking-bx.style_two {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.booking-bx.style_two .booking-button button {
    background: #232323;
}

.swiper.banner_4 .testi-slider-arrow-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 120px;
  z-index: 1;
}
.swiper.banner_4 .testi-slider-arrow-box button.slider-prev, button.slider-next {
  display: block;
  margin: 8px 0;
}

/* hero section style five  */

.style_five.hero-secton {
  position: relative;
  z-index: 1;
  height: 920px;

}
.hero-slider-img{
  background: url(../images/home-five/banner_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  height: 100%;
  width: 100%;
}
.hero-slider-img.two  {
  background: url(../images/home-four/banner_bg4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.style_five.hero-secton .hero-content h1 {
  line-height: 78px;
  font-weight: 500;
  font-size: 70px;
}
.style_five.hero-secton .hero-content h4 {
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  opacity: 0;
}
.swiper-slide-active .style_five.hero-secton .hero-content h4 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.style_five.hero-secton .hero-content h1 {
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  opacity: 0;
}
.swiper-slide-active .style_five.hero-secton .hero-content h1 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.style_five.hero-secton  .hotelhub-btn {
  margin-top: 50px;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  opacity: 0;
}
.swiper-slide-active .style_five.hero-secton .hotelhub-btn {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.swiper-slide-active .hero-slider-img {
  animation: zoomAnimation 20s infinite; 
}
@keyframes zoomAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 80px;
  z-index: 1;
}
.hero-nav button.slider-prev {
  width: 50px;
  outline: 0 !important;
  height: 50px;
  line-height: 30px;
  border-radius: 27px;
  background-color: rgba(255,255,255,0.10196078431372549);
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  display: block;
  transition: 0.5s;
}
.hero-nav button.slider-next {
  width: 50px;
  outline: 0 !important;
  height: 50px;
  line-height: 30px;
  border-radius: 27px;
  background-color: rgba(255,255,255,0.10196078431372549);
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  display: block;
  transition: 0.5s;
}
.hero-nav button.slider-prev:hover, button.slider-next:hover {
  background: var(--brand-color);
}


/*
<!-- ============================================================== -->
<!-- Hotelhub Start About Section -->
<!-- ============================================================== -->*/

.about-serction {
  padding: 354px 0 110px;
  background: var(--body-color);
  position: relative;
}
.abou_list-item {
  display: flex;
  gap: 60px;
  margin-bottom: 31px;
}
.abou_list ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.abou_list ul li img {
  margin-right: 15px;
}
/* About Left Side */

.about-thumb {
  position: relative;
  z-index: 1;
  margin-left: 111px;
  margin-top: -15px;
}

/* about Shape */

.about_shape {
  position: absolute;
  top: 16%;
  left: 8%;
}
.about_shape2 {
  position: absolute;
  bottom: 5%;
  left: -14%;
  right: 0;
  margin: auto;
  text-align: center;
}
.about_shape3 {
  position: absolute;
  bottom: -14%;
  left: 11%;
}

/* counter box */

.counter-single-box {
  background: url(../images/main-home/counter_thumb.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 45px 35px 26px;
  width: 250px;
  text-align: center;
  position: absolute;
  left: -50px;
  bottom: -55px;
}
.odometer-wrapper.counter-box-title {
  display: flex;
  align-items: center;
  padding: 10px 0 0;
  justify-content: center;
}
.odometer-wrapper.counter-box-title h1 {
  display: inline-block;
  margin: 0;
  font-size: 50px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
}
.counter-desc p {
  display: inline-block;
  padding: 0;
  font-size: 18px;
  color: #ffffff9c;
  font-weight: 500;
  font-family: "Playfair Display";
}

/*abou-section style home four*/

.about-serction.style_four {
    padding: 120px 0 110px;
}
.home_four-about.about-thumb {
    margin-left: 38px;
    margin-top: 0;
}
.style_four .abou_list-item {
    margin-bottom: 15px;
}
.style_four .abou_list ul li {
    margin-bottom: 20px;
}
.style_four .about_shape2 {
    bottom: inherit;
    left: -65%;
    top: 26%;
}

/* about style five */

.style-five.about-serction {
  padding: 165px 0 120px;
  margin-top: -48px;
}
.about-serction.style-five .about-thumb {
  margin-left: 0;
  margin-top: 0;
}
.about-serction.style-five .video__area {
  border: none;
  width: 0;
  height: 0;
  line-height: 0;
  top: 80%;
  left: 23%;
}
.about-serction.style-five .video__area .play-now {
  background-color: #a6a47114;
  border: 2px solid #a6a471a1;
  width: 100px;
  font-size: 16px;
  font-style: italic;
  height: 100px;
  line-height: 100px;
}
.main-icon-bx {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 27px 0 37px;
}
.hotel-icon-bx {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hotel-icon {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: rgba(30,30,30,0);
  border: 1px solid #ECE2D7;
  text-align: center;
  line-height: 48px;
  float: left;
}
.icon-bx-content h3 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 600;
  margin: 0;
}
.about-serction.style-five .abou_list ul li {
  margin-bottom: 10px;
}

.about_right-shp {
  position: absolute;
  bottom: 0;
  right: -35%;
}
.about-serction.style-five .about_shape {
  top: 15%;
}

/* ===========================================
    Hotel Start hotelhub Button
=============================================== */

.hotelhub-btn a {
  padding: 12px 30px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  overflow: hidden;
  border: 1px solid var(--btn-color);
  background-color: var(--light);
  font-size: 18px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.hotelhub-btn a:after {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: #fff;
  position: absolute;
  content: '';
  cursor: pointer;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--btn-color);
  background-image: url(../images/main-home/mask-btn2.png);
  -webkit-mask: url(../images/main-home/mask-btn2.png);
  mask: url(../images/main-home/mask-btn2.png);
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  animation: mask_animation_2 0.7s steps(22) forwards;
  z-index: -1;
}

.hotelhub-btn a i {
  padding-left: 7px;
  position: relative;
  top: 2px;
  transform: rotate(-45deg);
  display: inline-block;
  font-size: 15px;
}

.hotelhub-btn a:hover:after {
  animation: mask_animation 0.7s steps(22) forwards;
}

.hotelhub-btn a:hover {
  color: var(--secondary-color);
}

@keyframes mask_animation {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes mask_animation_2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* ***********************
  Section Title
************************* */
.hotelhub-section-title h4 {
  display: inline-block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ECE2D7; 
  font-weight: 500;
  margin-bottom: 12px;
}
.hotelhub-section-title h4 i {
  font-size: 16px;
  font-weight: 700;
  margin-right: 8px;
}

.hotelhub-section-title h1 {
  margin: 0;
  font-size: 44px;
  line-height: 50px;
  color: #ffffff;
  font-weight: 700;
}

.hotelhub-section-title p {
  padding: 20px 0 5px;
  font-size: 16px;
  color: #ffffffb0;
  font-weight: 400;
  font-family: "Open Sans";
  width: 91%;
}

.hotelhub-section-title.home_three h1 {
  font-weight: 600;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Why Choose Us Section -->
<!-- ============================================================== -->*/

.why-choose-us-section {
  padding: 50px 90px 168px;
  background: var(--body-color);
}
.choose-single-thumb {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.choose-single-thumb img {
  width: 100%;
}
.choose_content {
  bottom: 18px;
  position: absolute;
  background-color: rgba(82,97,78,0.9490196078431372);
  left: 0;
  right: 0;
  padding: 32px 30px 21px;
  width: 90%;
  margin: auto;
  transition: 0.5s;
  height: 26%;
  overflow: hidden;
}
span.chosse-price {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  border: 1px solid #fff;
  padding: 6px 20px;
  transition: 0.5s;
}
.choose-info ul li img {
  width: inherit;
}
.choose_content h4 {
  font-size: 26px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 18px 0 15px;
  transition: 0.5s;
}
.choose_content p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffffbf;
  font-weight: 400;
  font-family: "Open Sans";
  opacity: 0;
  transition: 0.5s;
}
.choose-info {
  margin-top: 86px;
  margin-bottom: 25px;
  transition: 0.5s;
}
.choose-info ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: 0.5s;
}
.choose_content .hotelhub-btn a {
  padding: 11px 27px;
  border: none;
  background-color: var(--light);
  font-family: "Playfair Display";
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  opacity: 0;
  transition: 0.5s;
}
.choose_content .hotelhub-btn a:hover{
  color: var(--body-color);
}
.choose_content .hotelhub-btn a:after {
  background-color: #707668;
}
.choose-single-thumb:hover .choose_content p,
.choose-single-thumb:hover .choose_content .hotelhub-btn a,
.choose-single-thumb:hover .choose_content .choose-info ul li {
  opacity: 1;
}
.choose-single-thumb:hover .choose_content {
  height: 93%;
  backdrop-filter: blur(3.3px);
}

/* swiper slider  */

.hotelhub_slider-wrapper {
  position: relative;
}
.hotelhub-slider-dots.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: -55px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hotelhub-slider-dots .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background: var(--brand-color) !important;
  margin: 0 5px !important;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.hotelhub-slider-dots .swiper-pagination-bullet-active:before {
  position: absolute;
  content: '';
  left: -4px;
  top: -4px;
  height: 20px;
  width: 20px;
  border: 2px solid var(--brand-color);
  z-index: -1;
  border-radius: 50%;
}
.hotelhub-slider-dots .swiper-pagination-bullet-active {
  position: relative;
  z-index: 1;
}

/* Choose section style_four */

.style_four.why-choose-us-section {
  padding: 50px 75px 278px;
}

.choose-single-bx.style_four .choose-single-thumb img {
    width: inherit;
}

.choose-single-bx.style_four .choose-single-thumb:hover .choose_content {
    height: 100%;
    width: 100%;
    background: var(--brand-color);
    bottom: 0;
    padding: 56px 50px 21px;
}
.choose-single-bx.style_four .choose-content-inner::before {
    position: absolute;
    content: '';
    left: 22px;
    right: 0;
    height: 92%;
    width: 0%;
    border: 1px solid #ffffff57;
    bottom: 22px;
    z-index: 1;
    transition: 0.5s;
    opacity: 0;
  }
  .choose-single-bx.style_four:hover .choose-content-inner::before {
    width: 90%;
    opacity: 1;
  }

/*
<!-- ============================================================== -->
<!-- HotelHub Start Choose Section-->
<!-- ============================================================== -->*/
.choose-section {
  background: #1e1e1e;
  padding: 120px 0 120px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.choose-section .hotelhub-section-title p {
  padding: 20px 0 10px;
  width: 81%;
}
.choose-thumb {
  position: relative;
  z-index: 1;
  text-align: right;
}

.abou_list-item.two {
  position: relative;
  z-index: 1;
}
.abou_list-item.two:after {
  position: absolute;
  content: '';
  left: 0;
  bottom: -11px;
  width: 73%;
  height: 1px;
  background: #ffffff3b;
}

.choose-section .abou_list ul li {
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  margin-bottom: 15px;
}
.choose_list ul li {
  font-size: 16px;
  color: #ffffff87;
  font-weight: 400;
  font-family: "Open Sans";
  margin-bottom: 44px;
}
.choose_list ul li img {
  margin-right: 10px;
}
.counter-single-box.two {
  background: url(../images/main-home/bx-2.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px 40px 15px;
  width: 272px;
  text-align: center;
  position: absolute;
  left: -37%;
  bottom: 0;
  text-align: left;
}
.counter-single-box.two .odometer-wrapper.counter-box-title {
  padding: 0;
  margin-bottom: 96px;
  justify-content: left;
}
.counter-single-box.two .odometer-wrapper.counter-box-title h1 {
  text-align: left;
  font-family: "Open Sans";
}

.counter-single-box.two .counter_icon {
  margin-bottom: 12px;
}
.counter-single-box.two .counter-desc p {
  display: inline-block;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
}

/* all shape */
.choose-shape2 {
  position: absolute;
  top: -6%;
  left: 0%;
  z-index: -1;
}
.choose-shape1 {
  position: absolute;
  top: -7%;
  right: -13%;
  z-index: -1;
}

/*<!-- ============================================================== -->
<!-- HotelHub Start Service Section-->
<!-- ============================================================== -->*/
.service-section {
  padding: 120px 0 115px;
  background: var(--body-color);
}
.contact-infos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact-infos span i {
  height: 40px;
  width: 40px;
  border: 2px solid #ECE2D7;
  display: inline-block;
  border-radius: 50%;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  color: #ECE2D7;
  position: relative;
  top: 12px;
}
.contact-info-content p {
  font-size: 15px;
  color: #ffffff87;
  font-weight: 400;
  margin: 1px;
}
.contact-info-content h3 {
  font-size: 24px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: 'Open Sans';
  margin: 2px 0 0;
}

.single-service-box {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  transition: 0.5s;
  overflow: hidden;
  background: #162C41;
  padding: 34px 35px 18px;
  background-color: rgba(255,255,255,0.050980392156862744);
}

.service-content {
  overflow: hidden;
}
.service-content h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
}

.service-content p {
  font-size: 15px;
  margin: 8px 0 0;
  line-height: 24px;
  color: #ffffff99;
}
.service-icon {
  float: left;
  position: relative;
  top: 16px;
  margin-right: 30px;
}

/* Box-hover */

.hotelhub-hover-box {
  background: var(--brand-color);
  height: 100%;
  top: 0;
  opacity: 0;
  position: absolute;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 25%;
  z-index: -1;
}
.hover-bx {
  left: 0;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}
.hover-bx2 {
  left: 25%;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}
.hover-bx3 {
  left: 50%;
  -webkit-transition-delay: 0.105s;
  transition-delay: 0.105s;
}
.hover-bx4 {
  left: 75%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.single-service-box:hover .hotelhub-hover-box {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Service Single boxs */

.single-service-boxs {
  margin-bottom: 43px;
}
.service-thumb {
  position: relative;
  z-index: 1;
}
.service-thumb img {
  width: 100%;
}
.service_icons {
  position: absolute;
  bottom: 40px;
  left: 30px;
  width: 70px;
  height: 70px;
  background-color: #52614e;
  line-height: 70px;
  text-align: center;
}
.service_icons img {
  width: 35px;
}
.single-service-boxs .service-content {
  background-color: #222222;
  width: 93%;
  position: relative;
  left: 30px;
  top: -40px;
  z-index: 1;
  padding: 25px 35px 25px;
}
.single-service-boxs .service-content:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 0%;
  height: 5px;
  background: var(--brand-color);
  transition: 0.5s;
}
.single-service-boxs:hover .service-content:before {
  width: 100%;
}
.single-service-boxs .service-content span.category {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 500;
  font-family: "Playfair Display";
}

.single-service-boxs .service-content h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 17px 0 22px;
}
ul.service_list li {
  font-size: 16px;
  color: #ffffff8a;
  font-weight: 400;
  font-family: "Open Sans";
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
ul.service_list li:last-child {
  margin-bottom: 32px;
}
ul.service_list li i {
  color: #fff;
}

/* hotelhub btn two */

.hotelhub-btn2 a {
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  display: inline-block;
  background: #323232;
  padding: 7px 24px;
  position: relative;
  z-index: 1;
}
.hotelhub-btn2 a i {
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  transform: rotate(-49deg);
  margin-left: 6px;
}

.single-service-boxs:hover .hotelhub-btn2 a .hotelhub-hover-btn {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.hotelhub-btn2 a .hotelhub-hover-btn {
  background-color: var(--brand-color);
}

/* swiper slider  */

.hotelhub-slider-dots2.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hotelhub-slider-dots2 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background: var(--brand-color) !important;
  margin: 0 5px !important;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.hotelhub-slider-dots2 .swiper-pagination-bullet-active:before {
  position: absolute;
  content: '';
  left: -4px;
  top: -4px;
  height: 20px;
  width: 20px;
  border: 2px solid var(--brand-color);
  z-index: -1;
  border-radius: 50%;
}
.hotelhub-slider-dots2 .swiper-pagination-bullet-active {
  position: relative;
  z-index: 1;
}

/* service section style tow */
.contact-infos.two {
  margin-top: 13px;
  border-bottom: 1px solid #ffffff40;
  padding-bottom: 29px;
}

/* swiper slider  */
.service-section.style_two {
  padding: 120px 0 35px;
}
.slider-arrow-boxs {
  position: absolute;
  top: 68%;
  left: -52%;
  z-index: 1;
  transform: translateY(-50%);
}
.slider-arrow-boxs button.slider-prev2, button.slider-next2 {
  width: 54px;
  outline: 0 !important;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  background-color: #2E2E2E;
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  transition: 0.5s;
  margin-bottom: 12px;
  margin-right: 8px;
}

.slider-arrow-boxs button.slider-prev2:hover, button.slider-next2:hover {
  background: var(--brand-color) !important;
}
.slider-arrow-boxs button:focus {
  outline-color: 0 !important;
  border: 0 !important;
}

/*
<!-- =====================================-->
<!-- HotelHub StartBuddy  Video section -->
<!-- =====================================-->*/

.video-section {
  background-image: url(../images/main-home/paralax-index.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: 700px;
  background-attachment: fixed;
}

.video__area{
  border: 1px solid #ffffff;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  width: 160px;
  height: 160px;
  line-height: 160px;
  top: 50%;
  left: 50%;
}

.video__area .play-now {
  display: inline-block;
  background-color: #5C412E;
  border: 1px solid #ffffff;
  text-transform: capitalize;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  width: 125px;
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Open Sans";
  height: 125px;
  line-height: 125px;
  visibility: visible;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 50%;
  left: 50%;
  text-align: center;
  backdrop-filter: blur(5.2px);
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start Testimonial Section -->
<!-- ============================================================== -->*/
.testimonial-section {
  padding: 105px 0 209px;
  background: #1e1e1e;
}
.testi-single-box {
  background-image: linear-gradient(0deg, rgb(42 42 42) 0%, rgb(255 255 255 / 2%) 100%);
  padding: 35px 28px 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testi-single-box:before {
  position: absolute;
  content: '';
  right: -9%;
  bottom: -10%;
  background: url(../images/main-home/tesi-shape.png);
  background-repeat: no-repeat;
  height: 50%;
  width: 50%;
  transition: 0.5s;
  opacity: 0;
}
.testi-single-box:hover:before {
  right: -13%;
  bottom: -24%;
  opacity: 1;
}
.testi-single-box .hotelhub-hover-btn {
  background: var(--brand-color);
}
.testi-single-box:hover .hotelhub-hover-btn {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.testi-desc p {
  font-size: 18px;
  line-height: 30px;
  color: #ffffff82;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}
ul.testi-rating li {
  display: inline-block;
  list-style: none;
  padding-bottom: 16px;
  margin-right: 2px;
  font-size: 20px;
  text-transform: uppercase;
  color: #ECE2D7;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 56px 0 0;
  gap: 20px;
}

.user-name h4 {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
}

.user-name h6 {
  margin: 10px 0 0;
  font-size: 15px;
  color: #ffffff66;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}
.testi-single-box:hover .user-name h6, 
.testi-single-box:hover .testi-desc p{
 color: var(--light);
} 

/* swiper slider  */
.hotelhub-slider-dots3.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: -100px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hotelhub-slider-dots3 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background: var(--brand-color) !important;
  margin: 0 5px !important;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.hotelhub-slider-dots3 .swiper-pagination-bullet-active:before {
  position: absolute;
  content: '';
  left: -4px;
  top: -4px;
  height: 20px;
  width: 20px;
  border: 2px solid var(--brand-color);
  z-index: -1;
  border-radius: 50%;
}
.hotelhub-slider-dots3 .swiper-pagination-bullet-active {
  position: relative;
  z-index: 1;
}
/* Owl Dots */

/*
<!-- ============================================================== -->
<!-- HotelHub Start Brnad Section-->
<!-- ============================================================== -->*/

.marquee-section {
  background: var(--secondary-color);
  padding: 20px 0 33px;
}

.marquee {
  display: -webkit-box;
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.marquee-single-box {
  flex-shrink: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-around;
  -webkit-animation: scroll 50s linear infinite;
  animation: scroll 50s linear infinite;
}

.marquee-content h2 {
  display: inline-block;
  font-size: 30px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
}
.marquee-content h2 span img {
  margin: -5px 28px 0 30px;
  display: inline-block;
  -webkit-animation: rotateme 8s linear infinite;
  animation: rotateme 8s linear infinite;
}
.marquee-section.style_two {
  border: 10px solid var(--secondary-color);
  padding: 15px 0 28px;
  background: transparent;
}
.marquee-section.style_two .marquee-content h2 {
  font-size: 60px;
  font-weight: 500;
}
/* Key Frames */

.scroll {
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start hotelhub Blog Section-->
<!-- ============================================================== -->*/

.blog-section {
  padding: 106px 0 50px;
  background: var(--body-color);
}
.blog-single-box {
  margin-bottom: 30px;
}
.blog-thumb {
  position: relative;
  z-index: 1;
}
.blog-thumb img {
  width: 100%;
}
.blog-date-line {
  position: absolute;
  right: 0;
  bottom: 40px;
  width: 70px;
  height: 70px;
  background: var(--brand-color);
  text-align: center;
  line-height: 48px;
  padding: 12px 0 0;
}
.blog-date-line p {
  font-size: 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  line-height: 22px;
  margin: 0;
}
.blog-date-line span {
  font-family: "Playfair Display";
  font-size: 14px;
}
.blog-content {
  background-color: #222222;
  width: 91%;
  position: relative;
  left: 40px;
  top: -40px;
  z-index: 1;
  padding: 33px 30px 25px;
  overflow: hidden;
}
.blog-content h3 a {
  display: inline-block;
  font-size: 22px;
  line-height: 30px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  margin-top: 5px;
}
.blog-content h3 a:hover {
  color: var(--brand-color);
}
span.category {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  border: 1px solid #ffffff30;
  padding: 7px 19px;
}
.blog_admin ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
  display: flex;
  gap: 10px;
}
.blog_button {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ffffff4a;
  margin-top: 18px;
  padding-top: 23px;
}
.blg-btn a {
  display: inline-block;
  position: relative;
  width: 36px;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  line-height: 35px;
  height: 36px;
  background-color: #52614e;
  transform: translate(30px,30px);
  opacity: 0;
}
.blg-btn a i {
  font-weight: 600;
  color: #fff;
}

.blog-single-box:hover .blg-btn a {
  opacity: 1;
  transform: translate(0,0);
}

/* Blog style Two */

.blog-section.style-two {
  background: #1e1e1e;
}
.blog-section.style-two .hotelhub-btn {
  text-align: right;
}
.blog-section.style-two .hotelhub-btn a {
  border: 1px solid #424242;
}
.blog-section.style-two .hotelhub-btn a:after {
  background-image: url(../images/main-home/mask-btn3.png);
  -webkit-mask: url(../images/main-home/mask-btn3.png);
  mask: url(../images/main-home/mask-btn3.png);
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Appoinment Section-->
<!-- ============================================================== -->*/

.appoinment-section {
  padding: 120px 0 0;
  position: relative;
  background: var(--brand-color);
}
.appoinment-section .hotelhub-section-title {
  margin-bottom: 22px;
}
.contact_thumb {
  position: relative;
  z-index: 1;
}
.contact_thumb img {
  width: inherit !important;
  display: inline-block;
  margin-left: -302px;
}

.form-box input::placeholder {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  }

  .form-box input {
    width: 100%;
    height: 52px;
    margin-bottom: 20px;
    border-top: 0;
    border-bottom: 1px solid #ffffff5c;
    display: inline-block;
    background-color: transparent;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Open Sans";
    border-left: 0;
    border-right: 0;
    outline: 0;
}
.form-box input:focus, button:focus {
  outline-color: transparent;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid #ffffff5c !important;
}

.form-box select {
  width: 100%;
  height: 52px;
  margin-bottom: 25px;
  border-top: 0;
  border-bottom: 1px solid #ffffff5c;
  display: inline-block;
  background-color: transparent;
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  border-left: 0;
  border-right: 0;
  outline: 0;
}

.form-box textarea {
    width: 100%;
    height: 90px;
    outline: none;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #ffffff6e;
    color: #fff;
}
.form-box textarea::placeholder {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
}
.form-box textarea:focus {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #ffffff6e !important;
  border-left: 0 !important;
}

.form-box select option {
  background: var(--brand-color)!important;
  color: var(--light);
}

.check_bx {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 27px;
  margin-top: 6px;
}
.check_bx p {
  color: #ffffff8a;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  font-family: "Open Sans";
}
.check_bx input[type="checkbox"] {
  height: 20px;
  width: 20px;
}

/* Submit Button */

button.submit-btn {
  padding: 12px 32px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  overflow: hidden;
  border: 1px solid ##3C2B1E;
  background-color: var(--primary-color);
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  outline: none;
}
button.submit-btn:hover {
  background: #fff;
  color: var(--primary-color);
}
button.submit-btn i {
  padding-left: 7px;
  position: relative;
  top: 2px;
  transform: rotate(-45deg);
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}

button.submit-btn:hover:after {
  animation: mask_animation 0.7s steps(22) forwards;
}

.button.submit-btn:hover {
  color: var(--secondary-color);
}

/* contant-info sention */

.contant_info-section {
  background: #1E1E1E;
  padding: 58px 0 58px;
  position: relative;
  margin-top: -171px;
}
.contact-info-bx {
  display: flex;
  align-items: center;
  gap: 15px;
}
.info-icon {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  background-color: #52614e;
  text-align: center;
  line-height: 54px;
  color: #fff;
}
.info-content p {
  font-size: 15px;
  color: #ffffff94;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}
.info-content h3 {
  font-size: 20px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Open Sans";
  margin: 3px 0 0;
}

/* Appinment section style two */
.appoinment-section.style_two {
  background: #1e1e1e;
  padding: 120px 0 120px;
}
.appoinment-section.style_two .contact_thumb img {
  margin-left: -84px;
}
.boxed {
  position: relative;
  width: calc(100% - 120px);
  margin: 120px 0 0 60px;
  height: 100%;
  left: 0;
  z-index: 5;
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start Footer Section -->
<!-- ============================================================== -->*/

.footer-section {
  padding: 117px 0 40px;
  background: var(--body-color);
  position: relative;
  z-index: 1;
}

.footer_widget p {
  font-size: 16px;
  color: #ffffff82;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 22px 0 56px;
}

h3.follow-title {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0 0 21px;
}

.hotelhub-social-icon a {
  color: #fff;
  font-size: 15px;
  display: inline-block;
  transition: 0.5s;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: rgba(234,247,243,0);
  border: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  line-height: 34px;
  margin-right: 7px;
}

.hotelhub-social-icon a:hover {
  background: var(--secondary-color);
  color: var(--light);
}



/* widget */

h4.widget-title {
  padding: 0 0 24px;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 600;
  margin: 0;
}

/*footer menu*/
.menu-quick-link-content {
  padding: 4px 0 0;
}

ul.footer-menu li {
  display: block;
  list-style: none;
  margin-bottom: 8px;
}

ul.footer-menu li a {
  display: inline-block;
  transition: 0.5s;
  position: relative;
  z-index: 1;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
}


ul.footer-menu li a:hover {
  color: var(--brand-color);
}

.hotelhub-info h5 {
  font-size: 15px;
  line-height: 26px;
  color: #f3f6f3;
  font-weight: 400;
  font-family: "Unbounded";
}


.footer-recent a {
  margin-right: 8px;
  margin-bottom: 10px;
  display: inline-block;
}

/* Footer Bottom */

.row.footer-btm {
  margin-top: 104px;
  position: relative;
  z-index: 1;
  background: #1E1E1E;
  padding: 24px 22px 24px;
}
/* Social Icon */

.hotelhub-company-desc p {
  font-size: 16px;
  color: #ffffff;
  margin: 0;
}
.footer-bottom-menu ul li {
  display: inline-block;
  margin-left: 20px;
}

/* subscribe */

.form-input-bx {
  position: relative;
  z-index: 1;
}
p.widget-froms {
  color: #ffffff96;
  margin: 3px 0 15px;
}
.form-input-bx input {
    width: 100%;
    height: 50px;
    outline: 0;
    padding: 0 55px;
    background: transparent;
    border: 1px solid #ffffff38;
    position: relative;
    z-index: 1;
    color: #fff;
}
.form-input-bx input::placeholder {
  color: #ffffffba;
}
.form-input-bx i {
  position: absolute;
  top: 19px;
  left: 25px;
}

.subscribe_form button {
  width: 100%;
  background: var(--brand-color);
  outline: 0;
  border: 0;
  color: #ffff;
  font-family: 'Playfair Display';
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  padding: 11px 20px;
  margin-top: 15px;
}
.subscribe_form button i {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
  transform: rotate(-45deg);
  display: inline-block;
}
/* footer style Five */

.footer-section.style_five .footer-shape {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  left: 0;
}
/* ====================================================
    Start Home Two Css
======================================================= */

/* Topber Area */

.topber_area {
  background: var(--brand-color);
  padding: 10px 19px 10px;
}
.topber-text span {
  margin-right: 50px;
  position: relative;
  z-index: 1;
}
.topber-text span:before {
  position: absolute;
  content: '';
  right: -40px;
  height: 1px;
  bottom: 8px;
  width: 30px;
  background: #ffffff7d;
}
.topber-text p {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}
.topber-social-icon {
  text-align: right;
  margin-right: 12px;
}
.topber-social-icon h4.topber-follow {
  font-size: 15px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
  display: inline-block;
  margin-right: 50px;
  position: relative;
  z-index: 1;
}
.topber-social-icon h4.topber-follow:before {
  position: absolute;
  content: '';
  right: -44px;
  height: 1px;
  bottom: 10px;
  width: 30px;
  background: #ffffff7d;
}
.topber-social-icon a {
  display: inline-block;
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  padding: 0 6px 0;
}

/*
<!-- ============================================================== -->
<!-- Start Hero Section Style Two -->
<!-- ============================================================== -->*/

.hero-section.style_two {
  background: url(../images/home-two/banner2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 1010px;
  background-size: cover;
}
.style-two.hero-content {
  margin-top: 0;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 85px
}
.hero-content.style-two h4 {
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  font-size: 16px;
  background: transparent;
  margin: 0 0 14px;
}
.style-two.hero-content h4 i {
  margin-right: 0;
  color: #ECE2D7;
}
.hero-content.style-two h1 {
  font-size: 80px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
}

.row.hero_uppers {
  margin-top: -51px;
}
.row.hero_uppers .hotelhub-btn {
  text-align: center;
  margin-bottom: 45px;
}
.hero-rating-bx {
  background: url(../images/home-two/review-bg.jpg);
  padding: 31px 40px 35px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 400px;
  margin-left: 105px;
  position: relative;
  z-index: 1;
}
.hero-rating-bx:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 151px;
  width: 100%;
  height: 1px;
  background: #ffffff45;
}
.hero-rating-bx::after {
  position: absolute;
  content: '';
  left: 0;
  top: 119px;
  width: 100%;
  height: 1px;
  background: #ffffff45;
}

/* Review bx */

.review-bx {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-text p {
  font-size: 18px;
  color: #ECE2D7;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
}
.review-rating h2 {
  font-size: 50px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 0;
}
.review-rating i {
  display: inline-block;
  font-size: 22px;
  position: relative;
  top: -19px;
}

/* hero icon itm */

.hero-icon {
  margin-bottom: 15px;
  margin-top: 66px;
}
.hero-icon-itm p {
  font-size: 16px;
  color: #ffffff99;
  font-weight: 400;
  font-family: "Open Sans";
}

/* author  */

.review-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 110px;
}
.review-author p {
  font-size: 15px;
  line-height: 24px;
  color: #ffffff9e;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}

.hero-thumb {
  margin-left: 40px;
}
.hero-thumb.hero-right {
  margin-left: -103px;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start About Section Style Twho-->
<!-- ============================================================== -->*/

.about-serction.style-tow {
  padding: 168px 0 207px;
  background: #1E1E1E;
}
.about-serction.style-tow .about-thumb {
  margin-left: 0;
  margin-top: -48px;
}
.about_shape-s {
  position: absolute;
  top: 13%;
  left: 18%;
}
.counter-single-box.box2 {
  display: flex;
  align-items: center;
  background: url(../images/home-two/counter-bx.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 312px;
  left: inherit;
  right: -14px;
  bottom: 0;
  padding: 22px 30px 24px;
  gap: 15px;
}
.counter-single-box.box2 .counter_icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #52614e;
  line-height: 62px;
}
.counter-content {
  text-align: left;
}
.counter-number h1 {
  font-size: 30px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.counter-number span {
  position: relative;
  top: -8px;
  font-size: 16px;
  left: -3px;
}
.counter-content .counter-desc p {
  font-size: 16px;
  color: #ffffffa6;
  font-weight: 400;
  font-family: "Open Sans";
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Boking Section -->
<!-- ============================================================== -->*/

.row.booking_bg {
  background: var(--brand-color);
  margin: -87px 0 0 0;
  padding: 55px 27px 50px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.row.booking_bg:before {
  position: absolute;
  content: '';
  left: -7%;
  top: 0;
  height: 100%;
  width: 100%;
  background: url(../images/home-two/boking-shape.png);
  background-repeat: no-repeat;
  z-index: -1;
}
.style_two.row.booking_bg {
  margin: -50px 0 0 0;
  z-index: 2;
}
.booking-title h3 {
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 0;
}
.hetelhub-htel-boking {
  display: flex;
  align-items: center;
}
.controls {
  text-align: left;
  position: relative;
  width: 24%;
  margin-right: 25px;
}
.controls input[type="date"] {
  padding: 12px;
  border: 1px solid #c6c6c678;
  width: 100%;
  background: transparent;
  font-size: 16px;
  font-weight: 300;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.controls input[type="text"]:focus, .controls input[type="text"]:hover,
.controls input[type="email"]:focus,
.controls input[type="email"]:hover,
.controls input[type="number"]:focus,
.controls input[type="number"]:hover,
.controls input[type="date"]:focus,
.controls input[type="date"]:hover,
.controls input[type="tel"]:focus,
.controls input[type="tel"]:hover,
.controls textarea:focus,
.controls textarea:hover,
.controls button:focus,
.controls button:hover,
.controls select:focus,
.controls select:hover {
  outline: none;
  border-color: #fff;
  border: 1px solid #c6c6c678 !important;
}
.controls input[type="date"]:focus + label,
.controls input[type="date"]:hover + label {
  color: #fff;
  cursor: text;
}
.controls .fa-sort {
  position: absolute;
  right: 10px;
  top: 17px;
  color: #999;
}
.controls select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.controls label {
  position: absolute;
  left: 10px;
  top: 12px;
  color: #fff;
  background: var(--brand-color) !important;
  font-size: 16px;
  display: inline-block;
  padding: 2px 10px;
  font-weight: 400;
  -moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -o-transition: color 0.3s, top 0.3s, background-color 0.8s;
  -webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
  transition: color 0.3s, top 0.3s, background-color 0.8s;
  background-color: white;
}
.controls label.active {
  top: -11px;
  color: #fff;
  background-color: white;
  width: auto;
}

.controls label i {
  margin-right: 10px;
}
.controlss .booking-button button {
  background: #758271;
  padding: 12px 31px;
  outline: 0;
  margin-top: 0;
}
.controls .booking-input-box {
  margin-bottom: 0;
}
.controls .booking-input-box select {
  padding: 0 10px 0 19px;
}
.controls .booking-input-box i {
  left: inherit;
  right: 17px;
}

.controls .booking-input-box:before {
  display: none;
}

.controlss .hotelhub-btn a {
  padding: 12px 27px;
 overflow: inherit;
  font-size: 16px;
}
.hotel-boking.style_inner_two {
  padding: 120px 0 0;
  background: transparent;
}
.hotel-boking.style_inner_two .row.booking_bg {
  margin: 0;
}

/* booking style three */

.row.booking_bg.style_three {
  padding: 22px 10px 22px;
  background: var(--primary-color);
  margin: -51px 0 0 0;
}
.row.booking_bg.style_three:before {
  display: none;
}
.booking_style_three .containers form {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.booking_style_three .booking-input-box {
  margin-bottom: 0;
}
.booking_style_three .booking-button button {
  background: var(--brand-color);
  padding: 12px 31px;
  margin-top: 0;
}

/*
<!-- ============================================================== -->
<!-- Start Service Section Style Two -->
<!-- ============================================================== -->*/
.why-choose-us-section.style-two {
  margin-top: -82px;
  padding: 186px 90px 115px;
}

.contact-info.two {
  border-bottom: 1px solid #ffffff3b;
  padding-bottom: 28px;
  margin-top: 12px;
}
.choose-single-bx2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 85px;
}
.choose-single-thumbs {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex-shrink: 0.1;
}

.choose_contents {
  background-color: #292b29;
  padding: 75px 130px 53px 61px;
  transition: 0.5s;
  overflow: hidden;
}

.choose_contents span.chosse-price {
  font-size: 15px;
  color: #ECE2D7;
  font-weight: 400;
  font-family: "Open Sans";
  border: 1px solid #ECE2D7;
  padding: 6px 20px;
  transition: 0.5s;
}
.choose-infos ul li img {
  width: inherit;
}
.choose_contents h4 {
  margin: 17px 0 17px;
  transition: 0.5s;
  font-size: 36px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
}
.choose_contents p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffffbf;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}
.choose-infos {
  margin-top: 81px;
  margin-bottom: 25px;
  transition: 0.5s;
  display: inline-block;
}
.choose-infos.last-child {
  margin-left: 30px;
}
.choose-infos ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.5s;
}
.choose_contents .hotelhub-btn a {
  padding: 11px 27px;
  border: none;
  background-color: var(--light);
  font-family: "Playfair Display";
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  transition: 0.5s;
}
.choose_contents .hotelhub-btn a:hover{
  color: var(--body-color);
}
.choose_contents .hotelhub-btn a:after {
  background-color: #707668;
}

.choose-slider2 .swiper-slide {
  background-position: center;
  background-size: cover;
}

/* swiper slider  */

.hotelhub-slider-dots4.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hotelhub-slider-dots4 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background: var(--brand-color) !important;
  margin: 0 5px !important;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.hotelhub-slider-dots4 .swiper-pagination-bullet-active:before {
  position: absolute;
  content: '';
  left: -4px;
  top: -4px;
  height: 20px;
  width: 20px;
  border: 2px solid var(--brand-color);
  z-index: -1;
  border-radius: 50%;
}
.hotelhub-slider-dots4 .swiper-pagination-bullet-active {
  position: relative;
  z-index: 1;
}

/* choose style Four*/

.why-choose-us-section.style_five {
  background: #1e1e1e;
  padding: 105px 0 90px;
}
.why-choose-us-section.style_five .hotelhub-section-title p {
  padding: 20px 0 17px;
  width: 47%;
}
.choose-single-bx2.style_five {
  margin-bottom: 30px;
  
}
.choose-single-bx2.style_five .choose-single-thumbs {
  flex-shrink: 0;
}
.choose-single-bx2.style_five:hover .choose-single-thumbs img {
  transform: scale(1.2);
}
.choose-single-bx2.style_five .choose_contents {
  background-color: #161616;
  padding: 90px 54px 86px 60px;
  position: relative;
  z-index: 1;
}
.choose-single-bx2.style_five .choose_contents h6 {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 500;
  margin: 0;
}
.choose-single-bx2.style_five .choose_contents h4 {
  font-size: 30px;
  color: #ffffff;
  font-weight: 600;
  margin: 15px 0 23px;
}
.choose-single-bx2.style_five .choose_contents p {
  line-height: 28px;
  color: #ffffffa1;
  margin: 0 0 38px;
}
.choose-single-bx2.style_five .choose_contents .hotelhub-btn a {
  background-color: #1e1e1e;
}
.choose-single-bx2.style_five .choose_contents .hotelhub-btn a:hover {
  color: #ffff;
}
.chose-sp {
  position: absolute;
  bottom: 8%;
  right: 7%;
}


/*
<!-- ============================================================== -->
<!-- Start Choose Section Style Two -->
<!-- ============================================================== -->*/

.choose-section.style-two {
  background: url(../images/home-two/choose-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 106px 89px 112px;
}
.style-two.choose-section .hotelhub-section-title {
  margin-top: 0;
  margin-bottom: 39px;
}
.style-two.choose-section .hotelhub-btn {
  margin-top: 14px;
}
.choose-right {
  margin-left: 87px;
}
.choose-video {
  position: relative;
  z-index: 1;
}
.choose-video .video__area {
  border: 1px solid #1e1e1e59;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-0%, -0%);
  position: inherit;
  width: 160px;
  height: 160px;
  line-height: 160px;
  top: 0;
  left: 0;
  text-align: center;
  margin: auto;
}
.choose-video .video__area .play-now {
  display: inline-block;
  background-color: #ffffff47;
  border: 1px solid #ffffff;
  text-transform: capitalize;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  width: 125px;
  height: 125px;
  line-height: 125px;
  visibility: visible;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 50%;
  left: 50%;
  text-align: center;
  backdrop-filter: blur(5.2px);
  font-size: 18px;
  color: #52614e;
  font-weight: 500;
  font-family: "Open Sans";
  text-transform: uppercase;
}

.single-service-box.box2 {
  background: transparent;
  border: 1px solid #ffffff2b;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.service-icons {
  margin-right: 0;
  height: 90px;
  width: 90px;
  text-align: center;
  line-height: 90px;
  border-right: 1px solid #ffffff2e;
}
.single-service-box.box2 .service-content h3 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
  line-height: 52px;
  margin: 0;
}

/*
<!-- ============================================================== -->
<!-- Start Testimonial Section Style two-->
<!-- ============================================================== -->*/
.testimonial-section.style-two {
  padding: 105px 0 0;
  background: var(--body-color);
}
.testimonial-section.style-two .hotelhub-section-title {
  margin-bottom: 27px;
}
.review.style-two {
  position: relative;
  bottom: -61px;
}
.testi-thumb {
  margin-top: -80px;
}
.testi-thumb img {
  width: 100%;
}
.choose_list.style-two ul li {
  font-size: 20px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  border-bottom: 2px solid #ffffff33;
  margin-bottom: 42px;
  padding-bottom: 30px;
}

/* swiper slider  */

.hotelhub-slider-dots5.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: -80px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hotelhub-slider-dots5 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background: var(--brand-color) !important;
  margin: 0 5px !important;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.hotelhub-slider-dots5 .swiper-pagination-bullet-active:before {
  position: absolute;
  content: '';
  left: -4px;
  top: -4px;
  height: 20px;
  width: 20px;
  border: 2px solid var(--brand-color);
  z-index: -1;
  border-radius: 50%;
}
.hotelhub-slider-dots5 .swiper-pagination-bullet-active {
  position: relative;
  z-index: 1;
}

/*
<!-- ============================================================== -->
<!-- Hotelhub Start Team Section -->
<!-- ============================================================== -->*/
.team-section {
  padding: 120px 70px 88px;
  position: relative;
  background: #161616;
}
.team-section.style-two {
  padding: 120px 70px 120px;
}
.team-left-bx {
  background: var(--brand-color);
  padding: 87px 60px 93px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.team-left-bx .hotelhub-section-title h1 {
  margin: 0;
  font-size: 36px;
  line-height: 42px;
  color: #ffffff;
  font-weight: 600;
}
.team-left-bx .review-author p {
  font-size: 16px;
  color: #fff;
}
.team-left-bx .review-author {
  gap: 20px;
  margin-top: 34px;
  margin-bottom: 40px;
}
.team-shape1 {
  position: absolute;
  bottom: 14%;
  left: 39%;
  z-index: -1;
}
.team-shape {
  position: absolute;
  bottom: -52px;
  right: 30px;
  z-index: -1;
}
/* team single box */

.team-single-box {
  padding: 40px 30px 30px;
  background-color: #343434;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

.social-icon {
  border-top: 1px solid #ffffff3d;
  margin-top: 18px;
  padding-top: 24px;
}

.social-icon ul li {
  display: inline-block;
  padding-right: 9px;
  list-style: none;
}

.social-icon ul li a {
  width: 35px;
  line-height: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: transparent;
  color: #ffffff52;
  transition: 0.5s;
  display: inline-block;
  border: 1px solid #ffffff57;
  font-size: 13px;
}
.social-icon ul li a:hover {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: var(--light);
}

.team-content h5 {
  padding: 6px 30px;
  border-radius: 20px;
  font-size: 16px;
  color: #ECE2D7;
  font-weight: 400;
  font-family: "Open Sans";
}
.team-content h2 {
  margin: 24px 0 0;
  font-size: 28px;
  color: #ffffff;
  font-weight: 500;
}

/*all Team hover*/

.upp.style-2 .team-single-box2:hover .social-icon2 ul li a {
  opacity: 1;
  transform: translateY(0px);
  overflow: hidden;
  visibility: visible;
}

.social-icon2 ul li a:hover i {
  color: #fff;
}

.team-btn a {
  display: inline-block;
  background: var(--brand-color);
  color: #fff;
  padding: 12px 54px;
  font-weight: 700;
  font-size: 16px;
  margin-top: 20px;
}
.team-btn a:hover {
  color: var(--brand-color);
  background: var(--title-color);
}
/* Wood Animation */

span.wood-animation img {
  animation: wooo 3.5s infinite;
}

/*wood animation*/
@keyframes wooo {
  0% {
    transform: rotate3d(0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 359deg);
  }
}

/* Left Animation */

@keyframes moveLeftBounce {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* team style tow */

.team-single-box.style_two {
  background: #EDEFED;
  border-radius: 200px 200px 0 0;
  padding: 50px 50px 30px;
  transition: .5s;
  position: relative;
  z-index: 1;
}
.team-single-box.style_two .team-thumb img {
  border: 15px solid #52614E;
  border-radius: 50%;
}
.team-single-box.style_two:hover .team-thumb img {
  border: 15px solid #647160;
}
.team-single-box.style_two:before {
  border-radius: 200px 200px 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  content: '';
  background: #52614E;
  z-index: -1;
  transition: 0.5s;
}
.team-single-box.style_two:hover:before {
  height: 100%;
}
.team-single-box.style_two .team-content h2 {
  color: #1e1e1e;
  transition: 0.5s;
}

.team-single-box.style_two .team-content h5 {
  color: #1e1e1eb3;
  transition: 0.5s;
}

.team-single-box.style_two .social-icon ul li a {
  background-color: #DCE1DD;
  color: #1e1e1e;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: none;
}
.team-single-box.style_two .social-icon {
  border-top: 1px solid #0e0a0a45;
  transition: 0.5s;
}
.team-single-box.style_two:hover .social-icon {
  border-top: 1px solid #9e8d8d45;
}
.team-single-box.style_two .social-icon ul li a:hover {
  background: var(--brand-color);
  color: #fff;
}
.team-single-box.style_two:hover .team-content h2, 
.team-single-box.style_two:hover .team-content h5 {
  color: #fff;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Choose Sections-->
<!-- ============================================================== -->*/

.choose-sections {
  background: #1e1e1e;
  padding: 105px 0 90px;
}
.choose-single-item {
  margin-bottom: 30px;
}
.choose-thumbs {
  position: relative;
  z-index: 1;
}
.choose-thumbs img {
  width: 100%;
}
.choose-contents {
  background: rgba(82,97,78,0.9490196078431372);
  backdrop-filter: blur(1.1px);
  position: absolute;
  bottom: 30px;
  padding: 30px 44px 35px 29px;
  transition: 0.5s;
  width: 85%;
  left: 0;
  right: 0;
  margin: auto;
}
.choose-contents h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
  margin: 0 0 14px;
}
.choose-contents p {
  font-size: 15px;
  color: #ffffffb3;
  font-weight: 400;
  font-family: "Open Sans";
  line-height: 24px;
}
.choose-btn a {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.choose-btn a i {
  font-size: 14px;
  font-weight: 600;
  margin-left: 6px;
}
.choose-btn {
  margin-top: -43px;
  opacity: 0;
  transition: 0.5s;
}
.choose-thumbs:hover .choose-contents{
  bottom: 0;
  background: var(--body-color);
}
.choose-thumbs:hover .choose-btn {
  opacity: 1;
  margin-top: 0;
}

.row.choose-border {
  position: relative;
  z-index: 1;
}
.row.choose-border:before {
  position: absolute;
  content: '';
  left: 7px;
  bottom: -90px;
  height: 1px;
  width: 99%;
  background: #ffffff47;
}

/*
<!-- ============================================================== -->
<!-- Hotelhub Start Galary Section-->
<!-- ============================================================== -->*/
.galary-section .container-fluid {
  margin: 0;
  padding: 0;
}
.galary-single-bx {
  position: relative;
  z-index: 1;
}
.galary-img img {
  width: 100%;
}
.galary-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  opacity: 0;
  transition: .5s;
}
.galary-icon a {
  display: inline-block;
  color: #fff;
  font-size: 21px;
}

.galary-single-bx:hover .galary-icon {
  opacity: 1;
}

.galary-sections {
  padding: 120px 0 90px;
}
.galary-thumb {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.galary-thumb:before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  background: rgba(30,30,30,0.3);
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s;
}
.galary-thumb:hover:before {
  opacity: 1;
}
.galary-view a {
  position: absolute;
  font-size: 20px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Open Sans";
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  opacity: 0;
}
.galary-thumb:hover .galary-view a {
  opacity: 1;
}


/*
<!-- ============================================================== -->
<!-- Start Home Three  CSS -->
<!-- ============================================================== -->*/

/*
<!-- ============================================================== -->
<!-- Start Hero Section Style Three-->
<!-- ============================================================== -->*/

.hero-section.style-three {
  background: url(../images/home-three/banner.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 900px;
  background-size: cover;
  overflow: hidden;
}
.hero-content.style_three {
  text-align: left;
  margin-top: 0;
}
.style_three.hero-content h1 {
  letter-spacing: 5px;
  text-transform: capitalize;
  font-size: 80px;
  line-height: 86px;
  color: #ffffff;
  font-weight: 600;
}
.hero-section.style-three .counter-right-side {
  position: relative;
  z-index: 1;
}
.hero-section.style-three  .hotelhub-btn a {
  background-color: #ECE2D7;
}
.video-content {
  position: absolute;
  right: 19%;
  bottom: 4px;
}
.hero-video {
  position: relative;
  z-index: 1;
}
.hero-video::before {
  position: absolute;
  content: '';
  right: -101px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ECE2D7;
}
.hero-video::after {
  position: absolute;
  content: '';
  right: -93px;
  top: 32px;
  width: 80px;
  height: 1px;
  border-radius: 5px;
  background-color: #ECE2D7;
}
.hero-video a {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #ECE2D7;
  display: inline-block;
  text-align: center;
  line-height: 64px;
  font-size: 28px;
  color: #52614e;
}
/*  X-Small devices (portrait phones, less than 320px) */
@media (max-width: 320.98px) { 
  .video-content {
    display: none;
  }
 }
/*  X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  .video-content {
    display: none;
  }
 }
/*  Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
  .video-content {
    display: none;
  }
 }

/* // Medium devices (tablets, less than 992px)c */
@media (max-width: 991.98px) {
  .video-content {
    display: none;
  }
 }

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
  .video-content {
    display: none;
  }
 }

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
  .video-content {
    display: none;
  }

 }



/* hero counter box */

.hero-section.style-three .counter-single-box.two {
  background: rgba(255,255,255,0.2);
  padding: 40px 40px 229px;
  position: inherit;
  text-align: center;
  width: 357px;
  backdrop-filter: blur(6.5px);
  left: -65px;
  bottom: -75px;
  z-index: -1;
}
.style-three.hero-section .counter-single-box.two .odometer-wrapper.counter-box-title {
  padding: 0;
  margin-bottom: 0;
  justify-content: center;
}
.counter_icons {
  margin-bottom: 17px;
}
span.hero_coun-des {
  font-size: 18px;
  line-height: 24px;
  color: #ffffffba;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 3px 0 22px;
  display: inline-block;
}
.hero-shpe {
  position: absolute;
  right: -25px;
  bottom: 0;
  z-index: 1;
}

.hero_info {
  position: absolute;
  bottom: 44%;
  transform: rotate(90deg);
  left: -7%;
}
.hero_info p {
  font-size: 20px;
  text-transform: uppercase;
  color: #ECE2D7bf;
  font-weight: 600;
  cursor: pointer;
}
.hero_info img {
  transform: rotate(-91deg);
  margin-right: 43px;
  margin-left: 43px;
}


/*
<!-- ============================================================== -->
<!-- Start About Section Style Three -->
<!-- ============================================================== -->*/


.style_three.about-serction {
  padding: 238px 70px 120px;
  background: var(--body-color);
  z-index: 1;
  margin-top: -119px;
  overflow: hidden;
}
.abou_curt_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 90px;
}
.about-shapes {
  position: absolute;
  top: 16%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  z-index: -1;
}

.counter-single-boxs .counter-number h1 {
  font-size: 60px;
  line-height: 24px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 500;
  display: inline-block;
  font-family: "Open Sans";
}
.counter-single-boxs .counter-content .counter-desc p {
  font-size: 16px;
  color: #ffffff8a;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 7px 0 0;
}
.about-img.right {
  text-align: right;
}


/*
<!-- ============================================================== -->
<!-- Start Why Choose us Section Style Three -->
<!-- ============================================================== -->*/
.why-choose-us-section.style_three {
  margin-top: 0;
  padding: 105px 90px 110px;
}
.why-choose-us-section.style_three .hotelhub-btn {
  margin-top: 148px;
}
.choose-single-bx {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.choose-single-bx.box-bottom {
  margin-top: 50px;
}
.choose-contentns {
  padding: 38px 30px 33px;
  transition: 0.5s;
  overflow: hidden;
  background-color: rgba(255,255,255,0.050980392156862744);
  position: absolute;
  z-index: 1;
  width: 100%;
}
.choose-contentns span.chosse-price {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  border: 1px solid #fff;
  padding: 6px 20px;
  transition: 0.5s;
}
.choose-infos ul li img {
  width: inherit;
}
.choose-contentns h4 {
  font-size: 26px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 18px 0 0;
  transition: 0.5s;
}
.choose-contentns p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffffbf;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}

.choose-infoss ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.5s;
  opacity: 1;
}
.choose-contentns .hotelhub-btn a {
  padding: 11px 27px;
  border: none;
  background-color: var(--light);
  font-family: "Playfair Display";
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  transition: 0.5s;
}
.choose_contentns .hotelhub-btn a:hover{
  color: var(--body-color);
}
.choose_content .hotelhub-btn a:after {
  background-color: #707668;
}
.choose-single-thumb:hover .choose-contentns p,
.choose-single-thumb:hover .choose-contentns .hotelhub-btn a,
.choose-single-thumb:hover .choose-contentns .choose-info ul li {
  opacity: 1;
}
.choose-single-bx:hover .choose-contentns {
  padding: 37px 30px 155px;
  margin-top: -119px;
  background: var(--brand-color);
}
.choose-infoss {
  margin-bottom: 0;
  transition: 0.5s;
  display: inline-block;
  position: absolute;
  margin-top: 8px;
  bottom: 30px;
  opacity: 0;
}
.choose-single-bx:hover .choose-infoss {
  bottom: 20px;
  opacity: 1;
  visibility: visible;
}

/* choose section style three */
.choose-section.style-two.three {
  background: url(../images/home-three/chose-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/*
<!-- ============================================================== -->
<!-- Start Service  Section Style Three -->
<!-- ============================================================== -->*/

.service-section.style_three {
  padding: 105px 0 0;
  background: var(--body2-color);
}
.single-service-boxs.style-two {
  margin-bottom: 30px;
}
.single-service-boxs.style-two.Second {
  margin-top: -50px;
}
.single-service-boxs.style-two .service-thumb:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background-image: linear-gradient(0deg, rgb(21 21 21 / 72%) 0%, rgb(21 21 21 / 62%) 12%, rgba(21, 21, 21, 0) 50%, rgba(21, 21, 21, 0) 100%);
  height: 100%;
  width: 100%;
}
.service-contents {
  position: absolute;
  bottom: 39px;
  left: 35px;
}
.service-contents span.category {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  padding: 6px 19px;
  border-radius: 17px;
  background-color: #6b67640a;
  border: 1px solid #ffffffa3;
  backdrop-filter: blur(5.5px);
  text-transform: uppercase;
}
.service-contents h3 a:before {
  position: absolute;
  content: '';
  left: 0;
  top: 20px;
  height: 1px;
  width: 40px;
  background: #fff;
}
.service-contents h3 a {
  display: inline-block;
  font-size: 28px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  padding-left: 50px;
}
.service-section.style_three .hotelhub-btn a {
  font-size: 16px;
  margin-top: 24px;
}

/*
<!-- ============================================================== -->
<!-- Start Testimonal Section Style Three -->
<!-- ============================================================== -->*/

.testimonial-section.style_three {
  padding: 297px 0 120px;
  background: var(--body-color);
  margin-top: -222px;
}
.style_three.testi-single-box {
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}
.style_three.testi-single-box:before {
  display: none;
}
.style_three.testi-single-box .testi-content {
  background-color: rgba(255,255,255,0.050980392156862744);
  padding: 32px 35px 28px;
  position: relative;
}
.style_three.testi-single-box .testi-content::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-top: 20px solid rgba(255,255,255,0.050980392156862744);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transition: .5s;
}
.style_three.testi-single-box .testi-content h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0 0 15px;
}
.testi-content img {
  position: relative;
  top: -4px;
  margin-right: 10px;
}
.style_three.testi-single-box .testi-desc p {
  font-family: "Open Sans";
  transition: 0.5s;
  font-size: 18px;
  line-height: 30px;
  color: #ffffff85;
  font-weight: 400;
}
.style_three.testi-single-box ul.testi-rating li {
  display: inline-block;
  list-style: none;
  padding-bottom: 16px;
  margin-right: 2px;
  font-size: 15px;
  text-transform: uppercase;
  color: #fcba52;
}
.style_three.testi-single-box ul.testi-rating li:last-child {
  color: #fff !important;
}
.user-info {
  display: flex;
  align-items: center;
  padding: 38px 30px 0;
  gap: 20px;
}

.swiper-slide.swiper-slide-active .style_three.testi-single-box {
 transform: translateY(-10px);
}
.testimonial-section.style-two.style_three .swiper-wrapper {
  padding-top: 26px;
}

.testimonal-slider {
  position: relative;
  overflow: visible;
}
.testi-slider-arrow-box {
  position: absolute;
  top: -24%;
  right: 0;
}
.testi-slider-arrow-box button.slider-prev, button.slider-next {
  width: 54px;
  outline: 0 !important;
  height: 54px;
  line-height: 54px;
  border-radius: 27px;
  background-color: rgba(255,255,255,0.10196078431372549);
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  transition: 0.5s;
}
.testi-slider-arrow-box button.slider-prev:hover, button.slider-next:hover {
  background: var(--brand-color);
}

/* testi section style four */

.testimonial-section.style_four {
  position: relative;
  z-index: 1;
  padding: 105px 0 120px 300px;
}
.testi-bg-shpe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.testi-single-box.bx-four {
  background: var(--brand-color);
  padding: 57px 364px 62px 45px;
}

.style_four .testi-thums {
  position: relative;
}
.style_four .video__area {
  top: 33%;
  left: 34%;
  border: 1px solid #ffffff5c;
  animation: pulseAndColorChange 3s infinite; /* Animation */
}
 @keyframes pulseAndColorChange {
  0% {
      transform: scale(1);
      background-color: #e6ac16;
  }
  50% {
      transform: scale(1.2);
      background-color: var(--brand-color); 
  }
  100% {
      transform: scale(1);
      background-color: var(--primary-color);
  }
}
.style_four .video__area .play-now {
  background-color: #ffffff5c;
  border: 1px solid #ffffff5c;
  backdrop-filter: blur(2.2px);
  font-weight: 600;
  font-style: italic;
}
.style_four .testi-thums img {
  width: 100%;
  height: 440px;
}
.swiper.testi_4 {
  position: relative;
  z-index: 1;
}
.testi-single-box.bx-four .user-name h4 {
  margin: 0;
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
}
.testi-single-box.bx-four .testi-desc p {
  font-size: 22px;
  line-height: 32px;
  color: #ffffffa3;
  font-weight: 500;
  font-style: italic;
}
.testi-single-box.bx-four .user-name h6 {
  color: #ffffff9e;
}
.testi-single-box.bx-four ul.testi-rating li {
  font-size: 15px;
  color: #e6ac16;
}
.testi-single-box.bx-four .user-info {
  padding: 40px 0 0;
  gap: 20px;
  border-top: 1px solid #ffffff36;
  margin-top: 48px;
}
.testi-single-box.bx-four  .hotelhub-hover-btn {
  background: #161616;
}

.swiper.testi_4 .testi-slider-arrow-box {
  position: absolute;
  top: inherit;
  right: 34%;
  z-index: 1;
  bottom: 15%;
}

.swiper.testi_4 .testi-slider-arrow-box button.slider-prev:hover {
  background: var(--primary-color);
}
.swiper.testi_4 .testi-slider-arrow-box button.slider-next:hover {
  background: var(--primary-color);
}


/*
<!-- ============================================================== -->
<!-- Start Choose Section Style Four-->
<!-- ============================================================== -->*/
.choose-section.style-four {
  background: var(--brand-color);
  padding: 71px 0 50px;
}
.style-four .choose-section .hotelhub-section-title {
  margin-top: 0;
}
.choose-section.style-four .hotelhub-section-title p {
  padding: 20px 0 21px;
  width: 95%;
}
.choose-thumb.style_four {
  text-align: left;
  margin-left: 28px;
  bottom: -50px;
}
.choose-thumb.style_four .counter-single-box.two {
  background: url(../images/home-three/choose-shpae.png);
  background-repeat: no-repeat;
  background-size: cover;
  left: -115px;
  bottom: 60px;
}
.choose-thumb.style_four .odometer-wrapper.counter-box-title h1 {
  color: var(--body2-color);
}
.choose-thumb.style_four .counter-single-box.two .counter-desc p {
  color: #161616;
}
.choose-thumb.style_four .choose-shape1 {
  top: 12%;
  right: inherit;
  left: -35%;
}
.choose-shape3 {
  position: absolute;
  right: 4%;
  top: 16%;
}
.choose-shape4 {
  position: absolute;
  bottom: 13%;
  right: 7%;
}

/*
<!-- ============================================================== -->
<!-- Start Dingig Coices Secttion -->
<!-- ============================================================== -->*/

.dining-coices-section {
  background: #1e1e1e;
  padding: 0 0 120px;
  position: relative;
  z-index: 1;
}
.dining-coices-section .hotelhub-section-title p {
  padding: 20px 0 26px;
  width: 88%;
}
.dining-shp {
  position: absolute;
  top: 12%;
  left: 12%;
  z-index: -1;
}
.dining-coices-section.style_tow .dining-shp {
  top: 3%;
  left: inherit;
  right: 4%;
}

/*
<!-- ============================================================== -->
<!-- Start Hotel Service Secttion -->
<!-- ============================================================== -->*/

.hotel_service_section {
  background-color: #161616;
  padding: 105px 0 65px;
  position: relative;
  z-index: 1;
}
.hotel_service_section .hotelhub-section-title {
  margin-bottom: 50px;
}
.hotel-service-bx {
  padding: 0 0 50px 18px;
  margin-bottom: 53px;
  border-bottom: 1px solid #ffffff14;
  overflow: hidden;
  position: relative;
}
.hotel-service-bx:nth-child(2) {
  border: 0;
}
.bx-two.hotel-service-bx {
  text-align: right;
  margin-right: 45px;
}
.hotel-service-bx.box-three {
  margin-left: 26px;
}
.hotel-service-content h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
  margin: 18px 0 20px;
}
.hotel-service-content p {
  color: #ffffff9e;
  margin: 0;
}
.hotel_service-icon {
  transition: transform 0.6s ease-in-out, color 0.3s;
  display: inline-block;

}
.hotel-service-bx:hover .hotel_service-icon {
  transform: rotate(360deg) scale(1);
}
.hotel-service-thumb {
  margin-bottom: 80px;
}
.hotel-service-thumb img {
  width: 100%;
}
.hotelhub-slider-dots3.style_img.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
}
.hotel-shp {
  position: absolute;
  top: 33%;
  left: 0;
  z-index: -1;
}
.hotel-shp.two {
  position: absolute;
  bottom: 15%;
  z-index: -1;
  left: inherit;
  right: 11%;
  top: inherit;
}

/*
<!-- ============================================================== -->
<!-- Start Breatcome Secttion -->
<!-- ============================================================== -->*/

.breatcome-section {
  background: url(../images/resource/breadcumb.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 535px;
  position: relative;
}
ul.breatcome-item li i {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
}
.breatcome-content h1 {
  margin: 0 0 12px;
  color: #ffffff;
  font-weight: 600;
  font-size: 54px;
  font-family: "Playfair Display";
}

ul.breatcome-item li {
  list-style: none;
  display: inline-block;
  padding: 10px 0 0;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
ul.breatcome-item li a {
  transition: 0.5s;
  padding: 0 12px 0 0;
  position: relative;
  z-index: 1;
  font-size: 16px;
  color: #ECE2D7;
  font-weight: 500;
}

ul.breatcome-item li a:hover {
  color: var(--title-color);
}

ul.breatcome-item li a i {
  display: inline-block;
  font-size: 12px;
  margin-right: 7px;
  position: relative;
  top: -1px;
}

.breatcome-section.style_two {
  background: url(../images/resource/brd-contact_ng.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.breatcome-section.style_three {
  background: url(../images/resource/breadcumb_bg-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_four {
  background: url(../images/resource/breadcumb4.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_five {
  background: url(../images/resource/breadcumb5.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_six {
  background: url(../images/resource/breadcumb5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_seven {
  background: url(../images/resource/breadcumb6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_eight {
  background: url(../images/resource/breadcumb8.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.breatcome-section.style_nine {
  background: url(../images/resource/breadcum9.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
/*
<!-- ============================================================== -->
<!-- Start Contact Section -->
<!-- ============================================================== -->*/

.contact-section {
  background: url(../fondo-contacto2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 120px 0 120px;
}

.contact-section .hotelhub-section-title {
  margin-bottom: 25px;
}

/*<!-- ============================================================== -->
<!-- Start Hotel Section -->
<!-- ============================================================== -->*/

.hotel-section {
  background: var(--brand-color);
  padding: 105px 0 500px;
  position: relative;
  z-index: 1;
}
.hotel-shpae1 {
  position: absolute;
  top: -11%;
  left: 0;
  z-index: -1;
}
.hotel-shpae2 {
  position: absolute;
  bottom: -18%;
  right: 0;
  z-index: -1;
}

/*
<!-- ============================================================== -->
<!-- Start About Section Inner Section -->
<!-- ============================================================== -->*/

.about-serction.inner_section {
  background: #fff;
  padding: 120px 0 173px;
}
.about-serction.inner_section .about-thumb {
  margin-left: 35px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.about-serction.inner_section .hotelhub-section-title p {
  color: #52614e;
}
.about-serction.inner_section .abou_list ul li {
  color: #161616;
  margin-bottom: 18px;
}
.about-serction.inner_section .abou_list-item {
  margin-bottom: 20px;
} 

/* section title inner page */

.hotelhub-section-title.style_inner h4 {
  color: #52614e;
}
.hotelhub-section-title.style_inner h1 {
  color: #161616;
}
.about-serction.inner_section.style_two {
  background: #F3F7F1;
  padding: 120px 0 120px;
}
.about-serction.inner_section.style_two .abou_list ul li {
  color: #161616;
  margin-bottom: 10px;
}
.about-serction.inner_section.style_two .about-all-shape {
  top: 41%;
  left: -22%;
  z-index: 1;
}
.inner_section.style_two .hotelhub-btn {
  margin-top: 25px;
}
.inner_section.style_two .about_shapes {
  position: absolute;
  bottom: 12%;
  left: -24%;
}
/*
<!-- ============================================================== -->
<!-- Start Testimonal Sectin inner Page -->
<!-- ============================================================== -->*/

.testimonial-section.inner_page-section {
  background: #f3f8f1;
}
.testimonial-section.inner_page-section .testi-single-box {
  background: #fff;
}
.testimonial-section.inner_page-section .testi-single-box .user-name h6 {
  color: #616161;
}
.testimonial-section.inner_page-section .testi-single-box .testi-desc p {
  color: #616161;
}
.testimonial-section.inner_page-section .testi-single-box .user-name h4 {
   color: #161616;
}
.testimonial-section.inner_page-section .testi-single-box ul.testi-rating li {
  color: #52614e;
  transition: 0.5s;
}
.testimonial-section.inner_page-section .testi-single-box:hover .user-name h6,
.testimonial-section.inner_page-section .testi-single-box:hover .user-name h4,
.testimonial-section.inner_page-section .testi-single-box:hover .testi-desc p,
.testimonial-section.inner_page-section .testi-single-box:hover ul.testi-rating li {
  color: #fff;
}
.testimonial-section.inner_page {
  padding: 105px 0 120px;
  margin-top: 0;
}
/*
<!-- ============================================================== -->
<!-- Start Why Choose Us Sectin inner Page -->
<!-- ============================================================== -->*/

.why-choose-us-section.inner_section {
  background: #fff;
}

.why-choose-us-section.inner_section .choose-contentns {
  background-color: #f3f8f1;
}
.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns span.chosse-price {
  border: 1px solid #fff;
}
.why-choose-us-section.inner_section .choose-contentns span.chosse-price {
  border: 1px solid #42424275;
}
.why-choose-us-section.inner_section .choose-contentns span.chosse-price, 
.why-choose-us-section.inner_section .choose-contentns h4, 
.why-choose-us-section.inner_section .choose-contentns .choose-infoss ul li {
  color: #161616;
}

.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns .choose-infoss ul li img {
  filter: brightness(1) invert(0);
}
.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns span.chosse-price, 
.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns h4, 
.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns .choose-infoss ul li {
  color: #fff;
}
.why-choose-us-section.inner_section .choose-single-bx:hover .choose-contentns {
  background-color: #51614D;
}

.service_inner_page {
  padding: 120px 0 120px;
}

.service_inner_thumb img {
  width: 100%;
}
.service_inner_box {
  background: var(--brand-color);
  padding: 39px 40px 46px;
  margin-left: 26px;
}
.service_inner_box.style_two {
  margin-left: 0;
  margin-right: 20px;
}
.sevice_iinner_content h3 {
  font-size: 40px;
  line-height: 52px;
  color: #ffffff;
  font-weight: 500;
  border-bottom: 1px solid #ffffff69;
  padding-bottom: 38px;
  margin-bottom: 32px;
}
.sevice_iinner_content h3 span{
  color: #ECE2D7;
}
.sevice_iinner_content p {
  color: #ffffff82;
}
.service_inner-btn {
  margin-top: 101px;
}
.service_inner-btn a {
  text-align: center;
  display: inline-block;
  width: 94px;
  height: 94px;
  border-radius: 47px;
  background-color: #1e1e1e;
  line-height: 94px;
  color: #ECE2D7;
  position: relative;
  z-index: 1;
  margin-left: 25px;
}
.service_inner-btn a i {
  font-weight: 700;
  font-size: 26px;
  display: inline-block;
  transform: rotate(-45deg);
}
.service_inner-btn a:before {
  position: absolute;
  left: -21px;
  content: '';
  top: -46px;
  height: 140px;
  width: 140px;
  border: 1px solid #ffffff52;
  z-index: -1;
  border-radius: 50%;
}


/* ======================================
  Start Pricing Section Style Two
========================================= */
.pricing-section {
  padding: 105px 0 90px;
  background: #ECE2D7;
}
.pricing-section .hotelhub-section-title p {
  padding: 20px 0 8px;
  color: #1e1e1e8c;
}
.pricing_list li {
  margin-bottom: 10px;
  transition: .5s;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Open Sans";
  display: flex;
  align-items: center;
  gap: 10px;
}
/* prcing single item */

.pricing-single-item {
  border-radius: 15px;
  background-color: #fff;
  padding: 30px 30px 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 30px;
}
.pricing-conten {
  background-color: #ECE2D7;
  padding: 45px 0 40px;
  text-align: center;
  border-radius: 20px;
  transition: 0.5s;
}
.pricing-single-item:hover .pricing-conten {
  background: var(--brand-color);
}
h3.pricing-plan2 {
  margin: 0 0 18px;
  transition: 0.5s;
  font-size: 22px;
  color: #041424;
  transition: 0.5s;
  font-weight: 600;
}
h2.price.price-monthly {
  font-size: 45px;
  color: #1e1e1e;
  font-weight: 700;
  font-family: "Open Sans";
  transition: 0.5s;
}

.pricing-plan h2 span {
  font-size: 17px;
  color: #041424;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}
.pricing-feature {
  margin-top: 41px;
  padding-top: 8px;
  padding-bottom: 41px;
  padding-left: 25px;
}
.pricing-feature ul li {
  margin-bottom: 10px;
  transition: .5s;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Open Sans";
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-single-item .header-button a {
  padding: 11px 10px 11px;
  font-family: "Open Sans";
  border: 1px solid #07010138;
  margin: 0;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 17px;
  color: #ECE2D7;
  font-weight: 600;
  border-radius: 26px;
  background-color: #37271C;
  text-transform: capitalize;
  display: block;
}
.pricing-single-item:hover .header-button a {
  background: #37271C;
  color: #37271C;
}
.pricing-single-item:hover h3.pricing-plan2,
.pricing-single-item:hover h2.price.price-monthly ,
.pricing-single-item:hover .pricing-plan h2 span {
  color: #ECE2D7;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Dine Section -->
<!-- ============================================================== -->*/

.dine-section {
  padding: 105px 0 120px;
  background: #161616;
}
.dine-section .hotelhub-section-title {
  margin-bottom: 63px;
}
.dine-thumb {
  position: relative;
  z-index: 1;
}
.dine-content {
  position: absolute;
  bottom: 45px;
  padding-left: 35px;
  width: 100%;
}
.dine-content h3 a {
  font-size: 28px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  position: relative;
  padding-left: 50px;
  z-index: 1;
  display: inline-block;
}
.dine-content h3 a:before {
  content: '';
  left: 0;
  width: 35px;
  height: 1px;
  background-color: #ffffff;
  top: 21px;
  z-index: -1;
  position: absolute;
}
.dine-content p {
  border-radius: 17px;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-block;
  margin: 0 0 2px;
  padding: 2px 22px;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}

/* slider arrow btn */

.slider-arrow-dine {
  position: absolute;
  top: -22%;
  right: 0%;
  z-index: 1;
}
.slider-arrow-dine button.slider-prev2, button.slider-next2 {
  width: 54px;
  outline: 0 !important;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  background-color: #2E2E2E;
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  transition: 0.5s;
  margin-bottom: 12px;
  margin-right: 8px;
}

.slider-arrow-dine button.slider-prev2:hover, button.slider-next2:hover {
  background: var(--brand-color) !important;
}
.slider-arrow-dine button:focus {
  outline-color: 0 !important;
  border: 0 !important;
}

/*
<!-- ============================================================== -->
<!-- Start About Section style Dine -->
<!-- ============================================================== -->*/

.about-serction.style_dine {
  background: #f3f8f1;
  padding: 120px 0 120px;
}
.about-serction.style_dine .about-thumb {
  margin-top: 0;
}
.about-serction.style_dine .hotelhub-section-title p {
  color: #616161;
}
.style_dines .contact-info-content p {
  font-size: 16px;
  color: #616161;
  margin: 5px 0 0;
}
.style_dines .contact-info-content h3 {
  color: #161616;
}
.style_dines .contact-infos span i {
  border: 2px solid #52614e;
  color: #52614e;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Over View Section -->
<!-- ============================================================== -->*/
.dine-over_view {
  background: url(../images/resource/dine-over-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  padding: 105px 0 120px;
}

.over-view-content {
  text-align: center;
}
.overview_list {
  display: inline-block;
  border-top: 1px solid #ffffff7d;
  border-bottom: 1px solid #ffffff7d;
  padding: 25px 0 25px;
  margin: 47px 0 49px;
}
.overview_list ul li {
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  display: inline-block;
  margin: 0 22px 0;
}
.overview_list ul li:first-child {
  margin: 0 20px 0 0;
}
.overview_list ul li i {
  color: #ECE2D7;
  margin-right: 10px;
}

.dine-over_view.join-section {
  background: url(../images/resource/join-bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  padding: 105px 0 115px;
}
.dine-over_view.join-section .hotelhub-btn {
  margin-top: 43px;
}
.dine-over_view {
  background: url(../images/resource/dine-over-bg2.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Restaurant Section -->
<!-- ============================================================== -->*/

.restaurant-section {
  padding: 120px 0 120px;
  background: #F3F7F1;
}
.restaurant-section .hotelhub-section-title p {
  padding: 20px 0 15px;
  color: #616161;
  width: 95%;
}

.restaurant-thumb {
  margin-left: -176px;
}
.restaurant-item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.restaurant-icon {
  width: 66px;
  height: 66px;
  border-radius: 33px;
  background-color: #ECE2D7;
  text-align: center;
  line-height: 63px;
  flex-shrink: 0;
}
h3.restaurant-title {
  font-size: 20px;
  line-height: 28px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
}
.restaurant-author-itm {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid rgba(22,22,22,0.10196078431372549);
  padding-top: 30px;
  margin-top: 30px;
}
.restaurant-author {
  display: flex;
  align-items: center;
  gap: 15px;
}
.author_bio h4 {
  font-size: 18px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
}
.author_bio p {
  font-size: 14px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}

/*
<!-- ============================================================== -->
<!-- Start Dine Section Style Two -->
<!-- ============================================================== -->*/

.dine-section.style_two {
  padding: 105px 90px 90px;
}
.style_two.dine-section .hotelhub-section-title {
  margin-bottom: 54px;
}
.hotelhub-section-title h1 span {
  color: #D4E5D2;
}
/* Portfolio Nav */
.portfolio_nav {
  margin: 0 0 40px;
}

.portfolio_menu ul {
  text-align: center;
  list-style: none;
}
.portfolio_nav ul li {
  transition: all 0.5s ease 0s;
  cursor: pointer;
  padding: 7px 22px;
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  background-color: rgba(255,255,255,0.10196078431372549);
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}


.portfolio_menu ul li a {
  display: block;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  transition: .5s;
}

.portfolio_menu ul li a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 24px;
  height: 2px;
  width: 0%;
  background: #fff;
  transition: .5s;
}

.portfolio_nav ul li:hover,
.portfolio_nav ul li.current_menu_item {
  color: #fff;
  background: var(--brand-color);
}
.dine-single-item.style_two {
  margin-bottom: 30px;
}
.dine-single-item.style_bottom {
  margin-top: 40px;
}
.dine-single-item.style_two .dine-content {
  bottom: 32px;
}
.dine-single-item.style_two .dine-thumb img {
  width: 100%;
}
.style_two .dine-content h3 a {
  padding-left: 0;
}
.style_two .dine-content h3 a:before {
  display: none;
}
span.price {
  font-size: 16px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 600;
  margin: 11px 0 0;
  display: inline-block;
}

/* slider arrow btn */

.slider-arrow-boxss {
  position: absolute;
  top: -26%;
  right: 12%;
  z-index: 1;
}
.slider-arrow-boxss button.slider-prev2, button.slider-next2 {
  width: 54px;
  outline: 0 !important;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  background-color: #2E2E2E;
  border: 0 !important;
  color: #fff;
  font-size: 16px;
  transition: 0.5s;
  margin-bottom: 12px;
  margin-right: 8px;
}

.slider-arrow-boxss button.slider-prev2:hover, button.slider-next2:hover {
  background: var(--brand-color) !important;
}
.slider-arrow-boxss button:focus {
  outline-color: 0 !important;
  border: 0 !important;
}

/* ==========================================
Start Css Faqs style Two Section
================================================ */

.faqs-section.style-tow {
  padding: 105px 0 100px;
}
.faqs-section.style-tow .hotelhub-section-title {
  margin-bottom: 42px;
}
.faqs-thumb {
  margin-left: -112px;
}
.tab_container.style_four {
  background: transparent;
  padding: 0;
  margin-top: 0;
}
.tab_container.style_four .accordion li {
  list-style: none;
  padding: 0px 0px 20px;
}
.style_four .accordion li a {
  position: relative;
  padding: 18px 30px 18px 30px;
  border-radius: 5px;
  border: 1px solid #F3F8F1;
  background: #F3F8F1;
  font-size: 20px;
  color: #161616 !important;
  font-weight: 500;
  font-family: "Playfair Display";
  border-radius: 0;
}
.style_four  .accordion a.active {
 border-radius: 0;
  border: 1px solid black;
}
.style_four .accordion li p {
  padding: 15px 45px 20px 30px;
  background: transparent;
  font-size: 15px;
  color: #616161;
  font-weight: 500;
  border-radius: 0;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}
.style_four .accordion li a i {
  float: right;
  display: inline-block;
  transform: rotate(-92deg);
  color: #161616;
  font-size: 18px;
  position: relative;
  top: 4px;
}
.style_four .accordion li a.active i {
  transform: rotate(0deg);
}

/* blog section innr page  */

.blog-section.secton_inner_page {
  background: #F3F8F1;
  margin-bottom: -10px;
}
.blog-section.secton_inner_page .blog-single-box.inner_page-bx {
  margin-bottom: -10px;
}
.blog-single-box.inner_page-bx .blog-content {
  background-color: #fff;
  transition: 0.5s;
}
.blog-single-box.inner_page-bx .blog-content span.category {
  color: #161616;
  border: 1px solid #60505030;
  transition: 0.5s;
}

.blog-single-box.inner_page-bx .blog-content h3 a {
  color: #161616;
}

.blog-single-box.inner_page-bx .blog_button {
  border-top: 1px solid #35282821;
}
.blog-single-box.inner_page-bx .blog-content .blog_admin ul li {
  color: #161616;
  transition: 0.5s;
}
.blog-section.secton_inner_page .pagination-btn {
  margin: 20px 0 70px;
  text-align: center;
}

/* hover */

.blog-single-box.inner_page-bx:hover .blog-content {
  background: #262626;
}
.blog-single-box.inner_page-bx:hover .blog-content span.category,
.blog-single-box.inner_page-bx:hover .blog_admin ul li,
.blog-single-box.inner_page-bx:hover .blog-content h3 a {
  color: #ffff;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Pagination btn -->
<!-- ============================================================== -->*/

.pagination-btn {
  margin: -20px 0 70px;
  text-align: center;
}
.pagination-btn ul li {
  display: inline-block;
  margin-right: 8px;
}
.pagination-btn ul li a {
  display: inline-block;
  width: 55px;
  height: 55px;
  line-height: 54px;
  border: 1px solid rgba(22,22,22,0.2);
  font-size: 20px;
  color: #161616;
  font-weight: 500;
  font-family: "Open Sans";
  text-align: center;
}
.pagination-btn ul li a:hover {
  background: var(--secondary-color);
  color: var(--light);
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Single blog -->
<!-- ============================================================== -->*/


.single-blog {
  padding: 120px 0 90px;
}
.single_blog {
  margin-bottom: 30px;
}
.single-blog-content {
  background: #EDEFEC;
  padding: 28px 64px 21px 35px;
  position: relative;
  z-index: 1;
}
.single-blog-content:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 68px;
  width: 100%;
  height: 1px;
  background: rgba(0,24,25,0.10196078431372549);
}
.meta-blog a {
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 500;
  font-family: "Open Sans";
  position: relative;
  z-index: 1;
  padding-left: 30px;
  padding-right: 10px;
}
.meta-blog a:before {
  position: absolute;
  content: '';
  left: 0;
  top: 11px;
  height: 2px;
  width: 20px;
  background: #52614E;
  z-index: -1;
}
.meta-blog p {
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}
.meta-blog p i {
  display: inline-block;
  color: #52614C;
  margin: 0 12px 0 12px;
}
.single-blog-content h3 {
  margin: 14px 0 23px;
}
.single-blog-content h3 a {
  display: inline-block;
  font-size: 30px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
}
.single-blog-btn {
  margin-top: 49px;
}
.single-blog-btn a {
  display: inline-block;
  font-size: 16px;
  color: #52614e;
  font-weight: 500;
  font-family: "Open Sans";
}
.single-blog-btn a i {
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  margin-left: 8px;
}

.pagination-btn.style_two {
  text-align: left;
  margin: 26px  0 30px;
}

/*
<!-- ============================================================== -->
<!-- Start Single blog 2colum -->
<!-- ============================================================== -->*/

.single-blog.two-colum {
  background: #F3F8F1;
}
.single-blog.two-colum .blog-single-box.inner_page-bx .blog-content {
  width: 100%;
  left: 0;
  top: 0;
}
.single-blog.two-colum .blog-date-line {
  right: 30px;
  bottom: 30px;
}


/*Tab Items
=======================*/

/* Tap Style */

.tab {
  padding-top: 50px;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.tabs {
  display: table;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.tabs li {
  line-height: 38px;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.tabs_item {
  display: none;
  padding: 30px 0;
}

.tabs_item:first-child {
  display: block;
}

/* Box Style */

.upp.style-2 .testi-single-box {
  padding: 58px 50px 38px;
}

.upp.style-2 .user-info {
  padding: 35px 50px 35px 35px;
  background-color: rgba(255, 255, 255, 0.30196078431372547);
  border: 2px solid #ffffff;
  background-image: inherit;
  margin: 30px 25px 0 0;
  border-radius: 15px;
}

.upp.style-2 .user-name h4 {
  font-size: 24px;
  font-weight: 600;
}

.upp.style-2 .user-name h6 {
  text-align: left;
  font-size: 17px;
  text-transform: capitalize;
}

.upp.style-2 .testi-desc p {
  font-size: 20px;
  color: #65677a;
  line-height: 32px;
  font-family: "Albert Sans";
  font-style: inherit;
  padding: 5px 0 0;
}

.upp.style-2 ul.testi-rating li {
  font-size: 19px;
  letter-spacing: 5px;
}

/* Style Testi-bg */

.row.testi-bg {
  padding-top: 100px;
}

.upp.style-2 .testi-bg .user-info {
  padding: 12px 0 0;
  background-color: inherit;
  border: 0;
  background-image: inherit;
  margin: 30px 25px 0 0;
  border-radius: 15px;
}

.upp.style-2 .testi-bg .testi-single-box {
  padding: 5px 45px 40px;
}


/* Blog List */

.hotelhub-section.blg-list {
  background: #ffff;
  padding: 120px 0 110px;
}

.blog-single-box.blog_lists {
  display: flex;
  background: #ecf7ff;
}
.blog-single-box.blog_lists .blog-thumb {
  flex-shrink: 0;
}
.blog-single-box.blog_lists .blog-thumb img {
  height: 325px;
}
span.date {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 8px 23px;
  border-radius: 20px;
  background-color: rgba(255,255,255,0.2);
  color: #fff;
}
.blog-single-box.blog_lists .blog-content {
  background: #ecf7ff;
  padding: 50px 0 44px;
  border-radius: 0;
}

.blog-single-box.blog_lists .blogs-category {
  background: transparent;
  padding: 5px 18px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(4,28,51,0.18);
  display: inline-block;
  border-radius: 20px;
  margin-left: 30px;
}
.blog-single-box.blog_lists .blogs-category:before {
  display: none;
}
.blog-single-box.blog_lists .blogs-category ul li {
  margin-right: 15px;
  color: #041c33;
}

.blog-single-box.blog_lists .blogs-category ul li:last-child {
  margin-right: 0;
}
.blog-single-box.blog_lists .hotelhub-button.btn2 a {
  background: #041c33;
  color: #ffff;
}


/* ===========================================
HotelHub Start Sidebar box Css
============================================== */

/* Search box */

.search-bx {
  position: relative;
  z-index: 1;
}
.search-bx input {
  padding: 10px 25px;
  width: 100%;
  height: 60px;
  border-radius: 0;
  background-color: #fff;
  border: none;
  font-size: 16px;
  color: var(--body2-color);
  font-weight: 500;
  font-family: "Fira Sans";
  outline: 0;
}
.search-bx input::placeholder {
  font-size: 15px;
  color: #21222b;
  font-weight: 400;
  font-family: "Open Sans";
}
.search-bx input:focus, button:focus {
  outline-color: 0 !important;
  border: 0 !important;
}
.search-bx button.subscribe-btn {
  border: 0;
  background: transparent;
  color: #9B9B9B;
  position: absolute;
  right: 20px;
  top: 16px;
  border-radius: 5px;
  font-size: 17px;
}

/* Category Box */

.hotelhub-category-items {
  margin-bottom: 30px;
}
.category-content {
  padding-left: 20px;
}
.category-content h4 {
  margin: 0;
}
.category-content h4 a {
  display: inline-block;
  transition: 0.5s;
  font-size: 18px;
  line-height: 24px;
  color: #1e1e1e;
  font-weight: 500;
  font-family: "Playfair Display";
}
.category-content h6 {
  margin: 9px 0 0;
  text-transform: uppercase;
  font-size: 14px;
  color: #616161;
  font-weight: 500;
  font-family: "Open Sans";
}
.category-content h4 a:hover {
  color: var(--secondary-color);
}
.hotelhub-category-items.upp {
  margin: 0 0 15px;
}
.post-content.upp {
  border: 0;
}

/* ================
hotelhub Category box
======================= */

h3.category-title {
  padding: 0px 0 19px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 24px;
  color: #1e1e1e;
  font-weight: 500;
  margin-top: 0;
}
h3.category-title:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 7px;
  width: 30px;
  height: 1px;
  background: #1e1e1e;
  transition: 0.5s;
}
h3.category-title:hover:before {
  width: 50px;
}

/* box */
.side_brs {
  margin-right: 25px;
}

.hotelhub-category-box {
  padding: 40px 40px 30px;
  border-radius: 0;
  background-color: #F3F4F3;
  border: 2px solid #fff;
  margin-bottom: 30px;
}

.hotelhub-category-box.two h3.category-title {
  margin-bottom: 12px;
}

ul.hotelhub-service li {
  list-style: none;
  border-radius: 0;
  border: 0;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  border-bottom: 1px solid rgba(16,16,16,0.10196078431372549);
}

ul.hotelhub-service li span {
  float: right;
}
ul.hotelhub-service li span i{
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  transition: 0.5s;
}
ul.hotelhub-service li a {
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 500;
  font-family: "Open Sans";
  padding: 11px 0 11px;
  display: block;
}
ul.hotelhub-service li a i {
  padding: 0 10px 0 0;
  font-size: 14px;
  display: inline-block;
  color: var(--secondary-color);
  transition: 0.5s;
}
ul.hotelhub-service li:hover:before {
  width: 100%;
  left: 0;
}
ul.hotelhub-service li:hover a {
  color: var(--brand-color);
}

ul.hotelhub-service li:hover a i {
  color: var(--body-color);
}
ul.hotelhub-service li:last-child {
  border-bottom: 0;
}
ul.hotelhub-service li:last-child a {
  padding: 11px 0 0;
}
ul.hotelhub-service li:hover span i {
  opacity: 1;
}
/* list category  */

ul.list_category li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 7px;
}
ul.list_category li a {
  display: inline-block;
  padding: 5px 20px;
  background: #fff;
  font-size: 15px;
  line-height: 30px;
  color: #1e1e1e;
  font-weight: 400;
  font-family: "Open Sans";
}
ul.list_category li a:hover {
  background: var(--brand-color);
  color: #fff;
}
.hotelhub-btn.style_inner {
  margin-top: 30px;
}

/* Download Button */

.download-btn a {
  font-size: 15px;
  text-transform: uppercase;
  display: inline-block;
  background: var(--primary-color);
  width: 100%;
  color: #fff;
  padding: 15px 23px;
  border-radius: 5px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.download-btn a i {
  font-size: 22px;
  position: relative;
  top: 2px;
  padding-right: 7px;
}
.download-btn a span i {
  float: right;
  display: inline-block;
  font-size: 17px;
  padding: 0;
  transition: 0.5s;
}
a.active-btn {
  background: var(--secondary-color);
}
span.dwnlod-hvr i {
  position: absolute;
  right: 22px;
  bottom: 0;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(50px);
}
.download-btn a:hover span i {
  opacity: 0;
  transform: translateY(-200%);
}
.download-btn a:hover span.dwnlod-hvr i {
  opacity: 1;
  transform: translateY(15px);
}

/* Compani contact */

.hotelhub-company-contact {
  background: url(../fondo-contacto.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 55px 40px 50px;
  border-radius: 20px;
}

.call-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 20px;
}
.info-contact-btn a {
  display: inline-block;
  font-size: 24px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
}
.info-contact-btn a i {
  display: inline-block;
  transform: rotate(-45deg);
  font-size: 17px;
  font-weight: 700;
  margin-left: 4px;
}
.mediket-category-content h6 {
  font-size: 16px;
  color: #1e1e1ead;
  line-height: 26px;
  font-weight: 400;
  font-family: "Open Sans";
}
.hotelhub-category-content h4 {
  font-size: 24px;
  font-weight: 400;
  font-family: "Open Sans";
  padding: 4px 0 20px;
  color: #fff;
}

.hotelhub-category-content p {
  font-size: 16px;
  color: #fff;
  font-family: "Open Sans";
}

.hotelhub-category-content p i {
  color: var(--secondary-color);
  padding: 0 8px 0 0;
  display: inline-block;
}

@keyframes zoomBig2 {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    border-width: 7px;
  }
  40% {
    opacity: 0.5;
    border-width: 5px;
  }
  65% {
    border-width: 4px;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    border-width: 2px;
  }
}

/* Contact Button */

.hotelhub-contact-btn a {
  padding: 15px 30px;
  font-family: "Open Sans";
  background: var(--secondary-color);
  color: #fff;
  display: block;
  text-align: center;
  border-radius: 5px;
  position: relative;
  z-index: 1;
  margin-top: 52px;
}

.hotelhub-contact-btn a i {
  padding-left: 5px;
  font-size: 18px;
  position: relative;
  top: 3px;
}
.hotelhub-contact-btn a .hotelhub-hover-btn {
  background-color: var(--primary-color);
}
.hotelhub-contact-btn a .hover-btn {
  border-radius: 5px 0 0px 5px;
}
.hotelhub-contact-btn a .hover-btn4 {
  border-radius: 0 5px 5px 0;
}
.hotelhub-contact-btn a:hover .hotelhub-hover-btn {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* Blog Post Comment */

.blog-post-comment {
  padding: 90px 0 0;
}
.post-comment {
  display: flex;
  padding: 30px 0 0;
}
.post-content {
  margin: 0px 0 0px 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #fff;
}
h4.post-title {
  font-size: 20px;
  font-weight: 600;
}
.post-content h6 {
  font-size: 14px;
  font-weight: 400;
  margin: 6px 0 14px;
}
p.posts-reply {
  font-size: 16px;
  color: #65677a;
}
.post-comment2 {
  display: flex;
  padding: 40px 0 0;
  margin-left: 80px;
}

/* ====================================================
  HotelHub Start Blog Details Css
======================================================= */
.hotelhub-section.blg-list.details {
  padding: 120px 0 120px;
}

.blog-meta {
  padding: 8px 0 16px;
}
.blog-meta span a {
  transition: .5s;
  display: inline-block;
  font-size: 16px;
  text-transform: uppercase;
  color: #616161;
  font-weight: 400;
}
.blog-meta span i {
  display: inline-block;
  transform: rotate(68deg);
  font-size: 10px;
  position: relative;
  top: -2px;
  margin: 0 6px 0;
}
.blog-content-text.text-left h2 {
  margin: 0  0 22px;
  font-size: 32px;
  color: #1e1e1e;
  font-weight: 600;
}
h3.blog-dtls-title3 {
  font-size: 28px;
  color: #1e1e1e;
  font-weight: 500;
  margin: 0 0 18px;
}
p.qouik {
  margin-right: 33px;
}
p.qouik2 {
  margin: 25px 44px 46px 0;
}

.blog-details-thumb img {
  width: 100%;
}
/*blog tetails items*/

.blog-details-single-items {
  background: #F5F6F8;
  display: flex;
  padding: 40px 179px 41px 40px;
}
.blog-details-single-items .blog-icon {
  float: left;
  padding: 0;
  margin-right: 25px;
  margin-top: 8px;
}

.blog-details-content p {
  font-size: 18px;
  line-height: 30px;
  color: #041c33;
  font-weight: 400;
  font-style: italic;
  font-family: "Open Sans";
  overflow: hidden;
}

.blog-details-bio span {
  font-size: 15px;
  color: #0495ff;
  font-weight: 400;
  padding-left: 60px;
  position: relative;
  z-index: 1;
}
.blog-details-bio span:before {
  width: 50px;
  height: 1px;
  background-color: #0495ff;
  position: absolute;
  content: '';
  left: 0;
  top: 10px;
}


h2.blog-dtls-title3 {
  font-size: 34px;
  color: #171717;
  font-weight: 700;
  margin: 56px 0 18px;
}

/* blog details list thumb */

.blog-dtls-img img {
  width: 100%;
}
.blog-details-list-item {
  margin-top: 29px;
  margin-bottom: 52px;
}

h3.blog-details-list-title {
  font-size: 24px;
  color: #171717;
  font-weight: 700;
  margin-bottom: 17px;
}

ul.blog-details-list li {
  margin-bottom: 14px;
  font-size: 16px;
  color: #1e1e1ebd;
  font-weight: 500;
  font-family: "Open Sans";
  display: flex;
  align-items: center;
  gap: 10px;
}

/*blog social*/
.blog-social-tags ul li strong {
  font-size: 20px;
  color: #101010;
  font-weight: 500;
  font-family: "Playfair Display";
  margin-right: 10px;
}
.blog-social-tags ul li {
  display: inline-block;
}
.blog-social-tags ul li a {
  display: inline-block;
  text-align: center;
  padding: 2px 20px;
  margin-right: 8px;
  border: 1px solid rgba(16,16,16,0.1);
  font-size: 15px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
}

.blog-details-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  border-top: 1px solid   rgba(16,16,16,0.10196078431372549);
  border-bottom: 1px solid   rgba(16,16,16,0.10196078431372549);
  padding: 25px 0 25px;
  margin-bottom: 59px;
}

.single-blog-social-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h3.blog-dtls-title3.two {
  margin: 40px 0 17px;
}

.single-blog-social-icon ul li {
  display: inline-block;
  margin-left: 12px;
}
.single-blog-social-icon ul li a {
  display: inline-block;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 400;
  font-family: "Playfair Display";
}
.single-blog-social-icon ul li a:hover {
  color: var(--brand-color);
}
p.desc-style1 {
  margin: 0 34px 28px 0;
}

/* Comment CSS */

.details_rcnt .category-content h6 {
  margin: 5px 0 0;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
}
.details_rcnt .hotelhub-category-items {
  background-color: #ffffff;
  border: 1px solid rgba(16,16,16,0.1);
  padding: 30px 30px 30px;
  align-items: center;
  justify-content: center;
}
.details_rcnt.style-two {
  text-align: right;
}
.details_rcnt.style-two  .category-content {
  padding-left: 0;
  padding-right: 20px;
}
.details_rcnt .category-content h4 a {
  display: inline-block;
  transition: 0.5s;
  font-size: 17px;
  color: #1e1e1e;
  font-weight: 500;
  font-family: "Playfair Display";
}
.pagination-btns a {
  display: inline-block;
  font-size: 18px;
  color: #616161;
  font-weight: 600;
  font-family: "Open Sans";
  margin-bottom: 0;
  margin-right: 18px;
}
.details_rcnt.style-two .pagination-btns a {
  margin-right: 0;
  margin-left: 18px;
}
.pagination-btns a i {
  font-size: 14px;
  position: relative;
  top: -2px;
}
.blog-details-comment {
  margin-bottom: 20px;
  position: relative;
  border: 1px solid rgba(16,16,16,0.1);
  padding: 25px 44px 6px 30px;
}
.blog-details-comment-thumb {
  float: left;
  margin-right: 25px;
  position: relative;
  top: 5px;
}
.blog-details-comment-content {
  overflow: hidden;
}

.blog-details-comment-content h2 {
  margin: 0;
  margin-bottom: 13px;
  font-size: 20px;
  color: #1e1e1e;
  font-weight: 500;
}
.blog-details-comment-content p {
  font-size: 15px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
}
.blog-details-comment-reply a {
  border-radius: 2px;
  display: inline-block;
  font-size: 16px;
  line-height: 28px;
  color: #041c33;
  font-weight: 500;
  font-family: "Open Sans";
  position: absolute;
  right: 0;
  top: -4px;
}
.blog-details-comment-reply a {
  border-radius: 2px;
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 15px;
  text-decoration: underline;
  color: #1e1e1e;
  font-weight: 400;
  font-family: "Playfair Display";
  text-transform: uppercase;
}

.blog-details-comment.reply {
  margin-left: 100px;
  padding: 25px 44px 6px 30px;
}

/* commet form */
.comment-bx {
  margin-top: 60px;
}
.comment-title h3 {
  margin-bottom: 33px;
  font-size: 32px;
  color: #1e1e1e;
  font-weight: 500;
}
.comment-title.two h3 {
  margin: 90px 0 35px;
}
#comment-msg-box {
  width: 100%;
  transition: .5s;
  height: 180px;
  background-color: #F3F4F2;
  border: 0;
  padding: 21px 25px;
}
#comment-msg-box::placeholder {
  font-size: 16px;
  color: #6B6B6B;
  font-weight: 400;
  font-family: "Open Sans";
}
input.comment-box {
  border: 0;
  width: 100%;
  margin-bottom: 20px;
  padding: 25px;
  height: 60px;
  background-color: #F3F4F2;
}

input.comment-box::placeholder {
  font-size: 16px;
  color: #6B6B6B;
  font-weight: 400;
  font-family: "Open Sans";
}
.check_bx.two {
  margin: 13px 0 20px;
}
.check_bx.two p {
  font-size: 15px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
}

/*form button*/
.comment-form .submit-comment {
  padding: 14px 10px;
  margin-left: 15px;
  border: 0;
  transition: .5s;
  border-radius: 0;
  margin-top: 10px;
  font-family: "Open Sans";
  width: 165px;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--brand-color);
}
.comment-form .submit-comment:hover {
  background: var(--primary-color);
  color: var(--light);
}



/*
<!-- ============================================================== -->
<!-- HotelHub Start faw Section -->
<!-- ============================================================== -->*/

.faq-section {
  padding: 120px 40px 120px;
}
.faq-itm {
  background: url(../images/resource/pricing-shape.png);
  background-repeat: no-repeat;
  padding: 116px 34px 219px 241px;
  background-position: center right;
  border-radius: 30px;
  position: relative;
}
.faq-itm .hotelhub-section-title p {
  font-size: 18px;
  color: #1e1e1e80;
  font-weight: 400;
  font-family: "Open Sans";
  padding: 30px 0 20px;
}

.faq-itm .hotelhub-btn a {
  padding: 15px 40px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  overflow: hidden;
  border: 1px solid var(--btn-color);
  background-color: var(--light);
  text-transform: capitalize;
  font-family: "Playfair Display";
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 500;
  border-radius: 28px;
}
.faq-itm .hotelhub-btn a:hover {
  color: var(--body-color);
}
.coun-shape {
  position: absolute;
  bottom: 20px;
}

.tab_container.style-two {
  background: var(--brand-color);
  margin-top: 0;
  border-radius: 40px;
}
.tab_container.style-two .accordion a.active {
  background: #647160;
}
.tab_container.style-two .accordion li p {
  background: #647160;
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start offer Section -->
<!-- ============================================================== -->*/

.offer_section {
  padding: 120px 0 90px;
}
.offer-single_bx {
  margin-bottom: 30px;
}
.offer_thumb {
  position: relative;
  z-index: 1;
}
.offer_thumb img {
  width: 100%;
}
.offer_content {
  position: absolute;
  bottom: 40px;
  padding: 0 30px 0;
}
.offer_content span {
  font-size: 16px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
}
.offer_content h3 {
  margin: 7px 0 0;
}
.offer_content h3 a {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  display: inline-block;
  line-height: 30px;
}
.offer_content p {
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  display: inline-block;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  margin: 0;
  padding: 3px 22px;
  border-radius: 20px;
  margin-top: 28px;
  transition: 0.5s;
}
.offer_content p:hover {
  background: var(--brand-color);
}
.inner_page-section .choose_list.style-two ul li {
  color: #161616;
  border-bottom: 2px solid #1616164f;
}

/*
<!-- ============================================================== -->
<!-- HotelHub Start Rooms Section -->
<!-- ============================================================== -->*/

.rooms-section {
  background: #f3f8f1;
  padding: 120px 0 90px;
}
.rooms-single-single-bx {
  margin-bottom: 30px;
}
.rooms-content {
  background: #fff;
  padding: 35px 35px 26px;
}
.rooms-content h3 a {
  font-size: 30px;
  color: #161616;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 5px 0 0;
  display: inline-block;
}
p.rooms-price {
  font-family: "Open Sans";
  border: 1px solid #52614e;
  padding: 3px 22px;
  transition: 0.5s;
  display: inline-block;
  margin: 0;
  font-size: 15px;
  color: #52614e;
  font-weight: 400;
}
.rooms-infos {
  margin-top: 18px;
  margin-bottom: 30px;
  transition: 0.5s;
  display: inline-block;
}
.rooms-content ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.5s;
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
}
.rooms-infos.last-child {
  margin-left: 25px;
}
.rooms-infos {
    margin-top: 18px;
    margin-bottom: 30px;
    transition: 0.5s;
    display: inline-block;
}
.rooms-content .hotelhub-btn a {
  padding: 6px 21px;
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  overflow: hidden;
  border: 1px solid var(--btn-color);
  background-color: var(--light);
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.rooms-content .hotelhub-btn a:hover{
  color: var(--body-color);
}
.rooms-content .hotelhub-btn a:after {
  background-color: #707668;
}

/* pagination btn */
.rastaurant-pagination {
  margin: 30px  0 0;
}
.rastaurant-pagination ul li a {
  font-size: 22px;
  text-transform: uppercase;
  color: #52614e;
  font-weight: 500;
  width: 46px;
  height: 46px;
  background-color: #ffffff;
  display: inline-block;
  line-height: 46px;
  border: 0;
}


/* room secton two */

.room-section {
  background: #1e1e1e;
  padding: 105px 0 120px;
}
/* Tab buttons */
.tabss {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 65px;
}
.tab-button {
  padding: 9px 18px;
  border: 1px solid #ECE2D785;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 15px;
  text-transform: uppercase;
  color: #ECE2D7;
  font-weight: 500;
  font-family: "Playfair Display";
}
.tab-button:hover {
  background-color: var(--brand-color);
  border: 1px solid var(--brand-color);
}

/* Tab content styling */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

.room-thumb img {
  width: 100%;
}
/* roome content */
.room-content {
  background-color: rgba(82,97,78,0.9490196078431372);
  padding: 52px 55px 41px;
  position: relative;
  z-index: 1;
}
.room-content:before {
  position: absolute;
  content: '';
  left: 22px;
  right: 0;
  height: 92%;
  width: 90%;
  border: 1px solid #ffffff57;
  bottom: 22px;
  z-index: 1;
  transition: 0.5s;
}
span.room-price {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  border: 1px solid #fff;
  padding: 6px 20px;
  transition: 0.5s;
}
.room-info ul li img {
  width: inherit;
}
.room-content h4 {
  font-size: 26px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 18px 0 15px;
  transition: 0.5s;
}
.room-content p {
  font-size: 16px;
  line-height: 26px;
  color: #ffffffbf;
  font-weight: 400;
  font-family: "Open Sans";
  transition: 0.5s;
}
.room-info {
  margin-top: 84px;
  margin-bottom: 25px;
  transition: 0.5s;
}
.room-info ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.5s;
}
.room-content .hotelhub-btn a {
  padding: 10px 27px;
  border: none;
  background-color: var(--light);
  font-family: "Playfair Display";
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  transition: 0.5s;
}
.room-content .hotelhub-btn a:hover{
  color: var(--body-color);
}
.room-content .hotelhub-btn a:after {
  background-color: #707668;
}



/*
<!-- ============================================================== -->
<!-- HotelHub Start Rooms Details -->
<!-- ============================================================== -->*/

.rooms-details {
  padding: 120px 0 100px;
}
.rooms-detls-btn {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.rooms-detls-btn a {
  width: 50px;
  height: 50px;
  background-color: #52614e;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-weight: 600;
}
span.rooms-price {
  font-size: 15px;
  display: inline-block;
  color: #52614e;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 30px 0 0;
  border: 1px solid var(--brand-color);
  padding: 4px 22px;
}
.rooms-details-content h3 {
  font-size: 36px;
  color: #161616;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 16px 0 15px;
}
.rooms-details_list {
  border-top: 1px solid rgba(30,30,30,0.10196078431372549);
  border-bottom: 1px solid rgba(30,30,30,0.10196078431372549);
  padding: 13px 0 13px;
  margin-top: 33px;
  margin-bottom: 29px;
}
.rooms-details_list ul li {
  display: inline-block;
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0 55px 0 0;
}
.rooms-details_list ul li img {
  margin-right: 10px;
}
p.room-detils-desc {
  margin-right: 65px;
}
p.room-detils-desc2 {
  margin-right: 20px;
  margin-top: 22px;
}

/* rooms details check content */
.room-details-check-content span {
  font-size: 26px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin-bottom: 32px;
  display: inline-block;
}
.room-details-check-content img {
  margin-right: 12px;
}
p.check-item {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0 0 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
p.check-item i {
  font-size: 22px;
  color: #52614e;
}
h1.room-detils-title-2 {
  font-size: 32px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 33px 0 17px;
}
p.room-detils-desc.upper {
  margin-bottom: 42px;
}

/* rooms details list item */

.room-detls-list-item {
  margin-top: 25px;
}
.room-detls-list-item ul li {
  font-size: 16px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.room-detls-list-item ul li i {
  font-size: 22px;
  color: #52614e;
}

/* Start Booking container */

.booking-container {
  background-color: #F2F7F0;
  padding: 43px 35px 40px;
  box-shadow: initial;
  width: 100%;
  border-radius: 0;
}
.booking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 29px;
}
.booking-heading h2 {
  font-size: 28px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
}
.booking-heading p {
  font-size: 14px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 0;
}
.booking-heading p strong {
  font-size: 22px;
  text-transform: uppercase;
  color: #161616;
  font-weight: 500;
  font-family: "Open Sans";
}

.booking-container .controls {
  width: 100%;
  margin-right: 0;
  margin-bottom: 15px;
}
.booking-container .controls label {
  left: 6px;
  top: 12px;
  padding: 2px 31px 3px 16px;
  background-color: #F2F7F0 !important;
  font-size: 14px;
  line-height: 26px;
  color: #616161 !important;
  font-weight: 400;
  font-family: "Open Sans";
}
.booking-container .controls label.active {
  top: -11px;
  color: #616161 !important;
  background-color: #F2F7F0 !important;
}
.booking-container .controls input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(1) invert(0.5);
}

.booking-container .controls .booking-input-box select {
  padding: 0 23px 0 19px;
  font-size: 14px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  border-radius: 0;
}
.booking-container .controls.bx-2 label {
  left: inherit;
  right: 42px;
  top: 14px;
  padding: 0;
  background: transparent !important;
}
.controls.bx-2 .booking-input-box i {
  left: inherit;
  right: 21px;
  top: 28px;
  font-size: 14px;
  color: #52614e;
}
.booking-container select {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.extra-service {
  margin-top: 20px;
}
.extra-service h2 {
  font-size: 28px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
}
.extra-service label {
  font-weight: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.extra-service input[type="checkbox"] {
  margin-right: 10px;
}

.total-cost {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}
.update-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4a5f39;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.update-btn:hover {
  background-color: #3b4d2d;
}


/* booking service */

.service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid rgba(22,22,22,0.15);
  position: relative;
  z-index: 1;
}
.services h2 {
  font-size: 28px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
  margin: 28px 0 25px;
}
.service label span {
  font-size: 14px;
  line-height: 26px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}
.service:last-child {
  border-bottom: none;
}
.service input[type="checkbox"] {
  height: 16px;
  width: 16px;
}

.service label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service .prices {
  color: #616161;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0 0 0 65px;
  display: inline-block;
}
.service select {
  line-height: 12px;
  padding-right: 18px;
  font-size: 14px;
  width: 65px;
  height: 28px;
  background-color: rgba(255,255,255,0);
  border: 1px solid rgba(22,22,22,0.15);
  appearance: none;
  outline: 0;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 0;
}
span.option-icon i {
  position: absolute;
  right: 22px;
  font-size: 11px;
  display: inline-block;
  bottom: 24px;
}

.booking-heading.cost {
  border-top: 2px solid rgba(22,22,22,0.10196078431372549);
  padding-top: 13px;
  margin-top: 45px;
  margin-bottom: 35px;
}
.booking-heading.cost h3 {
  font-size: 24px;
  color: #161616;
  font-weight: 500;
  font-family: "Playfair Display";
}

.rooms-amenitie-bx {
  background: transparent;
  padding: 30px 0 0;
}
.rooms-amenitie-bx h3.category-title {
  margin-bottom: 0 !important;
  font-size: 28px;
  padding: 11px 0 14px;
}
.rooms-amenitie-bx h3.category-title:before{
  display: none;
}
.rooms-amenitie-bx ul.hotelhub-service li a {
  display: block;
  font-size: 15px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  padding: 14px 0 14px;
}
.rooms-amenitie-bx ul.hotelhub-service li img {
  margin-right: 15px;
}

/*
<!-- ============================================================== -->
<!-- Start Why choose us section rooms style inner page -->
<!-- ============================================================== -->*/

.why-choose-us-section.rooms_inner_page {
  padding: 105px 0 238px;
  background: #f3f8f1;
}
.choose-single-bx.rooms-bx .choose-contentns {
  background: #fff;
}
.choose-single-bx.rooms-bx .choose-contentns h4 {
  color: #161616;
}
.choose-single-bx.rooms-bx .choose-contentns span.chosse-price {
  color: #161616;
  border: 1px solid #161616;
}
.choose-single-bx.rooms-bx:hover .choose-contentns {
  background: var(--brand-color);
}
.choose-single-bx.rooms-bx:hover .choose-contentns span.chosse-price {
  color: #ffff;
  border: 1px solid #ffff;
}
.choose-single-bx.rooms-bx:hover .choose-contentns h4 {
  color: #ffff;
}

/*
<!-- ============================================================== -->
<!-- Start Faq Section  style Two -->
<!-- ============================================================== -->*/

.faqs-section {
  padding: 120px 0 90px;
}

.tab_container.style_three {
  background: #EDEFED;
  padding: 35px 40px 17px;
  margin-top: 0;
  margin-bottom: 30px;
}
.tab_container.style_three h3 {
  font-size: 24px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
  margin: 0 0 25px;
}
.tab_container.style_three .accordion li a span {
  color: #1e1e1e;
}
.tab_container.style_three .accordion li a {
  border: 1px solid rgba(82,97,78,0.16);
  color: #1e1e1e !important;
}
.tab_container.style_three .accordion a.active {
  background: var(--brand-color);
  color: #fff !important;
}
.tab_container.style_three .accordion a.active span{
  color: #fff !important;
}
.tab_container.style_three .accordion li p {
  background: var(--brand-color);
}



.hotelhub-category-box.three ul.hotelhub-service li {
  border-bottom: none;
  margin-bottom: 15px;
}
.hotelhub-category-box.three ul.hotelhub-service li a {
  padding: 12px 25px !important;
  background: #fff;
  border-radius: 5px;
}
.hotelhub-category-box.three ul.hotelhub-service li a:hover {
  background: var(--brand-color);
  color: #fff;
}
.hotelhub-category-box.three ul.hotelhub-service li a i {
  font-size: 18px;
  transition: 0.5s;
}
.hotelhub-category-box.three ul.hotelhub-service li a:hover i {
  color: #fff;
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start Mission & Vission Section -->
<!-- ============================================================== -->*/

.mission-vission-section {
  padding: 0 0 90px;
}

.mission-vission-single-box {
  padding: 38px 35px 20px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.30196078431372547);
  border: 2px solid #ffffff;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.m_v-ssion {
  align-items: center;
}

.m_v-ssion-icon {
  margin-right: 15px;
  width: 65px;
  height: 65px;
  line-height: 60px;
  text-align: center;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.30196078431372547);
  border: 2px solid #ffffff;
  transition: 0.5s;
}

.m_v-ssion-title h3 {
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 700;
  margin: 0;
  transition: 0.5s;
}

.m_v-ssion-desc p {
  font-size: 17px;
  color: #65677a;
  display: inline-block;
  padding: 25px 0 0;
  transition: 0.5s;
}

.mission-vission-single-box:hover {
  border: 2px solid var(--primary-color);
}

.mission-vission-single-box:hover .m_v-ssion-title h3 {
  color: var(--secondary-color);
}

.mission-vission-single-box:hover .m_v-ssion-icon {
  background: var(--bs-primary-bg-subtle);
}

.mission-vission-single-box:hover .m_v-ssion-desc p {
  color: #97a9bf;
}

.mission-vission-single-box .hotelhub-hover-box {
  background-color: var(--primary-color);
}

.mission-vission-single-box .hover-bx {
  border-radius: 16px 0 0px 16px;
}

.mission-vission-single-box .hover-bx4 {
  border-radius: 0 16px 16px 0;
}

.mission-vission-single-box:hover .hotelhub-hover-box {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/*
<!-- ============================================================== -->
<!-- Start hotelhub Section -->
<!-- ============================================================== -->*/

.hotelhub-section {
  padding: 120px 0 120px;
  background: #fff;
}
.hotelhub-title h2 {
  padding: 24px 0 19px;
  font-size: 30px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
}

.hotelhub-description p {
  font-size: 17px;
  line-height: 26px;
  color: #1e1e1e8f;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 0;
}

/* hotelhub single box */
.hotelhub-title.two h2 {
  padding: 14px 0 44px;
}
.hotelhub-title.three h2 {
  padding: 0 0 50px;
}
.hotelhub-title.four h2 {
  padding: 0 0 8px;
  margin: 0;
}

.hotelhub-single-box {
  margin-bottom: 30px;
}
.hotelhub-single-box ul li {
  font-size: 17px;
  line-height: 26px;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
}
.hotelhub-single-box ul li img {
  border-radius: 50%;
  background-color: #52614e2b;
  flex-shrink: 0;
  padding: 13px 12px;
}


/*****************************
 Faq Accordion
*******************************/
.tab_container {
  overflow: hidden;
  padding: 85px 40px 60px;
  background: #1E1E1E;
  margin-top: 36px;
}
.accordion-content h2 {
  font-size: 28px;
  font-weight: 700;
}

.accordion-content p {
  color: #002570;
  padding: 20px 0 32px;
}

.accordion li {
  list-style: none;
  padding: 0px 0px 30px;
}

.accordion li a {
  position: relative;
  width: 100%;
  display: block;
  cursor: pointer;
  border: 1px solid #ffffff8f;
  padding: 23px 29px 23px 30px;
  border-radius: 5px;
  z-index: 1;
  font-size: 20px;
  color: #ffffff !important;
  font-weight: 600;
  font-family: "Playfair Display";
  background: transparent;
}

.accordion li a span {
  padding: 0 15px 0 0px;
  position: relative;
  z-index: 1;
  font-size: 20px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Open Sans";
}


.accordion li p {
  padding: 0 77px 32px 70px;
  margin: 0;
  background: #353535;
  overflow: hidden;
  font-size: 17px;
  color: #ffffffa1;
  font-weight: 500;
  border-radius: 0 0 5px 5px;
  display: none;
}


/* Active */

.accordion a.active {
  background: #353535;
  color: #fff !important;
  border: none;
  border-radius: 5px 5px 0 0;
}

.accordion li a.active span {
  color: #fff;
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start Join  Section-->
<!-- ============================================================== -->*/

.why-choose-us-section.style-join {
  padding: 105px 0 120px;
  margin-top: 0;
}

.choose-single-bx2.join_box .choose-single-thumbs {
  flex-shrink: 0;
  width: 648px;
}
.choose-single-bx2.join_box .choose_contents {
  padding: 63px 101px 51px 50px;
}
.choose-single-bx2.join_box .choose_contents span.chosse-price {
  border: 1px solid #ECE2D74d;
  padding: 7px 18px;
  transition: 0.5s;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}

.choose-single-bx2.join_box .choose_contents h4 {
  margin: 15px 0 17px;
  font-size: 34px;
}

.choose-single-bx2.join_box .choose_contents p {
  color: #ffffff7d;
}
.join-list ul li {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.choose-single-bx2.join_box .choose_contents .hotelhub-btn a {
  padding: 9px 27px;
  margin-top: 34px;
}
.choose-single-bx2.join_box


/*
<!-- ============================================================== -->
<!-- HotelHub Start Project Section-->
<!-- ============================================================== -->*/

.project-section {
  padding: 120px 0 0px;
}

.project-thumb {
  position: relative;
  z-index: 1;
}

.project-thumb img {
  width: 100%;
  border-radius: 18px;
}

.project-content {
  padding: 25px 30px 10px;
  position: relative;
  border-radius: 20px;
  background-image: linear-gradient(
    180deg,
    #007dff 0%,
    #e5f1ff 74%,
    #e5f1ff 100%
  );
  border: 2px solid #ffffff;
  bottom: 92px;
  width: 84%;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s;
}

.project-content h5 {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}

.project-content h2 {
  font-size: 22px;
  padding: 0px 0 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}

.project-content p {
  font-size: 16px;
  color: #65677a;
  font-family: "Open Sans";
}

.project-icon a {
  font-size: 18px;
  width: 40px;
  height: 40px;
  line-height: 37px;
  text-align: center;
  border-radius: 20px;
  background-color: #002570;
  border: 2px solid #ffffff;
  color: #fff;
  position: absolute;
  top: 43px;
  right: 79px;
  opacity: 0;
  transition: 0.5s;
}

.single-project-box:hover .project-icon a {
  right: 20px;
  opacity: 1;
}

.single-project-box:hover .project-content {
  bottom: 130px;
}

/* Owl  Nav */

.project-list .owl-prev i,
.project-list .owl-next i {
  color: var(--primary-color);
  background-color: rgba(255, 255, 255, 0.30196078431372547);
  border: 2px solid #ffffff;
}

.project-section .hotelhub-shape {
  right: 0px;
}

.project-section .project-list .owl-dots {
  text-align: center;
  padding: 0px 0 40px;
  margin-top: -92px;
}

/* Owl Active */

.active.center .single-project-box .project-icon a {
  right: 20px;
  opacity: 1;
}

.active.center .single-project-box .project-content {
  bottom: 130px;
}

/* *********************
Project Details
********************** */

.doctors-service {
  padding: 22px 25px 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.30196078431372547);
  border: 2px solid #ffffff;
  display: flex;
  margin-bottom: 25px;
}

.doctor-content {
  padding: 0 0 0 12px;
}

.doctor-content h5 {
  font-size: 15px;
  font-weight: 500;
  font-family: "Open Sans";
  margin: 0;
}
.doctor-content h3 {
  font-size: 18px;
  margin-top: 8px;
}

.doctor-content h3 a {
  font-weight: 700;
  transition: 0.5s;
}

.doctor-content h3 a:hover {
  color: var(--secondary-color);
}

/****************************** 
Start Contact Inner Page   
*******************************/

.hotelhub-appoinment {
  padding: 120px 0 108px;
}

.hotelhub-appoinment .hotelhub-section-title {
  margin-bottom: 39px;
}

/* contact info item */

.row.contact-info_item {
  border-radius: 20px;
  margin: 0;
  background: url(../fondo-contacto.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.hotelhub-appoinment .contact-form-box {
  padding: 0;
  background: transparent;
  border-radius: 20px;
}

.hotelhub-appoinment .form-box input {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 20px;
  outline: 0;
  font-size: 15px;
  color: var(--primary-color);
  font-weight: 400;
  font-family: "Open Sans";
  height: 58px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid rgba(27,52,52,0.1);
}
.hotelhub-appoinment .form-box input::placeholder {
  color: #868681;
}
.hotelhub-appoinment .form-box input:focus, button:focus {
  outline-color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}
.hotelhub-appoinment .form-box textarea {
  width: 100%;
  height: 150px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid rgba(27,52,52,0.1);
  padding: 12px 20px 0;
}
.hotelhub-appoinment .form-box textarea::placeholder {
  color: #868681;
}
.hotelhub-appoinment .check_bx p {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  color: #868681;
  font-weight: 400;
  font-family: "Open Sans";
}
.hotelhub-appoinment .check_bx {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 37px;
  margin-top: 17px;
}
.hotelhub-appoinment button.submit-btn {
  padding: 15px 25px;
  border-radius: 5px;
}

.contact-service-box {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  padding: 60px 0 14px;
}
.contact-service-box:before {
  position: absolute;
  right: 0;
  top: 92px;
  content: '';
  width: 2px;
  height: 130px;
  background-color: rgba(255,255,255,0.5019607843137255);
}
.contact-service-box.last:before {
  display: none;
}

.contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffff;
  padding-bottom: 50px;
  margin-bottom: 45px;
}

.contact-title h5 {
  font-size: 16px;
  font-weight: 500;
  font-family: "Open Sans";
  color: #65677a;
}

.contact-icon img{
  position: relative;
  z-index: 1;
}
.contact-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 100%;
  background-color: #ffffff3d;
  display: inline-block;
  font-size: 25px;
  color: #ffff;
  position: relative;
}
.contact-icon:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  z-index: 1;
  top: -10px;
  left: -10px;
  margin: auto;
  right: 0;
  border: 2px solid #ffffff6e;
  text-align: center;
}
.contact-address h2 {
  margin: 30px 0 12px;
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  font-family: "Playfair Display";
  text-align: center;
}
.contact-address span {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Open Sans";
}
.google-map {
  overflow: hidden;
}

/* Map Section */
.row.appoinment.align-items-center {
  padding: 100px 0 0;
}

/* Error Section */

.error-section {
  position: relative;
  z-index: 1;
  height: 950px;
}
.error-content h4 {
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 600;
  font-family: "Playfair Display";
  background: #52614e17;
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 5px;
}

.error-content h2 {
  font-size: 44px;
  line-height: 50px;
  color: #161616;
  font-weight: 600;
  font-family: "Playfair Display";
}

.error-content p {
  font-size: 16px;
  line-height: 28px;
  color: #616161;
  font-weight: 400;
  font-family: "Open Sans";
  margin: 27px 0 50px;
}
.error-content a.hotelhub-btn {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 15px  27px;
  font-size: 18px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  font-family: "Playfair Display";
}
.error-content a.hotelhub-btn:hover {
  background-color: var(--body-color);
  color: #fff;
}


/* Team details Section 
==============================*/

.team-details-area {
  padding: 120px 0 68px;
}
.team-details {
  box-shadow: 6px 5px 30px rgba(0, 0, 0, 0.12);
  padding: 50px;
  margin-bottom: 50px;
  border-radius: 20px;
}
.team-details-thumb img {
  width: 100%;

}

/* Team details content */

.team-details-content {
  padding: 0 0 0 35px;
}

.team-details-title h2 {
  color: #0e0e0e;
  font-size: 30px;
  font-weight: 700;
}

.team-details-title p {
  font-size: 16px;
  margin: 10px 0 0;
  color: var(--secondary-color);
  font-weight: 600;
}

.team-details-content-text ul li {
  margin-bottom: 17px;
  display: block;
  color: #65677a;
}

.team-details-content-text ul li span {
  font-weight: 500;
  margin-right: 15px;
  font-size: 17px;
  color: var(--primary-color);
}

.team-details-content-icon a {
  margin: 3px;
  background: var(--secondary-color);
  line-height: 1;
  display: inline-block;
  border-radius: 3px;
  color: #fff;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  transition: 0.5s;
  border: 1px solid var(--secondary-color);
}

.team-details-content-icon a:hover {
  background: transparent;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
}
.skill-wrapper h6 {
  margin-bottom: 8px;
  margin-top: 20px;
}

.team-detail-title h2 {
  font-size: 35px;
  font-weight: 600;
  color: #161616;
  line-height: 0;
}

.team-detail-title p {
  font-size: 16px;
  font-weight: 400;
  color: #63636b;
  margin-top: 40px;
}

/* Skill section */

.head-title h3 {
  font-size: 38px;
  margin-bottom: 10px;
  margin-top: 5px;
  font-weight: 800;
  padding: 0px 0 15px;
}
.contact-form-box.inner_page {
  padding: 47px 30px 38px;
}
.contact-form-box.inner_page .form-box:before {
  display: none;
}
.contact-form-box.inner_page .form-box input {
  padding: 0 25px;
}
.contact-form-box.inner_page #comment-msg-box {
  background-color: rgba(255,255,255,0.10196078431372549);
  border-radius: 10px;
}
.contact-form-box.inner_page textarea#comment-msg-box::placeholder {
  color: #fff;
}
.contact-form-box.inner_page .submit-button {
  margin-top: 22px;
}


/*
<!-- ============================================================== -->
<!-- HotelHub Start nav button-->
<!-- ============================================================== -->*/

.nav-btn.navSidebar-button {
  display: inline-block;
}
.xs-sidebar-group .xs-overlay {
  left: 100%;
  top: 0;
  position: fixed;
  z-index: 101;
  height: 100%;
  opacity: 0;
  width: 100%;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in 0.8s;
  -o-transition: all 0.4s ease-in 0.8s;
  transition: all 0.4s ease-in 0.8s;
}
.xs-sidebar-group .widget-heading {
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px;
}
.xs-sidebar-widget {
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  z-index: 999999;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #272727;
  -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
  -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
  transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
  visibility: hidden;
  opacity: 0;
}
.xs-sidebar-group.isActive .xs-overlay {
  opacity: 0.4;
  visibility: visible;
  -webkit-transition: all 0.8s ease-out 0s;
  -o-transition: all 0.8s ease-out 0s;
  transition: all 0.8s ease-out 0s;
  left: 0;
}
.xs-sidebar-group.isActive .xs-sidebar-widget {
  opacity: 1;
  visibility: visible;
  right: 0;
  transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}
.sidebar-textwidget {
  padding: 30px;
}
.close-side-widget i {
  color: var(--secondary-color);
  font-size: 28px;
  display: block;
}
.sidebar-widget-container {
  position: relative;
  top: 150px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in 0.3s;
  -o-transition: all 0.3s ease-in 0.3s;
  transition: all 0.3s ease-in 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.xs-sidebar-group.isActive .sidebar-widget-container {
  top: 0px;
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 1s ease-out 1.2s;
  -o-transition: all 1s ease-out 1.2s;
  transition: all 1s ease-out 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.xs-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 0;
}
.xs-bg-black {
  background-color: #cda274;
}
.row.padding-two {
  padding: 35px 0 11px 15px;
}
.contact-info h2 {
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  padding-bottom: 5px;
}

ul.list-style-one li {
  display: inline-flex;
  list-style: none;
  color: #fff;
  padding: 16px 0 0;
  font-size: 15px;
}

ul.list-style-one li span {
  font-size: 22px;
  font-weight: 500;
  color: var(--secondary-color);
  margin: 0 10px 0 0px;
}

ul.social-box {
  margin: 30px 0 0;
}
ul.social-box li {
  display: inline-block;
  list-style: none;
  margin: 0 6px 0 0;
}

ul.social-box li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 36px;
  text-align: center;
  background: #fff;
  color: var(--primary-color);
  transition: 0.5s;
  font-size: 16px;
  font-weight: 400;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

ul.social-box li a:hover {
  color: #fff;
  background: var(--secondary-color);
}
.content-thumb-box {
  padding-bottom: 12px;
}
.content-thumb-box img {
  width: 92%;
  border-radius: 10px;
}

.nav-btn.navSidebar-button span i {
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  line-height: 45px;
  text-align: center;
  background-color: var(--brand-color);
  width: 45px;
  height: 45px;
  transition: 0.5s;
}
.nav-btn.navSidebar-button span i:hover {
  background: var(--light);
  color: var(--brand-color);
}
/*=============================================
  Search Popup
===============================================
***/

.search-box-btn i {
  display: inline-block;
  color: #ffffff7a;
  text-align: center;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.5s;
  margin-right: 20px;
}


.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.search-popup {
  width: 100%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--primary-color);
  width: 70px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 500ms ease;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.search-popup .close-search:before {
  position: absolute;
  content: "";
  left: -6px;
  top: -5px;
  border-bottom: 5px solid #ffffff;
  border-top: 5px solid var(--secondary-color);
  border-right: 5px solid #fff;
  border-left: 5px solid var(--secondary-color);
  height: 74px;
  width: 76px;
  border-radius: 50%;
  animation: spin 10s infinite alternate linear,
    glow 5s infinite alternate linear;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  transition-delay: 1500ms;
}
.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.search-active .search-popup form {
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  transition-delay: 1200ms;
}
.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 50px;
  color: #000000;
  height: 70px;
  width: 100%;
  padding: 10px 30px;
  background-color: #ffffff;
  transition: all 500ms ease;
  font-weight: 500;
  text-transform: capitalize;
}
.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 30px;
  top: 0px;
  height: 70px;
  line-height: 70px;
  background: transparent;
  text-align: center;
  font-size: 22px;
  color: var(--primary-color);
  padding: 0;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  border: none;
}
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #000000;
}
.search-popup .close-search.style-two {
  position: absolute;
  right: 25px;
  left: auto;
  color: #ffffff;
  width: auto;
  height: auto;
  top: 25px;
  margin: 0px;
  border: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.search-popup .style-two.close-search:before {
  position: inherit;
  border: 0;
}

.flaticon-multiply:before {
  content: inherit;
}
button.close-search i {
  font-size: 25px;
  color: #fff;
  display: inline-block;
}
span.flaticon-multiply i {
  display: inline-block;
  color: var(--secondary-color);
}

/* Spin Animation */

/*============================
/* Scroll Up Css 
==============================*/

#progress {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  position: fixed;
  bottom: 25px;
  right: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  z-index: 99999;
  cursor: pointer;
}

.progress.hide {
  display: none !important;
  transition: 0.5s !important;
}

#progress-value {
  display: block;
  height: calc(100% - 15px);
  width: calc(100% - 15px);
  background-color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 20px;
  color: var(--primary-color);
}

#container {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/* Start  Curser pointer CSS */

.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid #00ffff;
  transition: 0.3s;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}
.cursor2 {
  position: fixed;
  width: 4px;
  height: 4px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: 0.1s;
  pointer-events: none;
  z-index: 1000;
}

.grow,
.grow-small {
  transform: scale(3);
  background: white;
  mix-blend-mode: difference;
  border: none;
}

.grow-small {
  transform: scale(1.7);
}

/* ================ All Animation CSS ===================*/

.rotate {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background-position: center center;
}
@keyframes rotateme {
from {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

to {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
}

.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate2 {
  animation-name: float-bob2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob2;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob2;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 3s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate5 {
  animation-name: float-bob5;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate-slow {
  animation-name: float-bob5;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob5;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob5;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob5;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate-3 {
  animation-name: float-bob6;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob6;
  -moz-animation-duration: 6s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob6;
  -ms-animation-duration: 6s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob6;
  -o-animation-duration: 6s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
@keyframes float-bob {
  0% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
  }

  50% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
  }

  100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
  }
}
@keyframes float-bob2 {
  0% {
      -webkit-transform: translateY(-60px);
      transform: translateY(-60px);
  }

  50% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
  }

  100% {
      -webkit-transform: translateY(-60px);
      transform: translateY(-60px);
  }
}
@keyframes float-bob3 {
  0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }

  50% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
  }

  100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }
}
@keyframes float-bob4 {
  0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }

  50% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
  }

  100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }
}
@keyframes float-bob5 {
  0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }

  50% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
  }

  100% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
  }
}
@keyframes float-bob6 {
  0% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
  }

  50% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
  }

  100% {
      -webkit-transform: translateY(-40px);
      transform: translateY(-40px);
  }
}
@keyframes movebounce {
  0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
  }

  50% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
  }

  100% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
  }
}
@keyframes moveleftbounce {
  0% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
  }

  50% {
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
  }

  100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
  }
}

/*--==============================================->
<!-- Consen Animation Dance -->
==================================================-*/
.dance3 {
  -webkit-animation: dance3 8s alternate infinite;
  animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
  0% {
      -webkit-transform: scale(0.5);
  }

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

.dance {
  -webkit-animation: dance 2s alternate infinite;
  animation: dance 2s alternate infinite;
}

@keyframes dance {
  0% {
      -webkit-transform: scale(0.5);
  }

  100% {
      -webkit-transform: scale(1.2);
  }
}

.dance2 {
  -webkit-animation: dance2 4s alternate infinite;
  animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
  }

  50% {
      -webkit-transform: translate3d(25px, -25px, 0);
  }

  100% {
      -webkit-transform: translate3d(0, -25px, 25px);
  }
}

.watermark-animate {
  -webkit-animation: watermark-animate 8s infinite;
  animation: watermark-animate 8s infinite;
  animation-direction: alternate-reverse;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes watermark-animate {
  0% {
      left: 0;
  }

  100% {
      left: 100%;
  }
}




/* End curser point */

/*===========================
<-- itpro Loader Css -->
=============================*/
.loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s 1s ease;
  z-index: 666;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  transition: all 1s 1s ease;
  width: 48px;
  height: 48px;
}

.loader:before,
.loader:after {
  content: "";
  display: block;
  border: 32px solid transparent;
  border-top-color: #ffff;
  position: absolute;
  left: 0;
  top: 0;
  animation: weld-rotate 2s infinite ease-in;
}
.loader:before {
  border-color: transparent transparent transparent var(--secondary-color);
  animation-delay: 0.5s;
}
@keyframes weld-rotate {
  0%,
  25% {
    transform: rotate(0deg);
  }
  50%,
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, 100);
  z-index: 2;
}

.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
  left: -100%;
}

.loaded .loder-section.right-section {
  right: -100%;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

.loaded .loader {
  top: -100%;
  opacity: 0;
}

/* Responsive */

@media (min-width: 1300px) and (max-width: 1370px) {
  .service-section .swiper {
    height: 530px !important;
  }
}

/* large Desktop */

@media (min-width: 1601px) and (max-width: 1770px) {
  .service-section .swiper {
    height: 480px !important;
  }
}


/* ==============================================
   AJUSTES HEADER CUATRO LUNAS
   ============================================== */

/* 1. Logo 30% más grande */
.custom-logo {
    max-width: 220px; /* Ajusta este valor si lo quieres aún más grande */
    width: 100%;      /* Asegura que sea responsivo */
    height: auto;
    transition: 0.3s;
}

/* 2. Menú con más espacio (Letter-spacing y distribución) */
.meedy_menu > ul > li > a {
    letter-spacing: 2px; /* Más aire entre letras */
    margin: 0 18px;      /* Más espacio entre cada palabra del menú */
    font-size: 15px;     /* Ligero ajuste para elegancia */
}

/* Ajuste para que el menú ocupe más espacio y no deje huecos */
.meedy_menu ul {
    margin-right: 20px !important; /* Reduje el margen gigante original */
    display: flex;
    align-items: center;
}

/* 3. Estilos de los Iconos Redondos */
.header-social-icons {
    display: flex;
    gap: 10px; /* Espacio entre bolitas */
    margin-right: 20px;
}

.header-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;  /* Tamaño del círculo */
    height: 38px;
    border-radius: 50%; /* Esto los hace redondos */
    background-color: transparent; 
    border: 1px solid rgba(255,255,255,0.4); /* Borde sutil */
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.header-social-icons a:hover {
    background-color: var(--body-color); /* Color beige al pasar el mouse */
    color: var(--brand-color); /* Icono café al pasar el mouse */
    border-color: var(--body-color);
}

/* 4. Ajustes del contenedor derecho para alinear todo */
.custom-right-side {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Corrección Botón Reservaciones (Hover) */
.header-button a:hover {
    color: var(--body-color) !important; /* Texto Beige Claro */
    border-color: var(--body-color) !important; /* Borde Beige Claro */
    background-color: transparent !important; /* Fondo transparente (opcional, o puedes poner un color oscuro si prefieres) */
}

/* Opcional: Si prefieres que el botón se rellene de color claro al pasar el mouse */
/* .header-button a:hover {
    background-color: var(--body-color) !important; 
    color: var(--brand-color) !important; 
    border-color: var(--body-color) !important;
}
*/


/* ==============================================
   CORRECCIÓN VISIBILIDAD FORMULARIO DE RESERVA
   ============================================== */

/* 1. Color del texto que escribe el usuario y bordes */
.booking-bx .booking-input-box input,
.booking-bx .booking-input-box select {
    color: #ffffff !important; /* Texto blanco */
    border-bottom: 1px solid rgba(255,255,255,0.3) !important; /* Línea inferior sutil */
}

/* 2. Color del texto de ayuda (Placeholder: Llegada, Salida...) */
.booking-bx .booking-input-box input::placeholder {
    color: rgba(255,255,255,0.8) !important; /* Blanco con un poco de transparencia */
    opacity: 1; /* Necesario para Firefox */
}

/* 3. Color de los iconos dentro de los campos (calendario, usuario) */
.booking-bx .booking-input-box i {
    color: var(--body-color) !important; /* Usamos tu color beige corporativo */
}

/* 4. Ajuste para que las opciones del menú desplegable (Huéspedes) sean legibles */
.booking-bx .booking-input-box select option {
    color: #333333; /* Texto oscuro para la lista desplegable */
    background: #ffffff; /* Fondo blanco para la lista */
}

/* ==============================================
   AJUSTE DE ALTURA DEL BANNER (HERO)
   ============================================== */

.hero-section {
    height: auto !important; /* Quita la altura fija de 820px */
    padding-bottom: 80px;    /* Añade solo los 80px de espacio que pediste al final */
}

/* Opcional: Si sientes que hay mucho espacio ARRIBA del slider 
   (entre el texto "Bienvenido" y las fotos), ajusta este valor: */
.row.hero_upper {
    padding-bottom: 50px !important; /* Originalmente tiene 107px */
}

/* ==============================================
   AJUSTES SECCIÓN "SOBRE NOSOTROS"
   ============================================== */

/* 1. Reducir el espacio vacío superior */
.about-serction {
    padding-top: 80px !important; /* Estaba en más de 300px, lo bajamos a 80px */
}

/* 2. Cambiar textos a Café Oscuro para que se lean bien */
.about-serction .hotelhub-section-title h1 {
    color: var(--brand-color) !important; /* El título grande "Tu Refugio..." */
}

.about-serction .hotelhub-section-title p {
    color: #483324 !important; /* El párrafo descriptivo */
    opacity: 0.9; /* Para que no sea tan pesado visualmente, pero legible */
}

/* Opcional: El subtítulo pequeño "SOBRE NOSOTROS" */
.about-serction .hotelhub-section-title h4 {
    color: var(--secondary-color) !important; 
}

/* ==============================================
   CORRECCIÓN COLORES: SECCIÓN SOBRE NOSOTROS
   ============================================== */

/* 1. Texto de la lista (Ubicación, Atención) a Café Oscuro */
.about-serction .abou_list ul li {
    color: var(--brand-color) !important; /* Color #483324 */
    font-weight: 600 !important; /* Un poco más gordito para que se lea mejor */
}

/* 2. Botón "CONOCER MÁS" a Café Oscuro */
.about-serction .hotelhub-btn a {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #ffffff !important; /* Texto blanco */
}

/* Mantenemos el Hover que te gustó, pero aseguramos que use tus colores */
.about-serction .hotelhub-btn a:hover {
    background-color: transparent !important;
    color: var(--brand-color) !important;
    border: 1px solid var(--brand-color) !important;
}



/* ======================================================
   CORRECCIÓN "NUCLEAR" PARA EL BOTÓN VERDE REBELDE
   ====================================================== */

/* 1. Estado Normal: Forzamos Café Sólido y matamos cualquier imagen verde */
div.about-serction .hotelhub-btn a,
div.about-serction .hotelhub-btn a:link,
div.about-serction .hotelhub-btn a:visited {
    background-color: #483324 !important; /* Café Corporativo */
    background-image: none !important;    /* Elimina gradientes o imágenes verdes */
    border: 1px solid #483324 !important; /* Borde Café */
    color: #ffffff !important;            /* Texto Blanco */
    opacity: 1 !important;
}

/* 2. Capa de Animación (La culpable oculta): La pintamos de café también */
div.about-serction .hotelhub-btn a::after,
div.about-serction .hotelhub-btn a::before {
    background-color: #483324 !important; /* Si hay capa oculta, que sea café */
}

/* 3. Estado Hover: Transparente con texto café */
div.about-serction .hotelhub-btn a:hover {
    background-color: transparent !important;
    background-image: none !important;
    color: #483324 !important;
    border: 1px solid #483324 !important;
}

/* Ocultamos la capa de animación al hacer hover para que no estorbe */
div.about-serction .hotelhub-btn a:hover::after {
    opacity: 0 !important;
}

/* ========================================================
   CORRECCIÓN FINAL: BOTÓN "CONOCER MÁS" (SOBRE NOSOTROS)
   ======================================================== */

/* 1. Eliminar la máscara de imagen y forzar el color de fondo */
.about-serction .hotelhub-btn a {
    background-color: #483324 !important;  /* Tu Café Corporativo */
    background-image: none !important;     /* ELIMINA la imagen verdosa de fondo */
    border: 1px solid #483324 !important;  /* Borde café */
    color: #ffffff !important;             /* Texto blanco */
    z-index: 5;
}

/* 2. DESACTIVAR el elemento ::after (la capa de animación que estorba) */
.about-serction .hotelhub-btn a::after {
    display: none !important;              /* Lo borramos para que no cambie el color */
    content: none !important;
}

/* 3. Efecto Hover (Al pasar el mouse): Fondo transparente y texto café */
.about-serction .hotelhub-btn a:hover {
    background-color: transparent !important;
    color: #483324 !important;
    border: 1px solid #483324 !important;
    transition: all 0.3s ease;
}

/* ========================================================
   CORRECCIÓN SECCIÓN HABITACIONES
   ======================================================== */

/* 1. Títulos de la Sección (Para que se lean en color Café) */
.why-choose-us-section .hotelhub-section-title h1,
.why-choose-us-section .hotelhub-section-title h4, 
.why-choose-us-section .hotelhub-section-title p {
    color: #483324 !important; /* Café Corporativo */
}

.why-choose-us-section .hotelhub-section-title h4 i {
    color: #483324 !important; /* La flechita del icono también en café */
}

/* 2. Tarjetas de Habitaciones: ELIMINAR EL VERDE */

/* Fondo de la tarjeta (estado normal y hover) */
.choose_content {
    background-color: rgba(72, 51, 36, 0.9) !important; /* Café con transparencia */
}

/* Fondo al pasar el mouse (Hover) */
.choose-single-thumb:hover .choose_content {
    background-color: #483324 !important; /* Café Sólido */
}

/* 3. Títulos y Textos dentro de la tarjeta (Mantener blancos para contraste) */
.choose_content h4,
.choose_content p,
.choose_content li {
    color: #ffffff !important; 
}

/* 4. Iconos dentro de la tarjeta */
.choose_content i {
    color: #C0A891 !important; /* Beige dorado para iconos */
}

/* 5. Botón "Reservar" dentro de la tarjeta */
.choose_content .hotelhub-btn a {
    background-color: #C0A891 !important; /* Fondo Beige */
    color: #483324 !important;             /* Texto Café */
    border: none !important;
}

.choose_content .hotelhub-btn a:hover {
    background-color: #ffffff !important; /* Blanco al pasar el mouse */
    color: #483324 !important;
}

/* 1. Estado Normal: Fondo Beige, Texto y Flecha Café */
.choose_content .hotelhub-btn a {
    background-color: #C0A891 !important; /* Tu Beige Corporativo */
    color: #483324 !important;             /* Tu Café Corporativo */
    border: 1px solid #C0A891 !important;
    background-image: none !important;     /* Eliminamos máscaras raras */
}

/* 2. Asegurar que la flechita (ícono) también sea Café */
.choose_content .hotelhub-btn a i {
    color: #483324 !important; 
    font-weight: bold !important;
}

/* 3. Hover (Al pasar el mouse): Fondo Blanco, Texto Café (Elegante) */
.choose_content .hotelhub-btn a:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #483324 !important;
}

/* Asegurar flecha café en hover también */
.choose_content .hotelhub-btn a:hover i {
    color: #483324 !important;
}

/* ========================================================
   CORRECCIÓN FINAL: SECCIÓN HABITACIONES
   ======================================================== */

/* 1. Títulos de la Sección (Cambiarlos a Café para que se vean) */
.why-choose-us-section .hotelhub-section-title h1,
.why-choose-us-section .hotelhub-section-title h4, 
.why-choose-us-section .hotelhub-section-title p {
    color: #483324 !important; /* Café Corporativo */
}

.why-choose-us-section .hotelhub-section-title h4 i {
    color: #483324 !important; /* Flecha del título en café */
}

/* 2. Fondo de las Tarjetas (Cambiar Verde por Café) */
.choose_content {
    background-color: rgba(72, 51, 36, 0.96) !important; /* Café casi sólido */
    bottom: 0 !important; /* Asegura que cubra bien abajo */
}

/* Al pasar el mouse (Hover) */
.choose-single-thumb:hover .choose_content {
    background-color: #483324 !important; /* Café Sólido */
}

/* 3. Textos DENTRO de la tarjeta (Blancos para contraste) */
.choose_content h4,
.choose_content p,
.choose_content li {
    color: #ffffff !important; 
}

/* Iconos de la lista (camas, personas) en Beige */
.choose_content i {
    color: #C0A891 !important; 
}

/* 4. Botón "RESERVAR" (Fondo Beige + Letras Café) */
.choose_content .hotelhub-btn a {
    background-color: #C0A891 !important; /* Tu Beige Fondo */
    color: #483324 !important;             /* Tu Café fuerte */
    border: none !important;
    background-image: none !important;     /* Eliminamos texturas raras */
}

/* Asegurar que la flechita del botón sea café */
.choose_content .hotelhub-btn a i {
    color: #483324 !important; 
    font-weight: bold !important;
}

/* Efecto Hover del Botón (Fondo Blanco + Letras Café) */
.choose_content .hotelhub-btn a:hover {
    background-color: #ffffff !important;
    color: #483324 !important;
}

/* ========================================================
   CORRECCION FINAL: SECCION HABITACIONES
   ======================================================== */

/* 1. Titulos de la Seccion (Cambiarlos a Cafe para que se vean) */
.why-choose-us-section .hotelhub-section-title h1,
.why-choose-us-section .hotelhub-section-title h4, 
.why-choose-us-section .hotelhub-section-title p {
    color: #483324 !important; /* Cafe Corporativo */
}

.why-choose-us-section .hotelhub-section-title h4 i {
    color: #483324 !important; /* Flecha del titulo en cafe */
}

/* 2. Fondo de las Tarjetas (Cambiar Verde por Cafe) */
.choose_content {
    background-color: rgba(72, 51, 36, 0.96) !important; /* Cafe casi solido */
    bottom: 0 !important; /* Asegura que cubra bien abajo */
}

/* Al pasar el mouse (Hover) */
.choose-single-thumb:hover .choose_content {
    background-color: #483324 !important; /* Cafe Solido */
}

/* 3. Textos DENTRO de la tarjeta (Blancos para contraste) */
.choose_content h4,
.choose_content p,
.choose_content li {
    color: #ffffff !important; 
}

/* Iconos de la lista (camas, personas) en Beige */
.choose_content i {
    color: #C0A891 !important; 
}

/* 4. Boton "RESERVAR" (Fondo Beige + Letras Cafe) */
.choose_content .hotelhub-btn a {
    background-color: #C0A891 !important; /* Tu Beige Fondo */
    color: #483324 !important;             /* Tu Cafe fuerte */
    border: none !important;
    background-image: none !important;     /* Eliminamos texturas raras */
}

/* Asegurar que la flechita del boton sea cafe */
.choose_content .hotelhub-btn a i {
    color: #483324 !important; 
    font-weight: bold !important;
}

/* Efecto Hover del Boton (Fondo Blanco + Letras Cafe) */
.choose_content .hotelhub-btn a:hover {
    background-color: #ffffff !important;
    color: #483324 !important;
}


/* ========================================================
   CORRECCIÓN VISIBILIDAD: SECCIÓN SERVICIOS
   ======================================================== */

/* 1. Títulos y Textos de la Izquierda ("Mejorando tu Estancia...") */
.service-section .hotelhub-section-title h1,
.service-section .hotelhub-section-title h4 {
    color: #483324 !important; /* Café Corporativo */
}

/* Información de contacto (Teléfono y etiqueta "Llámanos") */
.service-section .contact-info-content h3,
.service-section .contact-info-content p {
    color: #483324 !important;
}

/* Icono del teléfono (Círculo y símbolo) */
.service-section .contact-infos span i {
    color: #483324 !important;
    border-color: #483324 !important;
}

/* 2. Tarjetas de Servicios (Derecha: Transporte, Wifi, etc.) */

/* Estado Normal: Texto Café para que se vea sobre el fondo beige */
.single-service-box h3,
.single-service-box p {
    color: #483324 !important;
    transition: all 0.3s ease;
}

/* Estado Hover: Texto Blanco (porque el fondo se pone café al pasar el mouse) */
.single-service-box:hover h3,
.single-service-box:hover p {
    color: #ffffff !important;
}

/* ========================================================
   CORRECCIÓN FINAL: ÍCONOS DE SERVICIOS
   ======================================================== */

/* 1. Estado Normal: Convertir imagen blanca a Café Oscuro */
.single-service-box .service-icon img {
    /* Esta combinación matemática transforma el blanco en tu café #483324 */
    filter: brightness(0) saturate(100%) invert(18%) sepia(17%) saturate(1637%) hue-rotate(338deg) brightness(94%) contrast(88%);
    transition: all 0.3s ease;
}

/* 2. Estado Hover: Volver a Blanco Puro */
.single-service-box:hover .service-icon img {
    filter: brightness(0) invert(1); /* Esto fuerza el blanco brillante */
}

/* =========================================
         CORRECCIÓN ALINEACIÓN FOOTER
         ========================================= */
      
      /* Contenedor del Icono + Texto */
      body .contact-item {
          display: flex !important;        /* Los pone uno al lado del otro */
          align-items: flex-start !important; /* Alinea al inicio (útil para la dirección de 2 líneas) */
          gap: 15px !important;            /* Espacio entre icono y texto */
          margin-bottom: 20px !important;  /* Separación entre cada bloque de contacto */
      }

      /* Ajuste del Texto (La clave del problema) */
      body .contact-item p {
          margin: 0 !important;       /* ELIMINA el margen que tiraba el texto abajo */
          padding: 0 !important;      
          line-height: 24px !important; /* Altura de línea cómoda */
          color: #E1D6CA !important;
      }

      /* Ajuste del Icono */
      body .contact-item i {
          color: #C0A891 !important;
          font-size: 20px !important;
          margin-top: 2px !important; /* Pequeño ajuste para centrar con la primera línea de texto */
          min-width: 25px; /* Asegura que el icono tenga su espacio fijo y no se aplaste */
      }

      /* ==============================================
   PERSONALIZACIÓN SCROLL UP (Círculo de Porcentaje)
   ============================================== */

/* 1. El Círculo Exterior */
#progress {
    box-shadow: 0 0 15px rgba(72, 51, 36, 0.4) !important; /* Sombra café suave */
    background-color: transparent !important;
    color: #483324 !important; /* Color base */
    z-index: 9999 !important;
}

/* 2. El Círculo Interior (Donde está el número) */
#progress-value {
    background-color: #E1D6CA !important; /* Tu Beige Claro */
    color: #483324 !important;             /* El número en Café Oscuro */
    font-weight: 700 !important;           /* Número en negrita */
    border: 1px solid #483324 !important;  /* Borde fino café */
    font-family: "Open Sans", sans-serif !important;
}

/* 3. Flecha (si aparece al llegar al final) */
#progress-value i {
    color: #483324 !important;
}


/* =========================================
   PRELOADER PERSONALIZADO CUATRO LUNAS
   ========================================= */
.loader-wrapper.custom-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E1D6CA; /* Fondo Beige Corporativo */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s ease-out; /* Desvanecido suave al terminar */
}

/* Animación del Logo (Latido) */
.loader-logo {
    max-width: 150px; /* Ajusta el tamaño de tu logo aquí */
    animation: pulseLogo 2s infinite ease-in-out;
}

@keyframes pulseLogo {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Clase que agrega el JS cuando la página carga */
body.loaded .loader-wrapper.custom-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}