.aboutBox {
    padding: 52px 140px;
    background: var(--gray) url('../../images/blog-bg.svg');
    background-size: cover;
    background-position: center center;
}

.aboutBox .aboutContent {
    display: flex;
    align-items: center;
    width: 100%;
}

.aboutContent .imgBox {
    width: 45%;
}

.imgBox img {
    width: 100%;
    max-width: unset;
    box-shadow: 4px 4px 19.8px 0px #00000040;
}

.aboutContent .contentBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 55%;
    margin-right: -30px;
}

.contentBox h1 {
    font-size: 32px;
    font-weight: 900;
    margin: 0;
}

.contentBox h1 span {
    color: var(--red);
}

.contentBox .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 52px 64px;
    background-color: var(--white);
    box-shadow: -11px 1px 30.5px 0px #00000024;
}

.content h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 18px;
    color: var(--red);
}

.content .contentText {
    margin-bottom: 40px;
}

.contentText p {
    margin: 0;
    font-size: 16px;
    text-align: center;
}

.content a {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.content a i.icon {
    width: 29px;
    height: 29px;
    -webkit-mask-size: 29px;
}

.aboutStats {
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: center;
}

.aboutStats .statsItem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.statsItem .number {
    direction: ltr;
    font-family: 'Arizonia', sans-serif;
    font-size: 52px;
}

.statsItem .title {
    font-size: 24px;
}

.valuesBox {
    margin: 100px 0 120px;
    display: flex;
    align-items: center;
    gap: 56px;
    width: 100%;
}

.valuesBox .valuesRight {
    width: calc(35% - 56px / 2);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.valuesRight h2 {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    color: var(--red);
}

.valuesRight p {
    font-size: 16px;
    margin: 0;
}

.valuesBox .valuesLeft {
    width: calc(65% - 56px / 2);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.valuesLeft .valuesItem {
    width: calc(50% - 10px);
    background-color: var(--white);
    padding: 24px 18px 24px 24px;
    box-sizing: border-box;
    display: flex;
    gap: 18px;
}

.valuesItem .iconBox {
    display: flex;
}

.iconBox i.icon {
    background-color: var(--red);
}

i.icon.quality {
    width: 29px;
    height: 32px;
    -webkit-mask-size: 29px;
}

i.icon.consult {
    width: 29px;
    height: 38px;
    -webkit-mask-size: 29px;
}

i.icon.secureShip {
    width: 29px;
    height: 28px;
    -webkit-mask-size: 28px;
}

i.icon.support {
    width: 29px;
    height: 26px;
    -webkit-mask-size: 26px;
}

.valuesItem .itemContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.itemContent h5 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.itemContent p {
    font-size: 12px;
    margin: 0;
}

.storyBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 170px;
}

.storyBox .storyContent {
    display: flex;
    flex-direction: column;
    width: 45%;
    align-items: flex-start;
    padding-top: 20px;
}

.storyContent span {
    font-size: 18px;
    opacity: .68;
    margin-bottom: 10px;
}

.storyContent h2 {
    font-size: 28px;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--red);
}

.storyContent p {
    font-size: 16px;
    margin-bottom: 32px;
    margin-top: 0;
}

.storyContent a {
    font-size: 16px;
    padding: 12px 78px;
}

.storyBox .imgBox {
    width: 55%;
    padding-right: 22px;
    box-sizing: border-box;
    position: relative;
}

.storyBox .imgBox::before {
    content: '';
    position: absolute;
    width: 10%;
    height: 110%;
    top: -5%;
    right: 0;
    background: var(--gray) url('../../images/blog-bg.svg');
    z-index: 1;
}

.storyBox .imgBox::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 98%;
    top: 0;
    right: 0;
    background: linear-gradient(269.98deg, #F3F3F300 0%, var(--gray) 10%, rgba(243, 243, 243, 0) 40%);
    z-index: 2;
}

.storyBox .noteBox {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 4px 4px 40px 0px #0000001A;
    position: absolute;
    bottom: -10%;
    width: 30%;
    right: 32%;
    z-index: 3;
}

.noteBox h6 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding-right: 10px;
}

.noteBox p {
    font-size: 12px;
    margin: 0;
    padding-right: 10px;
    border-right: 2px solid var(--red);
}


/*Mobile*/
@media screen and (max-width: 767px) {
    .aboutBox {
        padding: 107px 0 50px;
        position: relative;
    }

    .aboutBox .aboutContent {
        flex-direction: column;
    }

    .aboutContent .imgBox {
        width: 100%;
    }

    .imgBox img {
        width: 100%;
        max-width: unset !important;
        max-height: 300px;
        object-fit: cover;
    }

    .aboutContent .contentBox {
        width: 100%;
        margin-right: 0;
        gap: 16px;
    }

    .contentBox h1 {
        font-size: 18px;
        position: absolute;
        top: 50px;
    }

    .contentBox .content {
        padding: 24px 32px;
        box-sizing: border-box;
        margin-top: -12%;
        margin-left: 24px;
        margin-right: 24px;
    }

    .content h2 {
        margin-bottom: 16px;
        font-size: 16px;
    }

    .content .contentText {
        margin-bottom: 24px;
    }

    .contentText p {
        font-size: 14px;
    }

    .content a {
        font-size: 14px;
        padding: 8px 34px;
    }

    .content a i.icon {
        width: 19px;
        height: 19px;
        -webkit-mask-size: 19px;
    }

    .aboutStats {
        gap: 40px;
    }

    .statsItem .number {
        font-size: 42px;
    }

    .statsItem .title {
        font-size: 16px;
    }

    .valuesBox {
        margin: 78px 0 58px;
        gap: 32px;
        flex-wrap: wrap;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .valuesBox .valuesRight {
        width: 100%;
    }

    .valuesRight h2 {
        font-size: 20px;
        text-align: center;
    }

    .valuesRight p {
        font-size: 14px;
    }

    .valuesBox .valuesLeft {
        width: 100%;
        gap: 9px;
    }

    .valuesLeft .valuesItem {
        width: calc(50% - 9px/2);
        padding: 16px 8px 16px 16px;
        gap: 8px;
    }

    i.icon.quality {
        width: 20px;
        height: 22px;
        -webkit-mask-size: 20px;
    }

    i.icon.consult {
        width: 20px;
        height: 26px;
        -webkit-mask-size: 20px;
    }

    i.icon.secureShip {
        width: 20px;
        height: 19px;
        -webkit-mask-size: 19px;
    }

    i.icon.support {
        width: 20px;
        height: 18px;
        -webkit-mask-size: 18px;
    }

    .itemContent h5 {
        font-size: 14px;
    }

    .itemContent p {
        font-size: 11px;
    }

    .storyBox {
        margin-bottom: 70px;
    }

    .storyBox .storyContent {
        width: 100%;
        align-items: center;
        padding-top: 0;
        order: 1;
        padding-left: 24px;
        padding-right: 24px;
        z-index: 3;
    }

    .storyContent span {
        font-size: 16px;
    }

    .storyContent h2 {
        font-size: 20px;
    }

    .storyContent p {
        font-size: 14px;
        text-align: center;
    }

    .storyContent a {
        font-size: 14px;
    }

    .storyBox .imgBox {
        width: 100%;
        padding-right: 0;
        padding-bottom: 22px;
        order: 0;
    }

    .storyBox .imgBox::before {
        width: 100%;
        height: 10%;
        top: unset;
        bottom: -5%;
        /*background: var(--gray) url('../../images/blog-bg.svg');*/
    }

    .storyBox .imgBox::after {
        height: 100%;
        top: unset;
        bottom: 0;
        background: linear-gradient(0deg, #F3F3F300 0%, var(--gray) 10%, rgba(243, 243, 243, 0) 40%);
    }

    .storyBox .noteBox {
        display: none;
    }
}