.OurCommitment { margin: 100px 0 180px 0; }
.OurCommitment .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
}

.OurCommitment .col {
    padding-top: 40px;
    border-top: 1px solid #451B17;
}

.OurCommitment .title {
    font-family: 'Manrope';
    font-size: 28px;
    font-weight: 500;
    line-height: 38px;
    color: #FF3300;
}
.OurCommitment .description * {
    font-family: 'PT Serif';
    font-size: clamp(28px, 4vw,48px);
    font-weight: 400;
    line-height: 50px;
    letter-spacing: -1px;
    color: #451B17;
}
.OurCommitment .description strong {
    position: relative;
    background: linear-gradient(to right, #FF3300, #FF3300 50%, #451B17 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 1s 0.5s ease;
    text-decoration: none;
}
.OurCommitment .viewport .description strong { background-position: 0 100%; }

/*Restructuration Block*/
/* Box container */
.OurCommitment .boxesGrid .box .boxContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-bottom: 20px;
}

/* Posicionamiento específico de los boxes */
.OurCommitment .boxesGrid .box:nth-of-type(4n+1) { margin-top: 80px; margin-left: 20%; }

.OurCommitment .boxesGrid .box:nth-of-type(4n),
.OurCommitment .boxesGrid .box:nth-of-type(5n) { margin-right: 30%; }
.OurCommitment .boxesGrid .box:nth-of-type(4n-1) .boxContainer { margin-bottom: 100px; }

.OurCommitment .boxesGrid .box{ display: flex; }
.OurCommitment .boxesGrid .box.left { justify-content: flex-start; }
.OurCommitment .boxesGrid .box.right { justify-content: flex-end; }

.OurCommitment .boxesGrid .box .texts { width: 270px; }

.OurCommitment .boxesGrid .box .xNumbs {
    display: flex;
    flex-direction: row;
}

.OurCommitment .boxesGrid .box .hideOverflow{ overflow: hidden; }

/* Estilos de números dentro de xNumbs */
.OurCommitment .boxesGrid .box .xNumbs * {
    font-family: 'Manrope';
    font-weight: 500;
    font-size: clamp(82px, 4vw,120px);
    line-height: 1;
    letter-spacing: -7px;
}

/* Estilos de texto */
.OurCommitment .boxesGrid .box .text {
    font-family: 'Manrope';
    font-size: clamp(14px, 17px ,20px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-transform: uppercase;
}

/*Animations Order*/
.OurCommitment .boxesGrid .box .boxContainer {
    width: 520px;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .5s ease-out, opacity 1.5s ease-out;
}

.OurCommitment .ourcommitment.viewport .boxesGrid .box:nth-of-type(4n+1) .boxContainer { opacity: 1; transform: translateX(0%); transition-delay: 0s; }
.OurCommitment .ourcommitment.viewport .boxesGrid .box:nth-of-type(4n+2) .boxContainer { opacity: 1; transform: translateX(0%); transition-delay: 0.5s; }
.OurCommitment .ourcommitment.viewport .boxesGrid .box:nth-of-type(4n+3) .boxContainer { opacity: 1; transform: translateX(0%); transition-delay: 1s; }
.OurCommitment .ourcommitment.viewport .boxesGrid .box:nth-of-type(4n+4) .boxContainer { opacity: 1; transform: translateX(0%); transition-delay: 1.5s; }

.OurCommitment .ourcommitment .boxContainer .image{ width: 168px; height: 168px; }
.OurCommitment .ourcommitment .boxContainer .image img{ object-fit: contain; height: 100%;}

@media screen and (max-width: 992px){
    .OurCommitment .boxesGrid .box:nth-of-type(4n+1) { margin-top: 40px!important;}
    .OurCommitment { margin: 91px 0 120px 0; }

    .OurCommitment .boxesGrid .box .boxContainer { width: 100%; margin-bottom: 48px!important;gap: 25px; }

    .OurCommitment .description *{
        font-family: 'PT Serif';
        font-style: normal;
        font-weight: 400;
        line-height: 105%; /* 29.4px */
        letter-spacing: -1px;
    }
}

@media screen and (max-width: 767px){
    .OurCommitment .boxesGrid .box .boxContainer .image img{min-width: 110px; width: 100%; height: 110px; }
    .OurCommitment .ourcommitment .boxContainer .image{ width: 110px; height: 110px; }

    .OurCommitment .wrapper {
        display: block;
    }
    .OurCommitment .boxesGrid .box:nth-of-type(4n+1),
    .OurCommitment .boxesGrid .box:nth-of-type(4n+2),
    .OurCommitment .boxesGrid .box:nth-of-type(4n+3),
    .OurCommitment .boxesGrid .box:nth-of-type(4n+4){ margin: 0; }
    .OurCommitment .boxesGrid .box.left,
    .OurCommitment .boxesGrid .box.right{ justify-content: center; }

    .OurCommitment .col:last-of-type{ border: unset; }
}




/*.OurCommitment .boxesGrid .box {
    min-height: 260px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 24px;
    justify-content: space-between;
}
.OurCommitment .boxesGrid .box:first-child { grid-column: 2 }
.OurCommitment .box .kicker {
    font-family: 'Manrope';
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
    color: #fffff9;
}
.OurCommitment .box .numberBox {
    font-family: 'Manrope';
    font-size: 100px;
    font-weight: 700;
    line-height: 80px;
    letter-spacing: -7px;
}
.OurCommitment .box .boxDescription * {
    font-family: 'Manrope';
    font-size: 21px;
    font-weight: 700;
    line-height: 27px;
    text-align: right;
}
.OurCommitment .box-image { background-blend-mode: overlay; background-color: rgba(255, 51, 0, 0); transition: background-color .5s linear; }
.OurCommitment .box-image:hover { background-color: rgba(255, 51, 0, .7); transition: background-color .5s linear; }

@media screen and (max-width: 1400px) {
    .OurCommitment .boxesGrid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
    .OurCommitment .boxesGrid, .OurCommitment .wrapper { grid-template-columns: repeat(1, 1fr); }
    .OurCommitment .boxesGrid .box:first-child { grid-column: 1; }
    .OurCommitment .title { font-size: 24px; line-height: 1.35; }
    .OurCommitment .description * { font-size: 28px;line-height: 1.05; }
    .OurCommitment .col:nth-child(2) { border-top: 0; padding-top: 0; }
    .OurCommitment { margin: 50px 0; }
}*/