body {
 
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  font-family:"Poppins", serif;
  font-weight: 400;
  font-style: normal;
  background-color: #eef7ff;
  
}

h1, h2, h3 {
  color: #0056b3;
}

/* Header */
header {
  background: #ffffff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

header.sticky {
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav ul li a.active {
  color: #0056b3; /* Color de enlace activo */
  font-weight: bold;
  font-size: 20px;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  font-weight: bold;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

header nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  transition: color 0.3s ease;
  font-size: 18px;
}

header nav ul li a:hover {
  color: #0056b3;
}

/* General Hero Styling */

.hero {
  position: relative;
  background: #0056b3; /* Fondo azul */
  color: #ffffff;
  height: 40vh; /* Altura reducida */
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}


/* Contenedor del Texto */
.hero-container {
  z-index: 2;
  max-width: 50%; /* Ocupa el 50% a la izquierda */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-text h1 {
  font-size: 50px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
  margin-left: 150px;
  animation: fadeIn 1s ease-in-out;
}

.hero-text p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;
  margin-left: 150px;
}

.hero-btn {
  display: inline-block;
  background-color: #28a745;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  padding: 15px 25px;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative; /* Asegura que esté en el flujo del diseño */
  z-index: 10; /* Asegura que esté encima de otros elementos */
  cursor: pointer;
  align-items: center;

}

.hero-btn:hover {
  background-color: #1e7e34;
  transform: translateY(-2px);
}
  
button:hover, a:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}


/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* Comienza ligeramente desplazada */
  animation: fadeIn 1.5s ease-in-out forwards; /* Duración de 1.5 segundos */
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0); /* Regresa a su posición inicial */
  }
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Se ajusta al contenedor */

}

@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
  }

  .hero-image {
    margin-top: 20px;
  }
}

/* Datos Impactantes */
.impact-data {
  background-color: #eef7ff;
  padding: 40px 20px;
  text-align: center;
}

.data-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.data-item {
  flex: 1 1 200px;
  text-align: center;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.data-item .number {
  font-size: 48px;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 10px;
}

.data-item p {
  font-size: 18px;
  color: #555;
}

.number::after {
  content: "+"; /* Agregar el símbolo "+" */
  font-size: 0.8em; /* Tamaño del símbolo (ajústalo según el diseño) */
  color: #0056b3; /* Color del símbolo */
  margin-left: 5px; /* Espacio entre el número y el símbolo */
  font-weight: bold; /* Asegura que el símbolo sea visible */
}

/* sobre mi */

.about {
  padding: 30px 20px;
  background-color: #eef7ff;

}

.about h2 {
  font-size: 36px;
  color: #0056b3;
  margin-bottom: 30px;
  text-align: center;
}

.about-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.about-image {
  flex: 0 0 35%; /* Ocupa el 35% del ancho */
  text-align: center;
  margin-right: 30px;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.about-content {
  flex: 0 0 65%; /* Ocupa el 65% del ancho */
  text-align: left; /* Alinea el texto a la izquierda */
  padding-right: 30px;
}

.about-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #333;
  text-align: left; /* Asegura que cada párrafo esté alineado a la izquierda */
}

.about-content strong {
  color: #0056b3;
}

.about-quote {
  font-style: italic;
  font-size: 18px;
  padding-left: 20px;
  border-left: 4px solid #0056b3; /* Línea decorativa */
  color: #333;
}

/* Services Section */
.services, .resources, .about, .blog, .contact {
  padding: 30px 20px;
  text-align: center;
  background-color: #eef7ff;
  

}
.services h2{
  font-size: 36px;
  color: #0056b3;
  margin-bottom: 30px;
  text-align: center;
}

/* Servicio Cards */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  text-align: center;
}

.service-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.service-card i {
  font-size: 48px;
  color: #0056b3;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

.service-card i:hover {
  color: #ff0000; /* Cambia de color al pasar el cursor */
}

.service-card h3 {
  font-size: 20px;
  margin: 10px 0;
  color: #0056b3;
}

.service-card p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* Botones en la sección de Servicios */
.service-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background-color: #28a745;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-btn:hover {
  background-color: #218838;
  transform: scale(1.05);
}

.service-btn:active {
  transform: scale(0.95);
}

/* Metodología */
.methodology {
  padding: 60px 20px;
  text-align: center;
}

.methodology-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.methodology-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: 30%;
}

.methodology-card i {
  font-size: 48px;
  color: #0056b3;
  margin-bottom: 15px;
}

.methodology-card:hover {
  transform: scale(1.05);
}

/* Precios */
.pricing {
  padding: 60px 20px;
  text-align: center;
}

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

.pricing-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  width: 30%;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: bold;
  color: #28a745;
  margin: 10px 0;
}

.cta-btn {
  background-color: #28a745;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: #1e7e34;
}

/* CTA */
.cta {
  padding: 40px 20px;
  background: #0056b3;
  color: #ffffff;
  text-align: center;
}



/* Recursos Section index */
.resources {
  padding: 40px 20px;
  text-align: center;
  background-color: #eef7ff;
}

.resources h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #0056b3;
}

.resources p {
  font-size: 18px;
  margin-bottom: 40px;
  color: #666;
}

.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.resource-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.resource-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.resource-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.resource-card h3 {
  font-size: 22px;
  margin: 15px 0;
  color: #0056b3;
}

.resource-card p {
  font-size: 16px;
  color: #555;
  padding: 0 10px;
  margin-bottom: 20px;
}

.resource-btn {
  display: inline-block;
  background-color: #28a745;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-bottom: 20px;
}

.resource-btn:hover {
  background-color: #218838;
}
ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

/* Estilo exclusivo para los enlaces de descarga en la sección de recursos */
/* Recursos de Gramática */

/* Filtro de Búsqueda */

.filter-bar {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 40px;
}

#search-bar {
  width: 80%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.search-icon {
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
}
/* recursos grammar */

/* Header index nuevo*/
.navbar-1 {
  position: fixed;
  top: 20px;
  background: white;
  width: 90%; /* Ocupa el 90% del ancho */
  padding: 10px 30px; /* Menor padding arriba y abajo */
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
}

/* 📱 Mejora la responsividad del Navbar */
@media (max-width: 768px) {
  .navbar-1 {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px; /* Reduce el espacio interno de la barra */
    height: auto; /* La barra se ajusta automáticamente al contenido */

  }
  .navbar-1 h1 {
    font-size: 18px; /* Reducimos el tamaño del texto */
    white-space: nowrap; /* Evita que se divida en dos líneas */
    overflow: hidden; /* Asegura que el texto no desborde */
    text-overflow: ellipsis; /* Si el texto es muy largo, agrega "..." */
  }

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  right: 20px; /* Ajusta la posición en móvil */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001; /* Asegura que esté encima de otros elementos */
  color: #333; /* Ajusta el color del icono */
}
 
  .navbar-1 ul {
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
  }

  .navbar-1 ul li {
    width: 100%;
  }

  .navbar-1 ul li a {
    display: block;
    padding: 10px;
    font-size: 18px;
    text-align: center;
  }
 
}

/* 📱 Hero Section: Centrar y reducir tamaño de texto en móviles */
@media (max-width: 768px) {
  .hero-1 {
    height: auto;
    padding: 50px 10px;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 100px;
  }

  .hero-content-1 h2 {
    font-size: 18px; 
    margin-top: 150px;
    width: 90%;
    text-align: center;
    padding-bottom: 25px;
    line-height: 1.3;
    padding-top: 120px;
   
  }

  .hero-content-1 p {
    font-size: 14px;
    width: 95%;
    margin-bottom: 15px; /* Espaciado para mejorar legibilidad */
    text-align: center;
  }


  .hero-content-blog h2 {
    font-size: 20px; 
    margin-top: 50px;
    width: 90%;
    text-align: center;
    padding-bottom: 25px;
    line-height: 1.3;
  }

  .hero-content-blog p {
    font-size: 14px;
    width: 95%;
    margin-bottom: 15px; /* Espaciado para mejorar legibilidad */
    text-align: center;
  }
  .hero-btn {
    font-size: 22px;
    padding: 15px 25px;
    margin-bottom: 70px;
   
  }
}

@media (max-width: 768px) {
  section {
    margin-bottom: 25px; /* Reducimos el margen entre secciones */
    padding-bottom: 20px;
  }
}

/* 📱 Ajustar los cards de servicios */
@media (max-width: 768px) {
  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-card {
    width: 95%;
  }
}

/* 📱 Ajustar la sección "Sobre mí" */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-image {
    width: 80%;
    margin: 0 auto;
  }

  .about-content {
    padding: 0;
  }
}

/* 📱 Testimonios */
@media (max-width: 768px) {
  .testimonials-slider {
    flex-direction: column;
    align-items: center;
  }

  .testimonial-card {
    max-width: 90%;
  }
}

/* menu hamburguesa */
/* Estilos generales del menú */
.nav-menu {
  display: flex;
  gap: 20px;
}

/* Ocultar el botón hamburguesa en pantallas grandes */
.menu-toggle {
  display: none;
}

/* Mostrar el botón hamburguesa solo en móviles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #0056b3;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: white;
    width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu ul {
    flex-direction: column;
    padding: 0;
    list-style: none;
  }

  .nav-menu ul li {
    text-align: center;
    padding: 10px 0;
  }

  .nav-menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .contact form input,
  .contact form textarea {
    width: 100%; /* Ocupar todo el ancho disponible */
    text-align: left;
    margin: 0 auto; /* Centrar los campos */
    display: block; /* Asegurar que no haya desplazamientos */
  }
}

@media (max-width: 768px) {
  .whatsapp-float {
    right: 20px; /* Reducimos el espacio a la derecha */
  }

  #scroll-to-top {
    right: 20px; /* También reducimos espacio para que no se salga */
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    margin-right: 15px; /* Espacio entre el borde y el icono */
  }
}


.navbar-1 h1 {
  font-size: 10px;
  color: #0056b3;
  margin: 0; /* Asegura que no haya margen adicional */
  text-align: left; /* Alinea el texto a la izquierda */
}
.navbar-1 ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar-1 ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.navbar-1 ul li a:hover,
.navbar-1 ul li a.active {
  background: #0056b3;
  color: white;
  font-weight: bold;
}

.hero-1 {
  position: relative;
  width: 100%;
  height: 65vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/studentonline.jpg') no-repeat center center/cover;
  opacity: 0.1; /* Imagen apenas visible */
  z-index: 1;
}

.hero-1 .h1-1 {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}
.hero-content-1 h2{
  font-size: 60px; /* Texto grande */
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 120px;
  margin-bottom: 0;
}

.hero-content-1 h2 span {
  color: yellow;
  font-style: italic;
}

.hero-content-1 p {
  font-size: 24px;
  margin: 10px auto 20px;
  z-index: 2;
  text-align: center; /* Centra el párrafo */
  width: 70%; /* Limita el ancho */
  margin-bottom: 50px;
  
}

.cta-btn-1 {
  display: inline-block;
  background: #28a745;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  z-index: 2;
  text-align: center;
}

a.cta-btn-1:hover {
  background: #1e7e34; /* Prioridad absoluta */
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Agrega sombra */
}

/* Header grammar*/
.navbar-grammar {
  position: absolute;
  top: 20px;
  background: white;
  width: 90%; /* Ocupa el 90% del ancho */
  padding: 10px 30px; /* Menor padding arriba y abajo */
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
}

.navbar-grammar h1 {
  font-size: 10px;
  color: #0056b3;
  margin: 0; /* Asegura que no haya margen adicional */
  text-align: left; /* Alinea el texto a la izquierda */

}

.navbar-grammar ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar-grammar ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.navbar-grammar ul li a:hover,
.navbar-grammar ul li a.active {
  background: #0056b3;
  color: white;
}

.resource-level h2 {
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
}

.title-resource {
  font-size: 30px;
  text-align: center;
}

.resource-item {
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 10px auto;
  background: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 10px;
}

.resource-item h3 {
  font-size: 16px;
  margin: 10px 0;
}

.resource-item .level-tag {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.resource-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.resource-item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}

#search-bar {
  width: 100%;
  padding: 12px 40px 12px 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #666;
}

.hero-grammar {
  position: relative;
  width: 100%;
  height: 50vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-grammar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/layla.jpg') no-repeat center center/cover;
  opacity: 0.05; /* Imagen apenas visible */
  z-index: 1;
}

.hero-grammar .h1-grammar {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}
.hero-content-grammar h2{
  font-size: 60px; /* Texto grande */
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 100px;
  margin-bottom: 0;
}

.hero-content-grammar h2 span {
  color: yellow;
  font-style: italic;
}

.hero-content-grammar p {
  font-size: 24px;
  margin: 10px auto 20px;
  z-index: 2;
  text-align: center; /* Centra el párrafo */
  width: 70%; /* Limita el ancho */
  margin-bottom: 50px;
}

.cta-btn-grammar {
  display: inline-block;
  background: #28a745;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  z-index: 2;
  text-align: center;
}

a.cta-btn-grammar:hover {
  background: #1e7e34 !important; /* Prioridad absoluta */
  transform: scale(1.05);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Agrega sombra */
}

/* Motivational Text */
.motivational-text {
  text-align: center;
  margin: 20px auto;
  font-size: 16px;
  color: #555;
}

.resource-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.resource-item {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.resource-item img {
  width: 80px; /* Ajusta el tamaño al necesario */
  height: 80px; /* Mantén proporciones cuadradas */
  object-fit: contain; /* Asegura que la imagen se vea completa */
  border-radius: 8px;
  margin: 0 auto 15px auto; /* Centra la imagen */
  display: block;
}

.resource-item h3 {
  font-size: 18px;
  margin: 10px 0;
  color: #333;
}

.resource-item .free-tag {
  display: inline-block;
  background-color: #28a745;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.download-btn {
  display: inline-block;
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.download-btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

@media (max-width: 768px) {
  .resource-columns {
    grid-template-columns: 1fr; /* Una columna en móviles */
  }
}

/* Test de Nivel nuevo */

/* */
.test-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;

}

.test-container h2 {
  font-size: 36px;
  margin-bottom: 40px;
  color: #0056b3;
}

#question-title {
  font-size: 20px;
  margin-bottom: 20px;
}

#options {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

#options li {
  margin-bottom: 10px;
}

label {
  cursor: pointer;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

button:disabled {
  background-color: #ccc;
}

button:hover:not(:disabled) {
  background-color: #218838;
}

.hidden {
  display: none;
}

/* Reglas del Test */
.test-rules {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}
.test-rules strong {
  color: #0056b3;
  font-weight: bold;
}


/* Blog Section */
.blog {
  padding: 60px 20px;
  text-align: center;
  background-color: #eef7ff;
}

.blog h2 {
  font-size: 36px;
  margin-bottom: 40px;
  color: #0056b3;
}

.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.blog-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover img {
  transform: scale(1.1);
}

.blog-content {
  padding: 20px;
}

.blog-content h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: #0056b3;
}

.blog-content p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}

.blog-content .read-more {
  display: inline-block;
  text-decoration: none;
  background-color: #28a745;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
  font-weight: bold;
  text-align: center;
}

.blog-content .read-more:hover {
  background-color: #218838;
}

.blog-card:hover .read-more {
  background-color: #0056b3;
  color: white;
  transform: translateY(-5px);
}


/* Testimonials Section */
.testimonials {
  background-color: #eef7ff;
  padding: 60px 20px;
  text-align: center;
}

.testimonials h2 {
  font-size: 36px;
  color: #0056b3;
  margin-bottom: 40px;
}

.testimonials-slider {
  display: flex;
  gap: 20px;
  justify-content: center;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.testimonial-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 300px;
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: scale(1.05);
}

.testimonial-card p {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 20px;
  color: #555;
}

.student-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.student-info h4 {
  font-size: 18px;
  margin: 0;
}

.student-info span {
  font-size: 14px;
  color: #777;
}


/* Formulario de Contacto */

.form-header h2{
  font-size: 36px;
  color: #0056b3;
  margin-bottom: 30px;
  text-align: center;
}


.contact form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact form label {
  display: block;
  font-size: 16px;
  color: #0056b3;
  margin-bottom: 5px;
  font-weight: bold;
}

.contact form input,
.contact form textarea {
  width: 90%;
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background: #f9f9f9;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact form input:focus,
.contact form textarea:focus {
  border-color: #0056b3;
  box-shadow: 0 0 5px rgba(0, 86, 179, 0.5);
  outline: none;
}

.contact form button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  background-color: #28a745;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact form button:hover {
  background-color: #218838;
  transform: scale(1.02);
}

.contact form button:active {
  background-color: #1e7e34;
}

.contact form .form-header {
  text-align: center;
  margin-bottom: 20px;
}

.contact form .form-header h2 {
  font-size: 24px;
  color: #0056b3;
  margin-bottom: 5px;
}

.contact form .form-header p {
  font-size: 14px;
  color: #555;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px;
}

.hidden {
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Agrega animación de entrada */
.contact form {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact form input:invalid,
.contact form textarea:invalid {
  border-color: #dc3545; /* Rojo */
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

.contact form input:valid,
.contact form textarea:valid {
  border-color: #28a745; /* Verde */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

@media (max-width: 400px) {
  .contact form {
    padding: 15px;
  }

  .contact form h2 {
    font-size: 28px;
  }

  .contact form button {
    font-size: 16px;
    padding: 10px;
  }
}


/* Botón Volver al Principio */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #0056b3; /* Azul de la web */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#scroll-to-top:hover {
  background-color: #218838; /* Verde más suave al pasar el cursor */
  transform: scale(1.1);
}

#scroll-to-top:active {
  transform: scale(0.95);
}

/* Mostrar el botón cuando se hace scroll */
#scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}



/* Footer */

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

footer {
  background-color: #0056b3;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

footer ul li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

footer ul li a:hover {
  color: #ff0000;
}

.social-icons {
  margin-top: 10px;
}

.social-icons a {
  color: white;
  margin: 0 10px;
  font-size: 20px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #28a745;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* clases-particulares */


/* Hero Section */
.hero-classes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px;
  background: linear-gradient(120deg, #f7f9fc, #e0eafc);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 1200px;
}

.hero-content {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.profile-img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-right: 30px;
}

/* img clases grupales */
.group-img{
  width: 300px;
  height: 300px;
  border-radius: 10%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-right: 30px;
}

.hero-text-particulares {
  flex: 1;
}

.hero-text-particulares h1 {
  font-size: 36px;
  color: #0056b3;
  margin-bottom: 10px;
}

.hero-text-particulares p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

.hero-description h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #0056b3;
}

.hero-description p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 200px;
}

.hero-aside .price {
  font-size: 30px;
  font-weight: bold;
  color: #0056b3;
  margin-bottom: 10px;
}

.cta-btn, .contact-btn {
  background-color: #28a745;
  color: white;
  padding: 10px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  width: 100%;
  font-size: 18px;
}

.cta-btn:hover, .contact-btn:hover {
  background-color: #218838;
}

.contact-btn {
  background-color: #0056b3;
}

.contact-btn:hover {
  background-color: #004080;
}

/* About Me */
.about-me-particular {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.about-me-particular h2 {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 30px;
}

.about-container-particular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.about-text-particular {
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.about-text-particular strong {
  color: #0056b3;
}

.about-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.highlight {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.highlight i {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 10px;
}

.highlight p {
  font-size: 14px;
  color: #555;
}


/* Idiomas Section */
.languages {
  padding: 60px 20px;
  text-align: center;
  background-color: #f9f9f9;
}

.languages h2 {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 30px;
}

.language-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
}

.language-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.language-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.language-card img {
  width: 60px;
  height: 40px;
  margin-bottom: 15px;
}

.language-card h3 {
  font-size: 20px;
  color: #0056b3;
  margin-bottom: 10px;
}

.language-card p {
  font-size: 16px;
  color: #555;
  margin-bottom: 15px;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #28a745;
  transition: width 0.5s ease-in-out;
}

/* Calendario de Reserva */

.booking-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.booking-section h2 {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 30px;
}

/* 📌 Mejora el espaciado y centra los elementos */
.step-title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

/* 📌 Botones de nivel */
.level-buttons, .time-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.level-btn, .time-btn {
  padding: 12px 24px;
  font-size: 1.2rem;
  border: 2px solid #007bff;
  background-color: white;
  color: #007bff;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.level-btn:hover, .time-btn:hover, .selected {
  background-color: #007bff;
  color: white;
}

/* 📌 Calendario */

.calendar-container {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

/* 📌 Resumen */
.summary-box {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  margin: 20px auto;
  width: 80%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.reservation-summary {
  text-align: center;
}

.schedule {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.schedule h2 {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 30px;
}

.schedule-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.calendar-wrapper {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.reservation-details {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.reservation-details h3 {
  font-size: 24px;
  color: #0056b3;
  margin-bottom: 20px;
}

.reservation-details label {
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
  display: block;
}

.reservation-details input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.reservation-details .cta-btn {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background-color: #28a745;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.reservation-details .cta-btn:hover {
  background-color: #218838;
}

#calendar {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fc-daygrid-event {
  background-color: #28a745 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 14px;
}

.selected {
  background-color: #007bff !important;
  color: white !important;
  border: 2px solid #0056b3;
}


/* clases grupales */

/* Metodología de Clases Grupales */
.group-methodology {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(to right, #f7f7f7, #ffffff);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 40px auto;
  max-width: 1200px;
}

.group-methodology h2 {
  font-size: 32px;
  color: #0056b3;
  margin-bottom: 20px;
}

.group-methodology p {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
}

.methodology-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  align-items: start;
}

.method-item {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.method-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.method-item i {
  font-size: 40px;
  color: #28a745;
  margin-bottom: 15px;
}

.method-item h3 {
  font-size: 20px;
  color: #0056b3;
  margin-bottom: 10px;
}

.method-item p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* header y nav clases grupales*/

.hero-clases-grupales {
  position: relative;
  width: 100%;
  height: 45vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-clases-grupales::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/class-group.jpg') no-repeat center center/cover; /* Asegúrate de usar './' si está en la misma carpeta */
  opacity: 0.2;
  z-index: 1;
}

.navbar-clases-grupales {
  position: fixed;
  top: 20px;
  background: white;
  width: 90%; /* Ocupa el 90% del ancho */
  padding: 10px 30px; /* Menor padding arriba y abajo */
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;

}

.navbar-clases-grupales h1 {
  font-size: 10px;
  color: #0056b3;
  margin: 0; /* Asegura que no haya margen adicional */
  text-align: left; /* Alinea el texto a la izquierda */
}
.navbar-clases-grupales ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar-clases-grupales ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.navbar-clases-grupales ul li a:hover,
.navbar-clases-grupales ul li a.active {
  background: #0056b3;
  color: white;
  font-weight: bold;
}

.hero-clases-grupales .navbar-clases-grupales .container .h1-clases-grupales {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}

.hero-content-clases-grupales h2 {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 100px;
}

.hero-content-clases-grupales p {
  font-size: 22px;
  color: white;
  font-weight: 500;
  text-align: center;
  max-width: 800px;
  margin: 20px auto;
  line-height: 1.6;
}

/* header y nav clases particulares*/

.hero-clases-particulares {
  position: relative;
  width: 100%;
  height: 45vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-clases-particulares::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/class-group.jpg') no-repeat center center/cover; /* Asegúrate de usar './' si está en la misma carpeta */
  opacity: 0.2;
  z-index: 1;
}

.navbar-clases-particulares {
  position: fixed;
  top: 20px;
  background: white;
  width: 90%; /* Ocupa el 90% del ancho */
  padding: 10px 30px; /* Menor padding arriba y abajo */
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;

}

.navbar-clases-particulares h1 {
  font-size: 10px;
  color: #0056b3;
  margin: 0; /* Asegura que no haya margen adicional */
  text-align: left; /* Alinea el texto a la izquierda */
}
.navbar-clases-particulares ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar-clases-particulares ul li a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.navbar-clases-particulares ul li a:hover,
.navbar-clases-particulares ul li a.active {
  background: #0056b3;
  color: white;
  font-weight: bold;
}

.hero-clases-particulares .navbar-clases-particulares .container .h1-clases-particulares {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}

.hero-content-clases-particulares h2 {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  color: white;
  margin-top: 100px;
}

.hero-content-clases-particulares p {
  font-size: 22px;
  color: white;
  font-weight: 500;
  text-align: center;
  max-width: 800px;
  margin: 20px auto;
  line-height: 1.6;
}


/* articulo 1 blog */

.hero-blog {
  position: relative;
  width: 100%;
  height: 40vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-blog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./images/studentpc2.jpg') no-repeat center center/cover; /* Asegúrate de usar './' si está en la misma carpeta */
  opacity: 0.2;
  z-index: 1;
}

/* articulo 2 blog */
.hero-blog1 {
  position: relative;
  width: 100%;
  height: 50vh; /* Ocupa todo el alto de la pantalla */
  background: linear-gradient(135deg, #0056b3, #007bff); /* Gradient azul */
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
  border-bottom-left-radius: 50px; /* Bordes redondeados */
  border-bottom-right-radius: 50px; /* Bordes redondeados */
}

.hero-blog1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/error.jpg') no-repeat center center/cover; /* Asegúrate de usar './' si está en la misma carpeta */
  opacity: 0.2;
  z-index: 1;
}

.hero-blog1 .navbar-1 .container .h1-1 {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 0;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}

/* Hero Section */
.hero-blog {
  background: linear-gradient(135deg, #0056b3, #007bff);
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.hero-blog .navbar-1 .container .h1-1 {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
  position: relative; /* Permite hacer ajustes finos */
}

.hero-blog1 .navbar-1 .container .h1-1 {
  font-size: 24px; /* Texto grande */
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  z-index: 2;
  margin: 0;
  padding-right: 150px;
}

.hero-content-blog h2 {
  font-size: 36px;
  margin-bottom: 10px;
  color:white;
  margin-top: 10px;
}

.hero-content-blog p {
  font-size: 18px;
  color:white;
  font-weight: bold;
  text-align: center;
  width: 85%;
}

/* Blog Article */
.blog-article .container {
  max-width: 800px;
  margin: 10px auto;
  padding: 10px;
}

.blog-article h2, .blog-article h3 {
  color: #0056b3;
}

.blog-article p {
  line-height: 1.6;
  margin-bottom: 20px;
}

.blog-article ul {
  margin: 20px 0;
  padding-left: 20px;
}

.blog-article li {
  margin-bottom: 10px;
}

.videos iframe {
  margin: 20px 0;
  width: 100%;
  max-width: 560px;
  height: 315px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Botón Ver Más Artículos */
.more-articles {
  text-align: center;
  margin-top: 30px;
}

.btn-more-articles {
  display: inline-block;
  background-color: #0056b3;
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-bottom: 60px;
}

.btn-more-articles:hover {
  background-color: #218838;
}

/* Botón de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 80px; /* Más arriba para evitar solapamiento */
  right: 20px;
  background-color: #25D366;
  color: white;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
  z-index: 1000;
  animation: bounce 1.5s infinite ease-in-out;
}

.whatsapp-float:hover {
  background-color: #1EBE5D;
  transform: scale(1.1);
}

/* Animación de rebote */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Etiqueta de texto emergente */
.whatsapp-float::after {
  content: "¿Necesitas ayuda? ¡Escríbeme!";
  position: absolute;
  bottom: 75px;
  right: -15px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.whatsapp-float:hover::after {
  opacity: 1;
  visibility: visible;
}

 /*  version movil articulo1 */

 @media (max-width: 768px) {

/* 🔹 Navbar ajustes */
.navbar-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* Reducimos el padding */
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px; /* Altura fija */
  background: white;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 🔹 Ajuste para que "French With Layla" ocupe una sola línea */
.navbar-1 h1 {
  font-size: 18px; /* Más pequeño */
  white-space: nowrap; /* Evita que el texto se divida en dos líneas */
  overflow: hidden;
  text-overflow: ellipsis;
}



/* 🔹 Menú Hamburguesa */
.hamburger-menu {
  display: none; /* Se oculta en PC */
  font-size: 28px;
  cursor: pointer;
}

/* 🔹 Menú de Navegación */
.navbar-1 nav {
  display: flex;
}

.navbar-1 nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

.navbar-1 nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  transition: color 0.3s ease;
}

.navbar-1 nav ul li a:hover {
  color: #0056b3;
}

/* 🔹 Ajustes para móviles */
@media (max-width: 768px) {
  
  /* 🔹 Ocultar menú normal en móviles */
  .navbar-1 nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }

  .navbar-1 nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .navbar-1 nav ul li {
    width: 100%;
    text-align: center;
  }

  .navbar-1 nav ul li a {
    display: block;
    padding: 10px;
    width: 100%;
  }

  /* 🔹 Mostrar hamburguesa en móviles */
  .hamburger-menu {
    display: block;
  }

  /* 🔹 Mostrar menú cuando se active */
  .navbar-1 nav.active {
    display: flex;
  }
}

/* 🔹 Hero Blog */
.hero-blog {
  text-align: center;
  padding: 75px 20px 50px; /* Ajuste para evitar que el navbar lo tape */
}


  /* 🔹 Videos Responsivos */
  .videos iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* Mantiene proporción de video */
  }

  /* 🔹 Ajuste de Márgenes entre Secciones */
  section {
    padding: 25px 20px;
  }

  /* 🔹 Ajuste del Botón "Volver al Principio" */
  #scroll-to-top {
    right: 15px; /* Se asegura de que no esté pegado al borde */
    bottom: 15px;
  }

  /* 🔹 Footer Ajustado */
  .footer-container {
    grid-template-columns: 1fr; /* Una sola columna en móviles */
    text-align: center;
  }

  .footer-section {
    margin-bottom: 20px;
  }

  .social-icons {
    justify-content: center;
  }

}

/* 🔹 Mostrar en móviles */
@media (max-width: 768px) {
  .hamburger-menu {
    display: block;
  }

  /* 🔹 Ajuste para que el icono de menú no esté pegado a la derecha */
  .hamburger-menu {
    margin-right: 10px;
  }

  /* 🔹 Ocultar menú normal */
  .navbar-1 nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }

  .navbar-1 nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .navbar-1 nav.active {
    display: flex;
  }
}

/* 🔹 Hero Blog */
.hero-blog {
  text-align: center;
  padding: 85px 20px 40px; /* Ajuste para evitar que el navbar lo tape */
}

/* 🔹 Ajuste del Botón de Flecha "Volver Arriba" */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px; /* Más cerca del borde, pero visible */
  width: 50px;
  height: 50px;
  background-color: #0056b3;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

/* Mostrar cuando se hace scroll */
#scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* 🔹 Ajuste del margen entre secciones */
section {
  padding: 25px 20px; /* Reducimos el espacio entre secciones */
}

@media (max-width: 768px) {
  section {
    padding: 25px 15px; /* Menos margen en móviles */
  }
}

/* vista para moviles en clases grupales */

/* 📱 Ajustes SOLO para móviles */
@media (max-width: 768px) {
  
  /* 🔹 Menú Hamburguesa - Asegurar que sea visible y funcional */
  .hamburger-menu {
    position: absolute;
    right: 15px;
    top: 50%;  /* Lo posiciona en la mitad del navbar */
    transform: translateY(-50%); /* Lo centra verticalmente */
    font-size: 30px;
    color: #0056b3;
    cursor: pointer;
    z-index: 1100;
    
  }

  .navbar-clases-grupales {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
  }

  .navbar-clases-grupales nav {
    display: none;
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    background: white;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .navbar-clases-grupales nav.active {
    display: block;
  }

  .navbar-clases-grupales nav ul {
    flex-direction: column;
    padding: 0;
  }

  .navbar-clases-grupales nav ul li {
    margin: 10px 0;
  }

  /* 🔹 Hero Section - Ajustes para móviles */
  .hero-clases-grupales {
    text-align: center;
    padding: 60px 20px;
  }

  .hero-content-clases-grupales h2 {
    font-size: 30px;
    margin-top: 10px;
    width: 90%;
  }
  .hero-1{

    height: 70vh;
  }

  .hero-content-clases-grupales p {
    font-size: 18px;
    margin-bottom: 0px;
    width: 90%;
    padding-top: 10px;
  }

  /* 🔹 Ajustar Sección de Clases Grupales */

  .hero-classes {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
  }

  .hero-classes .group-img {
    width: 80%;
    height: auto;
    margin-bottom: 20px;
  }

  .hero-classes .hero-text-group h1 {
    font-size: 26px;
  }

  .hero-classes .hero-aside {
    text-align: center;
    width: 100%;
  }

  /* 🔹 Orden correcto en móvil: Sidebar (información) → Imagen → Texto */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-aside {
    order: 1;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .group-img {
    order: 2;
    width: 80%;
    height: auto;
    margin-bottom: 20px;
  }

  .hero-text-group {
    order: 3;
    width: 100%;
    padding: 0 15px;
  }
  /* 🔹 Reducir los márgenes entre secciones */
  .group-methodology,
  .languages,
  .schedule {
    padding: 40px 20px;
  }

  /* 🔹 Ajustar WhatsApp y Flecha Arriba */
  .whatsapp-float, 
  #scroll-to-top {
    right: 10px;
  }

  .whatsapp-float {
    bottom: 70px;
  }

  #scroll-to-top {
    bottom: 20px;
  }

}


@media (max-width: 768px) {
  /* 🔹 Ajustar el header y centrar el menú hamburguesa */
  .navbar-clases-particulares {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      position: fixed;
      width: 100%;
      top: 0;
      background: white;
      z-index: 1000;
      
  }

  .hamburger-menu {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      color: #0056b3;
      cursor: pointer;
      z-index: 1100;
      display: flex;
    align-items: center;
  }

  /* 🔹 Asegurar que el menú desplegable cubra toda la pantalla */
  .navbar-clases-particulares nav {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0;
      width: 100%;
      background: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
  }

  .navbar-clases-particulares nav.active {
      display: flex;
  }

  .navbar-clases-particulares nav ul {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      list-style: none;
      padding: 0;
  }

  .navbar-clases-particulares nav ul li {
      width: 100%;
      text-align: center;
  }

  .navbar-clases-particulares nav ul li a {
      display: block;
      width: 100%;
      padding: 10px;
      color: #333;
      text-decoration: none;
      font-size: 18px;
  }

  /* 🔹 Reorganizar la sección Hero */
  .hero-classes {
      display: flex;
      flex-direction: column-reverse;
      text-align: center;
      padding: 20px;
  }

  .hero-content {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .hero-aside {
      order: -1;
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
  }

  .profile-img {
      width: 80%;
      max-width: 250px;
      border-radius: 50%;
      margin-bottom: 15px;
  }

  .hero-text-particulares h1 {
      font-size: 24px;
  }

  .hero-content-clases-particulares h2 {
    font-size: 30px; 
    margin-top: 90px;
    padding-top: 20px;
    width: 90%;
    text-align: center;
    padding-bottom: 20px;
    line-height: 1.4;
    padding-bottom: 0;
  }

  .hero-content-clases-particulares p {
    font-size: 18px;
    width: 85%;
    margin-bottom: 25px; /* Espaciado para mejorar legibilidad */
    text-align: center;
    margin-left: 20px;
    margin-top: 0;
  
  }

  .hero-text-particulares p {
      font-size: 16px;
  }

  .cta-btn, .contact-btn {
      width: 100%;
      font-size: 16px;
      padding: 12px;
  }

  /* 🔹 Ajustar la sección "Languages" */
  .language-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
  }

  .language-card {
      width: 45%;
      text-align: center;
  }

  .language-card img {
      width: 50px;
      height: auto;
  }

  /* 🔹 Ajustar "About Me" */
  .about-container-particular {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .about-text-particular {
      font-size: 16px;
  }

  .about-highlights {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
  }

  .highlight {
      width: 45%;
      text-align: center;
  }

  /* 🔹 Ajustar el formulario de reserva */
  .booking-section {
      padding: 20px;
      text-align: center;
  }

  .tidycal-embed {
      width: 100%;
  }

  /* 🔹 Ajustar botones flotantes */
  .whatsapp-float {
      bottom: 60px;
      right: 15px;
      width: 50px;
      height: 50px;
      font-size: 25px;
  }

  #scroll-to-top {
      right: 35px;
      bottom: 120px;
      width: 45px;
      height: 45px;
      font-size: 22px;
  }

  /* 🔹 Ajuste de márgenes para evitar espacios excesivos */
  section {
      padding: 25px 15px;
  }

  h2 {
      font-size: 22px;
      text-align: center;
  }

  p {
      font-size: 16px;
  }
}

/* version movil para pagina de recursos */

@media (max-width: 768px) {
  /* 🔹 Ajustar el header y el menú hamburguesa */
  .navbar-grammar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      position: fixed;
      width: 100%;
      top: 0;
      background: white;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .hamburger-menu {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      color: #0056b3;
      cursor: pointer;
      z-index: 1100;
  }

  .navbar-grammar nav {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0;
      width: 100%;
      background: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
  }

  .navbar-grammar nav.active {
      display: flex;
  }

  .navbar-grammar nav ul {
      flex-direction: column;
      align-items: center;
      list-style: none;
      padding: 0;
  }

  .navbar-grammar nav ul li {
      width: 100%;
      text-align: center;
  }

  .navbar-grammar nav ul li a {
      display: block;
      width: 100%;
      padding: 12px;
      color: #333;
      text-decoration: none;
      font-size: 18px;
  }

  /* 🔹 Ajuste del Hero Section */
  .hero-grammar {
      padding: 80px 15px 30px; /* Asegura que no se solape con el menú */
      text-align: center;
  }

  .hero-content-grammar h2 {
      font-size: 30px;
      line-height: 1.4;
      width: 90%;
      margin-top: 20px;

  }

  .hero-content-grammar p {
      font-size: 18px;
      margin-bottom: 0;
      margin-top: 25px;

  }

  /* 🔹 Ajustes en la barra de búsqueda */
  .filter-bar {
      padding: 10px;
      display: flex;
      justify-content: center;
  }

  .search-container {
      width: 100%;
      max-width: 280px;
  }

  #search-bar {
      width: 100%;
      padding: 10px;
      font-size: 14px;
  }

  /* 🔹 Ajustar los recursos */
  .resource-level {
      padding: 15px;
  }

  .resource-columns {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
  }

  .resource-item {
      width: 100%;
      max-width: 320px;
      text-align: center;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .resource-item img {
      width: 80px;
      height: auto;
  }

  .download-btn {
      width: 100%;
      padding: 10px;
      font-size: 16px;
  }

  /* 🔹 Ajuste de modal */
  .modal-content {
      width: 90%;
      max-width: 350px;
  }

  /* 🔹 Ajustar el footer */
  .footer-container {
      flex-direction: column;
      text-align: center;
  }

  .footer-section {
      margin-bottom: 20px;
  }

  .social-icons {
      justify-content: center;
  }
}