/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #ee626b;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color: #6B8E23;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #6B8E23;
}

.icon-button a:hover i {
  color: #fff;
}

.main-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #6B8E23;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #6B8E23;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #6B8E23;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.sub-header {
  background-color: #fff;
  padding: 10px 0px;
  border-bottom: 1px solid #eee;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cdcdcd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header ul.social-links li a:hover {
  background-color: #6B8E23;
}

.sub-header ul.info li {
  font-size: 14px;
  color: #7a7a7a;
  border-right: 1px solid #eee;
  margin-right: 25px;
  padding-right: 25px;
}

.sub-header ul.info li:last-child {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 20px;
  color: #6B8E23;
  margin-right: 8px;
}

.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: relative;
  background-color: #fff;
  height: 100px;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  line-height: 100px;
  font-size: 28px;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 700;
  letter-spacing: 2px;
}

.background-header .main-nav .logo h1 {
  line-height: 80px;
}

.header-area .main-nav ul.nav {
  flex-basis: 100%;
  margin-top: 30px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 100px;
  line-height: 100px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 500;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #1e1e1e;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.header-area .main-nav .nav li:last-child a {
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  border-radius: 20px;
  padding-left: 0px;
}

.header-area .main-nav .nav li:last-child a i {
  background-color: #6B8E23;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  margin-left: -1px;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #1e1e1e;
}

.header-area .main-nav .nav li:last-child:hover a i {
  color: #fff;
}

.header-area .main-nav .nav li:hover a {
  color: #6B8E23;
}

.header-area .main-nav .nav li a.active {
  color: #6B8E23;
}


.background-header .main-nav .nav li a.active {
  color: #6B8E23;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #fff;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #fff;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ee626b!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner .item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 220px 20% 320px 20%;
  margin-top: 0px;
}

.main-banner .item-1 {
  background-image: url(../images/banner-01.jpg);
}

.main-banner .item-2 {
  background-image: url(../images/banner-02.jpg);
}

.main-banner .item-3 {
  background-image: url(../images/banner-03.jpg);
}

.main-banner .item span.category {
  background-color: #fff;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 6px 15px;
  display: inline-block;
  margin-bottom: 30px;
}

.main-banner .item span.category em {
  font-style: normal;
  color: #6B8E23;
}

.main-banner .item h2 {
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 72px;
  width: 50%;
  margin-bottom: 0px;
}

.main-banner .owl-dots {
  position: absolute;
  bottom: 60px;
  left: 20%;
}

.main-banner .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  transition: all .5s;
}

.main-banner .owl-dots .active {
  background-color: #6B8E23;
}

.main-banner .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50px);
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  left: 45px;
}

.main-banner .owl-nav .owl-next i {
  position: absolute;
  right: 45px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}



/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured .left-image {
  position: relative;
}

.featured .left-image img {
  padding-left: 55px;
}

.featured .left-image a {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: 110px;
  background-color: #6B8E23;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -55px;
}

.featured .section-heading {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 60px;
}

.featured .section-heading h2 {
  width: 70%;
}

.featured .accordion {
  margin-left: 10px;
  margin-right: 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.featured .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.featured .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.featured .accordion-button:not(.collapsed) {
  color: #6B8E23;
  background-color: #fafafa;
  outline: none;
}

.featured .accordion-button::after {
  display: none;
}

.featured #headingThree {
  border-bottom: none;
}

.featured .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.featured .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.featured .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.featured .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.featured .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.featured .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.featured .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.video-content {
  margin-top: -240px;
}

.video .section-heading h2 {
  color: #fff;
}

.video-content .video-frame {
  position: relative;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.video-content .video-frame img {
  border-radius: 10px;
}

.video-content .video-frame a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-26px, -26px);
  width: 52px;
  height: 52px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #6B8E23;
  outline: 15px solid rgba(254, 85, 37, 0.5);
  font-size: 18px;
}

/* 
---------------------------------------------
Fun Facts Style
--------------------------------------------- 
*/

.fun-facts {
  text-align: center;
  margin-top: 125px;
}

.fun-facts .counter {
  background-color: #ffeee9;
  position: relative;
  border-radius: 10px;
  width: 270px;
  padding: 20px 0px;
  display: inline-block;
}

.fun-facts .counter h2,
.fun-facts .counter p {
  display: inline-flex;
  vertical-align: middle;
}

.fun-facts .counter p {
  text-align: left;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  line-height: 28px;
}

.fun-facts .counter h2 {
  margin-right: 25px;
  font-size: 40px;
  color: #6B8E23;
}

.fun-facts .counter:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #6B8E23;
  border-radius: 50%;
  content: '';
  right: -25px;
  top: -25px;
}


/* 
---------------------------------------------
Best Deal Style
--------------------------------------------- 
*/

.best-deal {
  background-color: #fafafa;
  padding: 100px 0px;
}

.best-deal .tab-content img {
  padding: 0px 45px;
}

.best-deal .tabs-content .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #1e1e1e !important;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0px 25px;
  color: #fff;
}

.best-deal .tabs-content .nav-tabs .nav-link.active {
  background-color: #6B8E23 !important;
  color: #fff;
}

.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 80px;
  align-items: end;
  justify-content: end;
  margin-top: -130px;
}

.best-deal .tabs-content ul.nav-tabs li {
  padding-right: 0px;
  border-right: none;
  margin-left: 20px;
}

.best-deal .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.best-deal .info-table ul li {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

.best-deal .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.best-deal .info-table ul li span {
  font-size: 20px;
  color: #1e1e1e;
  font-weight: 700;
  float: right;
  display: inline-block;
}

.best-deal .tabs-content {
  padding: 0px;
  background-color: transparent;
}

.best-deal .tabs-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}

.best-deal .icon-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties .item {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}

.properties .item img {
  border-radius: 10px;
}

.properties .item span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 25px;
}

.properties .item h4 {
  font-size: 19px;
  margin: 25px 0px;
}

.properties .item h4 a {
  color: #1e1e1e;
}

.properties .item ul li {
  display: inline-block;
  font-size: 15px;
  color: #4a4a4a;
  margin-right: 20px;
}

.properties .item ul li span {
  font-weight: 600;
  color: #1e1e1e;
}

.properties .item ul {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.properties .item h6 {
  font-size: 20px;
  color: #6B8E23;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

.properties .item .main-button {
  text-align: center;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.contact .section-heading h2 {
  color: #fff;
}

.contact-content {
  margin-top: -240px;
  position: relative;
  z-index: 1;
}

.contact-content #map {
  border-radius: 10px;
  margin-bottom: 60px;
}

.contact-content .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content .phone {
  margin-right: 15px;
}

.contact-content .email {
  margin-left: 15px;
}

.contact-content .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-content .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-content .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-content #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-content #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-content #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-content #contact-form button:hover {
  background-color: #6B8E23;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer.footer-no-gap {
  margin-top: 0px;
}

footer {
  margin-top: 150px;
  background-color: #1e1e1e;
  min-height: 100px;
}

footer p {
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}


/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/page-heading-bg.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0px;
  text-align: center;
}

.page-heading span {
  background-color: #fff;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.page-heading span a {
  color: #1e1e1e;
}

.page-heading h3 {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties ul.properties-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.properties ul.properties-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.properties ul.properties-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  color: #fff;
  background-color: #1e1e1e;
  padding: 12px 25px;
  border-radius: 5px;
  transition: all .3s;
}

.properties ul.properties-filter li a.is_active {
  background-color: #6B8E23;
  color: #fff;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
}

.properties ul.properties-filter li a:hover {
  color: #6B8E23;
}

.properties ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.properties ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.properties ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active {
  background-color: #6B8E23;
  color: #fff;
}


/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.single-property .main-image img {
  float: none;
}

.single-property .main-content h4 {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.single-property .main-content span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 40px;
}

.single-property .accordion {
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.single-property .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.single-property .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.single-property .accordion-button:not(.collapsed) {
  color: #6B8E23;
  background-color: #fafafa;
  outline: none;
}

.single-property .accordion-button::after {
  display: none;
}

.single-property #headingThree {
  border-bottom: none;
}

.single-property .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.single-property .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  margin-left: 60px;
}

.single-property .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.single-property .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.single-property .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.single-property .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.single-property .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}


/* 
---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/

.contact-page #map {
  margin-top: 100px;
}

.contact-page .section-heading {
  margin-bottom: 40px;
  margin-right: 280px;
}

.contact-page p {
  margin-bottom: 50px;
}

.contact-page .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
  display: inline-block;
  min-width: 360px;
}

.contact-page .phone {
  margin-bottom: 30px;
}

.contact-page .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-page .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-page .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-page #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-page #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-page #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-page #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-page #contact-form button:hover {
  background-color: #6B8E23;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
  }
  .best-deal .tabs-content .nav-link {
    font-size: 14px;
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
  }
  .best-deal .tabs-content ul.nav-tabs li {
    margin: 0px 5px;
  }
  .properties ul.properties-filter li a {
    font-size: 14px;
    padding: 10px 15px;
  }
  .properties ul.properties-filter li {
    margin: 5px;
  }
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 3px;
    padding-right: 3px;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
  }
  .main-banner .item h2 {
    width: 100%;
  }
  .featured .section-heading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 100px;
  }
  .featured .accordion {
    margin-left: 0px;
    margin-right: 0px;
  }
  .featured .info-table {
    margin-top: 45px;
  }
  .fun-facts .counter {
    margin-bottom: 45px;
  }
  .best-deal .section-heading {
    text-align: center;
  }
  .best-deal .tabs-content ul.nav-tabs {
    margin-top: 0px;
    justify-content: center;
  }
  .best-deal .info-table {
    margin-bottom: 45px;
  }
  .best-deal .tab-content img {
    padding: 0px;
  }
  .best-deal .tabs-content h4 {
    margin-top: 45px;
  }
  .properties .item h6 {
    text-align: center;
    margin-bottom: 15px;
  }
  .properties .item .main-button {
    text-align: center;
  }
  .properties .item ul li {
    margin-right: 10px;
    font-size: 13px;
  }
  .contact-content .phone {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .contact-content .email {
    margin-left: 0px;
    margin-bottom: 45px;
  }
  .contact-content #contact-form {
    margin-left: 0px;
  }
  .single-property .info-table {
    margin-left: 0px;
    margin-top: 45px;
  }
  .contact-page .section-heading {
    margin-right: 0px !important;
  }
  .contact-page #contact-form {
    margin-left: 0px;
    margin-top: 60px;
  }
  .best-deal .info-table ul li span {
    float: right !important;
    width: auto !important;
  }
}

@media (max-width: 1200px) {
  .best-deal .info-table ul li span {
    float: none;
    width: 100%;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}

/* =========================================
   ESTILOS DEL LOGO (CORRECCIÓN POR ALTURA)
   ========================================= */

/* 1. Contenedor del logo para centrarlo verticalmente */
.header-area .main-nav .logo {
  display: flex !important;
  align-items: center !important;
  height: 100px !important;
}

/* 2. Imagen del logo en ORDENADOR */
.header-area .logo img {
  height: 75px !important; /* Forzamos la altura para que no desborde los 100px */
  width: auto !important;  /* El ancho se adapta sin deformarse */
  margin: 0 !important;    /* Eliminamos márgenes que la empujaban fuera */
  object-fit: contain !important;
  transition: all 0.3s ease !important;
}

/* 3. Imagen del logo AL HACER SCROLL */
.background-header .main-nav .logo {
  height: 80px !important;
}
.background-header .logo img {
  height: 55px !important; /* Se hace más pequeño al bajar */
}

/* 4. Imagen del logo en MÓVILES Y TABLETS */
@media (max-width: 991px) {
  .header-area .main-nav .logo {
    height: 80px !important; /* La cabecera del móvil mide 80px */
    top: 0 !important;       
  }
  .header-area .logo img {
    height: 60px !important; /* Cabe perfectamente sin salirse ni tapar el texto */
  }
}

/* =========================================
   SECCIÓN DE TEXTO SUPERPUESTO (ALOJAMIENTO)
   ========================================= */

.seccion-solapada {
  display: flex;
  min-height: 550px; 
  width: 100%;
  position: relative; /* Clave: Permite que la tarjeta flote tomando esta caja como referencia */
}

.bloque-color {
  background-color: #7b113a; 
  width: 35%; 
}

.bloque-imagen {
  width: 65%; 
  background-image: url(assets/images/CamaHabGrande.jpg); /* Asegúrate de poner tu ruta correcta */
  background-size: cover;
  background-position: center;
}

.tarjeta-blanca {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centra la caja verticalmente de forma matemática */
  left: 8%; /* Margen izquierdo respecto a la pantalla */
  width: 45%; /* Ancho de la caja blanca (al ser 45% y empezar en el 8%, invade la imagen) */
  background-color: #ffffff;
  padding: 60px 50px;
  z-index: 10; /* Obliga a la caja a estar por encima de las fotos */
}

/* --- Adaptación para teléfonos móviles --- */
@media (max-width: 991px) {
  .seccion-solapada {
    flex-direction: column;
  }
  .bloque-color {
    width: 100%;
    min-height: 150px;
  }
  .bloque-imagen {
    width: 100%;
    min-height: 400px;
  }
  .tarjeta-blanca {
    position: relative; /* En móviles deja de flotar de forma absoluta */
    top: 0;
    transform: translateY(-40px); /* Sube un poco para pisar el color granate superior */
    left: 0;
    width: 85%;
    margin: 0 auto;
    padding: 30px;
  }
}

/* =========================================
   TÍTULO CENTRADO ELEGANTE
   ========================================= */
.titulo-centrado {
  margin-top: 100px;
  margin-bottom: 60px;
}

.titulo-centrado h2 {
  font-size: 36px;
  font-weight: 400; /* Letra un poco más fina para que sea elegante */
  color: #000000; 
  letter-spacing: 1px; /* Separación sutil entre las letras */
}

/* --- Adaptación para teléfonos móviles --- */
@media (max-width: 767px) {
  .titulo-centrado {
    margin-top: 60px;
    margin-bottom: 40px;
  }
  .titulo-centrado h2 {
    font-size: 28px;
  }
}

/* =========================================
   SECCIÓN DETALLE PLANTA BAJA
   ========================================= */
.seccion-apartamento {
  margin-bottom: 80px;
}

/* Espaciado para separar el texto de la imagen en ordenadores */
.texto-apartamento {
  padding-left: 50px; 
}

.texto-apartamento h2 {
  font-size: 32px;
  font-weight: 400;
  color: #6B8E23; 
  margin-bottom: 8px;
}

.texto-apartamento p {
  font-size: 15px;
  line-height: 1.8;
  color: #4a4a4a;
  margin-bottom: 20px;
}

.texto-apartamento p strong {
  color: #1e1e1e;
  font-weight: 600;
}

.texto-apartamento .incluye-titulo {
  font-weight: 600;
  color: #6B8E23;
  margin-bottom: 15px;
}

/* Estilos de la lista y los iconos */
.lista-detalles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-detalles li {
  font-size: 14.5px;
  color: #4a4a4a;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.lista-detalles li i {
  color: #7b113a; /* Color granate para los iconos del check */
  margin-top: 5px;
  margin-right: 12px;
  font-size: 16px;
}

/* --- Adaptación para teléfonos móviles --- */
@media (max-width: 991px) {
  .texto-apartamento {
    padding-left: 15px; /* Quita el espacio lateral extra en móviles */
    margin-top: 35px; /* Separa el texto de la foto que queda arriba */
  }
}

/* =========================================
   EFECTOS DE LA CUADRÍCULA DE FOTOS
   ========================================= */
.foto-galeria {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 1 / 1; /* Fuerza a las fotos a ser cuadrados perfectos */
  object-fit: cover; /* Evita que la foto se deforme al hacerla cuadrada */
  width: 100%;
}

.foto-galeria:hover {
  transform: scale(1.03); /* Pequeño efecto de acercamiento al pasar el ratón */
  box-shadow: 0px 8px 15px rgba(0,0,0,0.2); /* Sombra para dar efecto de relieve */
}

/* =========================================
   AJUSTE DE IMAGEN AMPLIADA (LIGHTBOX)
   ========================================= */
.img-lightbox {
  max-height: 90vh !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 5px;
  object-fit: contain !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}


/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================= */
.btn-whatsapp {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  font-size: 38px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 3px solid white; 
  transition: all 0.3s ease;
}

/* Efecto al pasar el ratón por encima */
.btn-whatsapp:hover {
  background-color: #128c7e;
  color: white;
  transform: scale(1.1);
}


/* Margen derecho del banner solo en ordenadores */
@media (min-width: 992px) {
  .header-text.banner-desktop {
    margin-left: 40% !important;
  }
}

/* Ajuste del banner en móviles para que no se desborde */
@media (max-width: 991px) {
  .main-banner .item {
    padding: 180px 20px 220px 20px !important;
  }
  .main-banner .item h2 {
    font-size: 34px !important;
    line-height: 42px !important;
    width: 100% !important;
  }
}



/* =========================================
   SECCIÓN NOSOTROS (SIMÉTRICA: FOTO - TEXTO - FOTO)
   ========================================= */

.seccion-simetrica {
  display: flex;
  width: 100%;
  min-height: 550px; /* Altura mínima de la sección */
  background-color: #f8f8f8; /* Color de fondo muy suave por si el texto es más corto */
}

/* Regla principal: Obliga a las 3 columnas a medir EXACTAMENTE lo mismo */
.col-simetrica {
  flex: 1; 
  display: flex;
}

/* Configuración de las fotos para que se recorten solas sin deformarse */
.img-simetrica {
  background-size: cover;
  background-position: center;
}

/* Configuración de la columna central (Fondo morado/granate) */
.texto-simetrico {
  background-color: #7b113a; /* El color de tu casa rural */
  align-items: center; 
  justify-content: center; 
  padding: 60px 30px; /* Este espacio es el que crea las franjas moradas alrededor */
  text-align: left;
}

/* Tarjeta blanca interior para el texto */
.contenido-texto {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px; /* Bordes redondeados para mantener el estilo */
  box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra elegante */
}

/* --- Adaptación para teléfonos móviles --- */
@media (max-width: 991px) {
  .seccion-simetrica {
    flex-direction: column; 
  }
  
  .col-simetrica {
    width: 100%; 
    min-height: 350px; 
  }

  .texto-simetrico {
    padding: 40px 20px; /* Franjas moradas un poco más finas en el móvil */
    min-height: auto;
  }
  
  .contenido-texto {
    padding: 30px; /* Texto un poco más ajustado para no ocupar toda la pantalla */
  }
}
/* --- Adaptación para teléfonos móviles --- */
@media (max-width: 991px) {
  .seccion-simetrica {
    flex-direction: column; /* Cambia de horizontal a vertical */
  }
  
  .col-simetrica {
    width: 100%; /* Ahora ocupan todo el ancho del móvil */
    min-height: 350px; /* Altura fija para que las fotos se vean bien */
  }

  .texto-simetrico {
    padding: 50px 30px; /* Márgenes un poco más pequeños para pantallas estrechas */
    min-height: auto;
  }
}

/* =========================================
   BANNER PRINCIPAL: IMAGEN EXCLUSIVA PARA MÓVILES
   ========================================= */
@media (max-width: 991px) {
  
  /* 1. Cambiamos la imagen y forzamos a que cubra toda la altura */
  .main-banner .item-1 {
    /* PON AQUÍ EL NOMBRE DE TU NUEVA FOTO: */
    background-image: url(../images/fachada.jpg) !important; 
    
    background-size: cover !important;
    background-position: center center !important; /* Centra la parte importante de la foto */
    
    /* Esta línea hace que la foto ocupe el 100% de la altura de la pantalla del móvil, eliminando el hueco negro */
    min-height: 100vh !important; 
    
    /* Centramos el texto verticalmente dentro de la nueva altura */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 20px !important; 
  }

  /* 2. Ajuste fino del texto para que respire bien en móvil */
  .main-banner .item-1 .header-text {
    margin-top: -400px !important; /* Lo baja un poco para que no se pegue a la cabecera blanca */
  }
}

/* =========================================
   DISEÑO DEL FORMULARIO DE CONTACTO
   ========================================= */
.contenedor-formulario {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px; /* Bordes redondeados como tus otras cajas */
  box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Sombra elegante */
}

.formulario-contacto .grupo-form {
  margin-bottom: 20px;
}

.formulario-contacto label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2a2a2a;
}


/* Diseño de las cajas y del menú desplegable */
.formulario-contacto input,
.formulario-contacto textarea,
.formulario-contacto select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  transition: all 0.3s ease;
  background-color: #ffffff; /* Asegura el fondo blanco del desplegable */
}

/* Efecto granate al pinchar en cualquier caja o desplegable */
.formulario-contacto input:focus,
.formulario-contacto textarea:focus,
.formulario-contacto select:focus {
  border-color: #7b113a;
  outline: none;
  box-shadow: 0 0 5px rgba(123, 17, 58, 0.2);
}

/* Diseño del botón de enviar */
.btn-enviar-form {
  background-color: #7b113a; /* Tu color granate corporativo */
  color: #ffffff;
  padding: 14px 25px;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.btn-enviar-form:hover {
  background-color: #5a0c2a; /* Granate más oscuro al pasar el ratón */
}

/* =========================================
   DISEÑO DE LA CASILLA DE PRIVACIDAD
   ========================================= */
.formulario-contacto .checkbox-legal {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 25px;
}

/* Evita que el cuadradito ocupe el 100% de la pantalla */
.formulario-contacto .checkbox-legal input[type="checkbox"] {
  width: auto; 
  margin-right: 12px;
  cursor: pointer;
  transform: scale(1.2); /* Lo hace un pelín más grande para que sea fácil de pulsar en el móvil */
}

.formulario-contacto .checkbox-legal label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  color: #555555;
}

.formulario-contacto .checkbox-legal label a {
  color: #7b113a; /* El texto enlazado en granate */
  text-decoration: underline;
}

.formulario-contacto .checkbox-legal label a:hover {
  color: #5a0c2a;
}

/* =========================================
   TRUCO PARA OCULTAR EL PIE DE GOOGLE CALENDAR
   ========================================= */
.contenedor-calendario-limpio {
  width: 100%;
  height: 600px; /* La caja mide 600px, pero el iframe mide 660px */
  overflow: hidden; /* La orden mágica: todo lo que sobresalga por abajo desaparece */
  border-radius: 8px; /* Le damos bordes redondeados para que quede más elegante */
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Le ponemos una sombra suave */
  margin-bottom: 40px; /* Espacio de separación con el formulario de abajo */
  background-color: #ffffff;
}

.contenedor-calendario-limpio iframe {
  width: 100%;
  border: none;
}

/* =========================================
   BOTÓN DE RESERVAS EN EL MENÚ DESPLEGABLE (MÓVIL) - ESPACIO FORZADO
   ========================================= */
@media (max-width: 991px) {
  
  /* Forzamos a la caja blanca a no tener ningún hueco extra por debajo */
  .header-area .nav,
  ul.nav {
    height: auto !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }

  /* Eliminamos TODO el relleno de la fila para que mida lo mismo que las otras */
  ul.nav li.item-reserva-movil {
    display: block !important;
    height: auto !important;
    text-align: center;
    border-top: 1px solid #eeeeee; 
    margin: 0px !important;
    padding: 0px !important; /* CLAVE: Relleno a cero */
  }

  /* Convertimos el enlace en un bloque estándar */
  ul.nav li.item-reserva-movil a.boton-reserva-destacado {
    background-color: transparent !important; 
    color: #1e1e1e !important; 
    display: block !important; /* Ocupa todo el ancho */
    width: 100% !important; 
    padding: 10px 0px !important; /* Solo un pequeño margen superior e inferior, como los demás */
    font-weight: 500 !important;
    height: auto !important; 
    line-height: 32px !important; 
    max-height: none !important;
    margin-bottom: 0px !important; /* CLAVE: Margen inferior a cero */
  }

  /* El icono se queda igual */
  ul.nav li.item-reserva-movil a.boton-reserva-destacado i {
    background-color: #607d3b !important; 
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important; 
    border-radius: 50% !important; 
    margin-right: 8px !important;
    text-align: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
}

/* =========================================
   CABECERA COMPACTA PARA TARIFAS Y RESERVAS
   ========================================= */

/* 1. Hacemos que la franja entera tenga menos altura */
.cabecera-reservas {
  min-height: 250px !important;
  height: 25vh !important; /* Ocupará solo una cuarta parte de la pantalla */
}

/* 2. Reducimos el espacio, redondeamos bordes y centramos */
.tarjeta-compacta {
  padding: 15px 45px !important; /* Espacio agradable por arriba/abajo y a los lados */
  border-radius: 15px !important; /* Aquí le damos los bordes redondeados */
  text-align: center !important; /* Centramos el texto en el interior */
  width: fit-content !important; /* ¡LA CLAVE! Hace que la caja corte todo el sobrante blanco */
  max-width: 90% !important; /* Margen de seguridad para que no se salga en móviles */
}

/* 3. Eliminamos el margen invisible que empujaba la caja hacia abajo */
.tarjeta-compacta h2 {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
}

/* 4. Aseguramos que la imagen no se deforme al encoger la sección */
.cabecera-reservas .bloque-imagen img {
  height: 100%;
  object-fit: cover;
}

/* =========================================
   ARREGLO CABECERA RESERVAS EN MÓVIL
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. Ponemos límite a la altura y cortamos lo que sobra para no pisar el calendario */
  .cabecera-reservas {
    height: 220px !important; 
    min-height: 220px !important;
    overflow: hidden !important; /* LA MAGIA: Todo lo que asome por abajo, se vuelve invisible */
    position: relative !important;
    margin-bottom: 40px !important; /* Espacio limpio antes de que empiece el formulario */
  }
  
  /* 2. Obligamos a la imagen a respetar el tamaño de su caja */
  .cabecera-reservas .bloque-imagen {
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
  }

  .cabecera-reservas .bloque-imagen img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* 3. Centramos el título blanco perfectamente en medio de la pantalla */
  .cabecera-reservas .tarjeta-compacta {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Centro matemático exacto */
    width: 80% !important; /* Para que deje margen por los lados y no toque los bordes del móvil */
    padding: 12px 20px !important;
    margin: 0 !important;
  }
}

/* =========================================
   AJUSTE DE ESPACIOS TEXTO (MÓVIL)
   ========================================= */
@media (max-width: 991px) {
  .ajuste-texto-our{
    margin-top: -30px !important; /* Sube el texto. Si lo quieres más arriba, pon -40px */
    margin-bottom: 30px !important; /* Separa el texto de las imágenes inferiores */
  }
}

/* =========================================
   DISEÑO DE LA TABLA DE TARIFAS
   ========================================= */
.tabla-tarifas {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

/* Bordes y espaciado de las celdas */
.tabla-tarifas th, 
.tabla-tarifas td {
  border: 1px solid #b3b3b3; /* Línea gris muy fina y elegante */
  padding: 25px 20px; /* Mucho espacio interior para que respire, como en la foto */
  color: #4a4a4a;
  font-size: 15px;
}

/* Estilo de la cabecera (Tipo de día / Precio) */
.tabla-tarifas th {
  font-weight: 700;
  color: #333333;
}

/* Clases de apoyo */
.texto-centro {
  text-align: center;
}

.precio-destacado {
  font-weight: 700;
  color: #333333;
}

/* Estilo para la caja inferior de condiciones */
.condiciones-tabla {
  padding: 30px 25px !important;
  text-align: left;
}

.condiciones-tabla p {
  margin-bottom: 15px;
  color: #333333;
}