@font-face {
        font-family: 'BrittanySignature';
        src: url('../fonts/BrittanySignature.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Bold';
        src: url('../fonts/Raleway-Bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-ExtraBold';
        src: url('../fonts/Raleway-ExtraBold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-ExtraLight';
        src: url('../fonts/Raleway-ExtraLight.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Heavy';
        src: url('../fonts/Raleway-Heavy.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Light';
        src: url('../fonts/Raleway-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Medium';
        src: url('../fonts/Raleway-Medium.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Regular';
        src: url('../fonts/Raleway-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-SemiBold';
        src: url('../fonts/Raleway-SemiBold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Raleway-Thin';
        src: url('../fonts/Raleway-Thin.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'TrashHand';
        src: url('../fonts/TrashHand.TTF') format('truetype');
        font-weight: normal;
        font-style: normal;
    }



    /* Estilos para botones y enlaces */
    button, .boton-enlace {
        display: inline-block;
        padding: 12px 24px; /* Aumento del padding */
        margin-top: 15px; /* Aumento del margen */
        font-size: 18px; /* Aumento del tamaño de fuente */
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transiciones añadidas */
    }

    /* Efecto al pasar el ratón */
    button:hover, .boton-enlace:hover {
        background-color: var(--hover-color);
        transform: translateY(-3px); /* Desplazamiento hacia arriba */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra más intensa */
    }

    /* Efecto al hacer clic */
    button:active, .boton-enlace:active {
        transform: translateY(0); /* Regresar a la posición original */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra más sutil */
    }


    body {
        font-family: 'Raleway-SemiBold';
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        background-image: url('../imagen/fondo1.png'); /* Cambia esto por la ruta de tu imagen */

    }

    /* Contenedor del horario */
    .horario {
        background-color: #f7d18d;
        color: rgb(0, 0, 0);
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 10px;
    }

    /* Estilos para el contenedor de la imagen y el menú */
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 80%;
        margin: 20px auto;
        padding: 0 20px;
    }

    /* Imagen */
    .container img {
        width: 200px;
        height: auto;
    }

    /* Estilos para el menú */
    nav {
        flex-grow: 1;
        text-align: right;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end; /* Alinea los elementos del menú a la derecha */
    }

    nav ul li {
        margin-left: 30px; /* Espacio entre los elementos del menú */
    }

    nav ul li a {
        text-decoration: none;
        color: #000000;
        font-weight: bold;
        padding: 10px;
        transition: color 0.3s ease-in-out;
    }

    nav ul li a:hover {
        color:  rgb(255, 167, 1); /* Color al pasar el cursor */
    }

    nav ul li a.active {
        color:  rgb(0, 0, 0); /* Color para el enlace activo */
        border-bottom: 2px solid rgb(255, 167, 1); /* Línea debajo del enlace activo */
    }


    .services-container {
        max-width: 90%;
        margin: 50px auto;
        text-align: center;
        padding: 0 20px;
        
        
    }

    h1 {
        font-size: 35px;
        color: #012b25;
        font-family: 'Raleway-Bold';
    }

    h1 span {
        font-family: 'TrashHand';
        font-size: 50px;
        color: rgb(255, 167, 1);
       
    }


    h3 span {
    color: rgb(255, 167, 1);
    font-family: 'TrashHand';
    font-size: 35px;
    line-height: 1.5; /* Ajusta este valor para reducir el espacio entre líneas */
    }

    h2 span {
    color: rgb(255, 167, 1);
    font-family: 'TrashHand';
    font-size: 35px;
    line-height: 1.0; /* Ajusta este valor para reducir el espacio entre líneas */
    }


    p {
        font-size: 16px;
        color: #000000;
    }

    h2 {
        font-size: 30px;
        color: #012b25;
        margin-top: 35px;
        font-family: 'Raleway-ExtraBold';

    }

    .service-grid {
        display: flex;
        flex-wrap: wrap;
        font-family: 'Raleway-SemiBold';
        justify-content: space-between;
    }
    .service-card {
        position: relative;
        overflow: hidden;
        transition: transform 0.3s;
        width: 100%;
        max-width: 350px;
        box-shadow: 0 12px 12px rgb(214, 214, 214)
    }

    .service-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.3s, opacity 0.3s;
        margin: 1%; /* tamaño de las imagenes */
    }

    .service-card:hover img {
        transform: scale(1.1);
        opacity: 0.1;
    }

    .service-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
       
        background-color: rgba(239, 239, 239, 0.886);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .service-card:hover .overlay {
        opacity: 1;
    }

    .service-card h3 {
        margin: 0;
        text-align: center;
    }


    /*Termina la seccion de imagenes */

    /* Estilos del modal */
    .modal {
        display: none; /* Oculto por defecto */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
        max-width: 500px;
        text-align: center;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }


    .close:hover, .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .whatsapp-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: rgb(1, 43, 37);; /* Color de WhatsApp */
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .whatsapp-button:hover {
        background-color: #ffa701; /* Color más oscuro al pasar el ratón */
    }

    .subscription-container {
        background-color: white;
        padding: 40px;
        border-radius: 10px;
        max-width: 800px; /* Aumentar el ancho máximo */
        text-align: center;
        margin: 40px auto; /* Centra el contenedor con márgenes automáticos */
        background-image: url(../imagen/Fotos2024/fondo-servicios2.png);
        background-size: cover; /* Asegúrate de que la imagen cubra todo el fondo */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        padding: 40px; /* Espaciado interno */
        border-radius: 10px; /* Bordes redondeados */
        box-shadow: 0 12px 12px rgb(214, 214, 214);
    }

    /* Estilos para la sección de contacto con íconos */

    .contact-item img {
        width: 30px; /* Reducido el tamaño de los iconos */
        height: 30px;
        margin-bottom: 3px; /* Menor espacio debajo del icono */
    }

    .contact-item h3 {
        margin: 3px 0; /* Reducido el margen del título */
        font-size: 14px; /* Tamaño del texto reducido */
        font-weight: normal;
    }

    .contact-item p {
        font-size: 12px; /* Texto más pequeño */
        margin: 0;
    }

    /* Sección de redes sociales */
    .social-media h3 {
        font-size: 14px; /* Texto más pequeño */
        margin-bottom: 10px; /* Reducido el margen */
    }

    .social-media a {
        margin: 0 3px; /* Menor espacio entre los iconos de redes sociales */
    }

    .social-media img {
        width: 25px; /* Reducido el tamaño de los iconos de redes sociales */
        height: 25px;
    }
    .social-media {
        display: flex; /* Alinea los íconos en horizontal */
        align-items: center; /* Centra verticalmente los íconos */
    }

    /* Ajustes para pantallas pequeñas */
    @media (max-width: 768px) {
        .contact-info {
            flex-direction: column;
            gap: 15px; /* Menor espacio entre filas */
        }
    }

    /* Inicia whatsapp flotante  */
    .whatsapp-float {
        position: fixed; /* Permite que el ícono permanezca en la misma posición al hacer scroll */
        bottom: 20px; /* Distancia desde el fondo de la ventana */
        right: 20px; /* Distancia desde la derecha de la ventana */
        z-index: 1000; /* Asegura que esté encima de otros elementos */
    }
    

    .whatsapp-float img {
        width: 60px; /* Ajusta el tamaño del ícono */
        height: auto; /* Mantiene la proporción */
        border-radius: 50%; /* Opcional: para darle un efecto redondeado */
    }

    /* Termina whatsapp flotante  */

    .resaltar {
        color: #DC8F78; /* Cambia a cualquier color que desees */
        font-weight: bold; /* Hace que el texto esté en negrita */
        font-size: 15px;
        font-family: 'Raleway-ExtraBold';
    }


    .contact-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 2000px;
        margin: 20px auto;
        padding: 0 20px;
      }
      
      .contact-item {
        text-align: center;
      }
      
      .contact-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
      }
      
      .contact-item h3 {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
      }
      
      .contact-item p {
        font-size: 12px;
        margin: 0;
        color: #000000;
      }
      
      /* Estilo para las secciones de pie de página */
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1; /* Fondo más claro */
        padding: 20px; /* Aumento del padding */
      }
      
      .footer p {
        margin: 0;
        font-size: 14px; /* Aumento del tamaño de fuente */
      }




        /* Estilos del chatbot */
        
        .chatbot {
            display: none; /* Oculta el chat por defecto */
            position: fixed;
            bottom: 85px; /* Ajusta según tus necesidades */
            right: 0px;
            width: 255px;
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .chat-header {
            background-color: #25D366;
            color: white;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .chat-body {
            padding: 10px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .chat-message {
            margin: 5px 0;
            padding: 8px;
            border-radius: 8px;
            max-width: 80%;
        }

        .user-message {
            background-color: #eefae3;
            align-self: flex-end;
        }

        .bot-message {
            background-color: #e8e8e8;
            align-self: flex-start;
        }

        .chat-input {
            display: flex;
            border-top: 1px solid #ccc;
        }

        .chat-input input {
            border: none;
            padding: 10px;
            flex: 1;
            border-bottom-left-radius: 10px;
            outline: none;
        }

        .chat-input button {
            padding: 10px;
            border: none;
            background-color: #25D366;
            color: rgb(0, 0, 0);
            cursor: pointer;
            border-bottom-right-radius: 10px;
        }

        .button-container {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        .quick-reply {
            padding: 10px;
            background-color: #ffa701;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px 0;
            text-align: center;
        }

        .quick-reply:hover {
            background-color: #f7d18d;
        }
   
       
        nav ul li a[href*="capacitaciones"] {
            background-color: #ffa701; /* Fondo azul */
            color: white; /* Texto blanco para contraste */
            padding: 10px; /* Espacio alrededor del texto */
            border-radius: 5px; /* Bordes redondeados opcionales */
            text-decoration: none; /* Elimina subrayado */
        }
        
        nav ul li a[href*="capacitaciones"]:hover {
            background-color: #012b25; /* Fondo cambia a un azul más oscuro al pasar el mouse */
            color: #f0f0f0; /* Cambia el color del texto también si lo deseas */
        }
        
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 10px 0;
    }

    .container img {
        width: 150px;
        margin-bottom: 10px;
    }
}
@media (max-width: 768px) {
    .service-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-card {
        max-width: 100%;
        margin-bottom: 20px;
    }
}
@media (max-width: 768px) {
  .contact-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .social-media img {
    width: 20px !important;
    height: 20px !important;
  }

  .footer p {
    font-size: 12px;
    text-align: center;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}