@use '../../utils' as *;

.about-us-6 {

    &__shape {
        position: absolute;
        top: -27px;
        right: 38px;
        z-index: -1;

        @media #{$md, $sm, $xs} {
            display: none;
        }
    }
    &__media {
        position: relative;
        margin-left: 44px;
        z-index: 1;

        @media #{$lg, $md, $sm, $xs} {
            margin-left: 0;
        }

        img {
            object-fit: cover;
            @include border-radius(20px);
            max-width: 100%;

            @media #{$md} {
                max-width: 350px;
                display: flex;
                margin-left: auto;
                margin-right: auto;
            }

            @media #{$sm, $xs} {
                max-width: 300px;
                display: flex;
                margin-left: auto;
                margin-right: auto;
            }
            @media #{$xs} {
                max-width: 250px;
                display: flex;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    &__small-box {
        position: absolute;
        top: 288px;
        right: 38px;
        gap: 16px;
        display: flex;
        padding: 12px;
        width: 240px;
        align-items: center;
        @include border-radius(20px);
        background-color: var(--rr-common-white);
        box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05);


        &__icon {
            background-color: #E5F9ED;
            @include border-radius(500px);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 62px;
            height: 62px;

        }

        &__text {
            h5 {
                color: var(--rr-theme-black);
            }
        }
    }

    &__awarded-box {
        position: absolute;
        bottom: 22px;
        left: -44px;
        gap: 35px;
        max-width: 323px;
        display: flex;
        padding-top: 36px;
        padding-left: 43px;
        align-items: center;
        padding-bottom: 30px;
        padding-right: 35px;
        @include border-radius(20px);
        border: 1px solid #E4E5E5;
        background-color: var(--rr-common-white);

        @media #{$md, $sm} {
            left: -30px;
            top: 0;
            max-width: 305px;
            height: 130px;
        }
        @media #{$sm} {
            left: -6%;
            top: 165px;
            height: 100px;
            gap: 10px;
            max-width: 250px;
            padding: 10px;
        }
        @media #{$xs} {
            left: 0;
            position: inherit;
            margin-top: 70px;
            padding: 20px;
            gap: 15px;
        }

        h4 {
            @media #{$sm, $xs} {
                font-size: 20px;
                line-height: 30px;
            }
        }
    }

    &__content {
        margin-left: 110px;

        @media #{$lg, $md, $sm, $xs} {
            margin-left: 0;
        }
        @media #{$md, $sm, $xs} {
            margin-top: 40px;
        }
    }

    &__wrapper {
        margin-bottom: 37px;
    }

    &__item {
        display: flex;
        gap: 15px;

        &:not(:last-child) {
            margin-bottom: 30px;
        }

        &-icon {
            i {
                color: var(--rr-theme-glow);
                font-size: 16px;
            }
        }

        &-text {
            h4 {
                margin-bottom: 10px;
            }
        }
    }

    .rr-btn {
        padding: 20px 29px;
    }
}