/* About 1 ---------------------------------- */
.img-box1 {
    position: relative;
    z-index: 2;
    margin-right: 50px;
    @include xl {
        margin-right: 0;
    }
    .img1 {
        width: 100%;
        img {
            width: 100%;
        }
    }
    .video-content {
        display: grid;
        align-items: center;
        justify-content: center;
        @include equal-size(184px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-55%, -55%);
        background-color: $white-color;
        border-radius: 20px 0 20px 0;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
        @include xs {
            @include equal-size(135px);
        }
        @include vxs {
            @include equal-size(115px);
        }
        i {
            --icon-size: 70px;
        }
    }
    .box-shape {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-53%, -50%);
        @include equal-size(364px);
        border-radius: 30px;
        z-index: -1;
        @include xs {
            @include equal-size(260px);
            border-radius: 15px;
        }
        @include vxs {
            @include equal-size(220px);
        }
        span {
            position: absolute;
            border: 1px solid $theme-color2;
            inset: 0;
            border-radius: inherit;
            opacity: 0.4;
            &:nth-child(2) {
                inset: 10px 10px -10px -10px;
            }
            &:nth-child(3) {
                inset: 20px 20px -20px -20px;
            }
            &:nth-child(4) {
                inset: -10px -10px 10px 10px;
            }
            &:nth-child(5) {
                inset: -20px -20px 20px 20px;
            }
        }
    }
}

@include lg {
    .img-box1 {
        max-width: 550px;
    }
}

.about-feature {
    &-wrap {
        position: relative;
        max-width: 600px;
        margin-bottom: -74px;
        background-size: 100% 100%;
        padding-bottom: 115px;
        @include sm {
            background-image: none !important;
            padding-bottom: 0;
            margin-bottom: 35px;
        }
        .about-feature {
            &:nth-child(even) {
                position: absolute;
                right: 0;
                bottom: 0;
                @include sm {
                    position: static;
                }
            }
        }
    } 
    display: flex;
    gap: 15px;
    border-radius: 30px;
    padding: 30px;
    text-align: left;
    max-width: 340px;
    @include xl {
        padding: 15px;
        max-width: 310px;
    }
    @include lg {
        padding: 30px;
        max-width: 340px;
    }
    @include sm {
        background-color: $smoke-color;
        border: 1px solid $border-color;
        margin: 0 auto 24px auto;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .box-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    .box-text {
        line-height: 26px;
    }
    &:hover {
        .box-icon {
            img {
                transform: rotateY(180deg);
            }
        }
    }
}

/* About 3 ---------------------------------- */
.img-box5 {
    position: relative;
    z-index: 2;
    margin-right: 50px;
    padding-bottom: 75px;
    @include xl {
        margin-right: 0;
    }
    @include sm {
        margin-bottom: 35px;
    }
    .img1,
    .img2 {
        display: inline-block;
        img {
            width: 100%;
            border-radius: 30px;
            @include xs {
                border-radius: 15px;
            }
        }
    }
    .img1 {
        @include lg {
            width: 65%;
        }
        @include md {
            width: 70%;
        }
        @include sm {
            width: 75%;
        }
    }
    .img2 {
        position: absolute;
        bottom: 0;
        right: 0;
        @include lg {
            width: 40%;
        }
        @include sm {
            width: 45%;
        }
    }
    .box-shape {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-44%, -48%);
        @include equal-size(384px);
        border-radius: 30px;
        z-index: -1;
        @include sm {
            @include equal-size(300px);
        }
        @include xs {
            @include equal-size(260px);
            border-radius: 15px;
        }
        @include vxs {
            @include equal-size(220px);
        }
        span {
            position: absolute;
            border: 1px solid $theme-color2;
            inset: 0;
            border-radius: inherit;
            opacity: 0.4;
            &:nth-child(2) {
                inset: 10px 10px -10px -10px;
            }
            &:nth-child(3) {
                inset: 20px 20px -20px -20px;
            }
            &:nth-child(4) {
                inset: -10px -10px 10px 10px;
            }
            &:nth-child(5) {
                inset: -20px -20px 20px 20px;
            }
        }
    }
}

.about-feature {
    &-area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
        max-width: 700px;
        @include vxs {
            grid-template-columns: repeat(1, 1fr);
            gap: 30px;
        }
        .about-feature {
            padding: 0 !important;
            background-color: transparent !important;
            border: none !important;
            margin: 0 !important; 
            @include sm {
                flex-direction: column;
                text-align: center;
            }
        }
    } 
}

/* Campaign 1 ---------------------------------- */
.img-box2 {
    margin-left: 40px;
    @include ml {
        margin-left: 52px;
    }
    @include xl {
        margin-left: 0;
    }
    .img1 {
        img {
            border-radius: 50px;
            width: 100%;
            @include md {
                border-radius: 30px;
            }
        }
    }
}
.campaign-feature {
    &-area {
        background-color: $smoke-color;
        border-radius: 30px 180px 0 30px;
        padding: 60px 40px 40px 40px;
        margin-right: -266px;
        position: relative;
        z-index: 3;
        @include xl {
            margin-top: -21px;
        }
        @include lg {
            background-color: transparent;
            margin: 0 0 40px 0;
            padding-top: 40px;
        }
        @include xs {
            padding: 40px 10px;
        }
        &:before {
            content: '';
            position: absolute;
            inset: 20px 20px 0 0;
            background-color: $theme-color;
            border-radius: 30px 165px 0 30px;
            z-index: -1;
            @include lg {
                border-radius: 120px 120px 30px 30px;
                inset: 0;
            }
            @include xs {
                border-radius: 30px;
            }
        }
    }
    &-wrap {
        display: grid;
        grid-template-columns: auto auto;
        gap: 30px;
        margin-bottom: 40px;
        @include lg {
            max-width: 630px;
            margin-left: auto;
            margin-right: auto;
        }
        @include vxs {
            grid-template-columns: auto;
            gap: 30px;
        }
    }
    display: flex;
    gap: 20px;
    text-align: left;
    @include sm {
        flex-direction: column;
        text-align: center;
    }
    .box-icon {
        @include equal-size-lineHeight(80px);
        text-align: center;
        background-color: rgba($color: #fff, $alpha: 0.15);
        border-radius: 99px;
        position: relative;
        z-index: 2;
        color: $theme-color;
        font-size: 28px;
        &:before {
            content: '';
            position: absolute;
            inset: 10px;
            background-color: $white-color;
            border-radius: inherit;
            z-index: -1;
        }
        @include sm {
            margin-left: auto;
            margin-right: auto;
        }
    }
    .box-title {
        font-size: 30px;
        color: $white-color;
        margin-bottom: 10px;
    }
    .box-text {
        max-width: 195px;
        color: $white-color;
        @include sm {
            max-width: 100%;
        }
    }
}

/* About 2 ---------------------------------- */
@media (min-width: 1300px) {
    .img-box5,
    .img-box3 {
        margin-right: 50px;
    }
}
.img-box3 {
    --space: 75px;
    @include xl {
        --space: 40px;
    }
    @include lg {
        --space: 80px;
        margin-bottom: 40px;
    }
    @include md {
        --space: 30px;
    }
    @include md {
        --space: 20px;
    }
    .img1 {
        border-radius: 24px;
        margin-left: var(--space);
        position: relative;
        z-index: 2;
        &:before {
            content: '';
            position: absolute;
            inset: calc(-1 * var(--space)) var(--space) var(--space) calc(-1 * var(--space));
            border-radius: inherit;
            background-color: rgba($color: #27282E, $alpha: 0.35);
            z-index: -1;
        }
        img {
            width: 100%;
            border-radius: inherit;
        }
    }
}

.feature-media {
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
    .box-icon {
        @include equal-size-lineHeight(130px);
        background-color: $theme-color2;
        border-radius: 30px;
        text-align: center;
        img {
            background-color: $white-color;
            border-radius: 15px;
            padding: 15px;
        }
    }
    .box-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    &.style-left {
        flex-direction: row-reverse;
        text-align: right;
    }
    @include md {
        flex-direction: column !important;
        text-align: center !important;
    }
}

.video-btn {
    .link-btn {
        color: $title-color;
        padding-bottom: 4px;
        margin-left: 15px;
        &:hover {
            color: $theme-color2;
        }
        &:before {
            background-color: $theme-color2;
        }
    }
}

/* Direction 1 ------------------------------------*/
.img-box4 {
    margin-left: -50px;
    position: relative;
    z-index: 2;
    width: fit-content;
    @include xl {
        margin-left: -100px;
    }
    @include lg {
        margin-left: 0;
    }
    @include md {
        margin-top: 20px;
    }
    .img1 {
        width: 100%;
        img {
            max-width: fit-content;
            @include lg {
                max-width: 100%;
            }
        }
    }
    .location {
        position: absolute;
        animation: mapPulse 8s linear infinite;
        @include md {
            max-width: 250px;
        }
        @include sm {
            max-width: 150px;
        }
        @include xs {
            max-width: 100px;
        }
        @include vxs {
            max-width: 80px;
        }
        &:nth-child(1) {
            left: 55px;
            bottom: 40px;
            @include xs {
                bottom: 20px;
                left: 20px;
            }
        }
        &:nth-child(2) {
            top: 25px;
            left: 25%;
            animation-delay: 2s;
        }
        &:nth-child(3) {
            top: 15px;
            right: 5%;
            animation-delay: 4s;
        }
        &:nth-child(4) {
            right: 15%;
            bottom: 10px;
            animation-delay: 6s;
        }
    }
}

@keyframes mapPulse {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.5);
    }
}