@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;700&display=swap");

/* Estilos globales */
:root {
  --primary-color: #0198a9;
  --primary-color-dark: #006663;
  --primary-color-light: #338582;
  ---secundary-color: #016a76;
  --tertiary-color: #e6797f;
  --quartary-color: #f8f8f8;
  --white-color: #ffffff;
  --black-color: #000000;
  --gray-color: #555555;
  --text-color: #464646;
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.5rem;
  font-weight: 400;
  font-style: normal;
}



.text-white {
  color: var(--white-color) !important;
}
.font-bold {
  font-weight: 700 !important;
}

a {
  text-decoration: none;
}

.background-bennecke-dark {
  background-color: var(--primary-color-dark);
}

ul {
  list-style: none;
}

/* Tipografías */
.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.pt-sans-narrow-regular {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pt-sans-narrow-bold {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700 !important;
  font-style: normal;
}

.h2-bennecke {
  font-weight: 700;
  font-style: normal;
  font-size: 2.25rem;
  color: var(--primary-color);
}

.big {
  font-size: 2.5rem;
}

.h2-bennecke-thin {
  font-weight: 400;
  font-style: normal;
  font-size: 2.25rem;
  color: var(--primary-color);
}

.text-grande {
  font-weight: 400;
  font-style: normal;
  line-height: 2rem;
  font-size: 1.75rem;
  color: black;
}

h2 {
  margin-bottom: 1.5rem;
}
h1.hr::after,
h2.hr::after,
h3.hr::after,
h4.hr::after,
h5.hr::after,
h6.hr::after,
.sidebar-wrapper .widget-wrapper .widget .widgettitle::after {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 50px;
  height: 0;
  border-bottom: 1px solid var(--tertiary-color);
  margin-left: -25px;
  content: "";
}

h2.hr-left::after {
  position: absolute;
  bottom: -4px;
  width: 50px;
  left: 20px;
  height: 0;
  border-bottom: 1px solid var(--tertiary-color);
  margin-left: -25px;
  content: "";
}

h2.primary-color {
  color: var(--primary-color);
}
.link {
  color: var(--primary-color);
  font-weight: bold;
}
.link:hover {
  color: #00717e;
}

.link-white {
  color: var(--white-color);
  font-weight: bold;
}
.text-red {
  color: #e22d36;
}

.hr {
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}

.hr-left {
  position: relative;
  margin-bottom: 30px;
  text-align: left;
}

@font-face {
  font-family: "PT Sans";
  src: url("../fonts/ptsans/PT\ Sans.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans Bold";
  src: url("../fonts/ptsans/PT\ Sans\ Bold.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans Bold Italic";
  src: url("../fonts/ptsans/PT\ Sans\ Bold\ Italic.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans Narrow";
  src: url("../fonts/ptsans/PT\ Sans\ Narrow.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans Narrow Bold";
  src: url("../fonts/ptsans/PT\ Sans\ Narrow\ Bold.ttf") format("truetype");
}

.bennecke-color {
  color: #0198a9 !important;
}

.bennecke-color-red {
  color: #e6797f;
}

.bg-bennecke-red {
  background-color: #e6797f;
}
.border-bottom-bennecke {
  border-bottom: 1px solid #0198a9;
}
.bg-light-bennecke {
  background-color: #f8f8f8;
}
.bg-bennecke {
  background-color: #0198a9;
}
.bennecke-secondary-color {
  background-color: #f8f8f8;
}
.bennecke-background-color {
  background-color: #0198a9;
}
.bennecke-background-color-secondary {
  background-color: #016a76;
}
.bennecke-invert-background-color {
  background-color: var(--white-color);
}
.bennecke-border-color {
  border-color: #0198a9;
}
.bennecke-invert-color {
  color: var(--white-color);
}
/* Tipografías */

/* Menú */

/* Ajustes de estilo para botones */
.btn-bennecke {
  background-color: #0198a9;
  border-color: #0198a9;
  color: var(--white-color);
  border-radius: 0;
}
.btn-bennecke:hover {
  background-color: #00717e;
  border-color: #00717e;
  color: var(--white-color);
}

.btn-bennecke-red {
  background-color: #e6797f;
  border-color: #e6797f;
  color: var(--white-color);
  border-radius: 0;
}

.text-bennecke-red-high {
  color: #e30613;
}

.btn-bennecke-red-high {
  background-color: #e30613;
  border-color: #e30613;
  color: var(--white-color);
  border-radius: 5px;
}

.btn-bennecke-red-high:hover {
  background-color: #e30613;
  border-color: #e30613;
  color: var(--white-color);
  border-radius: 5px;
}

.btn-bennecke-red:hover {
  background-color: #0198a9;
  border-color: #0198a9;
  color: var(--white-color);
}
.btn-invert-bennecke {
  background-color: var(--white-color);
  border-color: #0198a9;
  color: #0198a9;
}

.container-xl {
  max-width: 1440px;
  margin: 0 auto;
}

/* Encabezado de página */

/*############################ CABECERA ####################*/

header {
  background-color: var(--primary-color);
}

#cabecera {
  min-height: 80px; /* para dar un margen de seguridad */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem; /* Espaciado horizontal, opcional */
}

#cabecera .logo {
  max-width: 250px;
}

/* Menú principal */
.nav-item {
  line-height: 3rem;
  margin: 0 0;
}
.nav-link:hover,
.nav-link:focus {
  color: #fff !important;
  transition: all 0.3s linear;
}
.nav-link {
  color: var(--white-color);
  letter-spacing: 0.5px;
  padding: 0 16px;
  font-size: 1rem;
}

/* Selector de idiomas */
.select-bennecke {
  font-size: 14px !important;
  transition: all 0.3s linear;
  display: block;
  padding: 15px !important;
  height: 40px !important;
  width: 100px;
  background-color: #fff !important;
  border: 1px solid #fff !important;
  color: #0198a9 !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  margin-right: 40px;
}
.select-bennecke:focus {
  border-color: none;
  box-shadow: none;
  border-radius: 0px !important;
}

select.select-bennecke {
  outline: none; /* Elimina el borde interior */
  border: none; /* Elimina el borde predeterminado */
  background: transparent; /* Opcional, para un fondo limpio */
}

.select-bennecke option {
  background: #f9f9f9;
  color: #0198a9 !important;
  padding: 15px !important;
}
option:first-child {
  color: #0198a9;
}

.navbar-nav {
  font-weight: bold;
  font-style: normal;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  text-align: center;
  word-spacing: 4px;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  #cabecera .logo {
    max-width: 200px;
  }
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: block;
  }
  .nav-mobile .navbar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--primary-color);
    padding: 0;
  }
  .nav-mobile .nav-item {
    padding: 0;
    margin: 0;
  }
  .nav-link {
    padding: 0 16px;
    color: var(--primary-color-dark);
  }
  .nav-link:hover,
  .nav-link:focus {
    color: var(--primary-color-light);
    background-color: #00717e;
  }

  .btn-close {
    color: var(--white-color);
    border: none;
    padding: 0 16px;
    margin-left: 20px;
  }

  .offcanvas-header {
    position: relative; /* Para poder posicionar elementos dentro de este contenedor */
  }

  .offcanvas-header .btn-close {
    position: absolute;
    top: 2rem;
    right: 5rem;
    color: var(--white-color);
    background-color: var(--primary-color-dark) !important;
  }

  .close-custom {
    position: absolute;
    top: 0.7rem;
    right: 4rem;
    background: none;
    color: var(--primary-color-dark); /* Tu verde deseado */
    font-size: 2.5rem; /* Ajusta a tu gusto */
    border: none;
    padding: 0.5rem;
    cursor: pointer;
  }

  .navbar-toggler {
    border: none; /* elimina el borde */
    outline: none; /* elimina el foco (si así lo deseas) */
    box-shadow: none; /* por si acaso hubiera sombra */
  }

  /* Hacer el ícono hamburguesa blanco */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M1 2.5h14M1 8h14M1 13.5h14'/%3E%3C/svg%3E");
  }
}

/*** ########################## HOME ##################***/
#hero {
  background-image: url(../../website/home/BG_HOME.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 70vh;
  display: flex;
  padding: 0px;
  justify-content: center;
}

.buscador label {
  color: var(--primary-color-dark) !important;
  font-weight: bold;
  font-size: 1.5rem;
}

#hero .buscador h1 {
  color: var(--white-color);
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

#vende-con-bennecke-home {
  margin: 0;
  padding: 0px;
  background-color: var(--primary-color-dark);
}

#vende-con-bennecke-home img {
  width: 100%; /* Ancho completo de la imagen */
  height: 600px; /* Altura completa del contenedor */
  object-fit: cover; /* La imagen mantiene sus proporciones */
  position: right;
  display: block; /* Elimina espacios adicionales */
}

#vende-con-bennecke-home h2 {
  color: var(--white-color);
  font-size: 4rem;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 4rem;
}

#vende-con-bennecke-home p {
  width: 60%;
  color: var(--white-color);
  font-size: 1.5rem;
  line-height: 2rem;
}

.homeblock01 {
  width: 100%;
  margin: auto;
  margin-top: 98px;
  padding: 0px;
  padding-top: 60px;
  padding-bottom: 60px;
  margin: 0px !important;
  background-color: var(--quartary-color);
}

.homeblock02 {
  margin-top: 40px !important;
}

.homeblock03 {
  width: 85%;
  margin: auto;
  margin-top: 18px;
  margin-bottom: 0px !important;
  padding: 0px !important;
}

.homeblock04 {
  width: 85%;
  margin: auto;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

.image-container-home {
  position: relative;
  width: 100%;
  max-width: 400px; /* Ajusta el tamaño si lo necesitas */
  margin: auto;
}

.image-container-home img {
  width: 100%;
  height: 220px;
  object-fit: cover;

  display: block;
}

.overlay-text-home {
  position: absolute;
  top: 50%;
  font-size: Raleway !important;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 50px;
  border-radius: 15px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional */
}

.text-w-image .container-fluid {
  padding: 0 6%;
}

#zonas {
  background-color: white;
}

#div-zonas h3 {
  color: white;
  font-size: 2rem;
  display: block;
  margin: 20px;
  font-weight: bold;
  text-align: center;
}

#div-zonas li {
  padding: 5px;
  width: 70%;
  margin: auto;
  text-align: center;
}

#div-zonas li a {
  color: white;
  padding: 5px;
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
  display: block;
  background-color: var(--primary-color-light);
}

#zones li:hover,
#zones li:focus {
  background: #0198a9;
}
#zones a {
  line-height: 2.6rem;
  color: #0198a9;
  display: block;
  padding: 0 20px;
  -webkit-transition: background-color 0.5s linear;
  -moz-transition: background-color 0.5s linear;
  -o-transition: background-color 0.5s linear;
  transition: background-color 0.5s linear;
}
#zones a:hover,
#zones a:focus {
  color: var(--white-color);
}

.bennecke-container {
  padding: 5% 6% !important;
}

.video-iframe {
  width: 640px;
  height: 360px;
}

.tipologiaApartamentos {
  position: relative; /* Establecemos la posición relativa para que los elementos secundarios se posicionen relativos a este contenedor */
  width: 100%;
  height: 300px; /* Ajusta la altura según tus necesidades */
  background-image: url(../../assets/images/tipologias/apartamentos.png);
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.darken {
  position: absolute; /* Establecemos la posición absoluta para superponerlo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Ajusta el valor alfa (último valor) según sea necesario */
}

.tipologiaApartamentos > h2 {
  color: white;
  font-size: 4rem;
  text-align: center;
  z-index: 2;
}

.sidebar-wrapper {
  padding: 0 15px;
  background-color: #f8f8f8;
  /* sticky after go to bottom**/
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  z-index: 1000;
  /* sticky after go to bottom**/
}

/*############ BUSCADOR VIVIENDAS ###############*/

.image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden; /* Asegura que la imagen no se salga del div */
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Estilos para contenedor de imágenes de propiedades */
.image-container.fixed-height {
  position: relative;
  width: 100%;
  height: 300px; /* Altura fija para todas las imágenes */
  overflow: hidden;
}

.image-container.fixed-height img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene la proporción y cubre todo el espacio */
  object-position: center; /* Centra la imagen */
}

.image-container .overlay-text {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 15px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  z-index: 1;
}

.image-container .overlay-green {
  background-color: var(--primary-color);
}

.image-container .overlay-red {
  background-color: var(--tertiary-color);
}


.overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  border-radius: 20px;
  font-size: 1rem;
  text-align: center;
  padding: 3px 8px 3px 8px;
}

.overlay-green {
  background-color: #0198a9;
}

.overlay-red {
  background-color: #e6797f;
}


.titulo_seccion {
  color: #0198a9;
  font-style: normal;
  font-family: "PT Sans", sans-serif;
}

.align-with-label {
  margin-top: calc(1.5rem + 8px); /* Altura aproximada del label */
}

select {
  padding: 0 15px;
  height: 2.4rem !important;
  color: #0198a9 !important;
}

#myTab {
  background-color: #f8f8f8;
}

#myTab .nav-link {
  color: #0198a9;
  border-radius: 0px !important;
}

#myTab .nav-link.active {
  color: var(--white-color);
  background-color: #0198a9;
}

.bg-zonas {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 480px;
}

.bg-zonas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Negro con 50% de opacidad */
  transition: background-color 0.3s ease; /* Transición suave */
  z-index: 1; /* Posicionar el overlay por debajo del contenido */
}

.bg-zonas:hover::before {
  background-color: rgba(
    0,
    0,
    0,
    0
  ); /* Fondo transparente al pasar el ratón */
}

.bg-zonas h2 {
  position: relative;
  z-index: 2; /* Posicionar el contenido por encima del overlay */
}
.bg-zonas .widget-circular {
  display: block;
  margin: auto;
  height: 70px;
  width: 70px;
  background: var(--primary-color);
  border-radius: 100px;
  color: var(--white-color);
  font-size: 12px;
  text-align: center;
  z-index: 99;
  position: Relative;
}
.bg-zonas .widget-circular strong {
  font-size: 16px;
}
.bg-zonas p {
  text-align: center;
  margin-top: -24px !important;
}

.card{
  border: none !important;
}

.card-img {
  height: 200px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.card img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto asegura que la imagen cubra el contenedor y mantenga las proporciones */
  object-position: center; /* Esto centra la imagen */
}



.imagenSlider {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.imagen-ajustadaSlider {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto asegura que la imagen cubra el contenedor y mantenga las proporciones */
  object-position: center; /* Esto centra la imagen */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más suave */
}

.imagenSlider:hover .imagen-ajustadaSlider {
  transform: scale(1.2);
}

/* Últimas viviendas */
#ultimas-viviendas .contenidoSlider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  padding: 20px;
}
#ultimas-viviendas .contenidoSlider h2 {
  position: absolute;
  width: 100%;
  z-index: 99 !important;
}
#ultimas-viviendas .contenidoPrecio {
  background-color: rgba(1, 152, 169, 0.8);
  position: absolute;
  right: 0;
  bottom: 10px;
  padding: 0 40px 16px 6px;
  z-index: 99;
}
#ultimas-viviendas .contenidoInmueble {
  padding: 4px;
  width: 70%;
  color: white;
  bottom: 0 !important;
}
#ultimas-viviendas .col-12.col-md-4.mb-3 {
  position: relative;
  overflow: hidden;
}
#ultimas-viviendas .col-12.col-md-4.mb-3:hover .contenidoInmueble {
  right: 0;
}
#ultimas-viviendas .col-12.col-md-4.mb-3:hover .contenidoPrecio {
  background: #fff;
  color: var(--primary-color);
}
#ultimas-viviendas .col-12.col-md-4.mb-3:hover .contenidoSlider h2 {
  padding: 0 0 10px 0;
  border-bottom: 1px solid #fff;
}
#ultimas-viviendas .col-12.col-md-4.mb-3:hover .tipologia {
  color: var(--primary-color);
}
#ultimas-viviendas .imagenSlider {
  position: relative;
  width: 100%;
  height: 100%;
}
#ultimas-viviendas .imagen-ajustadaSlider {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ultimas-viviendas .contenidoInmueble {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(1, 152, 169, 0.7);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: right 0.3s ease-in-out;
}
#ultimas-viviendas .contenidoInmueble span {
  display: block;
  margin-bottom: 10px;
  color: white;
  text-align: center;
}
#ultimas-viviendas .contenidoInmueble img {
  vertical-align: middle;
  margin-left: 5px;
}
#ultimas-viviendas .tipologia {
  font-size: 11px;
  text-align: start;
  color: var(--white-color);
  margin-top: 5px;
  position: absolute;
  bottom: 0px;
  left: -16px;
  z-index: 99;
}
.bg-dark-transparent {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 25px;
  padding: 20px;
}

.bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  padding: 20px;
}

ul.check-list {
  list-style-type: none;
  padding: 0;
}
ul.check-list li {
  position: relative;
  padding-left: 25px;
}
ul.check-list li:before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: green;
}
.flags-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.flag-icon {
  padding: 10px;
  font-size: 3em;
}
@media (min-width: 768px) {
  .flags-container {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* FOOTER */
footer .container-fluid {
  padding: 3% 6%;
  background-color: var(--primary-color);
  font-family: "PT Sans", sans-serif;
  font-style: normal;
}

footer a {
  color: var(--white-color);
}

footer ul li {
  font-weight: 700;
}

footer .container-fluid .col-md-3,
footer .container-fluid .col-sm-6 {
  margin-bottom: 40px;
}
footer .copyright {
  padding: 1% 6%;
  color: var(--white-color);
  background-color: var(--primary-color-dark);
}

footer .copyright a {
  color: var(--white-color);
}

@media screen and (min-width: 992px) {
  footer .container-fluid .row,
  footer .copyright .row {
    padding: 0 6%;
  }

  footer .copyright ul {
    margin-left: 0px;
    padding: 0px !important;
  }

  footer .copyright ul {
    margin-left: auto;
  }
}
footer h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white-color);
}
footer .social li {
  display: inline-flex;
  margin-right: 10px;
}
footer .social a {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  color: #7dc9d1 !important;
  border: 1px solid #7dc9d1;
  line-height: 40px;
  border-radius: 5px;
}

footer .copyright li {
  display: inline-flex;
  margin: 0 10px;
}

.kit-digital {
  padding: 30px 0;
}

.kit-digital img {
  width: 70%;
}

/* Contact */
#contact {
  background-color: var(--quartary-color);
  padding: 50px 0;
}
#contact h2 {
  margin-bottom: 40px;
  font-size: 4rem;
}
#contact h3 {
  font-size: 2rem;

  font-weight: 400;
  color: var(--primary-color);
}

#contact .form {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 3px 6px 10px #46464633;
  border-radius: 20px;
  opacity: 0.9;
  padding: 30px;
}
#contact .form input[type="text"],
#contact .form input[type="email"] {
  box-sizing: border-box;
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid #0198a9 !important;
  border-radius: 0px !important;
  padding: 0 15px;
  line-height: 2.4rem !important;
}
input[type="text"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(1, 152, 169, 0.25);
}
#contact .form textarea {
  height: 150px;
  min-height: 150px;
  max-height: 400px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #0198a9 !important;
  border-radius: 0px !important;
  padding: 0 15px;
  line-height: 2.4rem !important;
}
#contact .form input[type="text"]::placeholder,
#contact .form input[type="email"]::placeholder,
#contact .form textarea {
  color: #0198a9;
}
#contact .form-check {
  display: flex;
  padding-left: 0;
}
#contact .form .form-check-input {
  display: inline-block !important;
  position: relative;
  top: 0;
  width: 18px !important;
  height: 18px !important;
  margin: 0 14px 0 0 !important;
  border: 1px solid var(--gray-color);
  border-radius: 0px !important;
  background-color: #f9f9f9;
  line-height: 24px !important;
}
#contact .form .form-check-label {
  font-size: 0.9rem;
  color: var(--gray-color);
  font-weight: 400;
  font-style: normal;
}

#contact .form .form-check-input:checked {
  background-color: white; /* Color de fondo cuando está marcado */
  border-color: white; /* Color del borde cuando está marcado */
}

#contact .form .form-check-input:checked::after {
  content: "✔"; /* Simula la marca de check */
  font-size: 18px;
  color: var(--primary-color); /* Color de la marca de check */
  border: 1px solid var(--primary-color); /* Borde de la marca de check */
  display: inline-block;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 18px;
}

#contact .form .submit {
  width: auto;
  color: var(--white-color);
  background-color: var(--primary-color);
  padding: 0 65px !important;
  margin-top: 20px;
  border-radius: 0px !important;
  letter-spacing: 1px;
  line-height: 2.4rem;
  font-size: 16px;

  font-weight: 400;
  font-style: normal;
}

/* Google Maps */
#maps {
  padding: 0px !important;
  margin: 0px !important;
}
#maps .container-fluid {
  padding: 0 0;
  margin: 0 0 -6px 0;
}

.contacto-input {
  border: 1px solid #0198a9 !important;
  color: #000;
  background-color: var(--white-color);
  line-height: 2.4rem !important;
  border-radius: 0px !important;
}

.contacto-input::placeholder {
  color: #0198a9;
}

.contacto_button {
  border: none;
  padding: 0 35px;
  color: var(--white-color);
  background-color: #0198a9;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 2.4rem;
  height: 53px;
}

label.form-check-input:before {
  display: block;
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: 100%;
  font-family: "FontAwesome";
  content: "";
  line-height: 24px !important;
  text-align: center;
}

.formulario_buscador {
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.7);
}

.buscador-de-propiedades-banner {
  position: relative;
  height: 300px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.breadcrumb-item a {
  color: #f1f1f1;
}

.breadcrumb-item a:hover {
  color: #0198a9;
}

.breadcrumb-item.active {
  color: #f1f1f1;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff; /* Color del separador '/' */
}
.boton-buscador {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 54px;
  background-color: var(--primary-color);
  color: #ffffff;
  margin: 0 12%;
  border: none;
  border-radius: 0px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  padding: 0 50px 0 0;
  overflow: hidden;
}
.icono-lupa-wrapper {
  width: 54px;
  height: 54px;
  background-color: #016a77;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boton-buscador span {
  padding: 0 15px;
}
.fa-magnifying-glass {
  font-size: 24px;
}
/* Buscador de propiedades */
#buscador-de-propiedades {
  padding: 0 6%;
  background: #f8f8f8;
}
#buscador-de-propiedades .buscador-de-propiedades-wrapper {
  padding: 20px 6%;
}
#buscador-de-propiedades .form-select {
  border: none !important;
  border-radius: 0px !important;
}
.buscador-de-propiedades-wrapper label {
  color: var(--primary-color);
  margin-bottom: 6px;
}
.buscador-de-propiedades-wrapper .btn-bennecke {
  padding: 0 35px;
  color: var(--white-color);
  background-color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 2.4rem;
}
.buscador-de-propiedades-wrapper .btn-bennecke-red {
  padding: 0 35px;
  color: var(--white-color);
  background-color: var(--tertiary-color) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 2.4rem;
  border-radius: 0px;
}
.buscador-de-propiedades-wrapper .form-check {
  display: flex !important;
  flex-direction: row-reverse;
}
.buscador-de-propiedades-wrapper .form-check-input {
  height: 24px;
  width: 24px;
  border: 1px solid var(--primary-color);
  border-radius: 0px;
  float: unset !important;
  margin-left: 10px !important;
}
.buscador-de-propiedades-wrapper .form-check label {
  color: #808080;
  margin: 0;
  margin-top: 3px;
}
/* Lista de propiedades */
.lista-de-propiedades .row {
  margin-bottom: 50px !important;
}
.lista-de-propiedades h2 {
  font-size: 1.6rem !important;
  color: var(--primary-color) !important;
}
.lista-de-propiedades .reference {
  padding: 30px 0;
  font-weight: bold;
  font-size: 1.1rem !important;
}
.lista-de-propiedades .detail,
.lista-de-propiedades .detail-bottom {
  padding: 0 1.5rem !important;
}
.lista-de-propiedades .detail-bottom span {
  padding-right: 10px;
}

.lista-de-propiedades .price {
  font-size: 1.2rem !important;
  color: var(---secundary-color) !important;
}
.lista-de-propiedades .detail-bottom {
  font-size: 20px;
  color: #000;
}
.lista-de-propiedades-pagination .row {
  display: flex;
  align-items: center;
}
.lista-de-propiedades-pagination .pagination {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.lista-de-propiedades-pagination .pagination li {
  margin-right: 5px;
}
.lista-de-propiedades-pagination .pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: none;
  background-color: #f1f1f1;
  color: var(--primary-color);
  font-size: 20px;
}
.lista-de-propiedades-pagination .pagination li.active a {
  background-color: var(--gray-color);
  color: var(--white-color);
  border: none;
  border-radius: none;
}
.lista-de-propiedades-pagination #loadMoreButton {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.barra-lateral {
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
}
.barra-lateral h2 {
  color: var(--primary-color);
}
.barra-lateral #form_contacto input {
  padding: 0;
  line-height: 2.4rem;
  font-size: 18px;
  color: #808080;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid var(--primary-color);
}
.barra-lateral #form_contacto textarea {
  padding: 0;
  line-height: 2.4rem;
  font-size: 18px;
  color: #808080;
  border-radius: 0px;
  border: none;
  min-height: 200px;
}
.barra-lateral .a-bennecke-red {
  padding: 0 35px;
  color: var(--white-color);
  background-color: #e22d36;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 2.4rem;
  border-radius: 0px;
}
.barra-lateral .form-check-input {
  border: 1px solid #111 !important;
  min-height: 14px;
  height: 14px;
  width: 14px;
  line-height: 14x;
}
.barra-lateral .form-check-label {
  font-size: 14px;
}

.barra-lateral-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  z-index: 1000;
}

/* Página de la propiedad */

#propiedad h1 {
  color: var(--primary-color);
}

#propiedad .calculdora-ficha {
  max-width: 600px;
}
#propiedad .calculadora-ficha .col-md-6 {
  min-height: 300px;
  padding: 1.5rem;
}
#propiedad .calculadora {
  background: #f8f8f8;
  color: var(--primary-color);
}
#propiedad input {
  border: none;
  color: var(--primary-color);
  font-weight: 600;
}
#propiedad .calculadora .btn-bennecke {
  width: 100%;
  text-transform: uppercase;
}
#propiedad .descarga-de-ficha {
  display: flex;
  background: var(--primary-color);
  color: var(--white-color);
}
#propiedad .ficha-vivienda {
  margin-top: auto;
}
#propiedad .descarga-de-ficha span {
  font-size: 56px;
  line-height: 56px;
}

/*New styles*/
#busqueda {
  border: none;
}
#busqueda::placeholder {
  color: var(--primary-color);
}
#form_contacto input::placeholder,
textarea::placeholder {
  color: #808080;
}
.icon-property-color {
  color: #464646;
}
.reference {
  color: #464646;
}
.info-property {
  padding-top: 0px !important;
}
.tile-result-search {
  color: #006663 !important;
  font-size: 28px !important;
  margin-bottom: 15px;
}
.accept {
  color: #0198a9 !important;
}
.l-20 {
  margin-left: 20px;
  display: block;
  margin-bottom: 7px;
}
.l-m-t-20 {
  margin-top: 7px;
}

.bg-none {
  background-color: transparent !important;
  padding: 0;
}
.btn-menu {
  border: none;
  color: var(--white-color);
  font-size: 30px;
}
.d-block-menu {
  display: block;
}
.d-d-none {
  display: none;
}

.slick-slide {
  margin: 10px;
}
.slick-slide img {
  width: 100%;
  border: 2px solid #fff;
}
.ref-interna {
  display: block;
  color: #006663;
  font-size: 24px;
  font-weight: bold;
  margin-top: 15px;
}
.title-interna {
  display: block;
  color: #006663;
  font-size: 26px;
  margin-top: 15px;
}
.btn-default {
  background: #0198a9;
  color: var(--white-color);
  padding: 15px;
  border: none;
}
.ml-25 {
  margin-left: 25px;
}
.bg-gray {
  background: #f9f9f9;
}

.item {
  width: 47%;
  min-width: 47%;
  margin-right: 15px;
  aspect-ratio: 16/9;  /* o 4/3, según prefieras */
  overflow: hidden;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slider::-webkit-scrollbar {
  width: 20px;
}

.slider::-webkit-scrollbar-track {
  background-color: #f9f9f9;
  padding: 0px !important;
}

.slider::-webkit-scrollbar-thumb {
  background-color: #0198a9;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

.slider {
  overflow-x: scroll;
  display: flex;
  gap: 10px;
  padding-bottom: 20px;
  position: relative;
}

.slider.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.tag {
  position: absolute;
  background: #e22d36;
  top: 15px;
  left: 15px;
  padding: 7px 15px;
  color: var(--white-color);
  border-radius: 50px;
}

.information-p .nav-link {
  display: flex; /* Convierte el botón en un contenedor flex */
  align-items: center; /* Alinea el contenido (número y texto) verticalmente */
  gap: 10px; /* Añade un espacio entre el círculo y el texto */
}

.information-p .nav-link.active,
.information-p .show > .nav-link {
  background-color: transparent !important;
  font-size: 20px;
  display: flex;
  width: 100%;
}

.information-p .nav-link span {
  border: solid 1px #0198a9;
  color: #0198a9 !important;
  font-size: 20px;
  border-radius: 50%; /* Hace el elemento circular */
  width: 40px; /* Define un ancho fijo */
  height: 40px; /* Define un alto fijo igual al ancho */
  display: flex; /* Usamos flexbox para centrar */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  margin-right: 10px; /* Opcional: Espaciado con respecto al texto */
}

.information-p .nav-link.active span {
  background-color: var(--primary-color);
  color: var(--white-color) !important;
}

.information-p .nav-link.active label {
  font-weight: bold;
}

.information-p li label {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 300;
}

button.nav-link {
  display: flex;
  width: 100%;
}

.custom-button-white {
  display: inline-flex;
  align-items: center;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 5px 20px;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-button-white-rounded {
  display: inline-flex;
  align-items: center;
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 100px;
  padding: 5px 20px;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.bnk-button {

  background-color: var(--primary-color);
  color: white;
  border: none;
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.custom-button .arrow {
  display: inline-block;
  margin-left: 8px;
  transition: margin-left 0.3s ease;
}

.custom-button:hover .arrow {
  margin-left: 12px;
}

.information-p li {
  margin-bottom: 15px;
  display: flex;
  width: 100%;
}
.tap-content {
  border: none !important;
  min-height: 250px;
}
.list-propierty li {
  list-style: circle;
  font-size: 18px;
  padding: 5px 0px;
}
.list-propierty li::marker {
  color: #0198a9;
}

.range-wrap {
  position: relative;
  margin: 0 auto 3rem;
}
.range {
  width: 100%;
}
.bubble {
  color: #0198a9;
  padding: 0px -15px;
  position: absolute;

  margin-top: -32px;
  font-weight: bold;
}
.mb-25 {
  margin-bottom: 25px;
}
input.range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #0198a9 0% 100%);
  outline: none;
  border-radius: 15px;
  width: 100%;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
input.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background: #0198a9;
  border-radius: 50%;
}
.d-blok {
  display: block;
}
.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #0198a9;
  background-color: transparent;
}

.radio-item input[type="radio"]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #0198a9;
}

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-item label {
  color: #0198a9;
  font-weight: normal;
}
.text-radio {
  color: #0198a9;
}

.text-bennecke {
  color: #0198a9 !important;
  font-weight: bold;
}

.text-bennecke-breadcrumb {
  color: #0198a9;
  font-weight: bold;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #0198a9;
}

text-bennecke-breadcrumb a {
  color: #0198a9;
  font-weight: bold;
}

.top-35 {
  margin-top: 35px;
}
.bg-calculadora {
  background: #ebebeb;
  padding: 20px 15px;
}
.border-none {
  border: none;
}

.bg-dowload {
  background: #0198a9;
  padding: 20px 15px;
  position: relative;
}
.title-dowload {
  color: var(--white-color);
  font-size: 20px;
}
.ficha {
  position: absolute;
  bottom: 0;
  width: 80%;
  color: var(--white-color);
  font-size: 40px;
}

.thumbnail_slider {
  max-width: 100%;
  margin: 30px auto;
  position: relative;
}

.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 580px;
  overflow: hidden;
  transition: 0.2s;
  border-width: 2px !important;
  margin: 10px 4px;
}

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  box-shadow: 2px 3px 8px #000000a3;
}

.splide__slide img {
  width: auto;
  height: auto;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.splide--slide {
  width: 80%;
  margin: 0 auto;
  position: absolute;
  bottom: 12px;
  z-index: 100;
  display: block;
  left: 10%;
  background: var(--black-color);
  padding: 15px;
  border-radius: 20px;
}
.mobile {
  display: none;
}
.fixed {
  position: fixed;
  top: 20px;
  width: 27.66666%;
}

.vende_titulo {
  color: #ffffff;
  line-height: 3rem;
  font-size: 3rem;
  font-weight: 900;
}

.address {
  padding: 5% 6%;
}

.circulo-verde {
  -webkit-border-radius: 100px 10px 10px 10px;
  -khtml-border-radius: 100px 10px 10px 10px;
  -moz-border-radius: 100px 10px 10px 10px;
  border-radius: 100px 10px 10px 10px;
  -webkit-border-radius: 100px;
  -khtml-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 30px;
  color: var(--white-color);
  border: 2px solid #fff;
  text-align: center;
}

.circulo-verde .texto {
  font-size: 1.1rem; /* Tamaño del número */

  padding: 0px !important;
}

/* ###################################### BENNECKE HOY ###################### */

#bennecke-hoy {
  padding: 140px 0px;
  color: var(--gray-color);
}

#bennecke-hoy .grande {
  font-size: 4rem;
  font-weight: 400;
  line-height: 4rem;
}

#bennecke-hoy p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6rem;
}

#bennecke-hoy h2 {
  font-size: 4rem;
  line-height: 4.6rem;
}

/* ###################################### PAGE VENDER ###################### */

/* Vender con bennecke */
#vende-con-bennecke {
  background-image: url(../images/vende/vende-con-bennecke.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 5% 6%;
  color: var(--white-color);
  padding: 40px;
}

#form_contacto > input::placeholder {
  color: var(--white-color);
}

#vende-con-bennecke h1 {
  color: var(--white-color);
  font-size: 4rem;
  font-weight: 900;
  line-height: 4rem;
  margin-bottom: 40px;
  letter-spacing: 0.2rem;
}

#vende-con-bennecke h2 {
  color: var(--primary-color-dark);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 2rem;
}

#vende-con-bennecke p {
  color: var(--white-color);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2rem;
}

#bennecke-hoy-paises {
  margin: 0;
  padding: 0px;
  background-color: var(--primary-color-dark);
}

#bennecke-hoy-paises img {
  width: 100%; /* Ancho completo de la imagen */
  height: 600px; /* Altura completa del contenedor */
  object-fit: cover; /* La imagen mantiene sus proporciones */
  position: cover;
  display: block; /* Elimina espacios adicionales */
}

#bennecke-hoy-paises h2 {
  color: var(--white-color);
  font-size: 4rem;
  margin-bottom: 40px;
  font-weight: 900;
  line-height: 4rem;

  margin-left: 40px;
}

#valoracion {
  padding: 100px 0px;
}

#valoracion h2 {
  color: var(--gray-color);
  font-size: 3.5rem;
  margin-bottom: 40px;
  font-weight: 400;
  line-height: 4rem;
}

.listado-circulos li {
  padding: 10px 0;
}

.listado-circulos span {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gray-color);
}

.circulo {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 100px;
  width: 45px!important;
  height: 45px!important;
  display: flex;
  justify-content: center;
  font-size:1rem!important;
  align-items: center;
  margin-right: 20px;

  font-weight: 400;
  font-size: 2.5rem;
}

#red-comercial {
  background-image: url(../images/section_red.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5% 6%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#red-comercial h2 {
  color: var(--white-color);
  font-size: 4rem;
  margin-bottom: 40px;
  font-weight: 900;
  line-height: 4rem;
}

#red-comercial p {
  color: var(--white-color);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1rem;
  text-align: center;
}

#marketing-inmobiliario {
  padding: 100px 0px;
  background-color: var(--quartary-color);
}

#marketing-inmobiliario h2 {
  color: var(--primary-color);
  font-size: 3rem;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 4rem;
  text-align: center;
}

#marketing-inmobiliario .bloque__blanco {
  background-color: var(--white-color);
  margin-bottom: 40px;
  padding: 40px;
  display: flex;
  height: 400px;
  align-items: center;
  flex-direction: column;

  text-align: center;
}

.property-header-block {
  order: 1;
}
.property-slider-block {
  order: 2;
}

#marketing-inmobiliario .bloque__blanco img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  display: block;
  margin-bottom: 30px;
}

#marketing-inmobiliario .bloque__blanco p {
  color: var(--primary-color);
  margin-bottom: 40px;
  font-weight: 400;
  font-size: 1.5rem;
}

#portales {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--white-color);
  height: 400px;
}

#portales h2 {
  color: var(--primary-color);
  font-size: 3rem;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 4rem;
  text-align: center;
}

/* ######################################PAGE CONTACTO ###################### */

#contacto {
  background-color: var(--quartary-color);
}

#contacto h1 {
  color: var(--primary-color);
  font-size: 4rem;
  font-weight: 900;
  line-height: 4rem;
  letter-spacing: 0.2rem;
}

#contacto h2 {
  color: var(--primary-color-dark);
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  line-height: 2rem;
}

#contacto p {
  padding: 0px;
  color: var(--primary-color-dark);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1rem;
}

#contacto a {
  color: var(--primary-color-dark);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1rem;
}

#formulario-contacto {
  background-image: url(../images/contacto/formulario.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5% 6%;
}

#boletin {
  background-color: var(--primary-color-dark);
  padding: 5% 6%;
}

#boletin h2 {
  color: var(--white-color);
  font-size: 4rem;
  margin-bottom: 40px;
  font-weight: 900;
  line-height: 2rem;

  text-align: center;
}

#boletin p {
  color: var(--white-color);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1rem;

  text-align: center;
}

#boletin label {
  color: var(--white-color);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1rem;

  text-align: center;
}

#boletin a {
  color: var(--white-color);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 40px;
  line-height: 1rem;
  text-align: center;
}

.form {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 3px 6px 10px #46464633;
  border-radius: 20px;
  opacity: 0.9;
  padding: 30px;
}
.form input[type="text"],
.form input[type="email"] {
  box-sizing: border-box;
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid #0198a9 !important;
  border-radius: 0px !important;
  padding: 0 15px;
  line-height: 2.4rem !important;
}
input[type="text"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(1, 152, 169, 0.25);
}
.form textarea {
  height: 150px;
  min-height: 150px;
  max-height: 400px;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #0198a9 !important;
  border-radius: 0px !important;
  padding: 0 15px;
  line-height: 2.4rem !important;
}

/* ###################################### PAGE SOBRE NOSOTROS ###################### */

#sobre-nosotros {
  background-color: var(--quartary-color);
  color: var(--primary-color);

  padding: 0px;
  margin: 0px;
}

#sobre-nosotros .container-fluid {
  padding: 0px;
  margin: 0px;
}

#sobre-nosotros h1 {
  color: var(--primary-color);
  font-size: 6rem;
  font-weight: 900;
  line-height: 5rem;
  letter-spacing: 0.2rem;
}

#sobre-nosotros p {
  color: var(--primary-color-dark);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6rem;

  margin-top: 20px;
  width: 60%;
}

#sobre-nosotros a {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.6rem;

  text-transform: uppercase;
}

#sobre-nosotros a:hover {
  background-color: var(--primary-color-dark);
  color: var(--white-color);
}

#sobre-nosotros img {
  width: 100%; /* Ancho completo de la imagen */
  height: 600px; /* Altura completa del contenedor */
  object-fit: cover; /* La imagen mantiene sus proporciones */
  display: block; /* Elimina espacios adicionales */
}

#bloque_nosotros {
  background-color: var(--white-color);
}

#bloque_nosotros h2 {
  color: var(--primary-color);
  font-size: 3rem;
  margin-bottom: 40px;
  font-weight: 300;
  line-height: 4rem;
  text-align: center;
}

#bloque_nosotros .bloque__blanco {
  background-color: var(--quartary-color);
  margin-bottom: 40px;
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#bloque_nosotros .bloque__blanco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-bottom: 30px;
}

#bloque_nosotros .bloque__blanco p {
  color: var(--primary-color-dark);
  margin-bottom: 40px;
  font-weight: 700;
  font-size: 1.5rem;
}

#mision-vision {
  margin: 0;
  padding: 0px;
  background-color: var(--primary-color-dark);
}

#mision-vision img {
  width: 100%; /* Ancho completo de la imagen */
  height: 100%; /* Altura completa del contenedor */
  object-fit: cover; /* La imagen mantiene sus proporciones */
  position: cover;
  display: block; /* Elimina espacios adicionales */
}

#mision-vision h2 {
  color: var(--white-color);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 3rem;
}

#mision-vision p {
  width: 70%;
  color: var(--white-color);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2rem;
}

#bg-oficina {
  background-image: url(../images/nosotros/reunion.png);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 5% 6%;
  height: 800px;
}

#team h2 {
  color: var(--primary-color);
  margin-bottom: 60px;
  font-size: 2rem;
  font-weight: 300;
  line-height: 3rem;
}

/* Ajustes básicos */
.team-slider {
  position: relative;
}
.team-slide {
  text-align: center;
}
.team-slide img {
  max-width: 100%;
  height: auto;
}
.team-name {
  margin-top: 1rem;
  font-weight: 600;
}
.team-position {
  color: #666;
  font-size: 0.95rem;
}

/* Contenedor relativo, si aún no lo tienes */
.team-slider {
  position: relative;
}

/* Flechas en círculo */
.swiper-button-prev,
.swiper-button-next {
  width: 40px !important; /* Ajusta el tamaño del círculo */
  height: 40px !important;
  background-color: var(--white-color); /* Fondo del círculo */
  border-radius: 100% !important; /* Forma circular */
  border: 2px solid var(--primary-color); /* Borde tenue opcional */
  color: #333; /* Color del ícono */
  display: flex; /* Centrar el símbolo dentro */
  align-items: center;
  justify-content: center;
  z-index: 10; /* Asegurar que no quede detrás de nada */
  top: 60% !important; /* Centrar verticalmente (ajusta a tu gusto) */
  transform: translateY(-50%);
}

/* Ajusta la posición horizontal */
.swiper-button-prev {
  left: 10px; /* A 10px del borde izquierdo */
}
.swiper-button-next {
  right: 10px; /* A 10px del borde derecho */
}

/* Anulamos el contenido SVG por defecto y ponemos < ó > */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1rem !important; /* Tamaño del símbolo */
  font-weight: bold;
  text-align: center;
  color: var(--primary-color); /* Color de tu marca */
  font-family: inherit; /* O la fuente que desees */
  content: ""; /* Borramos la flecha original */
}

/* Aquí definimos el símbolo para la flecha "prev" */
.swiper-button-prev::after {
  content: ">" !important; /* Muestra la flecha apuntando a la izquierda */
}

/* Y para la flecha "next" */
.swiper-button-next::after {
  content: "<" !important; /* Flecha hacia la derecha */
}

/* Scrollbar nativo de Swiper */
.swiper-scrollbar {
  background-color: #eee; /* barra gris de fondo */
  height: 4px;
  border-radius: 2px;
  margin-top: 1rem; /* un poco de espacio con el contenido */
}
/* El "trozo" relleno que se mueve */
.swiper-scrollbar-drag {
  background-color: #00b5ad !important; /* color verde de tu marca */
  border-radius: 2px;
}