/* ==========================
======= Body style ========
=========================== */
 
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'army';
  letter-spacing: 2px;
  font-size: 1.5em;
  line-height: 48px;
  color: #4e4a4f;
  background-color: #FFF;
}

img {
  display: block;
  border: none;
  max-width: 100%;
  height: auto;
  font-size: 0;
  line-height: 0;
  padding: 0;
  margin: 0;
}

::-moz-selection {
  background: #4d4d4d;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #4d4d4d;
  color: #fff;
  text-shadow: none;
}

@font-face {
  font-family: 'Source Code Pro';
  font-family: 'Source Sans Pro', sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-family: 'army';
  src: url('../fonts/Army Buster.otf');
}

@font-face {
  font-family: 'Army Regular';
  src: url('../fonts/braeside.lumberboy-regular.otf');
}

@font-face {
  font-family: 'EleganTech';
  src: url('../fonts/EleganTech.ttf');
}
/* ===========================
========= Headings ========
=========================== */

.preloader> i {
  position: absolute;
  font-size: 36px;
  line-height: 36px;
  top: 50%;
  left: 50%;
  height: 36px;
  width: 36px;
  margin-top: -15px;
  margin-left: -15px;
  display: inline-block;
}

h1 {
  font-family: 'Source Code Pro';
  font-size: 30px;
  line-height: 32px;
  font-weight: 400;
}

h2 {
  font-family: 'army';
  font-size: 30px;
  line-height: 33px;
  font-weight: 400;
}

h3 {
  font-family: 'Source Code Pro';
  font-size: 24px;
  line-height: 26px;
  font-weight: 400;
}

h4 {
  font-family: 'Source Code Pro';
  font-size: 18px;
  line-height: 19px;
  font-weight: 400;
}

h5 {
  font-family: 'Source Code Pro';
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
}

h6 {
  font-family: 'Source Code Pro';
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
}
/* ===========================
========= Header ========
=========================== */

.header {
  position: relative;
  width: 100%;
}

#home-image img {
  height: 600px !important; 
  width: 100% !important
}
/* ===========================
/* ======= Menu Style ========
=========================== */

.header .navbar {
  position: absolute;
  left: 0;
  right: 0;
  transition-delay: 0s;
  transition-duration: 0.6s;
  transition-property: all;
  transition-timing-function: ease;
  font-family: sans-serif;
}

.header .navbar.stuck {
  z-index: 10000000000;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  padding-top: 0;
  background-color: #1341AA;
  min-height: 89px;
  top: 1px;
  box-shadow: 0 0 0.35px 0.35px rgba(255, 255, 255);
  /* Borde blanco brillante */
}

.header h1 {
  float: left;
  margin-top: 29px;
  transition-delay: 0s;
  transition-duration: 0.6s;
  transition-property: all;
  transition-timing-function: ease;
}

.header h1 img {
  transition-delay: 0s;
  transition-duration: 0.6s;
  transition-property: all;
  transition-timing-function: ease;
  filter: invert(1%);
}

.header h1 .logo2 {
  margin-top: -8px;
  display: none;
}

.header h1 .logo2.visible {
  display: block;
}

.header h1 .logo_hove {
  display: none
}

.header .navbar.stuck h1 .logo {
  display: none
}

.header .navbar.stuck h1 {
  margin-top: 20px
}

.header .navbar.stuck h1 .logo_hove {
  display: block
}

.header nav {
  float: right;
  position: relative;
}

.header nav #menu-button {
  filter: invert(100%);
  width: 28px;
  font-size: 0;
  float: right;
  height: 18px;
  position: relative;
  margin-top: 51px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.header .navbar.stuck nav #menu-button {
  margin-top: 33px;
}

.header nav #menu-button span {
  display: block;
  position: absolute;
  z-index: 60;
  height: 3px;
  width: 100%;
  background: #FFF;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.header .navbar.stuck nav #menu-button span {
  background: #010101;
}

.header nav #menu-button span:nth-child(1) {
  top: 0px;
}

.header nav #menu-button span:nth-child(2) {
  top: 7px;
}

.header nav #menu-button span:nth-child(3) {
  top: 14px;
}

.header nav #menu-button.open span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.header nav #menu-button.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.header nav #menu-button.open span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.header nav ul {
  display: none;
  position: absolute;
  right: 24.5%;
  top: 0;
  margin-top: 20px;
  transition-delay: 0s;
  transition-duration: 0.6s;
  transition-property: all;
  transition-timing-function: ease;
}

.header .navbar.stuck nav ul {
  margin-top: 20px;
}

.header nav ul> li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 15px;
  padding-left: 35px;
  font-weight: 600;
  letter-spacing: 2px;
  position: relative
}

.header nav ul> li> a {
  color: #000;
  line-height: 79px;
  display: block;
  font-size: 11.5px;
}

.header .navbar.stuck nav ul> li> a {
  color: #fff;
}

@media (max-width: 767px) {
  .header .navbar.stuck nav ul> li> a {
    color: #000;
  }
}

.header .navbar.stuck nav ul li ul {
  border-color: #FFF;
  top: 77px
}

.header .navbar.stuck nav ul li ul li a {
  color: #FFF;
}

.header nav ul> li ul li {
  padding-left: 0;
  font-size: 13px;
}

.header nav ul> li ul li a {
  line-height: 14px;
  padding-bottom: 24px
}

.header .angle-down {
  position: absolute;
  background-image: url(../images/down_arrow.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 13px;
  height: 103px;
  left: 50%;
  bottom: 50px;
  display: inline-block;
  margin-left: -12px;
  z-index: 999;
  -webkit-animation: bounce 2000ms infinite;
  -moz-animation: bounce 2000ms infinite;
  -o-animation: bounce 2000ms infinite;
  -ms-animation: bounce 2000ms infinite;
  animation: bounce 2000ms infinite;
}
/* ===========================
/*====== Logoes Silde ==
=========================== */

.logoes-pan {
  position: relative;
  padding-top: 48px;
  padding-bottom: 53px
}

.logoes-pan ul {
  margin: 0 auto;
  padding: 0 10%
}

.logoes-pan ul li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}

.logoes-pan ul li img {
  margin: 0 auto;
  display: block
}

.logoes-pan .owl-buttons div {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 16px;
  cursor: pointer;
  width: 68px;
  height: 13px;
  background-position: 0 0;
  background-repeat: no-repeat
}

.logoes-pan .owl-buttons div.owl-prev {
  left: 0;
  background-image: url(../images/prev.png)
}

.logoes-pan .owl-buttons div.owl-next {
  right: 0;
  background-image: url(../images/next.png)
}
/* ===========================
/*====== Pagos ==
=========================== */
/* Contenedor principal de #pagos */

#pagos .container {
  width: 70% !important;
  /* Ajuste de ancho */
  padding-top: 5%;
  padding-bottom: 5%;
  margin: 0 auto !important;
  text-align: center !important;
}
/* Encabezados principales */

#pagos h1 {
  color: rgba(164, 15, 0) !important;
  /* Color destacado */
  font-size: 26px !important;
  /* Tamaño moderado */
  font-weight: 700 !important;
  /* Mayor peso para destacar */
  font-family: "Poppins", sans-serif !important;
  /* Fuente profesional */
  margin: 15px 0 !important;
  /* Separación adecuada */
  line-height: 12px !important;
  /* Espaciado para evitar superposiciones */
}

#pagos h2 {
  color: rgba(164, 15, 0) !important;
  /* Color principal */
  font-size: 20px !important;
  /* Tamaño más compacto */
  font-weight: 600 !important;
  /* Peso intermedio */
  font-family: "Poppins", sans-serif !important;
  margin: 10px 0 !important;
  line-height: 28px !important;
}
/* Estilo para los párrafos */

#pagos p {
  color: #333 !important;
  /* Gris oscuro para mejor legibilidad */
  font-size: 14px !important;
  /* Tamaño compacto */
  font-weight: 400 !important;
  /* Peso regular */
  font-family: "Poppins", sans-serif !important;
  line-height: 19px !important;
  /* Interlineado amplio */
  margin: 10px 0 !important;
  /* Separación entre párrafos */
  letter-spacing: 1px;
}
/* Estilo para los iconos */

#pagos .icon-box {
  margin: 9px auto !important;
  /* Centramos cada caja */
  padding: 9px !important;
  /* Espaciado interno */
  background: #f9f9f9 !important;
  /* Fondo claro */
  border-radius: 8px !important;
  /* Bordes redondeados */
  display: flex !important;
  /* Alineación de íconos y texto */
  align-items: center !important;
  gap: 15px !important;
  /* Espaciado entre icono y texto */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  /* Sombra suave */
  text-align: left !important;
  /* Alineación del contenido a la izquierda */
}

#pagos .icon-box:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

#pagos .icon-box i {
  width: 3%;
}
/* Texto dentro de los icon-box */

#pagos .icon-box h4 {
  font-size: 16px !important;
  /* Tamaño moderado */
  font-weight: 600 !important;
  /* Resaltado */
  color: #21413c !important;
  margin: 0 !important;
}

#pagos .icon-box p {
  font-size: 14px !important;
  /* Texto más compacto */
  color: #555 !important;
  /* Gris suave */
  margin: 0 !important;
  /* Elimina márgenes innecesarios */
}
/* Ajuste para las imágenes */

#pagos img {
  width: 100% !important;
  /* Escala automática de las imágenes */
  margin: auto !important;
  /* Centrado automático */
  display: block !important;
  /* Bloque para alinear */
}
/* Responsividad en pantallas pequeñas */

@media screen and (max-width: 800px) {
  #pagos .container {
    width: 85% !important;
    /* Ajuste de ancho en dispositivos móviles */
    padding-top: 10% !important;
  }
  #pagos h1,
  #pagos h2 {
    font-size: 18px !important;
    /* Reducción del tamaño de texto */
    line-height: 26px !important;
    /* Ajuste de interlineado */
  }
}

.video-fluid {
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Bordes suavizados para un toque elegante */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  /* Sombra sutil para destacar */
  opacity: 0;
  /* Inicialmente invisible */
  transform: translateY(20px);
  /* Efecto de aparición */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.section-title[data-aos="fade-up"].aos-animate .video-fluid {
  opacity: 1;
  transform: translateY(0);
}
/* ===========================
========= Footer ========
=========================== */

.footer-text {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  color: #333;
}
.footer a {
  color: #003366;
  text-decoration: none;
}
.footer a:hover {
  color: #002244;
}

.footer .row {
  margin-left:20px;
  margin-right: 20px;
}

.footer {
  background-color: rgba(26, 26, 26, 0.3);
  padding-top: 20px;
  padding-bottom: 70px;
  color: #000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.footer address {
  font-size: 12px;
  line-height: 1.8;
  font-style: normal;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.footer address figure {
  margin-bottom: 10px;
}

.footer address figure img {
  width: 45%;
}

.footer address a {
  color: #000;
}

.footer address a:hover {
  color: rgb(8, 84, 215);
}

.footer p {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1px;
  margin-top: 20px;
}

.footer img {
  max-width: 100%;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-5,
.col-sm-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

.content-particles {
  position: relative;
  padding: 100px 0;
}

#particles-jsf {
  position: absolute;
  width: 100%;
  height: 30%;
  background-color: #fff;
  /* Fondo blanco */
}

.content-particlesf {
  position: relative;
}
/* ===========================
========= Experiencia de compra ========
=========================== */
/* Contenedor principal */

.text-container {
  display: flex;
  /* Usa flexbox para mantener los elementos en una línea */
  align-items: center;
  /* Asegura que el texto y la bandera estén alineados verticalmente */
  justify-content: center;
  /* Centra el contenido horizontalmente */
  text-align: center;
  /* Asegura la alineación centrada del texto */
}
/* Estilo del texto */

.serious-text {
  padding-left: 10vw;
  padding-right: 10vw;
  font-size: 26px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  /* Evita márgenes extra que causen separación */
  text-transform: none;
  line-height: 0.9;
  opacity: 0;
  /* Invisible inicialmente */
  transform: translateY(20px);
  /* Comienza abajo */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

@media (max-width: 500px) {
  .serious-text {
    font-size: 18px;
  }
}
/* Aparece el texto */

.serious-text.show {
  opacity: 1;
  transform: translateY(0);
  /* Se mueve a su posición original */
}
/* ===========================
========= Tarjetas Animadass ========
=========================== */

.dynamic-title {
  color: #f6f1da;
  /* Dorado */
  font-family: 'Montserrat', sans-serif;
  /* Fuente más fuerte y profesional */
  font-size: 1em;
  /* Tamaño de fuente neutral */
  letter-spacing: 0.5px;
  /* Espaciado ajustado */
  margin-bottom: 15px;
  transform: translateY(10px);
  /* Menos desplazamiento hacia abajo */
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
  text-shadow: 0 0 6px rgb(255, 255, 255), 0 0 8px rgb(255, 255, 255);
  /* Sombra más suave */
}
/* Efecto al pasar el cursor */

.card:hover .dynamic-title {
  opacity: 1;
  /* Aparece */
  visibility: visible;
  transform: translateY(0);
  /* Vuelve a su posición original */
  animation: shine 2s infinite;
  /* Efecto brillante */
}
/* Animación brillante */

@keyframes shine {
  0% {
    text-shadow: 0 0 5px rgba(173, 216, 230, 0.6), 0 0 10px rgba(173, 216, 230, 0.4);
    /* Azul claro suave */
  }
  50% {
    text-shadow: 0 0 10px rgba(173, 216, 230, 0.8), 0 0 15px rgba(173, 216, 230, 0.6);
    /* Azul claro más sutil */
  }
  100% {
    text-shadow: 0 0 5px rgba(173, 216, 230, 0.6), 0 0 10px rgba(173, 216, 230, 0.4);
    /* Azul claro suave */
  }
}

.contenedor {
  cursor: grab;
  display: flex;
  justify-content:  center;
  flex-wrap: wrap;
  margin-top: 50px;
}

.card {
  position: relative;
  width: 48%;
  height: 300px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  transition: 0.5s;
  margin: 1%;
  margin-bottom: 2%;
  display: inline-block;
}

.card .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.card .circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff !important;
  clip-path: circle(170px at center);
  transition: 0.5s;
}

.card:hover .circle:before {
  background-color: rgb(255, 255, 255);
  /* Blanco puro */
  filter: brightness(1.5);
  /* Hacerlo un 50% más brillante */
  ;
  clip-path: circle(51% at 99% 60%);
}

.card img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  pointer-events: none;
  transition: 0.5s;
  z-index: 1;
}

.card:hover img {
  top: 50%;
  left: 72%;
  height: 250px;
}

.card .content {
  position: absolute;
  padding: 20px 20px 20px 0px;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  width: 72%;
  margin-left: -6%;
}

.card:hover .content {
  opacity: 1;
  visibility: visible;
}

.card .content p {
  padding: 20px 20px 20px 0px;
  color: #fff;
  font-size: 0.48em;
  letter-spacing: 1pt;
  line-height: 1.3;
  width: 45%;
  font-weight: 200;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.card .content h2 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1em;
  line-height: 1em;
  margin-bottom: 5px;
  margin-left: -70px;
  font-family: "Army Regular"
}

.card .content a {
  position: relative;
  color: #000;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  margin-left: -70px;
}

.card:hover a {
  font-size: 20px;
  background: rgb(241, 243, 241);
  margin-left: -70px;
  top: 0;
}

.card a:hover {
  font-size: 20px;
  background: white;
  margin-left: -70px;
  top: 0;
}

.hyundaibhk {
  background: linear-gradient(135deg, rgb(67, 137, 255) 0%, rgb(33, 76, 139) 50%, rgb(27, 69, 154) 100%);
  transition: background 5s ease;
  display: grid;
  place-items: center;
  height: 45vh;
  background-size: 200% 200%;
  animation: gradientMoveHyundaibhk 5s ease infinite;
}

.hyundaibhk:hover {
  background: linear-gradient(135deg, rgb(67, 137, 255) 0%, rgb(33, 76, 139) 50%, rgb(27, 69, 154) 100%);
}

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

.kiabhk {
  background: linear-gradient(135deg, rgb(255, 153, 153) 0%, rgb(193, 28, 28) 50%, rgb(255, 99, 71) 100%);
  transition: background 5s ease;
  display: grid;
  place-items: center;
  height: 45vh;
  background-size: 200% 200%;
  animation: gradientMoveKiabhk 5s ease infinite;
}

.kiabhk:hover {
  background: linear-gradient(135deg, rgb(255, 153, 153) 0%, rgb(193, 28, 28) 50%, rgb(255, 99, 71) 100%);
}

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


.bhkButton {
  background-color: #003366;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  padding: 0px 15px 0px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  display: block;
  margin-top: 20px;
  margin-bottom: 10px;
}

.bhkButton:hover {
  background-color: #002244;
  /* Azul más oscuro al pasar el mouse */
}

/* ===========================
========= Imágenes Cuerpo BHK ========
=========================== */

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  /* Ajusta el ancho máximo según tu diseño */
  height: 200px;
  /* Ajusta la altura según tu diseño */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  top: 0;
  left: 100%;
  right: -100%;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.image-container:hover .overlay {
  left: 0;
  right: 0;
}

.overlay .text {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  /* Ejemplo de fuente empresarial */
  color: #fff;
  font-size: 14px;
  /* Tamaño de fuente más pequeño */
  line-height: 1.2;
  /* Interlineado más compacto */
  text-align: left;
  /* Alineación a la izquierda */
}

.overlay .text h3 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  /* Ejemplo de fuente empresarial */
  font-size: 18px;
  /* Tamaño de fuente del título */
  margin-bottom: 5px;
  /* Espacio inferior reducido */
}

.overlay .text p {
  font-size: 12px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
/* Media query para dispositivos móviles */

@media (max-width: 768px) {
  .image-container {
    max-width: 100%;
    height: auto;
  }
  .image-container img {
    height: auto;
  }
}
/* Media query para dispositivos de 769px en adelante */

@media (min-width: 769px) {
  .image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .image-container {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 500px) {
  .image-container .text p {
    font-size: 10px;
  }
  .image-container .text h3 {
    font-size: 14px;
  }
}
/* ===========================
========= Formulario Atención Cotización BHK ========
=========================== */

#contactForm p{
  font-size: 15px !important; 
  font-weight: 60 !important;
  letter-spacing: 0.33px;
}

.modalformbhk-modal {
  display: none;
  /* Ocultamos el modal por defecto */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Asegura que el contenido del modal se desplace */
  background-color: rgba(0, 0, 0, 0.6);
  /* Fondo semitransparente más oscuro */
  backdrop-filter: blur(6px);
  /* Efecto de desenfoque en el fondo */
  padding-top: 60px;
}
/* Contenido del modal */

.modalformbhk-modal-content {  
  transform: scale(0.85);
  /* Escala el formulario al 90% */
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  margin: auto;
  padding: 20px;
  border: 1px solid rgba(27, 96, 171, 0.557);
  /* Morado fluorescente tenue */
  width: 96%;
  max-width: 500px;
  /* Ajuste más estilizado */
  border-radius: 10px;
  /* Bordes redondeados */
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  /* Sombra sutil */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.modalformbhk-modal-content h2 {
  margin-top: -21px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  font-size: 27px;
}

.modalformbhk-modal-content p {
  line-height: 1;
  font-size: 18px;
  letter-spacing: 0.06em;
  margin-bottom: 15px;
}
/* Animación al abrir */

.modalformbhk-modal-content:focus-within {
  transform: scale(0.87);
  /* Sutil aumento al interactuar */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Botón de cierre */

.modalformbhk-close-btn {
  color: rgba(0, 0, 128, 0.8);
  /* Azul oscuro */
  font-size: 24px;
  /* Tamaño reducido */
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modalformbhk-close-btn:hover,
.modalformbhk-close-btn:focus {
  color: rgba(138, 43, 226, 1);
  /* Morado fluorescente al interactuar */
  text-decoration: none;
}
/* Botón para abrir el modal */

.modalformbhk-open-modal-button {
  padding: 10px 25px;
  background-color: rgba(0, 0, 128, 0.8);
  /* Azul oscuro */
  color: #ffffff;
  border: 1px solid rgba(43, 95, 226, 0.6);
  /* Borde morado fluorescente */
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.modalformbhk-open-modal-button:hover {
  background-color: rgba(43, 89, 226, 0.8);
  /* Morado fluorescente más intenso */
  transform: scale(1.05);
}
/* Elementos del formulario */

.modalformbhk-modal-content input[type="text"],
.modalformbhk-modal-content input[type="email"],
.modalformbhk-modal-content input[type="tel"],
.modalformbhk-modal-content input[type="file"],
.modalformbhk-modal-content textarea,
.modalformbhk-modal-content select {
  width: 100%;
  padding: 3px;
  margin: 8px 0;
  border: 1px solid rgba(52, 43, 226, 0.6);
  /* Bordes morado fluorescente */
  border-radius: 5px;
  font-size: 14px;
  color: #333;
  background: #f7f7f7;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modalformbhk-modal-content input:focus,
.modalformbhk-modal-content textarea:focus,
.modalformbhk-modal-content select:focus {
  border-color: rgba(0, 0, 128, 0.9);
  /* Azul oscuro al enfocarse */
  box-shadow: 0 0 6px rgba(0, 0, 128, 0.4);
}
/* Etiquetas y texto */

.modalformbhk-modal-content label {
  font-size: 17px;
  color: rgb(22, 22, 141);
  /* Azul oscuro tenue */
  display: block;
  margin-bottom: -9px;
  letter-spacing: 0em;
}

.modalformbhk-modal-content button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: rgba(17, 53, 152, 0.939);
  /* Morado fluorescente */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.modalformbhk-modal-content button[type="submit"]:hover {
  background: linear-gradient(135deg, rgba(17, 53, 152, 0.939), rgba(31, 81, 218, 0.8));
  /* De azul oscuro a un azul más profundo */
  transform: scale(1.05);
}


.social-icon:hover {
  color: #fff;
}

.facebook:hover {
  background-color: #3b5998;
}

.phone:hover {
  background-color: #25d366;
}

.whatsapp:hover {
  background-color: #25d366;
}

.paypal:hover {
  background-color: #0070ba;
}

.instagram:hover {
  background-color: #db18a4;
}
.social-icon i {
  font-size: 20px;
}
/* ===========================
========= WhatsApp Chat ========
=========================== */

.whatsappchat_container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: #25D366;
  padding: 6px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  /* Asegura que esté por encima de otros elementos */
}

.whatsappchat_link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  white-space: nowrap;
  /* Evita que el texto se divida en varias líneas */
}

.whatsappchat_link img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}


/*--------------------------------------------------------------
Política de privacidad
--------------------------------------------------------------*/
.privacy-policy-section {
  width: 85%;
  margin: auto;
  background: white;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Hace que la sección ocupe toda la altura de la pantalla */
  transition: background 0.6s ease-in-out; /* Transición para el fondo */
}

@media (max-width: 500px) {
.privacy-policy-section {
  margin-top: -3vh;
  width:  96%;
}
}

.content-wrapper {
  width: 70%; /* Ancho del contenido en un 70% */
  background-color: #ffffff; /* Fondo blanco para el contenido */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave para el contenedor */
  overflow-y: auto; /* Hace que el texto se pueda desplazar si es muy largo */
}

.title {
  font-size: 2rem; /* Tamaño reducido para un aspecto más empresarial */
  color: #000; /* Color negro para los encabezados */
  text-align: center;
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif; /* Tipografía empresarial */
  text-transform: uppercase;
}

.text {
  font-size: 0.9rem; /* Letra más pequeña para texto general */
  line-height: 1.7;
  color: #333; /* Tono más oscuro para un diseño profesional */
  margin-bottom: 20px;
  font-family: 'Lato', sans-serif; /* Tipografía empresarial */
}

.text strong {
  color: #000; /* Color negro para los textos destacados */
}

@media (max-width: 768px) {
  .content-wrapper {
    width: 90%; /* Ajustar el ancho para pantallas más pequeñas */
    padding: 20px;
  }

  .title {
    font-size: 1.5rem; /* Ajustar el tamaño del título en pantallas pequeñas */
  }

  .text {
    font-size: 0.8rem; /* Ajustar el tamaño del texto en pantallas pequeñas */
  }
}