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

/*----------------------------------------*/
/*  4.1 About css
/*----------------------------------------*/

.bd-about {
    &-wrapper {
        &.style-one {
            .bd-about {
                &-thumb {
                    position: relative;

                    &::before {
                        position: absolute;
                        content: "";
                        height: 232px;
                        width: 140px;
                        background-color: var(--bd-secondary);
                        left: -38px;
                        bottom: -35px;
                        border-bottom-left-radius: 6px;
                        z-index: -1;

                        @media #{$xs} {
                            display: none;
                        }
                    }

                    &-inner {
                        position: relative;
                        margin: 30px 100px 100px 30px;

                        @media #{$xs} {
                            margin: 0 0 0 0;
                        }
                    }

                    &-wrapper {
                        position: relative;
                        z-index: 5;
                    }

                    &-small {
                        position: absolute;
                        right: -100px;
                        bottom: -100px;
                        z-index: 5;
                        max-width: 300px;

                        @media #{$xs} {
                            position: inherit;
                            right: 0;
                            bottom: 0;
                            z-index: 5;
                            max-width: 100%;
                            margin-top: 30px;
                        }

                        &::before {
                            position: absolute;
                            content: "";
                            width: 310px;
                            height: 310px;
                            border-radius: 12px;
                            left: -10px;
                            top: -10px;
                            background-color: var(--bd-white);
                            z-index: -1;

                            @media #{$xs} {
                                display: none;
                            }
                        }

                        img {
                            border-radius: 12px;
                        }
                    }

                    img {
                        border-radius: 6px;
                    }
                }

                &-thumb-shape {
                    position: absolute;
                    top: -15px;
                    z-index: 1;
                    left: -30px;
                    animation: upDown 1.8s ease-in-out 1.8s forwards infinite alternate;
                }

                &-content-wrapper {
                    margin-left: 30px;

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

                    .bd-about {
                        &-feature {
                            &-title {
                                margin-bottom: 3px;
                                color: var(--bd-white);
                            }

                            &-desc {
                                color: rgba($color: $white, $alpha: .7);
                            }

                            &-list {
                                margin: 35px 0 40px;
                            }

                            &-icon {
                                span {
                                    width: 50px;
                                    height: 50px;
                                    border: 2px solid rgba($color: $white, $alpha: .3);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border-radius: 6px;
                                    transition: .5s;

                                    i {
                                        font-size: 27px;
                                        color: var(--bd-white);
                                        transition: .5s;
                                    }
                                }
                            }

                            &-item {
                                display: flex;
                                gap: 20px;

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

                                &:hover {
                                    .bd-about-feature-icon {
                                        span {
                                            background-color: var(--bd-white);
                                            border-color: var(--bd-white);

                                            i {
                                                color: var(--bd-primary);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .bd-section-paragraph {
                color: rgba($color: $white, $alpha: .7);

                &.has-border-sec {
                    position: relative;
                    padding-left: 17px;

                    &::before {
                        background-color: var(--bd-secondary);
                        content: "";
                        height: calc(100% + -10px);
                        left: 0;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 2px;
                        z-index: 1;
                    }
                }
            }
        }

        &.style-two {
            .bd-about {
                &-thumb-inner {
                    position: relative;
                    display: flex;
                    gap: 30px;

                    @media #{$xxs} {
                        gap: 15px;
                    }
                }

                &-thumb {
                    &.has-small {
                        max-width: 400px;
                    }

                    img {
                        border-radius: 6px;
                    }
                }

                &-experience {
                    background-color: var(--bd-primary);
                    padding: 30px 30px;
                    border-radius: 6px;
                    text-align: center;
                    margin-bottom: 30px;

                    @media #{$sm} {
                        padding: 20px 20px;
                    }

                    @media #{$xxs} {
                        padding: 15px 15px;
                    }

                    &-title {
                        color: var(--bd-white);
                        font-size: 48px;
                    }

                    p {
                        color: rgba($color: $white, $alpha: .9);
                    }
                }

                &-review {
                    background-color: var(--bd-white);
                    padding: 30px 30px;
                    border-radius: 6px;
                    box-shadow: 0px 6px 100px 0px rgba(8, 5, 33, 0.1);
                    width: 100%;
                    margin-top: 30px;

                    @media #{$xl} {
                        padding: 20px 20px;
                    }

                    @media #{$xxs} {
                        padding: 15px 15px;
                    }

                    p {
                        line-height: 1;
                    }
                }

                &-content-wrapper {
                    margin-left: 30px;

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

                &-feature-list {
                    margin: 35px 0 50px;
                }
            }
        }

        &.style-three {
            .bd-about-content-wrapper {
                margin-left: 30px;

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

                .bd-feature-list {
                    &-wrapper {
                        margin-top: 35px;
                    }
                    display: flex;
                    margin-bottom: 30px;
                    &:hover {
                        .icon {
                            background-color: var(--bd-primary);
                            color: var(--bd-white);
                        }
                    }
                    .icon {
                        height: 50px;
                        width: 50px;
                        min-width: 50px;
                        border-radius: 100%;
                        margin-right: 15px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--primary-rgb-1);
                        color: var(--bd-primary);
                        transition: var(--transition);
                        i {
                            font-size: 25px;
                        }
                    }

                    &-content {
                        overflow: hidden;

                        .title {
                            color: var(--bd-theme-black);
                            font-weight: 600;
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }

        &.style-four {
            .bd-about {
                &-thumb {
                    &-inner {
                        position: relative;
                        margin: 0 0px 90px 70px;
                    }

                    &.has-radius {
                        img {
                            border-radius: 50%;
                        }

                        &.has-small {
                            position: absolute;
                            border-radius: 50%;
                            bottom: -100px;
                            left: -30px;
                            border: 15px solid var(--bd-white);
                            max-width: 270px;

                            @media #{$lg} {
                                bottom: -120px;
                            }
                        }
                    }
                }

                &-shape {
                    position: absolute;

                    &.has-shape {
                        &-one {
                            left: -70px;
                            top: 0;
                            animation: treeMove 4s linear 0s infinite;
                        }

                        &-two {
                            z-index: -1;
                            bottom: -50px;
                            left: -40px;
                            z-index: -1;
                            max-width: 630px;
                        }

                        &-three {
                            right: 50px;
                            bottom: 10px;
                            z-index: 1;
                            width: 150px;
                        }
                    }
                }

                &-content-wrapper {
                    margin-left: 30px;
                }

                &-feature {
                    &-list-wrapper {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 20px 30px;
                    }

                    &-name {
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        margin-bottom: 10px;
                    }

                    &-icon {
                        span {
                            width: 20px;
                            height: 20px;
                            background-color: var(--bd-primary);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: var(--bd-white);
                            font-size: 10px;
                            border-radius: 50%;
                        }
                    }
                }

                &-author {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    position: relative;
                    padding: 0px 30px 0 0px;
                    border-right: 1px solid var(--bd-border-primary);

                    &-title-thumb {
                        margin-bottom: 5px;
                    }

                    &-info-wrapper {
                        display: flex;
                        gap: 30px;
                        align-items: center;
                        margin: 30px 0 35px 0;
                    }

                    &-designation {
                        color: var(--bd-taxonomy-color);
                    }

                    &-thumb {
                        img {
                            width: 70px;
                            height: 70px;
                            border-radius: 50%;
                        }
                    }
                }

                &-contact {
                    display: flex;
                    gap: 15px;
                    align-items: center;

                    &-icon {
                        span {
                            width: 45px;
                            height: 45px;
                            border-radius: 50%;
                            text-align: center;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            background-color: var(--bd-primary);
                            transition: all 0.5s;

                            i {
                                font-size: 14px;
                                color: var(--bd-white);
                            }
                        }
                    }

                    &-text {
                        display: block;
                        color: var(--bd-taxonomy-color);
                        margin-bottom: 5px;
                    }

                    &-call {
                        a {
                            color: var(--bd-taxonomy-color);

                            &:hover {
                                color: var(--bd-primary);
                            }
                        }
                    }
                }
            }
        }

        &.style-five {
            position: relative;

            .shape {
                position: absolute;
                top: -30px;
                left: -30px;
                animation: shape-rote 35s linear infinite;
            }

            .bd-about {
                &-thumb {
                    &-wrapper {
                        display: flex;
                        align-items: end;
                        gap: 30px;
                        position: relative;
                        z-index: 8;
                    }

                    img {
                        border-radius: 200px 200px 0 0;
                    }

                    &-two {
                        img {
                            border-radius: 0 0 200px 200px;
                        }
                    }
                }

                &-shape-wrap {
                    margin-bottom: 30px;

                    .main-shape {
                        position: relative;
                        display: inline-block;

                        >img {
                            animation: shape-rote 35s linear infinite;
                        }
                    }

                    .shape-two {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
        }

        &.style-six {
            .bd-about {
                &-thumb {
                    img {
                        width: 100%;
                    }
                }

                &-content-wrapper {
                    margin-left: 50px;

                    @media #{$xl} {
                        margin-left: 20px;
                    }

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

                &-feature {
                    &-wrapper {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 20px;
                        margin: 35px 0 50px;

                        @media #{$xs} {
                            grid-template-columns: repeat(1, 1fr);
                            gap: 15px;
                        }
                    }

                    &-title {
                        margin-bottom: 3px;
                    }

                    &-item {
                        display: flex;
                        gap: 15px;
                    }

                    &-icon {
                        span {
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            text-align: center;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            background-color: var(--bd-primary);
                            transition: all 0.5s;
                            color: var(--bd-white);
                            font-size: 28px;
                        }
                    }
                }
            }
        }

    }

    &-feature-list {
        ul {
            li {
                list-style: none;
                display: flex;
                gap: 15px;

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

                i {
                    width: 25px;
                    height: 25px;
                    min-width: 25px;
                    background-color: rgba(7, 161, 105, 0.15);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--bd-primary);
                    font-size: 13px;
                    border-radius: 50%;
                }
            }
        }
    }

    &-shape-wrap {
        & .shape-1 {
            position: absolute;
            left: 0;
            top: 0;
        }

        & .shape-2 {
            position: absolute;
            left: 85px;
            bottom: 90px;
            animation: upDown 1.8s ease-in-out 1.8s forwards infinite alternate;

            @media #{$md,$sm,$xs} {
                display: none;
            }
        }

        & .shape-3 {
            position: absolute;
            right: 82px;
            top: 85px;
            animation: right-2-left 1.8s ease-in-out 1.8s forwards infinite alternate;
        }

        & .shape-4 {
            position: absolute;
            right: 90px;
            bottom: -150px;

            @media #{$lg,$md,$sm,$xs} {
                display: none;
            }
        }

        /* University About Shape */
        & .shape-5 {
            position: absolute;
            top: 150px;
            left: 507px;
            z-index: -1;

            @media #{$xl} {
                left: 180px;
            }
        }

        & .shape-6 {
            position: absolute;
            top: 300px;
            left: 610px;
            z-index: -1;

            @media #{$xl} {
                left: 280px;
            }
        }

        .shape-7 {
            position: absolute;
            bottom: 100px;
            right: 270px;
        }

        /* University About Shape End */
    }
    &-thumbnail {
        position: relative;
        display: block;
        img {
            border-radius: 16px;
        }
    }
}