body{
  line-height: normal;
}

.header-nav-top .active{
  background-color: inherit  !important;
}
#header .header-top, 
#header .header-nav-features .header-nav-features-search-reveal-container {
  min-height: 20px;
}
#header .header-nav {
  min-height:auto;
}
.social-icons li:hover.social-icons-tiktok a {
  background: #000 !important;
}

.social-icons li:hover.social-icons-instagram a {
  background: #BD2690 !important;
}

b{
  font-weight: bold;
}

.mw-25{ max-width: 25%;}
.mw-30{ max-width: 30%;}
.mw-35{ max-width: 35%;}
.mw-40{ max-width: 40%;}
.mw-45{ max-width: 45%;}
.mw-50{ max-width: 50%;}

h1, h2, h3, h4, h4, h5, h6 {
  color:#303F3C;
}

/* Contenedor principal para el video y el overlay */
.video-container {
    position: relative;
    /* Esto es la clave para mantener la proporción 16:9 */
    aspect-ratio: 9 / 16; 
    width: 100%;
    margin-bottom: 20px; /* Espacio inferior para el caso de móviles */
}

/* El elemento de video debe ocupar todo el contenedor */
.video-container video {
    width: 100%;
    height: 100%;
    display: block; 
    object-fit: cover;
}

/* Estilo para el Overlay que contiene el ícono de "Play" */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}

/* Nuevos estilos para hacer el botón de Play circular y con color */
.play-overlay > span { /* Selector para el carácter de play dentro del overlay */
    background-color: #303f3cd6; /* Color de fondo azul Bootstrap primario, con algo de transparencia */
    border-radius: 50%; /* Hace que el fondo sea circular */
    width: 80px; /* Ancho del círculo */
    height: 80px; /* Alto del círculo */
    display: flex; /* Para centrar el ícono de texto dentro del círculo */
    justify-content: center;
    align-items: center;
    font-size: 3em; /* Tamaño del ícono de play */
    color: white; /* Color del ícono de play */
    transition: background-color 0.3s, transform 0.3s;
}

.play-overlay:hover > span {
    background-color: #303f3c; /* Color sólido al pasar el ratón */
    transform: scale(1.1); /* Efecto de escala al pasar el ratón */
}

.play-overlay:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ... (el resto de tu CSS para .video-container y .play-overlay sigue igual) ... */

/* Estilos para el SVG del ícono de "Play" */
.play-icon-svg {
    width: 80px;
    height: 80px;
    background-color: #303f3cd6; /* Fondo azul para el círculo */
    border-radius: 50%; /* Forma circular */
    padding: 15px; /* Espacio entre el borde del círculo y el triángulo */
    box-sizing: border-box; /* Para que el padding no aumente el tamaño total */
    fill: white; /* Color del triángulo de Play dentro del SVG */
    transition: background-color 0.3s, transform 0.3s;
}

.play-overlay:hover .play-icon-svg {
    background-color: #303f3cd6; /* Color sólido al pasar el ratón */
    transform: scale(1.1);
}

.whats-float {
  position: fixed;
  transform:translate(108px,0px);
  bottom:90px;
  right:0;
  width:150px;
  overflow: hidden;
  background-color: #25d366;
  color: #FFF;
  border-radius: 4px 0 0 4px;
  z-index: 10;
  transition: all 0.5s ease-in-out;
  vertical-align: middle
}
.whats-float a span {
  color: white;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 10px;
  position: absolute;
  line-height: 16px;
  font-weight: bolder;
}

.whats-float i {
  font-size: 30px;
  color: white;
  line-height: 30px;
  padding: 10px;
  transform:rotate(0deg);
  transition: all 0.5s ease-in-out;
  text-align:center;

}

.whats-float:hover {
  color: #FFFFFF;
  transform:translate(0px,0px);
}

.whats-float:hover i  {
  transform:rotate(360deg);
}


@media (max-width: 768px) { 
  .img-float-text {
    float:none !important;
    max-width: 100%;
  }

  #header.header-effect-shrink .header-container {
    min-height: auto;
  }  
}