@use "../utils" as *;

/*=============================
	07. Services
===============================*/
.services {
    &-bg {
        background-size: cover;
        background-position: center;
        padding: 120px 0;
        @media #{$xs} {
            padding: 100px 0;
        }
    }
    &__bg {
        &-three {
            background-size: cover;
            background-position: center;
            padding: 120px 0 90px;
            @media #{$xs} {
                padding: 100px 0 70px;
            }
        }
        &-four {
            background-size: cover;
            background-position: center;
            padding: 120px 0 90px;
            position: relative;
            z-index: 1;
            @media #{$xs} {
                padding: 100px 0 70px;
            }
        }
        &-five {
            background-size: cover;
            background-position: center;
            padding: 40px 0 30px;
            @media #{$xs} {
                padding: 70px 0;
            }
        }
        &-six {
            background-size: cover;
            background-position: center;
            padding: 120px 0;
            @media #{$xs} {
                padding: 100px 0;
            }
        }
        &-seven {
            background-size: cover;
            background-position: center;
            padding: 55px 0 0;
            position: relative;
            z-index: 1;
            @media #{$xs} {
                padding: 40px 0 10px;
            }
        }
    }
    &__area-two {
        background: var(--tg-heading-color);
        padding: 120px 0 90px;
        position: relative;
        z-index: 1;
        @media #{$xs} {
            padding: 100px 0 70px;
        }
    }
    &-item-wrap {
        & .row {
            --bs-gutter-x: 24px;
        }
    }
    &-item {
        background: var(--tg-color-white-default);
        @include border-radius(10px);
        @include transition(0.3s);
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        &:hover {
            box-shadow: 0px 4px 30px 0px #cfdee4;
            & .services-content {
                & .icon {
                    background: var(--tg-theme-secondary);
                    color: var(--tg-color-white-default);
                }
            }
        }
    }
    &__item {
        &-two {
            border: 2px solid #282b7c;
            @include border-radius(10px);
            padding: 35px;
            margin-bottom: 30px;
            background: var(--tg-heading-color);

            &:hover {
                & .services__icon-two {
                    @include transform(rotateY(180deg));
                }
            }
        }
        &-three {
            background: var(--tg-color-white-default);
            padding: 40px 40px;
            @include border-radius(15px);
            margin-bottom: 30px;
            @media #{$lg} {
                padding: 35px 30px;
            }
            &:hover {
                & .services__icon-three {
                    & i {
                        @include transform(rotateY(180deg));
                    }
                }
            }
        }
        &-four {
            background: var(--tg-color-white-default);
            @include flexbox();
            align-items: center;
            gap: 50px;
            padding: 30px 80px 30px 30px;
            @include border-radius(15px);
            @media #{$lg} {
                padding: 30px 20px 30px 20px;
                gap: 25px;
            }
            @media #{$md} {
                flex-wrap: wrap;
                padding: 30px 30px;
            }
            @media #{$xs} {
                padding: 30px 25px;
            }
        }
        &-five {
            @include box-shadow(0px 10px 20px 0px rgba(0, 0, 0, 0.1));
            border: 1px solid #e9e9f0;
            background: var(--tg-color-white-default);
            @include border-radius(15px);
            padding: 60px 30px 45px;
            text-align: center;
            margin-bottom: 30px;
            @include transition(0.3s);
            &:hover {
                @include transform(translateY(-5px));
            }
        }
        &-top {
            @include flexbox();
            align-items: center;
            gap: 30px;
            margin-bottom: 22px;
            & .title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 0;
                @media #{$lg} {
                    font-size: 20px;
                }
            }
        }
        &-wrap {
            &-two {
                & .row {
                    & [class*="col-"] {
                        &:nth-child(odd) {
                            & .services__item-five {
                                margin-top: 30px;
                                @media #{$md} {
                                    margin-top: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &-thumb {
        @include border-radius(10px 10px 0 0);
        overflow: hidden;
        position: relative;
        & img {
            max-height: 200px;
            object-fit: cover;
            width: 100%;
        }
    }
    &__thumb {
        &-four {
            width: 337px;
            flex: 0 0 auto;
            @media #{$lg} {
                width: 300px;
            }
            @media #{$md} {
                width: 100%;
            }
            & img {
                @include border-radius(12px);
                height: 380px;
                object-fit: cover;
                width: 100%;
                @media #{$lg} {
                    height: 340px;
                }
            }
        }
    }
    &__icon {
        &-two {
            font-size: 60px;
            line-height: 0;
            color: var(--tg-theme-primary);
            display: inline-block;
            @include transition(0.4s);
            margin-bottom: 20px;
        }
        &-three {
            width: 70px;
            height: 70px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            @include border-radius(50%);
            background: var(--tg-color-gray-3);
            border: 1px solid var(--tg-color-gray-2);
            flex: 0 0 auto;
            line-height: 0;
            font-size: 42px;
            color: var(--tg-theme-secondary);
            position: relative;
            & i {
                @include transition(0.4s);
                @include transform(rotateY(0deg));
            }
            &::before {
                content: "";
                position: absolute;
                right: -18px;
                top: 50%;
                @include transform(translateY(-50%));
                width: 3px;
                height: 40px;
                background: #dce7ec;
                @include border-radius(3px);
            }
        }
        &-five {
            position: relative;
            z-index: 1;
            color: var(--tg-theme-primary);
            font-size: 45px;
            line-height: 0;
            display: inline-block;
            margin-bottom: 50px;
        }
        &-shape {
            & .shape {
                position: absolute;
                z-index: -1;
                &:nth-child(1) {
                    left: 50%;
                    top: 50%;
                    @include transform(translate(-50%, -50%));
                    & svg {
                        color: var(--tg-color-yellow-light);
                    }
                }
                &:nth-child(2) {
                    left: -2px;
                    bottom: -13px;
                    & svg {
                        color: var(--tg-theme-primary);
                    }
                }
                &:nth-child(3) {
                    left: 50px;
                    top: -18px;
                    & svg {
                        color: var(--tg-theme-primary);
                    }
                }
            }
        }
    }
    &-content {
        padding: 30px 25px;
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        & .icon {
            width: 70px;
            height: 70px;
            background: var(--tg-color-gray-3);
            @include flexbox();
            align-items: center;
            justify-content: center;
            font-size: 36px;
            line-height: 0;
            color: var(--tg-theme-secondary);
            border: 3px solid var(--tg-color-white-default);
            @include border-radius(50%);
            position: absolute;
            left: 30px;
            top: -55px;
            z-index: 2;
            @include transition(0.4s);
        }
        & .title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 30px;
            & a {
                &:hover {
                    color: var(--tg-theme-primary);
                }
            }
        }
        & p {
            margin-bottom: 22px;
        }
        & .btn {
            background: var(--tg-color-gray-3);
            color: var(--tg-theme-secondary);
            padding: 16px 20px;
            margin-top: auto;
            &:hover {
                color: var(--tg-color-white-default);
            }
        }
    }
    &__content {
        &-two {
            & .title {
                color: var(--tg-color-white-default);
                margin-bottom: 15px;
                font-size: 22px;
                font-weight: 600;
            }
            & p {
                margin-bottom: 25px;
                color: var(--tg-color-gray-2);
            }
            & .btn {
                background: #2e328b;
                color: #9597c8;
                padding: 16px 20px;
                &::before {
                    background: var(--tg-color-white-default);
                }
                &::after {
                    color: var(--tg-color-white-default);
                }
                &:hover {
                    color: var(--tg-theme-secondary);
                    &::after {
                        color: var(--tg-theme-secondary);
                    }
                }
            }
        }
        &-three {
            & p {
                margin-bottom: 25px;
            }
            & .btn {
                background: var(--tg-color-yellow-light);
                color: var(--tg-theme-primary);
                &:hover {
                    color: var(--tg-color-white-default);
                }
            }
        }
        &-four {
            & .title {
                font-size: 30px;
                font-weight: 600;
                margin-bottom: 10px;
                @media #{$lg} {
                    font-size: 26px;
                }
            }
            & p {
                margin-bottom: 20px;
            }
            & .about__list-box {
                margin-bottom: 20px;
                & li {
                    & i {
                        font-size: 15px;
                    }
                }
            }
            & .btn {
                background: var(--tg-color-gray-3);
                color: var(--tg-theme-secondary);
                &:hover {
                    color: var(--tg-color-white-default);
                }
            }
        }
        &-five {
            & .title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 15px;
                color: var(--tg-theme-third);
            }
            & p {
                margin-bottom: 25px;
                color: var(--tg-color-gray-8);
            }
            & .btn {
                background: var(--tg-color-gray-3);
                color: var(--tg-theme-secondary);
                padding: 16px 24px;
                &:hover {
                    color: var(--tg-color-white-default);
                }
            }
        }
    }
    &-bottom-content {
        @include flexbox();
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        @media #{$xs} {
            flex-wrap: wrap;
            text-align: center;
        }
        & p {
            margin-bottom: 0;
        }
    }
    &__tab {
        &-wrap {
            @include flexbox();
            gap: 30px;
            @media #{$xs} {
                flex-wrap: wrap;
            }
            & .nav-tabs {
                border-bottom: none;
                margin-bottom: 0;
                flex-direction: column;
                width: 330px;
                @media #{$lg} {
                    width: 270px;
                }
                @media #{$xs} {
                    width: auto;
                    justify-content: center;
                    flex-direction: row;
                }
            }
            & .nav-item {
                margin-bottom: 5px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            & .nav-link {
                border: none;
                background: linear-gradient(90deg, #3b3d9a 13.19%, rgba(44, 46, 143, 0.54) 100%);
                @include border-radius(10px);
                @include flexbox();
                align-items: center;
                margin: 0;
                gap: 11px;
                font-size: 20px;
                font-weight: 600;
                font-family: var(--tg-heading-font-family);
                color: var(--tg-color-white-default);
                padding: 15px 55px 15px 25px;
                position: relative;
                width: 330px;
                @include transition(0.3s);
                @media #{$lg} {
                    width: 270px;
                    font-size: 18px;
                    padding: 15px 45px 15px 20px;
                }
                & i {
                    font-size: 40px;
                    line-height: 0;
                    color: var(--tg-theme-primary);
                    @include transition(0.3s);
                    @media #{$lg} {
                        font-size: 35px;
                    }
                }
                &::after {
                    content: "\f10a";
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    @include transform(translateY(-50%));
                    font-family: flaticon;
                    font-weight: 500;
                    font-size: 24px;
                    line-height: 0;
                }
                &.active {
                    background: var(--tg-theme-primary);
                    color: var(--tg-color-white-default);
                    & i {
                        color: var(--tg-color-white-default);
                    }
                }
            }
        }
    }
    &__shape-wrap {
        & img {
            position: absolute;
            z-index: -1;
            &:nth-child(1) {
                left: 0;
                bottom: 0;
                @media #{$md} {
                    width: 200px;
                }
            }
            &:nth-child(2) {
                right: 0;
                top: 0;
                @media #{$md} {
                    width: 200px;
                }
            }
        }
        &-two {
            & img {
                position: absolute;
                z-index: -1;
                &:nth-child(1) {
                    left: 0;
                    top: 0;
                    @media #{$xs} {
                        width: 200px;
                    }
                }
                &:nth-child(2) {
                    right: 0;
                    bottom: 0;
                    @media #{$xs} {
                        width: 200px;
                    }
                }
            }
        }
    }
    &__details {
        &-area {
            padding: 40px 0;
            @media #{$xs} {
                padding: 40px 0;
            }
        }
        &-wrap {
            & .row {
                & .col-70 {
                    width: 70.4%;
                    flex: 0 0 auto;
                    @media #{$md} {
                        width: 100%;
                    }
                }
                & .col-30 {
                    width: 29.6%;
                    flex: 0 0 auto;
                    @media #{$md} {
                        width: 100%;
                    }
                }
            }
        }
        &-thumb {
            margin-bottom: 35px;
            @media #{$xs} {
                margin-bottom: 25px;
            }
            & img {
                @include border-radius(10px);
                width: 100%;
                min-height: 250px;
                object-fit: cover;
            }
            &-two {
                margin-bottom: 0;
                @media #{$xs} {
                    margin-bottom: 30px;
                }
            }
        }
        &-content {
            & > .title {
                margin-bottom: 22px;
                font-size: 40px;
                font-weight: 600;
                text-transform: capitalize;
                @media #{$lg} {
                    font-size: 36px;
                }
                @media #{$xs} {
                    font-size: 32px;
                }
            }
            & > p {
                margin-bottom: 20px;
                &.last-info {
                    margin-bottom: 0;
                }
            }
            & .title-two {
                margin-bottom: 20px;
                font-size: 36px;
                font-weight: 600;
                @media #{$lg} {
                    font-size: 32px;
                }
                @media #{$xs} {
                    font-size: 28px;
                }
            }
            &-two {
                & > .title {
                    font-size: 36px;
                    @media #{$lg} {
                        font-size: 32px;
                    }
                    @media #{$xs} {
                        font-size: 30px;
                    }
                }
            }
        }
        &-top {
            margin-bottom: 30px;
            & .row {
                & .col-49 {
                    width: 48.9%;
                    flex: 0 0 auto;
                    @media #{$xs} {
                        width: 100%;
                    }
                }
                & .col-51 {
                    width: 51.1%;
                    flex: 0 0 auto;
                    @media #{$xs} {
                        width: 100%;
                    }
                }
            }
            &-content {
                & .title {
                    margin-bottom: 15px;
                    font-size: 40px;
                    @media #{$lg} {
                        font-size: 36px;
                    }
                    @media #{$xs} {
                        font-size: 32px;
                    }
                }
                & p {
                    margin-bottom: 15px;
                }
            }
        }
        &-list {
            margin: 35px 0 10px;
            &-two {
                margin: 25px 0 10px;
            }
            &-box {
                @include flexbox();
                align-items: flex-start;
                gap: 20px;
                @include box-shadow(0px 7px 15px 0px rgba(0, 0, 0, 0.05));
                border: 1px solid #e5e7e8;
                @include border-radius(10px);
                padding: 30px 30px;
                margin-bottom: 30px;
                @media #{$lg} {
                    gap: 15px;
                    padding: 30px 25px;
                    flex-wrap: wrap;
                }
                & .icon {
                    width: 70px;
                    height: 70px;
                    @include flexbox();
                    align-items: center;
                    justify-content: center;
                    background: var(--tg-theme-primary);
                    flex: 0 0 auto;
                    @include border-radius(8px);
                    color: var(--tg-color-white-default);
                    font-size: 50px;
                    line-height: 0;
                    & i {
                        @include transform(rotateY(0));
                        @include transition(0.4s);
                    }
                }
                & .content {
                    & .title {
                        font-size: 22px;
                        font-weight: 600;
                        margin-bottom: 10px;
                    }
                    & p {
                        margin-bottom: 0;
                    }
                }
                &:hover {
                    & .icon {
                        & i {
                            @include transform(rotateY(180deg));
                        }
                    }
                }
                &-two {
                    @include box-shadow(0px 7px 15px 0px rgba(0, 0, 0, 0.05));
                    background: #fffbf4;
                    border: 1px solid #fbd58a;
                    @include border-radius(10px);
                    padding: 30px 30px 30px;
                    text-align: center;
                    margin-bottom: 30px;
                    @media #{$lg} {
                        padding: 30px 18px 30px;
                    }
                    @media #{$xs} {
                        padding: 30px 30px 30px;
                    }
                    & .icon {
                        width: 80px;
                        height: 80px;
                        @include flexbox();
                        align-items: center;
                        justify-content: center;
                        background: var(--tg-theme-primary);
                        color: var(--tg-color-white-default);
                        line-height: 0;
                        @include border-radius(50%);
                        margin: 0 auto 30px;
                        font-size: 40px;
                        & i {
                            @include transform(rotateY(0));
                            @include transition(0.4s);
                        }
                    }
                    & .content {
                        & .title {
                            margin-bottom: 10px;
                            font-size: 22px;
                            font-weight: 600;
                            @media #{$lg} {
                                font-size: 20px;
                            }
                            @media #{$xs} {
                                font-size: 22px;
                            }
                        }
                        & p {
                            margin-bottom: 0;
                        }
                    }
                    &:hover {
                        & .icon {
                            & i {
                                @include transform(rotateY(180deg));
                            }
                        }
                    }
                }
                &-three {
                    @include flexbox();
                    align-items: flex-start;
                    gap: 20px;
                    margin-bottom: 50px;
                    @media #{$lg} {
                        gap: 14px;
                        margin-bottom: 30px;
                    }
                    & .icon {
                        font-size: 60px;
                        line-height: 0;
                        color: var(--tg-theme-primary);
                        @include transition(0.3s);
                        @include transform(rotateY(0) translateY(3px));
                    }
                    & .content {
                        & .title {
                            margin-bottom: 5px;
                            font-size: 22px;
                            font-weight: 600;
                        }
                        & p {
                            margin-bottom: 0;
                            & br {
                                @media #{$lg} {
                                    display: none;
                                }
                            }
                        }
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &:hover {
                        & .icon {
                            @include transform(rotateY(180deg) translateY(3px));
                        }
                    }
                }
            }
        }
        &-inner {
            margin: 35px 0 30px;
            & .row {
                & .col-44 {
                    width: 43.9%;
                    flex: 0 0 auto;
                    @media #{$xs} {
                        width: 100%;
                    }
                }
                & .col-56 {
                    width: 56.1%;
                    flex: 0 0 auto;
                    @media #{$xs} {
                        width: 100%;
                    }
                }
            }
            &-two {
                margin: 80px 0 45px;
                @media #{$lg} {
                    margin: 50px 0 40px;
                }
                & .row {
                    & .col-48 {
                        width: 48.5%;
                        flex: 0 0 auto;
                        @media #{$xs} {
                            width: 100%;
                        }
                    }
                    & .col-52 {
                        width: 51.5%;
                        flex: 0 0 auto;
                        @media #{$xs} {
                            width: 100%;
                        }
                    }
                }
            }
            &-three {
                margin-bottom: 40px;
            }
            &-four {
                margin: 40px 0 35px;
                & .services__details-inner-content-two {
                    & p {
                        margin-bottom: 25px;
                    }
                }
            }
            &-five {
                margin: 0 0 55px;
                & .services__details-inner-content-three {
                    margin: 0 30px 0 0;
                    @media #{$lg} {
                        margin: 0 0 0 0;
                    }
                    @media #{$md} {
                        margin: 0 0 30px 0;
                    }
                }
                & .services__details-list-box {
                    padding: 25px 25px;
                    margin-bottom: 20px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
            &-six {
                margin: 30px 0 40px;
                & .services__details-inner-content-three {
                    margin: 0 60px 0 0;
                    @media #{$lg} {
                        margin: 0 0 0 0;
                    }
                    @media #{$md} {
                        margin: 0 0 30px 0;
                    }
                }
            }
            &-img {
                position: relative;
                @media #{$xs} {
                    margin-bottom: 30px;
                }
                & img {
                    @include border-radius(10px);
                    min-height: 230px;
                    object-fit: cover;
                    width: 100%;
                }
                & .play-btn {
                    width: 62px;
                    height: 62px;
                    @include flexbox();
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    @include transform(translate(-50%, -50%));
                    background: var(--tg-color-white-default);
                    @include border-radius(50%);
                    color: var(--tg-theme-secondary);
                    font-size: 18px;
                    &:hover {
                        background: var(--tg-theme-primary);
                        color: var(--tg-color-white-default);
                    }
                }
                &-wrap {
                    margin: 30px 0 0;
                    & img {
                        @include border-radius(10px);
                        margin-bottom: 30px;
                        width: 100%;
                    }
                }
            }
            &-content {
                & .title {
                    margin-bottom: 15px;
                    font-size: 24px;
                    text-transform: capitalize;
                    & br {
                        @media #{$lg} {
                            display: none;
                        }
                    }
                }
                & p {
                    margin-bottom: 20px;
                }
                &-two {
                    & .title {
                        font-size: 36px;
                        margin-bottom: 20px;
                        font-weight: 600;
                        @media #{$lg} {
                            font-size: 32px;
                        }
                        @media #{$xs} {
                            font-size: 28px;
                        }
                    }
                    & p {
                        margin-bottom: 0;
                        width: 90%;
                        @media #{$lg} {
                            width: 100%;
                        }
                    }
                }
                &-three {
                    margin-left: 30px;
                    @media #{$lg} {
                        margin-left: 0;
                    }
                    @media #{$xs} {
                        margin-top: 30px;
                    }
                    & .title {
                        font-size: 30px;
                        margin-bottom: 20px;
                        @media #{$xs} {
                            font-size: 28px;
                        }
                    }
                    & p {
                        margin-bottom: 0;
                    }
                }
            }
            &-graph {
                & img {
                    @include box-shadow(-7px 7px 0px 0px rgba(0, 0, 0, 0.1));
                    border: 0.8px solid #dadada;
                    @include border-radius(12px);
                }
            }
        }
    }
    &__sidebar {
        margin-right: 20px;
        @media #{$lg} {
            margin-right: 0;
        }
        @media #{$md} {
            margin-top: 100px;
        }
    }
}

.sidebar {
    &__widget {
        &-two {
            border: none !important;
            padding: 0 !important;
            @include border-radius(0!important);
        }
        &-three {
            border: none !important;
            background: var(--tg-color-gray-3);
        }
    }
    &__cat {
        &-list {
            &-two {
                & .list-wrap {
                    & li {
                        margin-bottom: 10px;
                        & a {
                            @include flexbox();
                            align-items: center;
                            justify-content: space-between;
                            background: var(--tg-color-gray-3);
                            border: 1px solid #e0eef3;
                            @include border-radius(4px);
                            padding: 16px 20px;
                            font-size: 18px;
                            font-weight: 500;
                            color: var(--tg-body-color);
                            & i {
                                font-size: 24px;
                                line-height: 0;
                                @include transition(0.3s);
                            }
                            &:hover {
                                background: var(--tg-theme-secondary);
                                color: var(--tg-color-white-default);
                                border-color: var(--tg-theme-secondary);
                                & i {
                                    color: var(--tg-theme-primary);
                                }
                            }
                        }
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
            &-three {
                & .list-wrap {
                    & li {
                        & a {
                            background: var(--tg-color-white-default);
                        }
                    }
                }
            }
        }
    }
    &__brochure {
        & p {
            margin-bottom: 15px;
        }
        & a {
            @include flexbox();
            align-items: center;
            background: var(--tg-color-gray-3);
            @include border-radius(5px);
            padding: 15px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--tg-heading-color);
            gap: 12px;
            margin-bottom: 10px;
            & i {
                font-size: 18px;
            }
            &:hover {
                background: var(--tg-theme-secondary);
                color: var(--tg-color-white-default);
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
        &-two {
            & a {
                background: var(--tg-color-white-default);
            }
        }
    }
    &__contact {
        background: var(--tg-theme-secondary);
        @include border-radius(10px);
        padding: 50px 40px 55px;
        text-align: center;
        @media #{$lg} {
            padding: 40px 20px 40px;
        }
        @media #{$xs} {
            padding: 40px 30px 40px;
        }
        & .title {
            color: var(--tg-color-white-default);
            margin-bottom: 30px;
            font-size: 24px;
        }
        & .btn {
            gap: 5px;
            padding: 13px 24px;
            & i {
                font-size: 24px;
                line-height: 0;
            }
            &::after {
                display: none;
            }
            &::before {
                background: var(--tg-color-gray-3);
            }
            &:hover {
                color: var(--tg-theme-secondary);
            }
        }
        &-two {
            background-size: cover;
            background-position: center;
            padding: 30px 40px 180px;
            @media #{$lg} {
                padding: 30px 20px 180px;
            }
            @media #{$md} {
                padding: 30px 20px 70px;
            }
            & .title {
                color: var(--tg-theme-secondary);
            }
            & .btn {
                @include border-radius(30px);
                &::before {
                    background: var(--tg-theme-secondary);
                }
                &:hover {
                    color: var(--tg-color-white-default);
                }
            }
        }
    }
    &__form {
        & form {
            & .form-grp {
                margin-bottom: 8px;
                & textarea,
                & input {
                    width: 100%;
                    border: 1px solid #e0e6f2;
                    background: var(--tg-color-white-default);
                    @include border-radius(5px);
                    padding: 14px 15px;
                    font-size: 14px;
                    color: var(--tg-body-color);
                    font-weight: 500;
                    height: 50px;
                    display: block;
                    &::placeholder {
                        font-size: 14px;
                        color: #667594;
                        font-weight: 500;
                        text-transform: capitalize;
                    }
                }
                & textarea {
                    min-height: 120px;
                    max-height: 120px;
                }
            }
            & .btn {
                width: 100%;
                justify-content: center;
                &::after {
                    display: none;
                }
            }
        }
    }
}

.shine {
    &-animate {
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;
        &::before {
            position: absolute;
            top: 0;
            left: -100%;
            display: block;
            content: "";
            width: 50%;
            height: 100%;
            background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
            background: -webkit-gradient(
                linear,
                left top,
                right top,
                from(rgba(255, 255, 255, 0)),
                to(rgba(255, 255, 255, 0.3))
            );
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
            -webkit-transform: skewX(-25deg);
            -ms-transform: skewX(-25deg);
            transform: skewX(-25deg);
        }
        &-item {
            &:hover {
                & .shine-animate {
                    &::before {
                        -webkit-animation: hoverShine 1.2s;
                        animation: hoverShine 1.2s;
                    }
                }
            }
        }
    }
}

.section-more-btn {
    text-align: right;
    @media #{$md} {
        text-align: left;
        margin-bottom: 50px;
    }
    & .border-btn {
        border-color: var(--tg-color-white-default);
        color: var(--tg-color-white-default);
        &:hover {
            color: var(--tg-theme-secondary);
            background: var(--tg-color-white-default);
            border-color: var(--tg-color-white-default);
        }
    }
}

.about__list-box-three {
    & .list-wrap {
        @include flexbox();
        align-items: center;
        margin: 0 -5px;
        flex-wrap: wrap;
        gap: 10px 0;
        & li {
            width: 50%;
            flex: 0 0 auto;
            padding: 0 5px;
            margin: 0;
            @media #{$xs} {
                width: 100%;
            }
            @media #{$sm} {
                width: 50%;
            }
        }
    }
}