/* About  animation start ---------------------------------- */
.global-img {
    position: relative;
    min-width: 50%;
    overflow: hidden;
    transition: all 0.4s ease;

    &:before {
        position: absolute;
        top: 0;
        left: -100%;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        transform: skewX(25deg);
        z-index: 2;
    }


    img {
        width: 100%;
        object-fit: cover;
    }

    @include md {
        min-width: 100%;
        margin-bottom: 30px;
    }

    &:hover {
        &:before {
            animation: shine 1.9s;
        }
    }
}

/* About  animation end ---------------------------------- */
/* About 1 start ---------------------------------- */
.img-box1 {
    position: relative;
    transition: all 0.4s ease;
    z-index: 3;
    min-height: 550px;

    @include lg {
        margin-bottom: 90px;
    }

    .img1 {
        display: inline-block;
        width: 370px;
        height: 370px;
        text-align: center;
        margin: auto;
        transform: rotate(-15deg);
        margin-top: 38px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 22px;
        }

        &.style2 {
            position: absolute;
            right: 0%;
            top: 22%;
            transform: rotate(5deg);

            @include lg {
                right: 30%;
            }

            @include md {
                right: 10%;
            }

            @include sm {
                right: 0;
            }

            @include vxs {
                display: none;
            }
        }
    }


    .about-shape {
        position: absolute;
        bottom: 0;
        left: -70px;
        z-index: -1;
    }
}

/* About 1 end ---------------------------------- */
/* About 2 start ---------------------------------- */
.img-box2 {
    margin-left: -35px;
}

.th-experience {
    position: absolute;
    bottom: 24px;
    right: 10px;
    z-index: 2;
    width: 201px;
    height: 189px;
    display: block;
    text-align: center;
    padding: 50px 10px;
    color: $white-color;

    @include vxs {
        bottom: 0px;
        right: 0px;
        width: 140px;
        height: 140px;
        padding: 40px 10px;

    }

    &:before,
    &:after {
        content: "";
        position: absolute;
        inset: 0;
        mask-image: url("../img/shape/about_shape.png");
        background-repeat: no-repeat;
        background-size: cover;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;

    }

    &:before {
        background: $smoke-color;
        z-index: -1;
    }

    &:after {
        inset: -10px;
        background-color: $title-color;
        z-index: -2;
    }

    @include lg {
        right: 10%;
    }

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

    .experience-year {
        font-size: 48px;
        font-weight: 600;
        line-height: 48px;
        color: $theme-color4;
        margin-bottom: 0px;

        @include vxs {
            font-size: 36px;
            line-height: 36px;
        }

        img {
            margin-right: 10px;
        }
    }

    .experience-text {
        font-family: $title-font;
        font-weight: 600;
        font-size: 36px;
        line-height: 46px;
        color: $title-color;
        margin-bottom: 0;

        @include vxs {
            font-size: 25px;
        }
    }

    .about-shape3 {
        position: absolute;
        bottom: -20px;
        right: 35px;
        width: 130px;
        height: 6px;
        background: $title-color;
        filter: blur(8.75px);
        z-index: -1;

    }
}

.year-counter {
    max-width: 230px;
    text-align: left;
    padding: 30px;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    background-color: $white-color;
    position: relative;
    z-index: 3;

    &_number {
        font-family: $title-font;
        font-size: 70px;
        font-weight: 700;
        color: $theme-color;
        line-height: 50px;
        margin-bottom: 20px;
    }

    &_text {
        font-family: $title-font;
        color: $title-color;
        font-size: 22px;
        line-height: 32px;
        font-weight: 700;
        margin-bottom: -0.32em;
        text-transform: uppercase;
    }
}

/* About 2  end ---------------------------------- */
/* About 3 start ----------------------------------*/
.img-box3 {
    position: relative;
    z-index: 3;
    margin-left: -100px;

    @media(max-width: 1699px) {
        margin: 0 0 50px 0;
    }

    @include lg {
        margin: 0 0 50px 0;
    }

    .img1 {
        min-width: 620px;

        @media(max-width: 1699px) {
            min-width: 100%;
        }

        @include lg {
            min-width: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 10px solid $theme-color;
            animation: morph3 20s ease-in-out infinite;
        }
    }

    .about-shape {
        position: absolute;
        top: 0;
        left: -8%;
        z-index: -1;

        @include sm {
            left: 0;
        }
    }

    .about-shape2 {
        position: absolute;
        bottom: 0%;
        right: 0%;
        z-index: -1;
    }


}

.about-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

    @include lg {
        justify-content: flex-start;
        gap: 80px;
    }

    @include sm {
        display: block;
    }
}

.about-item {
    display: flex;
    gap: 10px;
    max-width: 292px;

    &_icon {
        i {
            font-size: 30px;
            color: $theme-color;
        }
    }

    .box-title {
        font-size: 20px;
        margin-bottom: 5px;
    }

    &_text {
        font-family: $body-font;
    }
}

.about-blockquote {
    margin: 0;
    max-width: 270px;
    height: 168px;
    padding: 48px 30px 40px 30px;
    border-radius: 20px;
    text-align: center;
    font-family: $title-font;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: $title-color;

    @include sm {
        margin-bottom: 40px; 
        max-width: 100%;
    }

    &:after {
        content: url("data:image/svg+xml,%3Csvg width='35' height='23' viewBox='0 0 35 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5776 17.6741C25.4747 18.8664 24.9893 20.1095 23.8903 21.2623C30.2744 19.1494 34 12.8908 34 7.66667C34 3.98743 31.0082 1 27.3116 1C23.6151 1 20.6233 3.98743 20.6233 7.66667C20.6233 10.2718 22.1225 12.5312 24.3148 13.6285L24.5591 13.7508L24.7073 13.9804L23.8672 14.5227C24.7073 13.9804 24.7077 13.9809 24.708 13.9815L24.7089 13.9828L24.7108 13.9858L24.7155 13.9932L24.7285 14.0141C24.7387 14.0307 24.7519 14.0525 24.7676 14.0794C24.799 14.1332 24.8406 14.2074 24.8884 14.3002C24.9839 14.4852 25.1058 14.747 25.2216 15.0701C25.4513 15.7112 25.6681 16.6259 25.5776 17.6741ZM6.35672 17.6741C6.25383 18.8664 5.76842 20.1095 4.66937 21.2623C11.0535 19.1494 14.7791 12.8908 14.7791 7.66667C14.7791 3.98743 11.7873 1 8.09075 1C4.39421 1 1.40239 3.98743 1.40239 7.66667C1.40239 10.2718 2.90162 12.5312 5.09387 13.6285L5.3382 13.7508L5.48639 13.9804L4.64627 14.5227C5.48639 13.9804 5.48676 13.9809 5.48714 13.9815L5.48797 13.9828L5.48986 13.9858L5.49458 13.9932L5.50759 14.0141C5.5121 14.0214 5.51719 14.0298 5.52283 14.0392C5.52995 14.051 5.53793 14.0644 5.54669 14.0794C5.57808 14.1332 5.61967 14.2074 5.66753 14.3002C5.76299 14.4852 5.88492 14.747 6.00067 15.0701C6.2304 15.7112 6.44718 16.6259 6.35672 17.6741Z' stroke='%23FE5A86' stroke-width='2'/%3E%3C/svg%3E%0A");
    }


}

/* About 3 end ----------------------------------*/

/* about 4 -----------------------*/


.th-anim {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transform-origin: left;
    }
}

.benefit-area {
    padding: 80px 0 183px 0;


}

/* about 2  start ---------------------------   */
.about-block {
    display: flex;
    gap: 35px;
    max-width: 450px;

    @include xl {
        max-width: 390px;
    }

    @include lg {
        max-width: 100%;
    }

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

    @include sm {
        margin-bottom: 55px;
    }

    @include vxs {
        gap: 15px;
    }


    &.style1 {
        direction: rtl;

        .about-block {
            &_icon {
                background-color: $theme-color3;
            }
        }

        @include sm {
            direction: ltr;
        }

        &:nth-child(2) {
            .about-block {
                &_icon {
                    background-color: $theme-color4;
                }
            }
        }

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

        @include sm {
            margin-bottom: 0;
        }
    }

    &:nth-child(2) {
        .about-block {
            &_icon {
                background-color: $theme-color2;
            }
        }
    }

    &_icon {
        position: relative;
        min-width: 92px;
        height: 92px;
        line-height: 92px;
        display: block;
        margin: auto;
        text-align: center;
        background-color: $theme-color;
        border-radius: 50%;

        @include md {
            min-width: 72px;
            height: 72px;
            line-height: 72px;
        }

        .svg-img path {
            fill-opacity: 1;
            stroke: $white-color;
            fill: $white-color;
            stroke-width: 1;
            stroke-dasharray: 2500;
            stroke-dashoffset: 2500;
        }


        &:before {
            content: "";
            position: absolute;
            inset: -6px;
            border: 1px dashed #3A3D72;
            border-radius: 50%;
            animation: spin 40s infinite linear;
            transition: all ease 0.4s;
        }

        img {

            transition: all 0.4s ease-in-out;
        }
    }

    .box-title {
        margin-bottom: 10px;

        @include vxs {
            font-size: 20px;
        }
    }

    &:hover {
        .about-block {
            &_icon {
                path {
                    animation: fillAni 7s ease-in-out;
                    stroke: $white-color;
                    fill: $white-color;
                }
            }
        }
    }
}

.about-image {
    max-width: 266px;
    height: 274px;
    background-color: $smoke-color;
    border-radius: 200px 200px 0 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* about 2  end ---------------------------   */