/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    
    /* hero start*/
    .hero-container{
        flex-direction: column;
        padding: 20px !important;
        padding-top: 100px !important;
    }
    .hero-text{
        gap: 25px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .workflow-subtitle,
    .portfolio-subtitle,
    .hero-subtitle{
        font-size: 19px;
    }

    .hero-title{
        width: 350px;
        line-height: 29px !important;
        font-size: 34px !important;
    }
    .hero-info{
        font-size: 16px !important;
        width: 100%;
        text-align: start;
        line-height: 18px !important;
    }

    .hero-link,
    .hero-links{
        gap: 10px;
        align-items: center;
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100% !important;
    }

    .hero-img{
        display: none;
        width: 100% !important;
    }
    /* hero end */

    /* services start */
    .services-container{
        padding: 80px 20px !important;
    }


    .portfolio-title,
    .services-text-title{
        font-size: 26px !important;
        line-height: 28px !important;
        width: 100% !important;
    }

    .services{
        padding: 0px ;
        padding-top: 40px !important;
    }

    .service {
        width: 100%;
        height: max-content;
        padding: 35px 20px;
        gap: 10px;
    }

    .service-title{
        font-weight: 700 !important;
        font-size: 16px !important;
    }

    .service-info{
        font-size: 16px !important;
    }
    /* services end */

    /* endias start */

    .endias-container{
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 80px 10px !important;
    }

    .endias-img-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .endias-img{
        max-width: 60%;
    }

    .endias-text{
        width: 100%;
        padding-top: 40px !important;
        gap: 10px;
    }

    .endias-title{
        font-size: 30px !important;
        width: 100% !important;
        line-height: 35px;
    }

    .endias-info{
        font-size: 18px !important;
    }

    .endias-link{
        font-size: 15px !important;
        margin-top: 20px !important;
        padding: 10px 60px;
        text-align: center;
    }
    /* endias end*/


    /* work start */
    .work{
        flex-direction: column;
        justify-content: start;
        gap: 20px !important;
        padding:40px 20px !important;
    }

    .work-info {
        padding-top: 0px;
        width: 100%;
    }
    
    .work-info p{
        font-size: 16px;
    }
    
    .swiper{
        height:800px;
    }

    .work-content{
        width: 100%;
    }

    .work-content-title{
        font-size: 30px;
    }

    .work-content-client-name,
    .work-content-client-info,
    .work-content-subtitle{
        font-size: 16px;
    }
    /* work end*/

    
    /* whyus start */
    .whyus-container{
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 20px 10px !important;
        padding-bottom: 0px !important;
        gap: 60px;
        background: #ffffff;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(2, 2, 30, 0.068) 100%);
    }

    .whyus-img-container{
        display: flex;
        justify-content: center;
        align-items: center;
        order: 2;
    }

    .whyus-img{
        max-width: 60%;
    }

    .whyus-text{
        order: 1;
        width: 100%;
        padding-top: 40px !important;
        gap: 20px;
    }

    .whyus-title{
        font-size: 30px !important;
        width: 100% !important;
        line-height: 35px;
    }

    .whyus-info{
        font-size: 18px !important;
    }

    .whyus-link{
        font-size: 15px !important;
        margin-top: 20px !important;
        padding: 10px 60px;
        text-align: center;
    }
    /* whyus end*/


    /* planes start */
    .planes-container{
        flex-direction: column;
        padding: 80px 20px !important;
    }

    .planes-title{
        font-size: 25px;
        font-weight: 600;
        width: 100%;
        line-height: 35px;
    }

    .planes{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .plan{
        width: 100%;
    }
    /* planes end*/

    /* more info start */
    .more-info{
        margin-top: 0px !important;
        padding: 60px 20px !important;
    }
    .more-info-text{
        width: 100%;
        font-size: 30px;
    }

    .more-info-link{
        font-size: 16px;
    }
    /* more info end */

    /* contact start */
    .contact-title{
        font-size: 30px !important;
        text-align: center;
    }
    
    .contact-person{
        flex-direction: column;
    }

    .contact-info{
        text-align: center;
        width: 100%;
        padding: 0px !important;
        justify-content: center;
        align-items: center;
    }
    /* contact end*/

    /* faq start */
    .faq{
        flex-direction: column;
        padding: 80px 20px !important;
    }

    .faq-img{
        display: none;
    }

    .faq-info{
        width: 100%;
    }

    .faq-title{
        font-size: 30px !important;
        line-height: 35px;
    }

    .faq-question{
        padding: 15px 0px;
    }


    /* faq end */

    .gracias-container{
        padding: 120px 20px !important;
        padding-top: 160px !important;
    }

    .gracias-container h1{
        font-size: 26px !important;
    }

    .gracias-container p{
        font-size: 16px !important;
    }

    .footer{
        padding-bottom: 100px !important;
    }


    .portfolio-container{
        padding: 60px 20px;
    }


    .portfolio-item{
        width: 100% ;
    }
}