.map-container h2,
.map-container h3 {
  color: #023766;
  font-size: 18px;
  font-weight: bold;
  margin-top: -30px;
}


.lead {
  font-size: 1.0rem;
  color: #023766;
  font-weight: bold;
}

#map {
  height: 500px;
  width: calc(100% - 320px);
  margin-top: 20px;
  border: 1px solid #ccc;
  float: left;
  margin-bottom: 30px;
}

.sede-info {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  max-height: 500px;
  padding: 20px;
  width: 300px;
  overflow-y: scroll; /* Enables vertical scrolling */
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */

}
.container::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.initial-message {
  font-size: 20px;
  color: #555;
}

.sede {
  display: none;
}

.sede p {
  font-size: 22px;
}

.sede h2 {
  margin-top: 0;
  font-size: 30px;
  text-align: center;
}

.sede p {
  margin: 0;
  font-size: 20px;

}

.sede h3 {
  margin-top: 10px;
  font-size: 23px;
}

.img-fluid {
  max-height: 300px;
}

@media (max-width: 500px) {
  #map {
    display: none; /* Oculta el mapa en dispositivos pequeños */
  }
  
  .sede-info {
    display: block; 
    position: relative;
    width: 90%;
    float: none;
  }
}

@media (max-width: 777px) {
  section.offices {
  margin-bottom: 0;
  }
  .map-container{
    display: flex;
    flex-flow: column;
  }
  #map {
    display: block;
    position: relative;
    width: 100%;
  }
  
  .sede-info {
    display: block; 
    position: relative;
    width: calc(100% - 40px);
    float: none;
  }
}