/* hero start */
@media screen and (max-width: 1024px) {
    .hero-container {
        padding: 40px 80px;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }
    .hero-text {
        padding: 40px 0;
        align-items: center;
    }
    .hero-title {
        font-size: 42px;
    }
    .hero-info {
        font-size: 16px;
        max-width: 100%;
    }
    .hero-img-img{
        max-width: 300px;
    }
}

/* Celulares grandes (máx. 768px) */
@media screen and (max-width: 768px) {
    .hero-container {
        padding: 30px 40px;
    }
    .hero-title {
        font-size: 36px;
    }
    .hero-info {
        font-size: 15px;
    }
    .hero-link {
        font-size: 13px;
        padding: 12px 28px;
    }
    .hero-img-img {
        max-width: 250px;
    }
}

/* Celulares pequeños (máx. 480px) */
@media screen and (max-width: 480px) {
    .hero-container {
        padding: 20px;
    }
    .hero-title {
        font-size: 28px;
    }
    .hero-info {
        font-size: 14px;
        padding: 15px 0;
    }
    .hero-link {
        font-size: 12px;
        padding: 10px 24px;
    }
    .hero-img-img {
        max-width: 200px;
    }
}

/* hero end */



/* treatments start */
/* Responsive Design */

/* Tablets y pantallas medianas (máx. 1024px) */
@media screen and (max-width: 1024px) {
    .treatments-container {
        flex-wrap: wrap;
        gap: 50px;
        padding: 20px;
    }
    .treatment-card {
        width: 45%;
    }
    .treatment-title {
        font-size: 14px;
    }
    .treatment-description {
        font-size: 12px;
    }
    .treatment-icon {
        font-size: 35px;
    }
}

/* Celulares grandes (máx. 768px) */
@media screen and (max-width: 768px) {
    .treatments-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 20px;
    }
    .treatment-card {
        width: 80%;
    }
    .treatment-title {
        font-size: 13px;
    }
    .treatment-description {
        font-size: 11px;
    }
    .treatment-icon {
        font-size: 30px;
    }
}

/* Celulares pequeños (máx. 480px) */
@media screen and (max-width: 480px) {
    .treatments-container {
        gap: 20px;
        padding: 10px;
    }
    .treatment-card {
        width: 100%;
    }
    .treatment-title {
        font-size: 18px !important;
    }
    .treatment-description {
        font-size: 16px !important; 
    }
    .treatment-icon {
        font-size: 25px;
    }
}

/* treatments end */



/* about start */
/* Responsive Design para About */

/* Tablets y pantallas medianas (máx. 1024px) */
@media screen and (max-width: 1024px) {
    .about-container {
        flex-direction: column;
        align-items: center;
        padding: 40px 60px;
        padding-top: 80px;
        padding-bottom: 150px;
    }
    .about-img {
        max-width: 70%;
        margin-bottom: 30px;
    }
    .about-text {
        max-width: 100%;
        text-align: center;
    }
    .about-info {
        font-size: 16px;
    }
}

/* Celulares grandes (máx. 768px) */
@media screen and (max-width: 768px) {
    .about-container {
        padding: 30px 40px;
        padding-top: 60px;
        padding-bottom: 100px;
    }
    .about-img {
        max-width: 80%;
    }
    .about-title {
        font-size: 30px;
    }
    .about-sub-title {
        font-size: 18px;
    }
    .about-info {
        font-size: 14px;
    }
}

/* Celulares pequeños (máx. 480px) */
@media screen and (max-width: 480px) {
    .about-container {
        padding: 20px;
        padding-top: 0px;
        padding-bottom: 80px;
    }
    .about-img {
        max-width: 100%;
    }
    .about-title {
        font-size: 25px;
    }
    .about-sub-title {
        font-size: 16px;
    }
    .about-info {
        font-size: 16px;
    }

    .treatments{
        padding: 20px;
    }
}

/* about end */



/* contact start */
/* Default Styles for Large Screens (above 1200px) */
.contact-box{
    display: flex;
    align-items: center;
    padding: 0 140px;
    gap: 40px;
}

.contact-img{
    height: max-content;
    width: 300px;
}

/* Media Query for Tablets (768px to 1199px) */
@media (max-width: 1199px) {
    .contact-box{
        flex-direction: column;
        align-items: center;
        padding: 0 40px;
    }

    .contact-img{
        width: 200px;
    }

    .contact-form{
        width: 80%;
        padding: 20px;
    }

    .contact-info{
        width: 100%;
        align-items: center;
        text-align: center;
    }
}

/* Media Query for Mobile Devices (below 768px) */
@media (max-width: 767px) {
    .contact-box{
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
    }

    .contact-title {
        padding-bottom: 0px;
    }

    .contact-img{
        width: 250px;
    }

    .contact-form{
        width: 100%;
        padding: 15px;
    }

    .contact-info{
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .contact-form .contact-person{
        flex-direction: column;
        gap: 20px;
    }

    .contact-form .contact-person .form-group{
        width: 100%;
    }

    .contact-form textarea{
        height: 120px;
    }
}

/* For very small screens (e.g., below 480px) */
@media (max-width: 480px) {
    .contact-form{
        padding: 20px;
    }

    .contact-info{
        font-size: 0.9em;
    }

    .contact-info p{
        margin-bottom: 10px;
    }
}
/* contact end */


/* faq */
/* Responsive FAQ styles */

/* Para pantallas grandes */
@media (max-width: 1200px) {
    .faq-container {
        padding: 30px 60px;
    }

    .faq-container .faq-item .faq-question {
        font-size: 18px;
    }

    .faq-container .faq-item .faq-answer {
        font-size: 16px;
    }

    .faq-container .faq-item .faq-icon {
        font-size: 20px;
    }

    .faq-img img {
        width: 230px;
    }
}

/* Para pantallas medianas */
@media (max-width: 992px) {
    .faq{
        padding: 30px;
    }
    .faq-container {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .faq-container .faq-item .faq-question {
        font-size: 16px;
    }

    .faq-container .faq-item .faq-answer {
        font-size: 14px;
    }

    .faq-container .faq-item .faq-icon {
        font-size: 18px;
    }

    .faq-img {
        display: none !important;
    }
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .faq-container {
        padding: 20px 10px;
    }

    .faq-container .faq-item .faq-question {
        font-size: 14px;
        text-align: center;
    }

    .faq-container .faq-item .faq-answer {
        font-size: 12px;
        text-align: center;
    }

    .faq-container .faq-item .faq-icon {
        font-size: 16px;
    }

    .faq-img img {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Para pantallas extra pequeñas */
@media (max-width: 576px) {
    .faq-container {
        padding: 20px 5px;
    }

    .faq-container .faq-item .faq-question {
        font-size: 12px;
    }

    .faq-container .faq-item .faq-answer {
        font-size: 10px;
    }

    .faq-container .faq-item .faq-icon {
        font-size: 14px;
    }

    .faq-img img {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .faq-container {
        padding: 20px 10px;
    }

    .faq-container .faq-item .faq-question {
        font-size: 16px;
    }

    .faq-container .faq-item .faq-answer {
        font-size: 16px;
    }

    .faq-container .faq-item .faq-icon {
        font-size: 12px;
    }

    .faq-img img {
        width: 100%;
        margin-bottom: 10px;
    }

    .formation-container {
        padding-bottom: 50px;
    }
    .formation{
        padding-top: 20px;
    }    

}