body{
  color: #4A4A4A;
}

h3{
  font-size: 22px;
}



/* --- Default (Mobile) Styles --- */
.banner-section {
  background-color: #F4F5EB;
  border-radius: 30px;
  /* You can add other mobile-specific styles here */
}

/* --- Desktop Styles --- */
/* This rule only applies to screens 768px or wider */
@media (min-width: 768px) {
  .banner-section {
    background: url('https://image.hola.banregio.com/lib/fe4215707564057b751673/m/1/a84ac943-139a-4397-9d1c-cf3cc9dcbce2.png') no-repeat center center / cover;
    min-height: 380px; 
    display: flex; /* Para centrar el contenido verticalmente si es necesario */
    border-radius: 30px;
  }
}

/* --- Estilos de acordion --- */

/* Contenedor  */
.custom-accordion .accordion-item {
  background-color: #F4F5EB;
  border: none;
  border-radius: 20px;
  margin-bottom: 1rem;
  padding: 8px;
}

/* Titulo clicleable */
.custom-accordion .accordion-button {
  background-color: transparent;
  color: #4A4A4A;
  font-weight: bold;
  font-size: 1.25rem;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Remover los iconos predeterminados de boostrap */
.custom-accordion .accordion-button::after {
  display: none;
}

/* Estilo al circulo naranja con flecha */
.toggle-icon-wrapper {
  background-color: #FF4D00;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 1rem;
  
  /* Centrar la flecha en el circulo */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* icon default */
.icon-expanded {
  display: none;
}

/* Cuando el acordion esta ABIERTO se muestra la flecha hacia arriba y se oculta
 al cerrarlo */
.custom-accordion .accordion-button:not(.collapsed) .icon-expanded {
  display: inline-block;
}

.custom-accordion .accordion-button:not(.collapsed) .icon-collapsed {
  display: none;
}


/* Location  */
.location-list {
  list-style: none;
  padding-left: 0;
}

.location-list li {
  padding-left: 15px;
  position: relative;
  margin-bottom: 1rem;
}

/* bullet location */
.location-list li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 5px;
  width: 6px;
  height: 6px;
  background-color: #4A4A4A;
  border-radius: 50%;
}

.location-list li p {
  margin-bottom: 0;
  color: #4A4A4A;
}

.location-list li strong {
  color: #4A4A4A;
}

.location-link {
  color: #FF4D00;
  text-decoration: underline;
  font-weight: 500;
}

.location-link:hover {
  color: #cc3e00;
}

.card {
  background-color: #F4F5EB;
  border-radius: 30px;
  border: none;
}

/* List */
.list {
  list-style: none;
  padding-left: 0;
}

.list li {
  padding-left: 15px;
  position: relative;
  margin-bottom: 0.1rem;
}

/* bullet */
.list li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 5px;
  width: 6px;
  height: 6px;
  background-color: #4A4A4A;
  border-radius: 50%;
}

.list li p {
  margin-bottom: 0;
  color: #4A4A4A;
}

.list li strong {
  color: #4A4A4A;
}

/* Icons Footer */

  .social-icon {
    width: 20px;
  }
  
  @media (min-width: 768px) {
    .social-icon {
      width: 40px;
    }
  }