@media screen and (max-width:800px) {}

@media screen and (max-width:800px){
    .hero_area {
        height: auto;
    }

    .custom_nav-container .nav_search-btn {
        background-position: center;
        text-align: center;
        margin-top: 0px;
    }

    .slider_section {
        padding-top: 45px;
        padding-bottom: 75px;
    }

    .info_items {
        width: 100%;
    }
}

/*@media (max-width: 800px) {
    .contact_section .form_container {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0px;
    }

    .info_items {
        flex-direction: column;
        text-align: center;
        align-items: center;
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0px;
    }

    .contact_section .heading_container {
        width: 100%;
        text-align: center;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0px;
    }

    /*.contact_section .heading_container h2::before {
        left: 50%;
        transform: translateX(-50%);
    }*/ /*

    .contact_section button {
        margin: 45px auto 0 auto;
        
    }
}*/

/*Formulario*/

@media screen and (max-width: 800px) {
    .contact_section .form_container {
        /*width: 100%;*/
        /*padding: 35px 15px;  /*Aseguramos que haya suficiente espacio alrededor del formulario */
        box-sizing: border-box;
        margin: 0 auto; /* Centrar el formulario en la pantalla */
    }

    /* Hacemos que el formulario y la imagen se ajusten en columnas */
    .contact_section .row {
        display: flex;
        flex-direction: column; /* Los elementos se apilarán verticalmente */
        align-items: center;
    }

    /* Aseguramos que el contenedor de la imagen tenga un ancho del 100% */
    .contact_section .img-box {
        width: 100%;
        /*display: flex;*/
        height: auto;
        max-width: 400px; /* Limitar el tamaño máximo de la imagen */
        margin: 0 auto; /* Centrar la imagen */
    }

    /* Ajustar el formulario para que se vea bien en pantallas pequeñas */
    .contact_section .form_container form {
        /*width: 100%;
        margin-bottom: 20px; /* Un pequeño margen inferior */
        display: flex;
        flex-direction: column; /* Asegura que todos los elementos estén apilados verticalmente */
        gap: 15px; /* Espacio entre los campos */
    }

    .contact_section .form_container input,
    .contact_section .form_container button {
        width: 100%; /* Aseguramos que todos los campos y botones tengan un ancho completo */
        margin-bottom: 15px; /* Separar los elementos de forma ordenada */
    }

    .contact_section button {
        margin: 45px auto 0 auto;
        padding: 12px; /* Agregar algo de espacio dentro del botón */
    }
}

@media (max-width: 576px) {
    .contact_section .form_container input,
    .contact_section .form_container button {
        font-size: 1rem; /* Ajustar el tamaño de los inputs y botones */
        padding: 10px; /* Reducir el padding para que los inputs no sean tan grandes */
    }
}

/* Imagenes de nuestros servicios*/

@media screen and (max-width: 800px) {
    .trainer_section .box .img-box {
        max-width: 90%; /* se adapta al ancho del viewport */
        border-radius: 25px;
    }

    .trainer_section .box .img-box img {
        border-radius: 25px;
    }
}










/* Resto del código


@media (max-width: 576px) {
    .slider_section .detail-box h1 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {}

@media (max-width: 420px) {
    .slider_section .detail-box h1 {
        letter-spacing: .3rem;
    }
}

@media (max-width: 360px) {}

@media (min-width: 800px) {
    .container {
        max-width: 800px;
    }
}*/