.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.section {
    margin-top: 2rem;
}

.hero {
    background: #DCD9FF;
    border-radius: 25px;
    padding: 4rem 2rem;
    text-align: center;
    color: #5e4db5;
}

.hero h1 {
    font-weight: 900;
    letter-spacing: -.01em;
    font-size: 85px;
    line-height: 4.55rem;
}

.hero p {
    margin-top: 1.5rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.grid2 {
    display: grid;
    gap: 1.5rem;
}

@media(min-width: 768px) {
    .grid2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 768px) {
    .photo-3 {
        order: 2;
    }
}

.rounded {
    border-radius: 1.25rem;
    overflow: hidden;
}

.photo {
    /* background: url('../assets/img/quienessomos/teacher.webp') center/cover; */
    min-height: 480px;
}

.photo-1 {
    background: url('../assets/img/quienessomos/teacher.webp') center/cover;
}

.photo-2 {
    background: url('../assets/img/quienessomos/cafe.jpg') center/cover;
}

.photo-3 {
    background: url('../assets/img/quienessomos/pay.webp') center/cover;
}

.photo-4 {
    background: url('../assets/img/quienessomos/comunication.webp') center/cover;
}

.orange {
    background: #4d4192;
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.orange h2 {
    /* font-size: 2.5rem; */
    /* font-weight: 800; */
    /* line-height: 1.1; */
    font-size: 55px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 3.75rem;
}

.orange p {
    margin-top: 1rem;
    font-size: 1.2rem;
}

.compare {
    /* background: #EEF7E4; */
    border-radius: 1.25rem;
    /* padding: 2.5rem 2rem; */
    text-align: center;
    /* color: #0C6B3D; */
    background: #DCD9FF;
    color: #5e4db5;
    padding: 5rem 15rem;
}

.comparative {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.hide-sm {
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.compare h3 {
    font-size: 2rem;
    font-weight: 800;
}

.compare .items {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
    align-items: flex-start;
}

.green p {
    margin-top: 1rem;
    max-width: 520px;
    font-size: 1.2rem;
}

.pelotainer p {
    font-size: 1.2rem !important;
}

.lime p,
.light-green p {
    margin-top: 16px;
}

.green {
    background: #6a5acd;
    color: white;
    padding: 3rem;
    /* border-radius: 22px; */
}

.green h3 {
    /* font-size: 2rem; */
    /* font-weight: 800; */
    font-size: 55px;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 3.75rem;
}

.light-green {
    /* background: #E6F4D6; */
    padding: 3rem;
    /* border-radius: 22px; */
    /* color: #0C6B3D; */
    background: #DCD9FF;
    color: #5e4db5;
}

.lime {
    background: #9293e7;
    padding: 3rem;
    /* border-radius: 22px; */
    color: #272244;
}

.value-card {
    background: #eaebf5;
    color: #5C45E2;
    border-radius: 18px;
    padding: 3rem;
    /* text-align: left; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex-basis: calc(33.33% - 1.67rem);
    border: 1px solid #333366;
}

.value-card h4 {
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.value-card p {
    margin-top: 0.5rem;
    font-size: 0.9rem !important;
    --tw-text-opacity: 1;
    color: rgb(0 67 24 / var(--tw-text-opacity));
}

.linea-vertical {
    width: 2px;
    /* grosor de la línea */
    height: 50px;
    /* altura de la línea */
    background-color: #5e4db5;
    /* color de la línea */
}

.compare .icon {
    width: 90px;
    height: 90px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.pelotainer h3 {
    font-size: 55px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    line-height: 3.75rem !important;
}

.img-box {
    /* border-radius: 22px; */
    overflow: hidden;
}

.values {
    text-align: center;
    margin-top: 4rem;
}

.values h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #5C45E2;
}

.values p {
    color: #5C45E2b0;
    margin-top: 0.5rem;
}

.values-grid {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media(min-width: 640px) {
    .compare .items {
        grid-template-columns: 1fr auto 1fr;
        align-items: flex-start;
    }
}

@media(max-width: 1000px) {
    .hero h1 {
        font-size: 70px;
    }

    .compare {
        padding: 5rem;
    }
}

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

@media(min-width: 640px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



@media (max-width: 1250px) {
    .linea-vertical {
        height: 75px;
    }
}

@media (max-width: 1060px) {
    .linea-vertical {
        height: 100px;
    }
}

@media (max-width: 730px) {
    .linea-vertical {
        height: 125px;
    }
}

@media (max-width: 700px) {
    .linea-vertical {
        height: 145px;
    }
}



@media (max-width: 700px) {
    .hero h1 {
        font-size: 55px;
        line-height: 3rem;
    }

    .orange h2,
    .pelotainer h3 {
        font-size: 45px;
        line-height: 3rem;
    }

    .dedication h2 {
        font-size: 45px;
        line-height: 3rem;
    }

    .comparative {
        font-size: 40px;
    }

    .hide-sm {
        font-size: 20px;
    }

    .joinOur-wrap {
        border-radius: 0;
        padding: 24px 16px;
    }

    .joinOur-apply {
        justify-self: flex-start;
    }

    .testimonial {
        padding: 3rem 2rem;
    }

}

@media (max-width: 640px) {
    .linea-vertical {
        height: 50px;
    }

    .hero {
        margin-top: 100px;
        padding: 2.5rem 2rem;
    }

    /* 
    .hero h1 {
        font-size: 55px;
        line-height: 3rem;
    } */

    .compare,
    .orange,
    .green,
    .light-green,
    .lime {
        padding: 2rem 1rem;
    }

    .values-grid {
        display: block !important;
    }

    .values-grid .value-card {
        margin-bottom: 1.5rem;
    }

    .dedication.text-center {
        padding: 0 1.5rem 4rem;
    }
}

@media (max-width: 560px) {
    .hero h1 {
        font-size: 45px;
        line-height: 3rem;
    }

    .orange h2,
    .pelotainer h3 {
        font-size: 35px !important;
        line-height: 2.5rem !important;
    }

    .dedication h2 {
        font-size: 35px !important;
        line-height: 2.5rem !important;
    }

    .comparative {
        font-size: 30px;
    }

    .value-card {
        padding: 2rem;
    }

    .dedication.text-center {
        padding-bottom: 0;
    }

}

@media (max-width: 475px) {
    .hero h1 {
        font-size: 40px;
        line-height: 3rem;
    }

    .orange h2,
    .pelotainer h3 {
        font-size: 35px !important;
        line-height: 2.5rem !important;
    }

    .dedication h2 {
        font-size: 35px !important;
        line-height: 2.5rem !important;
    }


    .comparative {
        font-size: 30px;
    }
}

@media (max-width: 440px) {
    .hero h1 {
        font-size: 35px;
        line-height: 2.2rem;
    }

    .value-card {
        padding: 1.5rem;
    }


    .orange h2,
    .pelotainer h3 {
        font-size: 25px !important;
        line-height: 1.8rem !important;
    }

    .dedication h2 {
        font-size: 25px !important;
        line-height: 1.8rem !important;
    }


    .comparative {
        font-size: 20px;
    }
}