/*

TemplateMo 591 villa agency

https://templatemo.com/tm-591-villa-agency

*/

/* ---------------------------------------------
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: 50px;
}

.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: #249fdd;
  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: #953f99;
  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: #953f99;
}

.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;
  user-select: none;
}

.main-button a:hover {
  background-color: #953f99;
  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: #953f99;
  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: #953f99;
  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: #953f99;
}

.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: #953f99;
  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: #953f99;
  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: #953f99;
}

.header-area .main-nav .nav li a.active {
  color: #953f99;
}


.background-header .main-nav .nav li a.active {
  color: #953f99;
}

.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: #249fdd!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/banner1.gif);

}

.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: #953f99;
}

.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: #953f99;
}

.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: #953f99;
  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: #953f99;
  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: #953f99;
  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: #953f99;
}

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


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

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

.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: #953f99 !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-items .item {
  width: 246px;
  min-height: 600px;
  height: 600px;
  max-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* En todos los dispositivos */
.properties-items .item .carousel {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  display: block;
  position: relative;
}

.properties-items .item .carousel-inner {
  height: 100%;
  width: 100%;
  display: flex;
}

.properties-items .item .carousel-item {
  width: 100%;
  height: 100%;
}

.properties-items .item .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}


/* Título largo: recortar con ... */
.properties-items .item h4 {
  font-size: 16px;
  margin: 15px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Listado adaptable con scroll si es necesario */
.properties-items .item ul {
  margin: 10px 0;
  padding: 0;
  list-style: none;
  max-height: 80px;
  overflow: auto;
}

/* Botón abajo fijo */
.properties-items .item .main-button {
  margin-top: auto;
  text-align: center;
}

/* Opcional: barra de scroll sutil */
.properties-items .item ul::-webkit-scrollbar {
  width: 4px;
}
.properties-items .item ul::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .properties-items .item {
    width: 100%;
    max-width: 246px;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
  }

  /* Ocultar en móvil */
  .properties-items .item h4,
  .properties-items .item ul,
  .properties-items .item .main-button {
    display: none;
  }

  /* Mostrar solo los elementos deseados */
  .properties-items .item .carousel-inner,
  .properties-items .item .category,
  .properties-items .item h6 {
    display: block;
  }
}





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

.item-none {
  visibility: hidden !important;
}


.properties .item img {
  width: 100%;
  aspect-ratio: 1 / 1; 
  object-fit: cover;   
  border-radius: 10px;
  display: block;     
}


.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: #953f99;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

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



/* Contenedor general con flex para igualar altura de columnas */
.properties-index {
  display: flex;
  flex-wrap: wrap;
}

.properties-index .col-lg-3,
.properties-index .col-md-6,
.properties-index .col-6 {
  display: flex;
}

/* Tarjeta individual */
.index-item {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Imagen cuadrada 1:1 */
.index-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

/* Título centrado */
.index-item h4 {
  text-align: center;
  font-size: 18px;
  margin: 20px 0;
}

/* Enlace del título */
.index-item h4 a {
  color: #1e1e1e;
  text-decoration: none;
}

/* Botón fijo abajo */
.index-item .main-button {
  text-align: center;
  margin-top: auto;
}

.index-item .main-button a {
  background-color: #953f99;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
}

.properties-index .item h4 {
  height: 48px; /* ajustable según tu diseño */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
}



/* 
---------------------------------------------
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: 25px;
  box-shadow: 0px 15px 40px rgba(255, 105, 180, 0.3), 
              0px 5px 15px rgba(255, 165, 0, 0.2);
  padding: 40px 35px;
  background: linear-gradient(135deg, #ff6bb6 0%, #ffa726 25%, #42a5f5 50%, #ab47bc 75%, #ff6bb6 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  position: relative;
  overflow: hidden;
}

/* Emojis que forman un marco circular alrededor del formulario */
.contact-content #contact-form::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border-radius: 35px;
  pointer-events: none;
  z-index: 1;
}

.contact-content #contact-form .emoji-border {
  position: absolute;
  font-size: 28px;
  animation: rotateAroundForm 8s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Posicionamiento de emojis en círculo */
.contact-content #contact-form .emoji-1 {
  top: -20px;
  left: 50%;
  transform-origin: 0 calc(50vh);
  animation-delay: 0s;
}

.contact-content #contact-form .emoji-2 {
  top: 20%;
  right: -25px;
  transform-origin: calc(-50vw) 0;
  animation-delay: -1s;
}

.contact-content #contact-form .emoji-3 {
  bottom: -20px;
  right: 40%;
  transform-origin: 0 calc(-30vh);
  animation-delay: -2s;
}

.contact-content #contact-form .emoji-4 {
  bottom: 20%;
  left: -25px;
  transform-origin: calc(50vw) 0;
  animation-delay: -3s;
}

.contact-content #contact-form .emoji-5 {
  top: 10%;
  left: 20%;
  transform-origin: 0 0;
  animation-delay: -4s;
}

.contact-content #contact-form .emoji-6 {
  top: 10%;
  right: 20%;
  transform-origin: 0 0;
  animation-delay: -5s;
}

.contact-content #contact-form .emoji-7 {
  bottom: 10%;
  left: 20%;
  transform-origin: 0 0;
  animation-delay: -6s;
}

.contact-content #contact-form .emoji-8 {
  bottom: 10%;
  right: 20%;
  transform-origin: 0 0;
  animation-delay: -7s;
}

.contact-content #contact-form::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotateAroundForm {
  0% {
    transform: rotate(0deg) translateX(120px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -20px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.contact-content #contact-form label {
  font-size: 16px;
  color: #fff;
  margin-bottom: 15px;
  font-weight: 600;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  display: block;
}

.contact-content #contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid transparent;
  margin-bottom: 25px;
  font-size: 15px;
  padding: 0px 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.contact-content #contact-form input:focus {
  outline: none;
  border: 3px solid #fff;
  background: rgba(255, 255, 255, 1);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.contact-content #contact-form textarea {
  width: 100%;
  height: 120px;
  max-height: 200px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid transparent;
  margin-bottom: 30px;
  font-size: 15px;
  padding: 20px 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  resize: vertical;
}

.contact-content #contact-form textarea:focus {
  outline: none;
  border: 3px solid #fff;
  background: rgba(255, 255, 255, 1);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.contact-content #contact-form button {
  background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  background-size: 400% 400%;
  height: 55px;
  border-radius: 30px;
  padding: 0px 35px;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  animation: buttonGradient 3s ease infinite;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.contact-content #contact-form button::before {
  content: '🎊';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0;
  transition: all 0.3s ease;
}

.contact-content #contact-form button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.contact-content #contact-form button:hover::before {
  opacity: 1;
  animation: sparkle 0.6s ease;
}

.contact-content #contact-form button:active {
  transform: translateY(-1px) scale(1.02);
}

@keyframes buttonGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sparkle {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }
}

/* Eliminar los globos flotantes anteriores */

/* 
---------------------------------------------
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;
  user-select: none;
}

.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;
  user-select: none;
}

.properties ul.properties-filter li a.is_active {
  background-color: #953f99;
  color: #fff;
  user-select: none;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
  user-select: none;

}

.properties ul.properties-filter li a:hover {
  color: #953f99;
  user-select: none;

}

.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: #953f99;
  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: #953f99;
  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: #953f99;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 25px;
  box-shadow: 0px 15px 40px rgba(255, 105, 180, 0.3), 
              0px 5px 15px rgba(255, 165, 0, 0.2);
  padding: 40px 35px;
  background: linear-gradient(135deg, #ff6bb6 0%, #ffa726 25%, #42a5f5 50%, #ab47bc 75%, #ff6bb6 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  position: relative;
  overflow: hidden;
}

.contact-page #contact-form::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  border-radius: 35px;
  pointer-events: none;
  z-index: 1;
}

.contact-page #contact-form .emoji-border {
  position: absolute;
  font-size: 28px;
  animation: rotateAroundForm 8s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.contact-page #contact-form .emoji-1 {
  top: -20px;
  left: 50%;
  transform-origin: 0 calc(50vh);
  animation-delay: 0s;
}

.contact-page #contact-form .emoji-2 {
  top: 20%;
  right: -25px;
  transform-origin: calc(-50vw) 0;
  animation-delay: -1s;
}

.contact-page #contact-form .emoji-3 {
  bottom: -20px;
  right: 40%;
  transform-origin: 0 calc(-30vh);
  animation-delay: -2s;
}

.contact-page #contact-form .emoji-4 {
  bottom: 20%;
  left: -25px;
  transform-origin: calc(50vw) 0;
  animation-delay: -3s;
}

.contact-page #contact-form .emoji-5 {
  top: 10%;
  left: 20%;
  transform-origin: 0 0;
  animation-delay: -4s;
}

.contact-page #contact-form .emoji-6 {
  top: 10%;
  right: 20%;
  transform-origin: 0 0;
  animation-delay: -5s;
}

.contact-page #contact-form .emoji-7 {
  bottom: 10%;
  left: 20%;
  transform-origin: 0 0;
  animation-delay: -6s;
}

.contact-page #contact-form .emoji-8 {
  bottom: 10%;
  right: 20%;
  transform-origin: 0 0;
  animation-delay: -7s;
}

.contact-page #contact-form::after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}


/* 
---------------------------------------------
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;
    user-select: none;
  }
  .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;
  }
}

.logo-img {
    width: 1000px;
    height: auto; /* Mantiene la proporción */
}

/* CSS PARTY ROSE */

  /* From Uiverse.io by ercnersoy */ 
.input {
  width: 100%; /* se adapta al contenedor */
  max-width: 400px; /* opcional, para evitar que sea demasiado grande */
  border: none;
  padding: 1rem;
  border-radius: 1rem;
  background: #e8e8e8;
  box-shadow: 5px 5px 15px #c5c5c5,
              -5px -5px 15px #ffffff;
  transition: 0.3s;
  box-sizing: border-box; /* para que padding no afecte el width */
}

.input:focus {
  outline: none;
  background: #e8e8e8;
  box-shadow: inset 20px 20px 60px #c5c5c5,
              inset -20px -20px 60px #ffffff;
  transition: 0.3s;
}

 /* Boton Ordenar WhatsApp (alineado con .input) */
.button3 {
  width: 100%;
  max-width: 400px; /* Igual que .input */
  padding: 1rem;    /* Igual que .input */
  font-size: 18px;
  border-radius: 1rem; /* Igual que .input */
  background: #e8e8e8;
  border: none;
  color: #090909;
  box-shadow: 5px 5px 15px #c5c5c5,
              -5px -5px 15px #ffffff;
  transition: 0.3s;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.button3 > svg {
  height: 24px;
  width: 24px;
}

.button3:hover {
  color: #ffffff;
  background-color: #009087;
  box-shadow: inset 5px 5px 15px #c5c5c5,
              inset -5px -5px 15px #ffffff;
}

.button3:focus {
  outline: none;
  background: #e8e8e8;
  box-shadow: inset 20px 20px 60px #c5c5c5,
              inset -20px -20px 60px #ffffff;
}

  /* boton ayuda whatsapp */ 
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 55px;
  height: 55px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  bottom: 20px;
  right: 20px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  background-color: #00d757;
  z-index: 9999;
  user-select: none;
  pointer-events: auto;
  -webkit-user-drag: none;
}

.sign {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  user-select: none;
}

.sign svg {
  width: 30px;
}

.sign svg path {
  fill: white;
}

.text {
  position: absolute;
  right: 0;
  width: 0;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  user-select: none;
}

/* Efecto hover en PC */
@media (hover: hover) {
  .Btn:hover {
    width: 150px;
    border-radius: 40px;
    user-select: none;
  }

  .Btn:hover .sign {
    width: 30%;
    padding-left: 10px;
    user-select: none;
  }

  .Btn:hover .text {
    opacity: 1;
    width: 70%;
    padding-right: 10px;
    user-select: none;
  }
}

/* Ajustes para móviles */
@media (max-width: 768px) {
  .Btn {
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
  }

  .sign svg {
    width: 25px;
  }
}

a.no-drag, a.no-drag img {
  user-select: none;
  -webkit-user-drag: none; /* Evita arrastrar en WebKit (Chrome, Safari) */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* MARCAS */

 .brands-container {
            max-width: 1200px;
            width: 100%;
        }

        .brands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .brand-item {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            animation: fadeInUp 0.8s ease-out;
            user-select: none;
        }

        .no-brand-item {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: scale(0) !important;
    transition: all 0.3s ease !important;
}

        .brand-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            transition: left 0.6s;
        }

        .brand-item:hover::before {
            left: 100%;
        }

        .brand-item:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        .brand-item:nth-child(1) { animation-delay: 0.1s; }
        .brand-item:nth-child(2) { animation-delay: 0.2s; }
        .brand-item:nth-child(3) { animation-delay: 0.3s; }
        .brand-item:nth-child(4) { animation-delay: 0.4s; }
        .brand-item:nth-child(5) { animation-delay: 0.5s; }
        .brand-item:nth-child(6) { animation-delay: 0.6s; }

        .brand-logo {
            max-width: 100%;
            max-height: 60px;
            object-fit: contain;
            filter: grayscale(0.3);
            transition: all 0.3s ease;
        }

        .brand-item:hover .brand-logo {
            filter: grayscale(0);
            transform: scale(1.1);
        }

        .brand-text {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            text-align: center;
        }


        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @media (max-width: 768px) {
            .brands-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 20px;
            }
            
            .brand-item {
                height: 100px;
                padding: 20px;
            }
            
            .title {
                font-size: 2rem;
                margin-bottom: 2rem;
            }
        }
/* CAJAS PEDIDO */

.selector-cajas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.caja {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;  
  flex: 1 1 calc(50% - 10px);
  padding: 12px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  background-color: #f9f9f9;
  transition: 0.3s;
  user-select: none;
}



.caja:hover {
  border-color: #007bff;
}

.caja.seleccionado {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.caja img {
  width: 100%;
  height: auto;
  max-width: 200px;
  margin-bottom: 8px;
}

.contador {
  margin-top: auto; /* Empuja este bloque hacia abajo */
  display: block !important;
}

.input-cantidad {
  width: 70px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
}

/* Sticky form whastapp */

  @media (min-width: 992px) {
    .sticky-formulario {
      position: sticky;
      top: 20px; /* distancia desde arriba */
    }
  }