/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1768451059
Updated: 2026-01-15 04:24:19

*/

.sfsiplus_footerLnk{
	display: none!important;
}

.sfsi_Sicons{
	padding-top: 50px!important;
}

blockquote {
    border-color: rgba(224,153,0,0.98);
}

#footer-widgets{
	display: none;
}

.mobile_menu_bar:before{
	color: #fff;
}


/*changing the Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}
/*rotating the Divi Menu icon*/
.mobile_menu_bar:before {
    transition: all .4s ease;
    transform: rotate(0deg);
    display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
    transition: all .4s ease;
    transform: rotate(90deg);
    display: block;
}
/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}
/*making the Divi Menu full width*/
#et_mobile_nav_menu .et_mobile_menu{
    min-width: 105vw;
     padding-top: 50%!important;
   margin-left: -12vw;
    padding-bottom: 100vh!important;
	background-color: rgb(255 152 0 / 94%)!important;
    text-align: center;
	top: 0;
}

#mobile_menu li a{
	font-size: 18px!important;
}

.mobile_menu_bar{
	z-index: 999999999;
}
/*removing the line from the menu items and adding line height*/
.et_mobile_menu li a {
padding:10px 10px!important;
border-bottom: none!important;
}
/*removing padding of the social media icons*/
.et_mobile_menu li li {
    padding-left:0%!important;
}

/* Contenedor principal: alinea los puntos horizontalmente */
.timeline-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 20px;
  background-color: #f4f4f4;
  position: relative;
}

/* Línea conectora (opcional) */
.timeline-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #ccc;
  z-index: 0;
}

/* Cada punto del año */
.timeline-point {
  position: relative; /* Necesario para posicionar la info-box */
  z-index: 1;
  background: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.timeline-point:hover {
  transform: scale(1.1); /* Efecto de agrandar al pasar el mouse */
  background: #007bff;
}

/* La caja de información (oculta por defecto) */
.info-box {
  position: absolute;
  bottom: 60px; /* Aparece encima del punto */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background: #fff;
  color: #333;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
  /* Estado inicial: invisible */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  pointer-events: none; /* Evita clicks accidentales cuando está oculto */
}

/* La flechita de abajo de la caja (opcional) */
.info-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Mágia: Mostrar al hacer Hover */
.timeline-point:hover .info-box {
  opacity: 1;
  visibility: visible;
  bottom: 70px; /* Pequeño movimiento hacia arriba para suavidad */
  pointer-events: auto;
}

@media (max-width: 768px) {
  /* 1. Contenedor principal */
  .timeline-container {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    /* CAMBIO: Reducimos el espacio a la izquierda para mover los círculos */
    padding-left: 15px; 
  }

  /* 2. La línea conectora vertical */
  .timeline-container::before {
    width: 2px;
    height: 100%;
    top: 0;
    /* CAMBIO: Ajustamos la posición para centrarla con los nuevos círculos */
    /* El cálculo es: padding-left (15px) + mitad del ancho del punto (25px) = 40px */
    left: 40px; 
    /* CAMBIO IMPORTANTE: Esto pone la línea DETRÁS de los puntos */
    z-index: 0;
  }

  /* 3. Los puntos (círculos) */
  .timeline-point {
    margin-bottom: 40px;
    /* Aseguramos que los puntos estén en una capa superior a la línea */
    z-index: 1; 
  }

  /* 4. La caja de información (al hacer tap) */
  .timeline-point:hover .info-box {
    bottom: auto;
    top: -10px;
    left: 60px;
    transform: none;
    width: 200px;
  }
	
	.info-box h3{
		font-size: 14px;
	}

  /* 5. La flechita de la caja */
  .info-box::after {
    top: 15px;
    left: -10px;
    border-color: transparent #fff transparent transparent;
  }
}