/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  top: 0;
  z-index: 1000;
}

header .logo img {
  height: 40px;
}

header .nav-links {
  display: flex;
  gap: 15px;
}

header .nav-links a {
  width: 100%;
  text-align: center;   
  text-decoration: none;
  color: black;
  font-size: 16px;
  background-color: white;
  margin: 5px;
  padding: 10px;
  transition: 0.3s;
}

.nav-links a i {
  margin-right: 2px; /* Espacio entre el icono y el texto */
}


header .nav-links a:hover {
  background-color: #5dade2;
  color: white;
}

.menu-toggle {
  position: relative;
  width: 40px;
  height: 30px;
  cursor: pointer;
  display: none;
}

.menu-toggle input {
  display: none;
}

.menu-toggle span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: black;
  border-radius: 9px;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.menu-toggle span:nth-of-type(1) {
  top: 0;
  transform-origin: left center;
}

.menu-toggle span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.menu-toggle span:nth-of-type(3) {
  top: 100%;
  transform: translateY(-100%);
  transform-origin: left center;
}

.menu-toggle input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle input:checked ~ span:nth-of-type(2) {
  opacity: 0;
  width: 0;
}

.menu-toggle input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
}

/* Menú móvil */
.mobile-menu {
   z-index: 999;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-toggle input:checked ~ .mobile-menu {
  visibility: visible;
  opacity: 1;
}

.mobile-menu a {
  text-decoration: none;
  font-size: 20px;
  color: black;
}



/* Submenú debajo de 'Inicio' */
.submenu {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  width: 200px;
  z-index: 100;
}

.submenu a {
  text-decoration: none;
  font-size: 16px;
  color: black;
  padding: 10px;
  display: block;
  background-color: white;
  transition: background-color 0.3s ease;
}

/* Estilo de los iconos dentro del submenú */
.submenu a i {
  margin-right: 8px;            /* Espacio entre el icono y el texto */
}

.submenu a:hover {
  background-color: #5dade2;
  color: white;
}

/* Mostrar el submenú cuando se hace clic en "Inicio" */
nav .menu-item:focus + .submenu,
nav .menu-item:hover + .submenu {
  display: block;
}

/* Aseguramos que el contenido principal no tape el footer */
main {
  flex-grow: 1;
  margin-bottom: 80px; /* Ajusta para dar espacio al footer fijo */
}

@media (max-width: 768px) {
  header .nav-links {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    top: 0;
  }
}


























.banner {
            position: relative;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
        }

        .banner .image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://i.postimg.cc/5NKxNQWY/Clinica-bodelo-fachada.jpg') no-repeat center center/cover;
            z-index: -1;
        }

        .banner .image:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 0;
        }

        .banner-content {
            position: relative;
            z-index: 1;
        }

        .banner-content h1 {
            font-size: 2.5rem;
            color: #5dade2;
            margin: 0;
        }

        .banner-content p {
            font-size: 1rem;
            color: white;
        }

        .map-section {
            width: 100%;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .map-container {
            flex: 1;
            min-width: 300px;
        }

        .map-info {
            text-align: left;
            margin-bottom: 10px;
        }

        .map-info h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #5dade2;
        }

        .map-info .divider {
            width: 75%;
            height: 2px;
            background-color: #5dade2;
            margin: 10px 0;
          margin-bottom: 30px;
        }

        .map {
            border: none;
            border-radius: 10px;
            width: 100%;
            max-width: 800px;
            height: 250px;
        }

        .services {
            flex: 1;
            min-width: 300px;
           margin-top: 20px;
          margin-left: 10%;
        }

        .services ul {
            list-style: none;
            padding: 0;
        }

        .services li {
            display: flex;
            align-items: center;
            margin-bottom: 15px; /* Aumenta el espaciado entre los elementos */
            font-size: 1.5rem; /* Aumenta el tamaño de la fuente */
            color: #5dade2;
        }

        .services li i {
            margin-right: 15px; /* Aumenta el margen del ícono */
            font-size: 1.5rem; /* Aumenta el tamaño del ícono */
            color: #74C0FC;
        }

        .services li i.fa-circle-check {
            font-size: 1.5rem; /* Aumenta el tamaño del ícono de verificación */
            color: #74C0FC; /* Color azul claro */
        }
      
/* Estilo específico para dispositivos móviles */
@media (max-width: 768px) {
  
  .services {
    background-color: #5dade2; /* Fondo celeste */
    padding: 15px;
   min-width: 800px; /* Fondo ocupa todo el ancho */
    margin-left: -20px;
  }

  .services li i.fa-circle-check {
    color: white; /* Color blanco para íconos */
  }

  .services li {
    color: white; /* Texto blanco */
    margin-bottom: 20px; /* Espaciado entre los elementos */
    font-size: 1.3rem; /* Tamaño de fuente más pequeño */
  }
}


      
      
      
       .main-container {
      width: 100%;
      height: 550px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #85c1e9;
    }

    .separator {
      width: 80%;
      height: 2px;
      background-color: #85c1e9;
      margin: 0 auto 20px auto;
      
    }

    .cards-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      color: white;
    }

    .card {
      width: 280px;
      background-color: #85c1e9;
      color: white;
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card i {
      font-size: 40px;
      color: #007bff;
      margin-bottom: 10px;
      color: white;
    }

    .card h3 {
      font-size: 18px;
      margin: 10px 0;
    }

    .card p {
      font-size: 14px;
      color: white;
    }
     @media (max-width: 600px) {
      .main-container {
        padding: 20px;
      }

      .cards-container {
        gap: 15px;
      }

      .card {
        padding: 15px;
      }

      .card i {
        font-size: 30px;
      }

      .card h3 {
        font-size: 16px;
      }

      .card p {
        font-size: 13px;
      }
    }