:root {
    --theme: #121212;
    --border: rgba(18, 18, 18, 0.08);

    .dark {
        --border: rgba(255, 255, 255, 0.08);
    }
}

.section-subtitle {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--primary);
    display: block;
}

.section-title {
    font-size: 60px;
    margin-top: -16px;

    @media #{$xxl} {
        font-size: 50px;
        margin-top: -15px;
    }

    @media #{$xl} {
        font-size: 46px;
        margin-top: -13px;
    }

    @media #{$lg} {
        font-size: 40px;
        margin-top: -11px;
    }

    @media #{$md} {
        font-size: 36px;
        margin-top: -9px;
    }

    @media #{$sm} {
        font-size: 30px;
        margin-top: -8px;
    }

    @media #{$xs} {
        font-size: 28px;
        margin-top: -8px;
    }
}

.section-spacing {
    padding-top: 150px;
    padding-bottom: 150px;

    @media #{$xxl} {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    @media #{$xl} {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    @media #{$lg} {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.section-spacing-top {
    padding-top: 150px;

    @media #{$xxl} {
        padding-top: 120px;
    }

    @media #{$xl} {
        padding-top: 100px;
    }

    @media #{$lg} {
        padding-top: 80px;
    }
}

.section-spacing-bottom {
    padding-bottom: 150px;

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

    @media #{$xl} {
        padding-bottom: 100px;
    }

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

.wc-btn-circle {
    background-color: var(--white);
    width: 60px;
    height: 60px;
    font-size: 18px;
    color: var(--black);
    border: 1px solid var(--black);

    @include dark {
        background-color: var(--black);
        color: var(--white);
        border-color: var(--white);
    }

    &:hover {
        background-color: var(--white);
        color: var(--black);

        @include dark {
            background-color: var(--black);
            color: var(--white);
            border-color: var(--white);
        }
    }

    i {
        transform: rotate(-45deg);
    }
}

.wc-btn-primary {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--white);
    color: var(--black);
    padding: 0 35px;
    border-radius: 40px;

    @include dark {
        background-color: var(--black);
        color: var(--white);
    }

    &:hover {
        background-color: var(--white);
        color: var(--black);
        border-color: var(--black);

        @include dark {
            background-color: var(--black);
            color: var(--white);
            border-color: var(--white);
        }
    }
}

.wc-btn-normal {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;

    i {
        transform: rotate(-45deg);
    }
}

// wc-btn-group 
.wc-btn-group {
    display: flex;
    width: fit-content;

    >*:nth-child(1) {
        transform: scale3d(0.5, 0.5, 1);
        margin-inline-end: -60px;
    }

    >*:nth-child(2) {
        transform: scale3d(1, 1, 1);
    }

    >*:nth-child(3) {
        transform: scale3d(1, 1, 1);
        margin-inline-start: 0;
    }

    &:hover {
        >*:nth-child(1) {
            transform: scale3d(1, 1, 1);
            margin-inline-end: 0;
        }

        >*:nth-child(2) {
            transform: scale3d(1, 1, 1);
        }

        >*:nth-child(3) {
            transform: scale3d(0.5, 0.5, 1);
            margin-inline-start: -60px;
        }
    }
}

.container {
    &.large {
        @media (min-width:1800px) {
            max-width: 1630px;
        }
    }
}

/* header area style  */
.header-area {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%;

    &.sticky {
        background-color: #000000;

        button {
            i {
                color: var(--white);
            }
        }
    }

    .header-area__inner {
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        height: 100px;

        @media #{$xxl} {
            height: 80px;
        }

        &>*:nth-child(1) {
            margin-inline-end: auto;
        }
    }

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

    .header__navicon {
        img {
            @include rtl {
                transform: rotateY(180deg);
            }
        }
    }

    .wc-btn-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
        background-color: var(--white);
        color: var(--black);
    }

    .wc-btn-primary {
        font-size: 14px;
        font-weight: 400;
        padding: 0 24px;
        background-color: var(--white);
        color: var(--black);
    }

    // wc-btn-group 
    .wc-btn-group {
        display: flex;
        width: fit-content;

        >*:nth-child(1) {
            transform: scale3d(0.5, 0.5, 1);
            margin-inline-end: -40px;
        }

        >*:nth-child(2) {
            transform: scale3d(1, 1, 1);
        }

        >*:nth-child(3) {
            transform: scale3d(1, 1, 1);
            margin-inline-start: 0;
        }

        &:hover {
            >*:nth-child(1) {
                transform: scale3d(1, 1, 1);
                margin-inline-end: 0;
            }

            >*:nth-child(2) {
                transform: scale3d(1, 1, 1);
            }

            >*:nth-child(3) {
                transform: scale3d(0.5, 0.5, 1);
                margin-inline-start: -40px;
            }
        }
    }

    .main-menu {
        li a {
            color: var(--white-2);
        }

        >ul>li:hover>a {
            color: var(--white);
        }
    }

    button {
        i {
            color: var(--white);
        }
    }
}

/* footer area style  */
.footer-area {

    .footer-area-inner {
        display: grid;
        gap: 80px 60px;
        grid-template-columns: 275px 190px 190px 385px;
        justify-content: space-between;
        overflow: hidden;
        padding-bottom: 94px;

        @media #{$xl} {
            padding-top: 80px;
            padding-bottom: 74px;

            grid-template-columns: 215px 190px 190px 315px;
        }

        @media #{$lg} {
            padding-top: 60px;
            padding-bottom: 54px;

            gap: 50px 60px;
            grid-template-columns: auto auto auto;
        }

        @media #{$sm} {
            grid-template-columns: auto auto;
        }

        @media #{$xs} {
            grid-template-columns: auto;
        }
    }

    .footer-area-inner>* {
        min-width: 130px;

        &:first-child {
            grid-row: span 2;
            position: relative;

            @media #{$lg} {
                grid-row: auto;
            }

            &:after {
                position: absolute;
                content: "";
                width: 1px;
                height: calc(100% + 400px);
                background-color: var(--border);
                top: -200px;
                inset-inline-end: 0;

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

        &.newsletter {
            @media #{$lg} {
                grid-column: span 2;
            }

            @media #{$sm} {
                order: 1;
            }

            @media #{$xs} {
                grid-column: auto;
            }
        }
    }

    .footer-logo {
        img {
            max-height: 42px;

            @media #{$lg} {
                max-height: 34px;
            }
        }
    }

    .footer-widget-wrapper {
        .title {
            font-size: 30px;
            line-height: .73;

            @media #{$xl} {
                font-size: 24px;
            }

            @media #{$lg} {
                font-size: 22px;
            }
        }

    }

    .footer-nav-list {
        margin-top: 27px;

        li {
            font-size: 18px;
            line-height: 30px;

            .location {
                margin-bottom: 22px;
                display: inline-block;
            }
        }
    }

    .social-links {
        display: flex;
        gap: 20px;
        margin-top: 36px;

        li {
            line-height: 1;
        }
    }

    .newsletter-text {
        margin-top: 29px;
    }

}

.subscribe-form {
    margin-top: 38px;

    .input-field {
        background-color: #F6F6F6;
        border-radius: 20px;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 25px 25px;

        @include dark {
            background-color: #202020;
        }

        @media #{$xl} {
            padding: 18px 25px;
        }

        input {
            border: 0;
            background-color: #F6F6F6;
            color: var(--primary);
            width: 100%;

            @include dark {
                background-color: #202020;
            }

            &::placeholder {
                color: var(--white-2);
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
            }

            &:focus {
                outline: 0;
            }
        }

        .subscribe-btn {

            img,
            i {
                color: var(--primary);

                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }

        .icon {
            color: var(--white-2);
        }
    }

    .policy-field {
        margin-top: 20px;

        label {
            font-size: 14px;
            margin-inline-start: 6px;

            span {
                color: var(--primary);
                font-weight: 500;
            }
        }
    }
}

.copyright-area {
    border-top: 1px solid var(--border);

    &-inner {
        padding: 32px 0;

        @media #{$lg} {
            padding: 22px 0;
        }
    }

    .copyright-text {
        .text {
            text-align: center;
            font-weight: 500;

            a {
                color: var(--primary);
            }
        }
    }
}

/* hero area style  */
.hero-area {
    position: relative;
    z-index: 1;
    background-color: #000000;
    overflow: hidden;

    &-inner {
        padding-top: 233px;
        padding-bottom: 164px;

        @media #{$xxl} {
            padding-top: 143px;
            padding-bottom: 104px;
        }

        @media #{$lg} {
            padding-top: 123px;
            padding-bottom: 74px;
        }

        @media #{$sm} {
            padding-top: 103px;
            padding-bottom: 64px;
        }
    }

    .overlay-image {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        inset-inline-start: 0;
        z-index: -1;

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

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

    .area-bg {
        position: absolute;
        width: 55%;
        height: 100%;
        top: 0;
        inset-inline-end: 0;
        z-index: -1;

        @media #{$md} {
            width: 40%;
        }

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

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;

            @include rtl {
                transform: rotateY(180deg);
            }
        }
    }

    .section-title {
        font-size: 120px;
        line-height: .79;
        font-weight: 400;
        color: var(--white);
        margin-top: 0;
        position: relative;
        z-index: 1;
        letter-spacing: -0.05em;

        @media #{$xxl} {
            font-size: 100px;

        }

        @media #{$lg} {
            font-size: 70px;
        }

        @media #{$sm} {
            font-size: 50px;
        }

        @media #{$xs} {
            font-size: 40px;
        }

        .line {
            display: block;

            &:not(:first-child) {
                margin-top: 32px;

                @media #{$xxl} {
                    margin-top: 22px;
                }

                @media #{$lg} {
                    margin-top: 12px;
                }

                @media #{$sm} {
                    margin-top: 7px;

                }
            }
        }

        .line-first {
            margin-inline-start: 180px;

            @media #{$sm} {
                margin-inline-start: 120px;
            }

            @media #{$xs} {
                margin-inline-start: 0px;
            }
        }

        .line-third {
            margin-inline-start: 180px;

            @media #{$sm} {
                margin-inline-start: 120px;
            }

            @media #{$xs} {
                margin-inline-start: 0px;
            }
        }

        .title-shape-1 {
            width: 80px;
            margin-left: 25px;
            margin-top: -10px;

            @media #{$xl} {
                width: 70px;

            }

            @media #{$lg} {
                width: 50px;

            }

            @media #{$xs} {
                width: 40px;

            }
        }
    }

    .section-content {

        .title-wrapper {
            margin-inline-start: -60px;

            @media #{$xxl} {
                margin-inline-start: 0;
            }
        }

        .hero-thumb {
            position: relative;
            display: inline-block;

            &:after {
                position: absolute;
                content: "";
                width: 117px;
                height: 90px;
                top: 0;
                inset-inline-end: 0;
                background-color: #000000;

                @media #{$xxl} {
                    width: 67px;
                    height: 80px;
                }

                @media #{$sm} {
                    width: 117px;
                    height: 60px;
                }

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

            .wc-btn-circle {
                border-color: transparent;
                background-color: var(--white);
                color: var(--black);

                i {
                    transform: rotate(0);
                }
            }
        }

        .content-last {
            margin-top: -78px;
            display: flex;
            gap: 30px 60px;
            align-items: flex-end;

            @media #{$lg} {
                margin-top: -58px;

            }

            @media #{$sm} {
                margin-top: -38px;
            }

            @media #{$md} {
                gap: 30px 40px;

            }

            @media #{$xs} {
                margin-top: 30px;
                flex-direction: column;
                align-items: flex-start;
            }

        }

        .clients-wrapper {
            margin-bottom: 18px;

            .thumb {
                img {
                    @include rtl {
                        transform: rotateY(180deg);
                    }
                }
            }

            .number {
                font-size: 20px;
                line-height: 30px;
                font-weight: 500;
                writing-mode: vertical-lr;
                transform: rotate(180deg);
                text-transform: uppercase;
                color: var(--white);
            }

            .text {
                font-size: 14px;
                line-height: 20px;
                max-width: 160px;
                color: var(--white);

                br {
                    display: block;
                }
            }

            .info {
                display: flex;
                gap: 18px;
                margin-top: 38px;
                margin-inline-start: 44px;

                @media #{$xs} {
                    margin-top: 28px;
                    margin-inline-start: 0;
                }
            }
        }
    }
}

/* service area style  */
.service-area {
    &-inner {
        display: grid;
        gap: 40px 60px;
        grid-template-columns: auto 730px;

        @media #{$xl} {
            grid-template-columns: auto 630px;

        }

        @media #{$lg} {
            grid-template-columns: auto 540px;

        }

        @media #{$md} {
            grid-template-columns: auto;
        }
    }

    .section-title {
        max-width: 470px;

        @media #{$xxl} {
            max-width: 430px;
        }

        @media #{$xl} {
            max-width: 370px;
        }
    }

    .section-content {

        .title-wrapper {
            margin-top: 33px;

            @media #{$lg} {
                margin-top: 28px;

            }
        }

        .shape {
            margin-top: 37px;

            @media #{$lg} {
                margin-top: 27px;
            }

            img {
                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }

        .btn-wrapper {
            margin-top: 50px;

            @media #{$lg} {
                margin-top: 40px;
            }
        }
    }

    .services-wrapper {
        display: grid;
        gap: 93px 120px;
        grid-template-columns: repeat(2, 1fr);

        @media #{$xl} {
            gap: 93px 80px;
        }

        @media #{$lg} {
            gap: 63px 50px;
        }

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

.service-box {

    .tag {
        font-size: 14px;
        display: block;
        color: var(--primary);
        padding-bottom: 23px;
        border-bottom: 1px solid var(--primary);
        text-transform: uppercase;

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

    .title {
        font-size: 30px;
        line-height: 1.2;
        font-weight: 400;
        margin-top: 29px;

        @media #{$xl} {
            font-size: 26px;
        }

        @media #{$lg} {
            font-size: 22px;
            margin-top: 19px;
        }
    }

    .icon {
        margin-top: 32px;

        @media #{$lg} {
            margin-top: 22px;
        }

        img {
            height: 60px;

            @media #{$lg} {
                height: 45px;
            }
        }
    }

    .text {
        margin-top: 30px;
    }

    .btn-wrapper {
        margin-top: 51px;

        @media #{$xl} {
            margin-top: 41px;
        }

        @media #{$lg} {
            margin-top: 31px;
        }
    }

}

/* about area style  */
.about-area {
    position: relative;
    z-index: 1;

    &-inner {
        padding-top: 270px;

        @media #{$xl} {
            padding-top: 170px;

        }

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

    .area-bg {
        position: absolute;
        width: 100%;
        height: calc(100% - 100px);
        top: 0;
        inset-inline-start: 0;
        z-index: -1;

        @media #{$lg} {
            height: calc(100% - 60px);
        }

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

    .section-content {
        width: 410px;
        background-color: #171717;

        @include dark {
            background-color: #121212;
        }

        @media #{$lg} {
            width: 340px;
        }

        @media #{$xs} {
            width: 100%;
        }

        .content-first {
            padding: 60px 45px 49px;

            @media #{$lg} {
                padding: 40px 35px 29px;
            }
        }

        .section-title {
            font-size: 48px;
            line-height: 1.10;
            color: var(--white);
            margin-top: 0;

            @media #{$xl} {
                font-size: 46px;
            }

            @media #{$lg} {
                font-size: 40px;
            }

            @media #{$md} {
                font-size: 36px;
            }

            @media #{$sm} {
                font-size: 30px;
            }

            @media #{$xs} {
                font-size: 28px;
            }
        }

        .section-title-wrapper {
            margin-top: 43px;

            @media #{$lg} {
                margin-top: 33px;
            }
        }

        .wc-btn-circle {
            width: 80px;
            height: 80px;
            background-color: var(--white);
            color: var(--black);

            @media #{$sm} {
                width: 60px;
                height: 60px;
                font-size: 14px;
            }

            i {
                transform: none;
            }
        }

        .video-btn {
            display: flex;
            align-items: center;
            gap: 15px;

            .text {
                font-size: 14px;
                font-weight: 500;
                text-transform: uppercase;
                line-height: 16px;
                color: var(--white);

                br {
                    display: block;
                }
            }
        }

        .wc-btn-normal {
            padding: 0 45px;
            color: var(--white);
            height: 100px;
            background-color: var(--black);
            display: flex;

            @include dark {
                background-color: #171717;
            }

            @media #{$lg} {
                padding: 0 35px;
                height: 60px;
            }
        }
    }
}

/* awards area style  */
.awards-area {
    position: relative;
    z-index: 1;

    .section-subtitle {

        &.has-right-line {
            padding-inline-end: 130px;

            &:after {
                width: 120px;
            }
        }
    }

    .subtitle-wrapper {
        margin-bottom: -130px;

        @media #{$xl} {
            margin-bottom: -130px;

        }

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

        @media #{$md} {
            margin-bottom: 10px;
        }
    }

    .section-title-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 50px;

        @media #{$md} {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
    }

    .awards-area-inner {
        position: relative;
        z-index: 1;
    }

    .section-content {
        margin-top: 37px;
        margin-inline-start: 438px;

        @media #{$xxl} {
            margin-inline-start: 378px;
        }

        @media #{$xl} {
            margin-inline-start: 308px;
        }

        @media #{$lg} {
            margin-top: 27px;
            margin-inline-start: 308px;

        }

        @media #{$md} {
            margin-inline-start: 0;
        }

        .text {
            max-width: 740px;
        }

        .shape {
            img {
                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }

        .text-wrapper {
            margin-top: 40px;

            @media #{$lg} {
                margin-top: 30px;

            }
        }

        .awards-list {
            margin-top: 63px;

            @media #{$md} {
                margin-top: 33px;
            }

            ul {
                display: flex;
                gap: 20px 90px;
                max-width: 510px;

                @media #{$xs} {
                    gap: 20px 90px;
                }
            }
        }
    }
}

/* work area style  */
.work-area {
    .works-wrapper {
        display: grid;
        gap: 0 30px;
        grid-template-columns: repeat(2, 1fr);
        position: relative;

        @media #{$lg} {
            gap: 30px 30px;
        }

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

        }

        >* {
            &:nth-child(2) {
                max-width: 360px;
                margin-inline: auto;

                @media #{$md} {
                    max-width: 250px;
                }

                @media #{$sm} {
                    max-width: 190px;
                }

                @media #{$xs} {
                    max-width: 100%;
                }
            }

            &:nth-child(3) {
                max-width: 360px;
                margin-inline: auto;
                align-self: center;

                @media #{$md} {
                    max-width: 250px;
                }

                @media #{$sm} {
                    max-width: 190px;
                }

                @media #{$xs} {
                    max-width: 100%;
                }
            }
        }

    }

    .works-wrapper-box {
        position: relative;

        .shape-1 {
            position: absolute;
            top: 50%;
            inset-inline-start: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: 190px;

            @media #{$xl} {
                width: 150px;
            }

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

.work-box {
    &:hover {
        .thumb {
            img {
                transform: scale(1.1);
            }
        }
    }

    .thumb {
        overflow: hidden;

        img {
            transition: all 0.5s;
        }
    }

    .title {
        font-size: 24px;
        line-height: 1;

        @media #{$md} {
            font-size: 20px;
        }

        @media #{$sm} {
            font-size: 18px;
        }

        br {
            display: block;
        }
    }

    .content {
        margin-top: 28px;

        @media #{$md} {
            margin-top: 22px;
        }
    }

    .tag {
        font-size: 14px;
        text-transform: uppercase;
        margin-top: 13px;
        display: inline-block;
    }

    &.large {
        position: relative;

        &:hover {
            .content {
                opacity: 1;
                visibility: visible;
                bottom: 78px;

            }
        }

        .content {
            position: absolute;
            inset-inline-start: 60px;
            bottom: 48px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s;

            @media #{$lg} {
                position: static;
                opacity: 1;
                visibility: visible;
            }
        }

        .title {
            font-size: 30px;
            color: var(--white);

            @media #{$lg} {
                font-size: 24px;
                color: var(--primary);
            }

            @media #{$md} {
                font-size: 20px;
            }

            @media #{$sm} {
                font-size: 18px;
            }

        }

        .tag {
            color: var(--white);
            margin-top: 10px;

            @media #{$lg} {
                margin-top: 13px;
                color: var(--secondary);
            }

        }
    }

}

// client area style 
.client-area {
    &-text {
        position: relative;

        .section-title {
            max-width: 340px;
            position: absolute;
            inset-inline-start: 40%;
            top: 55px;

            @media #{$lg} {
                max-width: 280px;
                top: 40px;
            }

            @media #{$md} {
                max-width: 230px;
                top: 25px;
            }

            @media #{$sm} {
                text-align: center;
                position: static;
                margin: 0 auto;
                margin-bottom: 10px;
            }
        }
    }

    .clients-wrapper {
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        @media #{$sm} {
            grid-template-columns: repeat(3, 1fr);
        }

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

    .client-box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--border);
        min-width: 100px;
        aspect-ratio: 100/100;
        padding: 0 20px;
        margin-top: -1px;
        border-inline-start-color: transparent;

        @media #{$sm} {
            border: none;
            aspect-ratio: 100/50;
        }

        &:hover {
            img {
                opacity: 1;
            }
        }

        &:nth-child(1) {
            grid-column-start: 2;
            border-inline-start-color: var(--border);

            @media #{$sm} {
                grid-column-start: auto;
            }
        }

        &:nth-child(2) {
            grid-column-start: 1;
            border-inline-start-color: var(--border);

            @media #{$sm} {
                grid-column-start: auto;
            }
        }

        &:nth-child(7) {
            grid-column-start: 2;
            border-inline-start-color: var(--border);

            @media #{$sm} {
                grid-column-start: auto;
            }
        }

        &:nth-child(12) {
            grid-column-start: 5;
            border-inline-start-color: var(--border);

            @media #{$sm} {
                grid-column-start: auto;
            }
        }

        img {
            opacity: 0.6;
            transition: all 0.5s;
        }
    }

}

/* team area style  */
.team-area {
    .section-header {

        .shape {
            margin-top: 37px;
            margin-inline-start: 110px;

            @media #{$sm} {
                margin-top: 27px;
                margin-inline-start: 0;
            }

            img {
                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }
    }

    .team-wrapper {
        display: grid;
        gap: 40px 40px;
        grid-template-columns: repeat(4, 1fr);

        @media #{$lg} {
            gap: 40px 20px;
        }

        @media #{$md} {
            grid-template-columns: repeat(2, 1fr);
        }

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

    .team-item-area {
        padding-inline-start: 50px;
        padding-inline-end: 50px;

        @media #{$sm} {
            padding-inline-start: 15px;
            padding-inline-end: 15px;
        }
    }

    .team-wrapper-box {
        margin-top: 70px;
        position: relative;
        z-index: 1;

        @media #{$xl} {
            margin-top: 50px;
        }

        .shape-1 {
            position: absolute;
            width: 200px;
            inset-inline-end: 9%;
            top: -130px;
            z-index: 1;

            @media #{$xxl} {
                width: 130px;
                inset-inline-end: -1%;
                top: -90px;
            }

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

}

.team-box {

    &:hover {
        .thumb {
            img {
                transform: scale(1.1);
            }
        }
    }

    .thumb {
        overflow: hidden;

        img {
            width: 100%;
            transition: all 0.5s;
        }
    }

    .content {
        margin-top: 24px;
    }

    .name {
        font-size: 24px;
        font-weight: 500;
        line-height: 1;

        @media #{$xl} {
            font-size: 22px;
        }
    }

    .post {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 28px;

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

    .wc-btn-circle {
        width: 30px;
        height: 30px;
        background-color: var(--white);
        color: var(--black);
        border: 1px solid rgba(18, 18, 18, 0.15);
        font-size: 14px;

        @include dark {
            background-color: var(--black);
            color: var(--white);
            border-color: rgba(255, 255, 255, 0.15);
        }

        i {
            transform: none;
        }
    }

    .wc-btn-primary {
        font-size: 12px;
        font-weight: 400;
        padding: 0 11px;
        background-color: var(--white);
        color: var(--black);
        border: 1px solid rgba(18, 18, 18, 0.15);
        border-radius: 30px;

        @include dark {
            background-color: var(--black);
            color: var(--white);
            border-color: rgba(255, 255, 255, 0.15);
        }
    }

    // wc-btn-group 
    .wc-btn-group {
        display: flex;
        width: fit-content;

        >*:nth-child(3) {
            transform: scale3d(0.5, 0.5, 1);
            margin-inline-start: -30px;
        }

        >*:nth-child(2) {
            transform: scale3d(1, 1, 1);
        }

        >*:nth-child(1) {
            transform: scale3d(1, 1, 1);
            margin-inline-end: 0;
        }

        &:hover {
            >*:nth-child(3) {
                transform: scale3d(1, 1, 1);
                margin-inline-start: 0;
            }

            >*:nth-child(2) {
                transform: scale3d(1, 1, 1);
            }

            >*:nth-child(1) {
                transform: scale3d(0.5, 0.5, 1);
                margin-inline-end: -30px;
            }
        }
    }
}

.testimonial-area {
    .section-heading {
        text-align: center;
        padding-bottom: 37px;

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

    .testimonial-item {
        max-width: 910px;
        margin: auto;
        text-align: center;
        cursor: grab;

        @media #{$xl} {
            max-width: 790px;
        }
    }

    .text {
        font-size: 30px;
        margin-top: 34px;
        font-weight: 300;
        color: var(--primary);

        @media #{$xl} {
            font-size: 26px;
        }

        @media #{$md} {
            font-size: 22px;
        }
    }

    .meta {
        display: grid;
        grid-template-columns: 50px auto;
        gap: 10px;
        margin: auto;
        text-align: start;
        align-items: center;
        justify-content: center;
        margin-top: 60px;

        @media #{$xl} {
            margin-top: 40px;
        }

        @media #{$md} {
            margin-top: 30px;
        }

        img {
            border-radius: 50%;
        }
    }

    .name {
        font-size: 20px;
    }

    .post {
        font-size: 14px;
        line-height: 1;
        margin-top: 5px;
    }

    .testimonial-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        cursor: pointer;

        @media #{$md} {
            margin-top: 30px;
        }

        .swiper-pagination-bullet {
            height: 8px;
            width: 8px;
            border-radius: 50px;
            background-color: #E7E7E7;
            opacity: 1;

            @include dark {
                background-color: #4A4A4A;
            }

            &.swiper-pagination-bullet-active {
                background-color: var(--primary);
                width: 30px;
            }
        }

    }
}

/* pricing area style  */
.pricing-area {
    background-color: #FBF9F9;

    @include dark {
        background-color: #171717;
    }

    .section-title {
        max-width: 680px;
        margin-inline: auto;
    }

    .section-header {
        text-align: center;
    }

    .pricing-wrapper-box {
        margin-top: 57px;

        @media #{$xl} {
            margin-top: 47px;

        }

        @media #{$lg} {
            margin-top: 37px;

        }
    }

    .pricing-wrapper {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(3, 1fr);

        @media #{$md} {
            grid-template-columns: repeat(2, 1fr);
        }

        @media #{$sm} {
            grid-template-columns: repeat(1, 1fr);
        }
    }

}

.pricing-box {
    background-color: var(--white);
    padding: 47px 50px 50px;

    @include dark {
        background-color: var(--black);
    }

    @media #{$lg} {
        padding: 27px 30px 30px;
    }

    .tag {
        font-size: 18px;
        color: var(--primary);
        display: inline-block;
        line-height: 1;
    }

    .feature-list {
        margin-top: 39px;

        li {
            display: flex;
            align-items: center;

            &:not(:first-child) {
                margin-top: 15px;
            }

            img {
                margin-inline-end: 10px;

                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }
    }

    .price {
        font-size: 60px;
        line-height: 1;
        margin-top: 17px;

        @media #{$xl} {
            font-size: 50px;

        }

        @media #{$md} {
            font-size: 40px;
        }
    }

    .wc-btn-group {
        margin-top: 50px;

        @media #{$lg} {
            margin-top: 40px;
        }
    }

    // wc-btn-group 
    .wc-btn-group {
        @media #{$lg} {
            display: flex;
            width: fit-content;

            >*:nth-child(1) {
                transform: scale3d(0.5, 0.5, 1);
                margin-inline-end: -40px;
            }

            >*:nth-child(2) {
                transform: scale3d(1, 1, 1);
            }

            >*:nth-child(3) {
                transform: scale3d(1, 1, 1);
                margin-inline-start: 0;
            }

            &:hover {
                >*:nth-child(1) {
                    transform: scale3d(1, 1, 1);
                    margin-inline-end: 0;
                }

                >*:nth-child(2) {
                    transform: scale3d(1, 1, 1);
                }

                >*:nth-child(3) {
                    transform: scale3d(0.5, 0.5, 1);
                    margin-inline-start: -40px;
                }
            }

            .wc-btn-circle {
                width: 40px;
                height: 40px;
            }

            .wc-btn-primary {
                padding: 0 28px;
            }
        }
    }
}

/* blog area style  */
.blog-area {

    &-inner {
        display: grid;
        gap: 50px 60px;
        grid-template-columns: auto 820px;

        @media #{$xl} {
            grid-template-columns: auto 720px;
        }

        @media #{$lg} {
            grid-template-columns: auto 650px;
        }

        @media #{$md} {
            grid-template-columns: auto;
        }
    }

    .blog-wrapper-box {
        margin-top: 9px;
    }

    .section-title {
        max-width: 280px;
    }

    .blog-wrapper {
        >* {
            display: block;

            &:not(:first-child) {
                border-top: 1px solid var(--border);
                padding-top: 29px;
                margin-top: 30px;
            }
        }
    }
}

.blog {
    display: grid;
    gap: 20px 60px;
    grid-template-columns: auto 520px;
    justify-content: space-between;
    align-items: flex-start;

    @media #{$xl} {
        grid-template-columns: auto 470px;
    }

    @media #{$lg} {
        grid-template-columns: auto 410px;
    }

    @media #{$sm} {
        grid-template-columns: auto;
    }

    .author {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
    }

    .name {
        font-size: 18px;

        span {
            font-weight: 700;
        }
    }

    .post {
        font-size: 14px;
        display: inline-block;
        margin-top: 5px;
    }

    .content {
        .meta {
            display: flex;
            align-items: center;
            gap: 7px;
        }

    }

    .tag {
        font-size: 12px;
        text-transform: uppercase;
        padding: 4px 8px;
        background-color: #F1F1F4;
        color: var(--primary);
        border-radius: 20px;
        display: inline-block;

        @include dark {
            background-color: #333333;
        }
    }

    .date {
        font-size: 12px;
        text-transform: uppercase;

        &.has-left-line {
            padding-inline-start: 25px;

            &:before {
                width: 15px;
            }
        }
    }

    .title {
        font-size: 30px;
        margin-top: 15px;
        line-height: 1.16;

        @media #{$xl} {
            font-size: 26px;
        }

        @media #{$lg} {
            font-size: 22px;
        }
    }

    .text {
        margin-top: 7px;
    }

    .btn-wrapper {
        margin-top: 23px;
    }

    .wc-btn-primary {
        background-color: var(--white);
        border-color: var(--border);
        padding: 0 28px;

        @include dark {
            background-color: var(--black);
            color: var(--white);
        }

        &:hover {
            border-color: var(--border);
        }
    }

    .wc-btn-circle {
        background-color: var(--white);
        border: 1px solid var(--border);
        width: 40px;
        height: 40px;

        @include dark {
            background-color: var(--black);
            color: var(--white);
        }

        &:hover {
            border-color: var(--border);
        }
    }

    // wc-btn-group 
    .wc-btn-group {
        display: flex;
        width: fit-content;

        >*:nth-child(1) {
            transform: scale3d(0.5, 0.5, 1);
            margin-inline-end: -40px;
        }

        >*:nth-child(2) {
            transform: scale3d(1, 1, 1);
        }

        >*:nth-child(3) {
            transform: scale3d(1, 1, 1);
            margin-inline-start: 0;
        }

        &:hover {
            >*:nth-child(1) {
                transform: scale3d(1, 1, 1);
                margin-inline-end: 0;
            }

            >*:nth-child(2) {
                transform: scale3d(1, 1, 1);
            }

            >*:nth-child(3) {
                transform: scale3d(0.5, 0.5, 1);
                margin-inline-start: -40px;
            }
        }
    }

}

/* contact area style  */
.contact-area {
    background-color: var(--black);
    position: relative;
    z-index: 1;
    overflow: hidden;

    @include dark {
        background-color: #171717;
    }

    &-inner {
        display: grid;
        gap: 30px 60px;
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: space-between;

        @media #{$md} {
            grid-template-columns: auto;
        }
    }

    .section-spacing {
        @media only screen and (min-width: 1919px) {
            padding-top: 120px;
            padding-bottom: 120px;
        }
    }

    .shape-1 {
        position: absolute;
        inset-inline-end: -6%;
        top: -15%;
        z-index: -1;
        width: 440px;

        @media #{$xl} {
            top: -45%;
        }

        @media #{$lg} {
            width: 340px;
        }

        @media #{$md} {
            width: 270px;
            top: -35%;
        }

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

        img {
            @include rtl {
                transform: rotateY(180deg);
            }
        }
    }

    .section-title {
        max-width: 690px;
        color: var(--white);

        @media #{$xxl} {
            max-width: 630px;

        }

        @media #{$lg} {
            max-width: 580px;
        }

        @media #{$md} {
            max-width: 450px;
        }
    }

    .section-content {
        .text {
            max-width: 600px;
            color: var(--white-2);
        }

        .text-wrapper {
            margin-top: 27px;

            @media #{$md} {
                margin-top: 17px;
            }
        }
    }

    .wc-btn-primary {
        border-color: var(--white);
    }

    .wc-btn-circle {
        border-color: var(--white);
    }
}

/* capabilities area style  */
.capabilities-area {
    position: relative;
    z-index: 1;
    overflow: hidden;

    .area-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        inset-inline-start: 0;
        z-index: -1;

        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-color: rgba(0, 0, 0, .8);
        }

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

    .customer-wrapper {
        display: inline-block;
        margin-inline-start: auto;

        .icon {
            img {
                @include rtl {
                    transform: rotateY(180deg);
                }
            }
        }

        .text {
            font-size: 18px;
            line-height: 1.22;
            margin-top: 15px;
            color: var(--white-2);

            span {
                color: var(--white);
            }

            br {
                display: block;
            }
        }
    }

    .content-first {
        .text {
            max-width: 300px;
            color: var(--white-2);
        }

        .text-wrapper {
            margin-top: 55px;

            @media #{$lg} {
                margin-top: 35px;
            }
        }

        .btn-wrapper {
            margin-top: 33px;
        }
    }

    .section-content {
        display: grid;
        gap: 40px 60px;
        grid-template-columns: 350px 1fr;

        @media #{$md} {
            grid-template-columns: 230px 1fr;
        }

        @media #{$sm} {
            grid-template-columns: auto;
        }
    }

    .content-last {
        .top {
            border-inline-start: 1px solid rgba(255, 255, 255, 0.3);
            padding-inline-start: 79px;

            @media #{$xl} {
                padding-inline-start: 59px;
            }

            @media #{$md} {
                border-inline-start: 0;
                padding-inline-start: 40px;
            }

            @media #{$sm} {
                padding-inline-start: 0;

            }
        }
    }

    .accordion-wrapper {
        max-width: 520px;
        margin-inline-start: 250px;
        margin-top: 50px;

        @media #{$xl} {
            margin-inline-start: 180px;
        }

        @media #{$lg} {
            margin-inline-start: 120px;
        }

        @media #{$md} {
            margin-inline-start: 40px;
        }

        @media #{$sm} {
            margin-inline-start: 0;
            margin-top: 40px;
        }
    }

    .video-btn {
        display: flex;
        align-items: center;
        gap: 15px;

        .wc-btn-circle {
            width: 80px;
            height: 80px;
            background-color: var(--white);
            color: var(--black);

            @media #{$sm} {
                width: 60px;
                height: 60px;
                font-size: 14px;
            }

            i {
                transform: none;
            }
        }

        .text {
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 16px;
            color: var(--white);

            br {
                display: block;
            }
        }
    }

    .section-title {
        line-height: 1.10;
        color: var(--white);
        max-width: 590px;

        @media only screen and (min-width: 1399px) {
            font-size: 48px;
        }
    }

    .section-title-wrapper {
        margin-top: 57px;

        @media #{$lg} {
            margin-top: 47px;
        }
    }

    .shape {
        margin-top: 39px;

        img {
            @include rtl {
                transform: rotateY(180deg);
            }
        }
    }

    .accordion {

        .accordion-button {
            font-size: 18px;
            line-height: 1.00;
            color: var(--white);
            padding-top: 18px;
            padding-bottom: 18px;
            padding-inline-start: 0;
            padding-inline-end: 0;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: none;
            text-align: start;
            font-weight: 500;

            .section-subtitle {
                font-size: 12px;
                font-weight: 700;
                color: var(--primary);
                text-transform: uppercase;
                padding: 8px 16px;
                display: inline-block;
                border-radius: 10px;
                background-color: var(--white);
            }

            br {
                @media #{$lg} {
                    display: none;
                }
            }

            &::after {
                content: "+";
                color: var(--white);
                background-image: none;
                line-height: 1;
                width: auto;
                height: auto;
                font-size: 25px;
                margin-inline-start: 50px;
                margin-inline-start: auto;
                margin-inline-end: 0;
            }

            &:not(.collapsed) {
                pointer-events: none;

                &::after {
                    content: "-";
                }
            }
        }

        .accordion-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background-color: transparent;
            border-radius: 0px;

            &:not(:first-child) {
                margin-top: 0px;
            }

            &:first-child {
                border-top: 1px solid rgba(255, 255, 255, 0.08);

            }
        }

        .accordion-body {
            font-size: 18px;
            line-height: 1.44;
            padding-inline-start: 0px;
            padding-inline-end: 0px;
            padding-bottom: 24px;
            padding-top: 0;
            color: var(--white-2);

            @media #{$md} {
                padding-bottom: 23px;
            }
        }
    }

    .content-last {
        position: relative;
        z-index: 1;

        &:before {
            position: absolute;
            content: "";
            width: 5000px;
            height: 5000px;
            background-color: rgba(255, 255, 255, 0.1);
            inset-inline-start: 0;
            top: -1000px;
            z-index: -1;

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

}