body {
    color: #000 !important;
}
h2.title,
h1.section-title,
.intro-area .intro-title-wrapper .title,
h2.title.wc-counter.count,
.banner-10 .banner-content .title {
    font-size: 60px !important;
    font-family: var(--font_tropline) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

h2.section-title,
h3.title,
.about-area.style-1 .about-inner .section-title,
.plan-area .section-title,
.section-title-wrapper.style-7 .section-title,
.achievement-area h2,
.about-feature .section-title,
.about-feature .sub-title,
.experience-area .counter-box .text,
.work-section h2.title {
    font-size: 50px !important;
    font-family: var(--font_tropline) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

span.section-subtitle,
h5.cate,
h4.title,
h5.title,
h3.title-small,
.service-area.style-1 .service-title-wrap,
p.section-subtitle,
h3.title-2,
.intro-area .video-title,
.text-slider-item .title,
h2.title.wc-counter,
p.text-small,
.section-title-wrapper.style-7 .section-subtitle {
    font-size: 15px;
    font-family: var(--font_tropline) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    font-style: unset !important;
}

p.text,
ul li a {
    font-size: 16px !important;
    font-family: var(--font_tropline) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
.service-item .title,
.blog-area .title,
.feature-area .title,
.service-area .title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-family: var(--font_tropline) !important;
}

.service-area.style-1 .service-title-wrap,
.about-feature .feature-item {
    align-items: center;
    font-size: 22px;
}
section.service-details-area.section-spacing.pt-0 {
    padding: 0;
}
.active {
    color: #2cc6ce !important;
    font-weight: 600;
}
p.text-small,
.case-area .title-small {
    color: #fff;
}

img {
    border-style: none;
    overflow-clip-margin: content-box;
    overflow: clip;
    vertical-align: middle;
}

section.blog-details-area.section-spacing.inner-policy p {
    margin: 10px 0 10px;
}
section.blog-details-area.section-spacing.inner-policy li {
    list-style-type: disc;
    margin-left: 15px;
    margin-top: 10px;
}
section.blog-details-area.section-spacing.inner-policy li:last-child {
    margin-bottom: 10px;
}
.header-area.sticky .wc-btn-primary {
    background-color: black;
    color: white;
}
section.experience-section.padding-bottom.padding-top.bg_img.top_center.bg-max-lg-ash.oh {
    background-image: url(../imgs/experience-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
section.experience-section.padding-bottom.padding-top.bg_img.top_center.bg-max-lg-ash.oh
    img {
    max-width: unset;
}

/* achivement area */
.achievement-area {
    background-color: #202c39;
    padding-top: 150px;
    padding-bottom: 150px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1198.99px) {
    .handburgur-menu-button {
        display: none;
    }
}
@media only screen and (max-width: 1198.99px) {
    .achievement-area {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .offcanvas-3__menu ul {
        margin-top: 26px;
    }
}
@media only screen and (max-width: 991px) {
    .achievement-area {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .achievement-area {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .offcanvas-3__menu ul {
        list-style-type: circle !important;
        padding-left: 15px;
    }
}
.achievement-area .section-heading {
    max-width: 566px;
    margin: auto;
    text-align: center;
    margin-bottom: 60px;
}
.achievement-area .section-title {
    color: #fff;
}
.achievement-area .section-subtitle {
    color: #fff;
}
.achievement-area .section-title span {
    color: #707880 !important;
}
.achievement-area .circle {
    width: 490px;
    height: 490px;
    border-radius: 50%;
    border: 100px solid #28b2b9;
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2;
}
.achievement-area .achievement-items {
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 991px) {
    .achievement-area .achievement-items {
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 767px) {
    .achievement-area .achievement-items {
        gap: 30px;
        justify-content: center;
        text-align: center;
    }
}
.achievement-area .achievement-item {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    padding-top: 75px;
    padding-left: 60px;
    padding-right: 60px;
}
@media only screen and (max-width: 1919px) {
    .achievement-area .achievement-item {
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .achievement-area .achievement-item {
        flex-basis: 33%;
        border-right: 0;
        border: 0;
    }
}
@media only screen and (max-width: 767px) {
    .achievement-area .achievement-item {
        flex-basis: 45%;
        padding-left: 0;
        padding-right: 0;
        padding-top: 10px;
    }
}
.achievement-area .achievement-item:first-child {
    padding-left: 0;
}
.achievement-area .achievement-item:last-child {
    border-right: 0;
}
@media only screen and (max-width: 991px) {
    .achievement-area .achievement-item:last-child {
        padding-left: 0;
    }
}
.achievement-area .achievement-item .title {
    color: #fff;
    font-size: 100px;
    font-weight: 400;
    line-height: 0.5;
    margin-bottom: 52px;
}
@media only screen and (max-width: 1199px) {
    .achievement-area .achievement-item .title {
        font-size: 55px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .achievement-area .achievement-item .title {
        font-size: 40px;
    }
}
.achievement-area .achievement-item .title-2 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 15px;
}
.achievement-area .achievement-item .desc {
    max-width: 250px;
}

/*  */

.section-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
@media only screen and (max-width: 1199px) {
    .section-lines {
        display: none;
    }
}
.section-lines .container {
    height: 100%;
}
.section-lines .line-area {
    height: 100%;
}
.lines {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
}

/*  */
.section-home {
    padding-top: 130px;
    padding-bottom: 130px;
    background-color: #f5f3ed;
}
.counter-area .counter-content {
    display: flex;
    gap: 60px;
    max-width: 1040px;
    margin: 0 auto;
    align-items: flex-start;
}
.counter-area .number-wrapper {
    background-color: var(--primary);
    padding-inline-end: 60px;
    width: 100%;
    aspect-ratio: 100/100;
    display: flex;
    align-items: flex-end;
    padding-bottom: 195px;
    padding-top: 128px;
    border-radius: calc(100% - 0px) 0px 0px 0px / calc(100% - 0px) 0px 0px 0px;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}
.dir-rtl .counter-area .number-wrapper {
    border-radius: 0px calc(100% - 0px) 0px 0px/0px calc(100% - 0px) 0px 0px;
}
.counter-area .number-wrapper .number {
    font-size: 250px;
    font-weight: 600;
    color: #fff;
    line-height: 30px;
}
.counter-area .number-wrapper .shape-1 {
    position: absolute;
    inset-inline-end: 37px;
    bottom: -89px;
    width: 196px;
}
.dir-rtl .counter-area .number-wrapper .shape-1 {
    transform: rotateY(180deg);
}
.counter-area .counter-content .text-wrapper {
    margin-top: 213px;
    width: 360px;
}
.counter-area .counter-content .title {
    font-size: 36px;
    margin-bottom: 23px;
}
.counter-area .counter-content .text {
    font-size: 18px;
    line-height: 1.44;
    margin-bottom: 74px;
}
.counter-area .counter-content .text span {
    color: #10283f;
    font-weight: 500;
}
.counter-area .counter-content .sign {
    padding-inline-start: 78px;
    padding-top: 86px;
    background-color: #4ab0b2;
    width: 280px;
    aspect-ratio: 100/100;
    font-size: 150px;
    line-height: 30px;
    border-radius: 0px 0px calc(100% - 0px) 0px/0px 0px calc(100% - 0px) 0px;
    color: var(--primary);
}
.dir-rtl .counter-area .counter-content .sign {
    border-radius: 0px 0px 0px calc(100% - 0px) / 0px 0px 0px calc(100% - 0px);
}
@media only screen and (max-width: 1919px) {
    .section-home {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .section-home {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .counter-area .counter-content .sign {
        padding-inline-start: 48px;
        padding-top: 56px;
        font-size: 100px;
        width: 180px;
    }
    .counter-area .counter-content .text {
        margin-bottom: 44px;
    }
    .counter-area .counter-content {
        gap: 40px;
    }
    .counter-area .number-wrapper {
        padding-inline-end: 40px;
        padding-bottom: 95px;
        padding-top: 78px;
    }
    .counter-area .number-wrapper .number {
        font-size: 150px;
    }
    .counter-area .number-wrapper .shape-1 {
        bottom: -52px;
        width: 116px;
    }
    .counter-area .count-position {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .counter-area .counter-content .text-wrapper {
        margin-top: 113px;
        width: 320px;
    }
}
@media only screen and (max-width: 767px) {
    .section-home {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .counter-area .counter-content {
        flex-direction: column;
        align-items: flex-end;
    }
    .counter-area .number-wrapper {
        max-width: 400px;
        margin-inline-end: auto;
    }
    .counter-area .number-wrapper .shape-1 {
        display: none;
    }
    .counter-area .counter-content .text-wrapper {
        margin-top: 213px;
        width: 360px;
    }
    .counter-area .counter-content .text-wrapper {
        margin-top: 0;
    }
}
@media (max-width: 575px) {
    .counter-area .number-wrapper {
        padding-bottom: 65px;
        padding-top: 68px;
        max-width: 350px;
    }
    .counter-area .number-wrapper .number {
        font-size: 100px;
    }
    .counter-area .counter-content .text-wrapper {
        width: 100%;
    }
}

/*  */
.about-area.style-1 {
    max-width: 1920px;
    margin: auto;
    position: relative;
    z-index: 2;
}
.about-area.style-1::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    top: 0;
    height: 250px;
    width: 100%;
    background-color: #f1f6f6;
    z-index: -2;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1::before {
        display: none;
    }
}
.about-area.style-1 .about-inner {
    display: flex;
    justify-content: space-between;
    background-color: #d7ddcb;
    margin-inline-start: 200px;
    padding-inline-start: 115px;
    height: 100vh;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-inner {
        margin-left: 0;
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner {
        flex-wrap: wrap;
        height: 100%;
        padding-bottom: 50px;
    }
}
.about-area.style-1 .about-inner .subtitle-wrapper {
    margin-bottom: 164px;
    padding-top: 38px;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-inner .subtitle-wrapper {
        margin-bottom: 50px;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .subtitle-wrapper {
        margin-bottom: 30px;
    }
}
.about-area.style-1 .about-inner .title-wrapper {
    max-width: 201px;
}

.about-area.style-1 .about-inner .cf_text {
    margin-top: 22px;
    margin-bottom: 46px;
    max-width: 390px;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .cf_text {
        margin-bottom: 30px;
    }
}
.about-area.style-1 .about-inner .list-check li {
    font-family: var(--font_hkgrotesk);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.31;
    margin-bottom: 14px;
}
.about-area.style-1 .about-inner .list-check li:last-child {
    margin-bottom: 0;
}
.about-area.style-1 .about-inner .btn-wrapper {
    margin-top: 90px;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .btn-wrapper {
        margin-top: 45px;
    }
}
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.18;
}
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary:hover {
    color: var(--white);
    background-color: var(--primary);
}
.about-area.style-1 .about-text-wrapper {
    padding-left: 50px;
    margin-bottom: 80px;
    border-left: 1px solid rgba(18, 18, 18, 0.06);
}
.about-inner-wrapper {
    position: relative;
}

@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-text-wrapper {
        border: 0;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-text-wrapper {
        margin-bottom: 0;
    }
}
.about-area.style-1 .about-thumb img {
    height: 100%;
    margin-inline-end: 4px;
    max-width: 645px;
    margin-left: auto;
    -o-object-fit: cover;
    object-fit: cover;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-thumb img {
        display: none;
        height: 0;
    }
}

section.case-study.has_fade_anim {
    padding: 70px 0 70px;
}

/*  */
.info-area {
    padding-top: 112px;
    background-color: #dbe2c8;
    margin: 0 20px;
    border-radius: 20px;
    position: relative;
}
.info-area .body-lines-area {
    z-index: 2;
}
.info-area #myTabContent {
    position: relative;
    z-index: 3;
}
.info-area .section-title-wrapper {
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 1919px) {
    .info-area {
        padding-top: 82px;
    }
}
@media only screen and (max-width: 991px) {
    .info-area {
        padding-top: 62px;
    }
}
@media only screen and (max-width: 767px) {
    .info-area {
        padding-top: 42px;
        margin: 0 0;
        border-radius: 0;
    }
}
.info-area-inner {
    max-width: 1130px;
    margin: 0 auto;
}
.info-area .section-title {
    max-width: 583px;
    text-align: center;
    margin: 0 auto;
}
@media only screen and (max-width: 767px) {
    .info-area .section-title {
        max-width: 473px;
    }
}
.info-area .section-heading {
    margin-bottom: 56px;
}
@media only screen and (max-width: 991px) {
    .info-area .section-heading {
        margin-bottom: 36px;
    }
}
@media only screen and (max-width: 767px) {
    .info-area .section-heading {
        margin-bottom: 26px;
    }
}
.info-area .note-wrapper {
    max-width: 550px;
    padding: 12px 30px 10px;
    margin: 0 auto;
    border: 1px solid rgba(16, 49, 66, 0.1);
    border-radius: 36px;
    margin-top: 70px;
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 1199px) {
    .info-area .note-wrapper {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .info-area .note-wrapper {
        margin-top: 40px;
    }
}
.info-area .note-wrapper .text {
    font-size: 18px;
    line-height: 1.33;
    color: #4c6876;
    text-align: center;
}
.info-area .note-wrapper .text span {
    font-weight: 600;
    color: var(--primary);
}
.info-area .nav-tabs {
    border-bottom: 1px solid rgba(40, 70, 85, 0.062745098);
    margin-bottom: 40px;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 767px) {
    .info-area .nav-tabs {
        overflow-x: scroll;
        scrollbar-width: thin;
    }
    .info-area .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}
.info-area .nav-tabs .nav-link {
    font-size: 20px;
    line-height: 1.4;
    color: var(--primary);
    padding: 0 65px;
    padding-bottom: 7px;
    border: none;
    border-bottom: 1px solid rgba(40, 70, 85, 0.062745098);
    font-family: var(--font_recoleta);
    font-weight: 500;
}
@media only screen and (max-width: 991px) {
    .info-area .nav-tabs .nav-link {
        padding: 0 25px;
    }
}
.info-area .nav-tabs .nav-item.show .nav-link,
.info-area .nav-tabs .nav-link.active {
    border-bottom-color: var(--primary);
    background-color: transparent;
}
.info-area .nav-tabs .nav-link:focus,
.info-area .nav-tabs .nav-link:hover {
    border-bottom-color: var(--primary);
}

.info-content-wrapper {
    display: grid;
    grid-template-columns: auto 48%;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .info-content-wrapper {
        grid-template-columns: 1fr;
    }
}
.info-content-wrapper .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.info-content-wrapper .content {
    padding: 55px 60px 58px;
}
@media only screen and (max-width: 991px) {
    .info-content-wrapper .content {
        padding: 35px 40px 38px;
    }
}
@media only screen and (max-width: 767px) {
    .info-content-wrapper .content {
        order: 2;
    }
}
.info-content-wrapper .title {
    font-size: 40px;
    max-width: 249px;
    margin-bottom: 33px;
}
@media only screen and (max-width: 991px) {
    .info-content-wrapper .title {
        font-size: 30px;
        margin-bottom: 23px;
    }
}
@media only screen and (max-width: 767px) {
    .info-content-wrapper .title {
        max-width: 100%;
    }
}
.info-content-wrapper .text {
    font-size: 18px;
    max-width: 402px;
    margin-bottom: 18px;
}
.info-content-wrapper .list-plus li {
    font-size: 18px;
    line-height: 1.44;
    font-weight: 600;
    color: var(--primary);
    padding-inline-start: 22px;
}
.info-content-wrapper .list-plus li:not(:last-child) {
    margin-bottom: 7px;
}
.info-content-wrapper .list-plus li::before {
    top: 0px;
    font-size: 14px;
}
.info-content-wrapper .info-list {
    margin-bottom: 51px;
}
@media only screen and (max-width: 991px) {
    .info-content-wrapper .info-list {
        margin-bottom: 31px;
    }
}
.info-content-wrapper .wc-btn-underline {
    color: var(--primary);
    font-weight: 600;
    padding-bottom: 0;
    font-size: 16px;
}

/* strategy area style  */
.strategy-area {
    padding-top: 111px;
    padding-bottom: 123px;
}
@media only screen and (max-width: 1919px) {
    .strategy-area {
        padding-top: 81px;
        padding-bottom: 93px;
    }
}
@media only screen and (max-width: 991px) {
    .strategy-area {
        padding-top: 61px;
        padding-bottom: 73px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-area {
        padding-top: 41px;
        padding-bottom: 53px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-area-inner {
        max-width: 550px;
        margin: 0 auto;
    }
}
.strategy-area .section-heading {
    margin-bottom: 59px;
    display: flex;
    gap: 483px;
    align-items: flex-start;
}
@media only screen and (max-width: 1199px) {
    .strategy-area .section-heading {
        gap: 183px;
    }
}
@media only screen and (max-width: 991px) {
    .strategy-area .section-heading {
        margin-bottom: 39px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-area .section-heading {
        margin-bottom: 29px;
        flex-direction: column;
        gap: 30px;
    }
}
.strategy-area .strategy-number {
    font-size: 18px;
    line-height: 1.33;
    color: var(--primary);
    font-family: var(--font_recoleta);
    text-decoration: underline;
    text-underline-offset: 5px;
    white-space: nowrap;
}
.strategy-area .section-title {
    max-width: 690px;
}

.strategy-content-wrapper {
    display: flex;
    gap: 80px;
    justify-content: space-between;
    align-items: flex-end;
}
@media only screen and (max-width: 991px) {
    .strategy-content-wrapper {
        gap: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}
.strategy-content-wrapper .content {
    max-width: 555px;
}
@media only screen and (max-width: 1199px) {
    .strategy-content-wrapper .content {
        max-width: 515px;
    }
}
@media only screen and (max-width: 991px) {
    .strategy-content-wrapper .content {
        max-width: 305px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-content-wrapper .content {
        max-width: 515px;
    }
}
.strategy-content-wrapper .content .text {
    font-size: 30px;
    line-height: 1.26;
}
@media only screen and (max-width: 1199px) {
    .strategy-content-wrapper .content .text {
        font-size: 22px;
    }
}
@media only screen and (max-width: 991px) {
    .strategy-content-wrapper .content .text {
        font-size: 18px;
    }
}
.strategy-content-wrapper .content .text span {
    font-weight: 600;
    color: var(--primary);
}
.strategy-content-wrapper .content .text-wrapper {
    margin-bottom: 110px;
}
@media only screen and (max-width: 1199px) {
    .strategy-content-wrapper .content .text-wrapper {
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .strategy-content-wrapper .content .text-wrapper {
        margin-bottom: 30px;
    }
}
.strategy-content-wrapper .content .list-wrapper {
    max-width: 248px;
}
.strategy-content-wrapper .content .list-wrapper .heading {
    font-size: 18px;
    line-height: 1.66;
    font-weight: 600;
    margin-bottom: 9px;
}
.strategy-content-wrapper .content .list-wrapper ul li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.62;
    color: var(--secondary);
}
.strategy-content-wrapper .content .list-wrapper ul li:not(:last-child) {
    margin-bottom: 5px;
}
.strategy-content-wrapper .thumb {
    max-width: 660px;
}
@media only screen and (max-width: 767px) {
    .strategy-content-wrapper .thumb {
        max-width: 550px;
    }
}

/* video area style  */
.video-area {
    margin: 0 20px;
}
@media only screen and (max-width: 767px) {
    .video-area {
        margin: 0 0;
        border-radius: 0;
    }
}
.video-area .video-wrapper {
    width: 100%;
    aspect-ratio: 100/42;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}
@media (max-width: 575px) {
    .video-area .video-wrapper {
        aspect-ratio: 100/50;
    }
}
.video-area .video-wrapper:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(16, 49, 66, 0.1254901961);
    top: 0;
    inset-inline-start: 0;
}
.video-area .video-wrapper video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.video-area .video-text {
    position: absolute;
    inset-inline-end: 60px;
    bottom: 60px;
    z-index: 1;
}
@media only screen and (max-width: 1199px) {
    .video-area .video-text {
        inset-inline-end: 50px;
        bottom: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .video-area .video-text {
        inset-inline-end: 40px;
        bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .video-area .video-text {
        inset-inline-end: 30px;
        bottom: 30px;
    }
}
.video-area .video-text .text {
    font-size: 24px;
    line-height: 1.16;
    font-weight: 500;
    color: var(--white);
    border-inline-end: 2px solid currentColor;
    padding-inline-end: 10px;
    max-width: 345px;
    text-align: end;
}
.line-area {
    position: relative;
}

.lines {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
}
.lines .line {
    width: 1px;
    height: 100%;
    background-color: rgba(0, 81, 83, 0.031372549);
    display: inline-block;
    position: relative;
    z-index: 1;
}
.body-lines-area .lines .line {
    background-color: rgba(16, 49, 66, 0.07);
}
@media only screen and (max-width: 1199px) {
    .video-area .video-text .text {
        font-size: 20px;
        max-width: 305px;
    }
}
@media only screen and (max-width: 991px) {
    .video-area .video-text .text {
        font-size: 18px;
        max-width: 275px;
    }
}
@media only screen and (max-width: 767px) {
    .video-area .video-text .text {
        font-size: 16px;
        max-width: 245px;
    }
}

/*  */
.plan-area {
    padding-top: 150px;
    padding-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
    .plan-area {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .plan-area {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}
.plan-area .section-heading {
    text-align: center;
    max-width: 1070px;
    margin: auto;
}
.plan-area .title-wrapper {
    padding-bottom: 60px;
}

.header-area.style-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: 0.3s;
}
.header-area.style-1 .header-area__inner {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    border-bottom: 1px solid rgba(18, 18, 18, 0.06);
    height: 80px;
}
.header-area.style-1 .header-area__inner > *:first-child {
    margin-inline-end: auto;
}
.header-area.style-1 .main-menu li a {
    font-size: 16px;
    font-weight: 600;
}
.header-area.style-1 .search-icon {
    color: var(--primary);
}
@media (max-width: 575px) {
    .header-area.style-1 .header__meta {
        display: none;
    }
}
.header-area.style-1 .wc-btn-primary {
    padding: 16px 19px;
}
.dir-rtl .header-area.style-1 .header__nav pos-centericon img {
    transform: rotateY(180deg);
}

.header-area.sticky {
    position: fixed !important;
    background-color: var(--white);
}

.cta-area.style-1 {
    position: relative;
}
.cta-area.style-1:before {
    position: absolute;
    content: "";
    width: 50%;
    height: 100%;
    top: 0;
    inset-inline-end: 0;
    background-color: #282828;
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1:before {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1 .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}
.cta-area.style-1 .cta-area-wrapper {
    display: flex;
    margin-inline-start: 334px;
}
@media only screen and (max-width: 1919px) {
    .cta-area.style-1 .cta-area-wrapper {
        margin-inline-start: 274px;
    }
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1 .cta-area-wrapper {
        margin-inline-start: 0px;
    }
}
@media only screen and (max-width: 767px) {
    .cta-area.style-1 .cta-area-wrapper {
        flex-wrap: wrap;
    }
}
.cta-area.style-1 .cta-left {
    background-color: #8dcf9b;
    padding: 25px 80px;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1 .cta-left {
        padding: 25px 40px;
    }
}
@media only screen and (max-width: 767px) {
    .cta-area.style-1 .cta-left {
        text-align: center;
        width: 100%;
    }
}
.cta-area.style-1 .cta-left::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    width: 19px;
    height: 14px;
    background-color: inherit;
    top: calc(100% - 1px);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media only screen and (max-width: 767px) {
    .cta-area.style-1 .cta-left::before {
        display: none;
    }
}
.dir-rtl .cta-area.style-1 .cta-left::before {
    transform: rotateY(173deg);
}
.cta-area.style-1 .cta-right {
    background-color: #282828;
    padding: 25px 80px;
    flex-grow: 1;
    padding-inline-start: 80px;
    padding-inline-end: 0;
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1 .cta-right {
        padding-inline-start: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .cta-area.style-1 .cta-right {
        padding: 25px 40px;
    }
}
.cta-area.style-1 .cta-right .btn-wrapper {
    max-width: 100%;
}
.cta-area.style-1 .cta-right .wc-btn-underline {
    color: var(--white);
    display: flex;
    justify-content: space-between;
    text-transform: none;
}
.cta-area.style-1 .cta-right .wc-btn-underline:hover:before {
    width: 0;
}
.cta-area.style-1 .cta-right .wc-btn-underline::before {
    width: 172px;
}
.cta-area.style-1 .cta-right .wc-btn-underline img {
    filter: brightness(100);
}
.cta-area.style-1 .cta-info li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
    .cta-area.style-1 .cta-info li {
        justify-content: center;
    }
}
.cta-area.style-1 .cta-info li .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: var(--primary);
}
.cta-area.style-1 .cta-info li span {
    font-size: 16px;
    font-weight: 400;
    color: var(--primary);
}

.footer-area.style-1 {
    background-color: #121212;
}
.footer-area.style-1 .footer-inner {
    display: flex;
}
@media only screen and (max-width: 767px) {
    .footer-area.style-1 .footer-inner {
        flex-wrap: wrap;
    }
}
.footer-area.style-1 .logo-wrapper {
    width: 334px;
    min-width: 334px;
    padding-top: 95px;
}
@media only screen and (max-width: 1919px) {
    .footer-area.style-1 .logo-wrapper {
        width: 274px;
        min-width: 274px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area.style-1 .logo-wrapper {
        padding-top: 30px;
        width: 184px;
        min-width: 184px;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area.style-1 .logo-wrapper {
        text-align: center;
        width: 100%;
        margin: 20px 0;
    }
}
.footer-area.style-1 .footer-menu-item.subscribe-form-item {
    width: 330px;
}
@media only screen and (max-width: 1919px) {
    .footer-area.style-1 .footer-menu-item.subscribe-form-item {
        width: 290px;
    }
}
.footer-area.style-1 .footer-menu-item.subscribe-form-item .title {
    margin-bottom: 27px;
}
.footer-area.style-1 .footer-menu-item .title {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 20px;
}
.footer-area.style-1 .footer-menu-item li a:hover {
    color: var(--white);
}
.footer-area.style-1 .social-icons li a:hover {
    color: var(--white);
}
.footer-area.style-1 .links-wrapper {
    flex-grow: 1;
    border-inline-start: 1px solid #282828;
    padding-inline-start: 80px;
    padding-top: 95px;
    padding-inline-start: 60px;
}
@media only screen and (max-width: 1199px) {
    .footer-area.style-1 .links-wrapper {
        padding-inline-start: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area.style-1 .links-wrapper {
        padding-inline-start: 30px;
        padding-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area.style-1 .links-wrapper {
        border-left: 0;
        padding-left: 0;
    }
}
.footer-area.style-1 .footer-menu {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 90px;
}
@media only screen and (max-width: 1199px) {
    .footer-area.style-1 .footer-menu {
        flex-wrap: wrap;
        padding-bottom: 40px;
    }
}
.footer-area.style-1 .footer-copyright {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 26px 0;
    border-top: 1px solid #282828;
    text-align: center;
}
@media (max-width: 575px) {
    .footer-area.style-1 .footer-copyright {
        flex-direction: column;
        align-items: center;
    }
}
.footer-area.style-1 .text-copy {
    color: #999;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}
.footer-area.style-1 .text-copy a {
    font-weight: 600;
    color: var(--white);
}

/*  */
.footer-area {
    padding-top: 100px;
    background-color: #103142;
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin: 0 20px;
    border-radius: 20px 20px 0 0;
}
.footer-area .section-heading .wc-btn-primary {
    background-color: transparent;
}
.footer-area .section-title-wrapper {
    max-width: 370px;
}
@media only screen and (max-width: 1199px) {
    .footer-area {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area {
        padding-top: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area {
        margin: 0 0;
        border-radius: 0;
    }
}
.footer-area .footer-inner {
    display: flex;
    gap: 170px;
}
.footer-area .footer-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 60px 80px;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .footer-area .footer-menu {
        gap: 50px 60px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area .footer-menu {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
.footer-area .footer-menu > *:first-child {
    width: 525px;
    min-width: 525px;
    grid-row: span 2;
    position: relative;
    margin-inline-end: 20px;
    padding-inline-end: 20px;
}
@media only screen and (max-width: 1919px) {
    .footer-area .footer-menu > *:first-child {
        width: 400px;
        min-width: 400px;
    }
}
@media only screen and (max-width: 1199px) {
    .footer-area .footer-menu > *:first-child {
        width: 250px;
        min-width: 250px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu > *:first-child {
        width: unset;
        align-self: center;
        grid-row: unset;
    }
}
.footer-area .footer-menu > *:first-child::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: -100px;
    height: 200%;
    width: 1px;
    background-color: #234151;
    z-index: -2;
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu > *:first-child::after {
        display: none;
    }
}
.footer-area .footer-menu > *:first-child::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: -100px;
    height: 200%;
    width: 200%;
    background-color: #193a4a;
    z-index: -2;
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu > *:first-child::before {
        display: none;
    }
}
.footer-area .footer-menu > *:first-child .scroll-up-btn {
    position: absolute;
    bottom: 0;
    right: -20px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    writing-mode: vertical-lr;
    border-radius: 22.5px;
    border: 1px solid rgb(35, 65, 81);
    background: #103142;
    padding: 26px 13px;
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu > *:first-child .scroll-up-btn {
        display: none;
    }
}
.dir-rtl .footer-area .footer-menu > *:first-child .scroll-up-btn {
    left: -20px;
    right: auto;
}
.footer-area .footer-menu > *:first-child .scroll-up-btn span {
    display: inline-block;
    transform: rotate(-180deg);
}
.footer-area .footer-menu > *:first-child .scroll-up-btn i {
    margin-bottom: 10px;
}
@media only screen and (max-width: 991px) {
    .footer-area .footer-menu .logo-wrapper {
        grid-column: span 2;
        text-align: center;
    }
}
@media (max-width: 575px) {
    .footer-area .footer-menu .logo-wrapper {
        grid-column: auto;
        text-align: start;
    }
}
.footer-area .left-content {
    width: 100%;
    flex-grow: 1;
    max-width: 130px;
}

.widget-item .widget-title {
    font-size: 24px;
    color: var(--white);
}
.widget-item ul li a:hover {
    color: var(--white);
}
.widget-item .section-title-wrapper .section-title {
    font-size: 45px;
    color: var(--white);
}

.banner-5.banner-area h2 {
    font-size: 60px;
}
@media only screen and (max-width: 1199px) {
    .widget-item .section-title-wrapper .section-title {
        font-size: 35px;
    }
}
.widget-item .section-title-wrapper .text {
    font-size: 18px;
    line-height: 24px;
    max-width: 370px;
    color: #9faeb6;
}
@media only screen and (max-width: 1199px) {
    .widget-item .section-title-wrapper .text {
        font-size: 16px;
    }
}
.widget-item .section-title-wrapper .cf_text {
    margin-top: 28px;
}
.widget-item .btn-wrapper {
    margin-top: 34px;
}
.widget-item .wc-btn-primary {
    font-size: 18px;
    gap: 29px;
    padding: 26px 40px;
    background-color: transparent;
    color: var(--white);
    border-radius: 70px;
    border: 1px solid #46606d;
}
@media only screen and (max-width: 1199px) {
    .widget-item .wc-btn-primary {
        padding: 16px 30px;
    }
}
.widget-item .wc-btn-primary:hover {
    background-color: #46606d;
}
.widget-item .header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
@media only screen and (max-width: 1199px) {
    .widget-item .header {
        flex-wrap: wrap;
        gap: 10px;
    }
}
.widget-item .header .widget-title {
    max-width: 129px;
}
@media only screen and (max-width: 1199px) {
    .widget-item .header .widget-title {
        max-width: 100%;
    }
}
.widget-item .header .text {
    max-width: 160px;
    font-size: 14px;
    color: #9faeb6;
    line-height: 1.2;
}
.widget-item .subscribe-form {
    background-color: rgba(18, 18, 18, 0.05);
    margin-top: 20px;
}
.widget-item .subscribe-form input {
    color: var(--white);
    background-color: #1e3f51;
    border-radius: 10px;
}
.widget-item .subscribe-form input::-moz-placeholder {
    color: #9faeb6;
    font-size: 14px;
    font-weight: 400;
}
.widget-item .subscribe-form input::placeholder {
    color: #9faeb6;
    font-size: 14px;
    font-weight: 400;
}
.widget-item.subscribe-form-item {
    width: 330px;
}
@media only screen and (max-width: 1199px) {
    .widget-item.subscribe-form-item {
        width: 230px;
    }
}
@media only screen and (max-width: 991px) {
    .widget-item.subscribe-form-item {
        width: auto;
    }
}
.widget-item ul {
    padding-top: 25px;
}
@media (max-width: 575px) {
    .widget-item ul {
        padding-top: 15px;
    }
}
.widget-item ul li {
    color: #9faeb6;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.62;
}
.widget-item ul li.mail {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
}
.widget-item .social-icons {
    margin-top: 16px;
    padding-top: 0;
}
.widget-item .copyright-title {
    color: var(--white);
    font-size: 16px;
}
.widget-item .copyright-title a {
    font-weight: 600;
}

.footer-copy-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline-start: 625px;
    border-top: 1px solid #234151;
    padding: 22px 0;
    margin-top: 94px;
    gap: 10px;
}
@media only screen and (max-width: 1919px) {
    .footer-copy-wrapper {
        margin-inline-start: 500px;
    }
}
@media only screen and (max-width: 1199px) {
    .footer-copy-wrapper {
        margin-top: 74px;
        margin-inline-start: 330px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-copy-wrapper {
        margin-inline-start: 0;
        margin-top: 54px;
    }
}
@media (max-width: 575px) {
    .footer-copy-wrapper {
        flex-direction: column;
        display: block;
    }
}
.footer-copy-wrapper .social-icons {
    margin-top: 0;
}
@media only screen and (max-width: 767px) {
    .footer-copy-wrapper .social-icons {
        padding-bottom: 15px;
    }
}
.footer-copy-wrapper .copy-text {
    color: #9faeb6;
    font-size: 16px;
    font-weight: 600;
}
.footer-copy-wrapper .copy-text a {
    color: var(--white);
}

.feature-area .content .text {
    padding-top: 20px;
}

.header-area.sticky {
    position: fixed !important;
    background-color: var(--white);
}

.header-area.style-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: 0.3s;
}
.header-area.style-2 .header-area__inner {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    border-bottom: 1px solid rgba(18, 18, 18, 0.06);
    height: 80px;
}
.header-area.style-2 .header-area__inner > *:first-child {
    margin-inline-end: auto;
}
.header-area.style-2 .main-menu li a {
    font-size: 16px;
    font-weight: 600;
}
.header-area.style-2 .search-icon {
    color: var(--primary);
    cursor: pointer;
}
.header-area.style-2 .open-offcanvas span {
    color: var(--white);
    font-size: 13px;
}
@media (max-width: 575px) {
    .header-area.style-2 .header__meta {
        display: none;
    }
}
.header-area.style-2 .wc-btn-primary i {
    font-size: 8px;
}
/*  */
.service-area {
    background-color: var(--primary);
}
.service-area .section-heading {
    max-width: 336px;
}
.service-area .section-title-wrapper {
    padding-bottom: 26px;
}
.service-area .service-thumb {
    margin-bottom: 53px;
    position: relative;
    max-width: 636px;
    overflow: hidden;
}
.service-area .service-thumb::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 69, 71, 0.2);
}
.service-area .section-title {
    color: var(--white);
}
.service-area .wc-btn-underline {
    color: var(--white);
}
.service-area .feature-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 767px) {
    .service-area .feature-wrapper {
        grid-template-columns: 1fr;
    }
}
.service-area .wcf_iconbox {
    padding-inline-start: 60px;
    padding-inline-end: 45px;
    border-inline-start: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}
@media only screen and (max-width: 991px) {
    .service-area .wcf_iconbox {
        padding-inline-start: 20px;
        padding-inline-end: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area .wcf_iconbox {
        border: 0;
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
}
.service-area .wcf_iconbox:first-child {
    border-inline-start: 1px solid transparent;
    padding-top: 0;
}
.service-area .wcf_iconbox:last-child {
    border-bottom: 1px solid transparent;
    padding-bottom: 0;
}
.service-area .wcf_iconbox:nth-child(2) {
    padding-top: 0;
}
.service-area .wcf_iconbox:nth-child(3) {
    border-inline-start: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .service-area .wcf_iconbox:nth-child(3) {
        padding-top: 0;
    }
}
.service-area .wcf_iconbox:hover .wc-btn-primary {
    background-color: #fe5b2c;
}
.service-area .wcf_iconbox .thumb {
    padding-bottom: 35px;
}
.service-area .wcf_iconbox .cf_title {
    padding-bottom: 17px;
}
.service-area .wcf_iconbox .title {
    color: var(--white);
    line-height: 1.16;
    font-size: 30px;
}
.service-area .wcf_iconbox .title span {
    display: block;
    font-weight: 600;
}
.service-area .wcf_iconbox .title a:hover {
    color: var(--white);
}
.service-area .wcf_iconbox .text {
    color: rgba(255, 255, 255, 0.66);
}
.service-area .wcf_iconbox .wc-btn-primary {
    background-color: transparent;
    border: 1px solid #337173;
    border-radius: 50px;
    padding: 15px 28px;
    gap: 10px;
}
.service-area .btn-wrapper {
    padding-top: 33px;
}

.service-wrapper {
    display: grid;
    grid-template-columns: 655px auto;
    gap: 120px;
}
@media only screen and (max-width: 1919px) {
    .service-wrapper {
        gap: 40px;
        grid-template-columns: 355px auto;
    }
}
@media only screen and (max-width: 1199px) {
    .service-wrapper {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}
/* .service-area .wcf_iconbox .wc-btn-primary:hover{
  background-color: #8DCF9B;
} */

/*  */
.pos-rel {
    position: relative;
}
.section-header .cate {
    margin-bottom: 15px;
    color: #ff8a00;
}
.section-header {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 620px;
    position: relative;
    z-index: 1;
}
.section-header p:last-child {
    margin-bottom: -7px !important;
}
.am-item {
    padding: 80px 20px;
    text-align: center;
    margin-bottom: 30px;
    border-radius: 20px;
    box-shadow: 1.95px 15.881px 30px 0px rgba(47, 105, 252, 0.1);
    background-color: #28b2b9;
    transition: all ease 0.3s;
}
.am-item .am-thumb {
    height: 110px;
    margin-bottom: 45px;
}
.am-item .am-thumb img {
    height: 100%;
}
.am-item .am-content .title {
    font-weight: 700;
}
@media (min-width: 992px) and (max-width: 1399px) {
    .am-item {
        padding: 50px 20px;
    }
    .am-item .am-thumb {
        height: 80px;
    }
}
@media (max-width: 575px) {
    .am-item {
        max-width: 280px;
        margin: 0 auto 30px;
    }
}
.am-item:hover,
.am-item.active {
    box-shadow: 1.95px 15.881px 30px 0px #239ea5;
}

.amazing-feature-section {
    background-color: #f0f5fc;
}

.ft-shape {
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 1399px) {
    .ft-shape {
        display: none;
    }
}
.ft-shape img {
    max-width: 100%;
}

/*  */

.project-details-area .section-heading {
    margin-bottom: 48px;
}
@media only screen and (max-width: 991px) {
    .project-details-area .section-heading {
        margin-bottom: 28px;
    }
}
.project-details-area .section-heading .subtitle-wrapper {
    margin-bottom: 31px;
}
@media only screen and (max-width: 1399px) {
    .project-details-area .section-heading .subtitle-wrapper {
        margin-bottom: 21px;
    }
}
.project-details-area .section-heading .section-title {
    max-width: 745px;
}
.project-details-area .thumb-main {
    position: relative;
}
.project-details-area .thumb-main:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    background-color: rgba(0, 69, 71, 0.2);
}
.project-details-area .thumb-main img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.project-details-area .meta-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.project-details-area .meta-box .icon {
    width: 1px;
    height: 10px;
    background-color: #999999;
    margin-top: 2px;
}
.project-details-area .meta-box .title {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 12px;
}
@media only screen and (max-width: 991px) {
    .project-details-area .meta-box .title {
        margin-bottom: 7px;
    }
}
.project-details-area .meta-box .text {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1;
}
.project-details-area .meta {
    display: flex;
    flex-direction: column;
    gap: 40px 40px;
    width: 200px;
    min-width: 200px;
}
@media only screen and (max-width: 1199px) {
    .project-details-area .meta {
        width: 140px;
        min-width: 140px;
    }
}
@media only screen and (max-width: 991px) {
    .project-details-area .meta {
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
        gap: 30px 40px;
    }
}
.project-details-area .section-main-content {
    display: flex;
    gap: 140px;
    margin-top: 98px;
    align-items: flex-start;
}
@media only screen and (max-width: 1919px) {
    .project-details-area .section-main-content {
        gap: 80px;
        margin-top: 68px;
    }
}
@media only screen and (max-width: 991px) {
    .project-details-area .section-main-content {
        flex-direction: column;
        gap: 40px;
        margin-top: 33px;
    }
}
@media only screen and (max-width: 767px) {
    .project-details-area .section-main-content {
        margin-top: 28px;
        gap: 30px;
    }
}
.project-details-area .content-box .section-subtitle {
    margin-bottom: 21px;
    display: inline-block;
}
@media only screen and (max-width: 1919px) {
    .project-details-area .content-box .section-subtitle {
        margin-bottom: 16px;
    }
}
.project-details-area .content-box .section-title {
    margin-bottom: 32px;
}
.project-details-area .content-box .text-wrapper .text:not(:last-child) {
    margin-bottom: 24px;
}
.project-details-area .content-box .image-content {
    margin-top: 64px;
}
@media only screen and (max-width: 1919px) {
    .project-details-area .content-box .image-content {
        margin-top: 44px;
    }
}
@media only screen and (max-width: 767px) {
    .project-details-area .content-box .image-content {
        margin-top: 34px;
    }
}
.project-details-area .content-box .image-content .thumb img {
    width: 100%;
}
.project-details-area .content-box .features-wrapper {
    margin-top: 70px;
    margin-bottom: 3px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
    gap: 60px 30px;
    justify-content: space-between;
}
@media only screen and (max-width: 1919px) {
    .project-details-area .content-box .features-wrapper {
        margin-top: 50px;
        gap: 50px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .project-details-area .content-box .features-wrapper {
        margin-top: 40px;
    }
}
.project-details-area .content-box .feature-content:not(:first-child) {
    margin-top: 60px;
}
@media only screen and (max-width: 1919px) {
    .project-details-area .content-box .feature-content:not(:first-child) {
        margin-top: 50px;
    }
}
.project-details-area .content-box .feature-list {
    margin-top: 31px;
    margin-bottom: 31px;
    margin-inline-start: 30px;
}
.project-details-area .content-box .list-plus li {
    font-size: 18px;
    line-height: 1.66;
    color: var(--primary);
    padding-inline-start: 25px;
}
.project-details-area .content-box .list-plus li:not(:last-child) {
    margin-bottom: 0;
}
.project-details-area .content-box .list-plus li::before {
    top: 3px;
}

/* 
-------------------------------------
Feature area style  
-------------------------------------
*/
.about-feature {
    position: relative;
}
.about-feature .feature-wrapper {
    width: 1275px;
    max-width: 1275px;
    margin-left: auto;
    background-color: rgb(240, 247, 243);
    display: grid;
    grid-template-columns: 534px 1fr;
    padding-bottom: 0;
    gap: 70px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .about-feature .feature-wrapper {
        position: unset;
        padding: 0;
    }
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-wrapper {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 30px;
    }
}
.about-feature .feature-thumb {
    position: relative;
}
.about-feature .feature-thumb::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 81, 83, 0.4);
}
.about-feature .section-title {
    font-weight: 600;
}
.about-feature .feature-content {
    max-width: 370px;
    padding-top: 70px;
}
@media only screen and (max-width: 1199px) {
    .about-feature .feature-content {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-content {
        max-width: 100%;
        padding-left: 40px;
        padding-top: 0;
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .about-feature .feature-content {
        padding-left: 20px;
    }
}
.about-feature .title-wrapper {
    padding-bottom: 25px;
}
.about-feature .cf_text {
    padding-bottom: 53px;
}
@media only screen and (max-width: 991px) {
    .about-feature .cf_text {
        padding-bottom: 22px;
    }
}
.about-feature .text span {
    text-decoration: underline;
    font-weight: 600;
}
.about-feature .feature-list-wrapper {
    position: relative;
}
.about-feature .feature-list-wrapper::before {
    position: absolute;
    content: "";
    right: 0;
    top: -100px;
    height: 120%;
    width: 1px;
    background-color: #d8e6e3;
}
.about-feature .feature-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-list {
        gap: 25px;
    }
}
.about-feature .feature-item {
    display: flex;
    gap: 30px;
    padding-bottom: 40px;
    padding-inline-start: 60px;
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-item {
        padding-bottom: 20px;
        padding-inline-start: 20px;
    }
}
.about-feature .feature-item:first-child {
    padding-top: 70px;
}
@media only screen and (max-width: 1199px) {
    .about-feature .feature-item:first-child {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-item:first-child {
        padding-top: 20px;
    }
}
.about-feature .feature-item:last-child {
    padding-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .about-feature .feature-item:last-child {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .about-feature .feature-item:last-child {
        padding-bottom: 20px;
    }
}
.about-feature .feature-item:not(:last-child) {
    border-bottom: 1px solid #d8e6e3;
}
.about-feature .feature-item .title {
    font-size: 24px;
    line-height: 1.16;
    max-width: 240px;
    font-weight: 500;
}
@media only screen and (max-width: 767px) {
    .about-feature .feature-item .title {
        font-size: 20px;
    }
}
.about-feature .sub-title {
    padding-top: 5px;
    color: var(--primary);
    font-weight: 600;
}
.about-feature .x-shape {
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 991px) {
    .about-feature .x-shape {
        max-width: 30%;
    }
}
.about-feature .wc-btn-primary {
    padding: 20px 28.5px;
}
/*  */
.testimonial-area.style-3 .testimonial-thumb img {
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .testimonial-area.style-3 .container {
        padding: 0;
    }
}
.testimonial-area.style-3 .testimonial-box-wrapper {
    position: relative;
}
.testimonial-area.style-3 .testimonial-item-wrapper {
    position: absolute;
    bottom: 0;
    max-width: 610px;
    background-color: var(--primary);
    padding: 80px;
}
@media only screen and (max-width: 991px) {
    .testimonial-area.style-3 .testimonial-item-wrapper {
        padding: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial-area.style-3 .testimonial-item-wrapper {
        position: static;
    }
}
.testimonial-area.style-3 .testimonial-item.style-1 .quote-icon-wrap {
    margin-bottom: 30px;
}
.testimonial-area.style-3 .testimonial-item.style-1 .text {
    margin-bottom: 28px;
    color: #999999;
}
.testimonial-area.style-3 .testimonial-item.style-1 .name {
    color: var(--white);
    font-family: var(--font_beatricetrial);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.57;
}
.testimonial-area.style-3 .testimonial-item.style-1 .post {
    color: #999999;
    font-size: 14px;
    line-height: 1.57;
}
.testimonial-area.style-3 .swiper-button-prev,
.testimonial-area.style-3 .swiper-button-next.style-3 {
    position: absolute;
    bottom: 90px;
    right: 128px;
    left: unset;
    top: unset;
    width: unset;
    height: unset;
}
.testimonial-area.style-3 .swiper-button-prev::after,
.testimonial-area.style-3 .swiper-button-next.style-3::after {
    display: none;
}
@media only screen and (max-width: 991px) {
    .testimonial-area.style-3 .swiper-button-prev,
    .testimonial-area.style-3 .swiper-button-next.style-3 {
        bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial-area.style-3 .swiper-button-prev,
    .testimonial-area.style-3 .swiper-button-next.style-3 {
        display: none;
    }
}
.testimonial-area.style-3 .swiper-button-prev i,
.testimonial-area.style-3 .swiper-button-next.style-3 i {
    color: var(--white);
    font-size: 20px;
}
.testimonial-area.style-3 .swiper-button-next.style-3 {
    right: 80px;
}
/*  */
section#screenshot {
    padding-top: 300px;
    padding-bottom: 150px;
}

/*Client Section Starts Here*/
.client-item {
    text-align: center;
    margin: 15px;
}
.client-item .client-content {
    padding: 25px 25px 30px;
    background: #ffffff;
    border-radius: 20px;
}
@media (max-width: 767px) {
    .client-item .client-content {
        padding: 25px 15px 30px;
    }
}
.client-item .client-content p {
    max-width: 210px;
    margin: 0 auto 4px;
}
@media (max-width: 767px) {
    .client-item .client-content p {
        font-size: 16px;
    }
}
.client-item .client-content .rating {
    font-size: 16px;
    color: #ffcc00;
}
.client-item .client-thumb {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    overflow: hidden;
    margin: 20px auto 0;
}
.client-item .client-thumb a {
    display: block;
}
.client-item .client-thumb img {
    width: 100%;
}

@media (min-width: 992px) {
    .client-slider {
        width: 1110px;
    }
}

.button-client {
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid #cac7f6;
    color: #ffffff;
    padding: 15px 35px;
}
.button-client:hover {
    color: #ffffff;
    background: linear-gradient(
        -65deg,
        rgb(193, 101, 221) 0%,
        rgb(17, 83, 252) 100%
    );
}
.stroke-title {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
    color: transparent;
    line-height: 1;
    text-align: center;
}

.stroke-title.cl-white {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
    color: transparent;
}
.stroke-header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -80px;
    font-size: 200px;
    line-height: 1;
    font-weight: 900;
}

.stroke-header.stroke-right-top {
    top: 60px;
}

@media (min-width: 992px) {
    .stroke-header.stroke-right-top {
        left: 68%;
        top: 120px;
    }
}

@media screen and (max-width: 1250px) {
    .stroke-header {
        font-size: 120px;
        top: -60px;
    }
}

@media screen and (max-width: 991px) {
    .stroke-header {
        font-size: 80px;
        top: -40px;
    }
}

@media (max-width: 767px) {
    .stroke-header {
        font-size: 70px;
        top: -35px;
    }
}

@media (max-width: 575px) {
    .stroke-header {
        font-size: 45px;
        top: -30px;
    }
}
.bg-2 {
    background-color: rgb(238, 82, 83);
}

/* Stroke Counter Section */
.stroke-counter-wrapper {
    justify-content: center;
    margin: -60px -15px -30px;
}

.stroke-counter-wrapper .stroke-counter-item {
    width: 33.333333%;
    padding: 0 15px 30px;
}

@media (max-width: 991px) {
    .stroke-counter-wrapper {
        margin-top: 0;
        padding-top: 60px;
    }
}

@media (max-width: 767px) {
    .stroke-counter-wrapper .stroke-counter-item {
        width: 50%;
    }
}

@media (max-width: 575px) {
    .stroke-counter-wrapper .stroke-counter-item {
        width: 100%;
    }
}

.stroke-counter-item {
    text-align: center;
}

.stroke-counter-item .title {
    font-size: 120px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px #ffffff;
    line-height: 1;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.stroke-counter-item .stroke-counter-info {
    font-size: 18px;
    text-transform: uppercase;
    color: #ffffff;
}

@media (max-width: 1199px) {
    .stroke-counter-item .title {
        font-size: 80px;
    }
}

@media (max-width: 991px) {
    .stroke-counter-item .title {
        font-size: 60px;
    }
    .stroke-counter-item .stroke-counter-info {
        font-size: 16px;
    }
}

/* App Screenshot Section */
.apps-screenshot-section {
    background: #5718d3;
}

.apps-screenshot-section-2 {
    background: #9241f7;
}

/* App Screenshot Navigation Buttons */
.app-nav {
    margin: -5px;
    margin-top: 10px;
}

.app-nav .app-prev,
.app-nav .app-next {
    width: 60px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 20px;
    display: block;
    margin: 5px;
}

.app-nav .app-prev:hover,
.app-nav .app-next:hover {
    background: #ffffff;
}

.app-nav .app-prev:hover i,
.app-nav .app-next:hover i {
    color: #111;
}

@media (max-width: 575px) {
    .app-nav .app-prev,
    .app-nav .app-next {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }
}

/* Screenshot Slider Wrapper */
.screenshot-slider-wrapper {
    max-width: 350px;
    position: relative;
    border-radius: 50px;
    box-shadow: -18.567px -25.963px 50px 0px rgba(117, 64, 222, 0.004),
        25.963px 18.567px 70px 0px rgba(31, 9, 60, 0.45),
        inset 7.66px 6.428px 10px 0px rgba(95, 39, 205, 0.004),
        inset -5.142px -6.128px 14px 0px rgba(0, 37, 102, 0.3);
}

.screenshot-slider-wrapper::after {
    position: absolute;
    content: "";
    left: calc(100% + 30px);
    top: 0;
    bottom: 0;
    width: 1100px;
    background: url(./img/extra-2/frame-shape.webp) no-repeat center center;
    background-size: contain;
}

@media (max-width: 767px) {
    .screenshot-slider-wrapper {
        max-width: 300px;
    }
}

.screenshot-slider-wrapper.after-none::after {
    display: none;
}

/* Screenshot Thumbnail */
.app-screenshot-thumb {
    width: 90px;
    height: 90px;
    padding: 9px;
    border-radius: 50%;
    border: 1px solid #cac7f6;
    position: relative;
    margin-bottom: 30px;
}

.app-screenshot-thumb::after,
.app-screenshot-thumb::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-size: contain;
    border-radius: 50%;
    background: linear-gradient(0deg, #e2906e 0, #e83a99 100%);
    box-shadow: 1.21px 4.851px 6.72px 0.28px rgba(232, 58, 153, 0.0039);
    left: 5px;
    bottom: 5px;
}

.app-screenshot-thumb::after {
    width: 13px;
    height: 13px;
    left: auto;
    bottom: auto;
    right: 5px;
    top: 5px;
}

.app-screenshot-thumb .icon {
    background: linear-gradient(
        0deg,
        rgb(226, 144, 110) 0%,
        rgb(232, 58, 153) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(232, 58, 153, 0.5);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 40px;
    text-align: center;
    line-height: 65px;
}

/* Owl Dots Navigation */
.dots-2 {
    margin: -15px;
    margin-top: 10px;
}

.dots-2 .owl-dot {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    position: relative;
    margin: 10px;
    cursor: pointer;
}

.dots-2 .owl-dot.active {
    border: 1px dashed #ffffff;
}

.dots-2 .owl-dot span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    display: block;
}

@media (max-width: 575px) {
    .dots-2 {
        margin: -5px;
        margin-top: 10px;
    }

    .dots-2 .owl-dot {
        margin: 5px;
    }
}

/* Banner Section */
.banner-18 {
    padding: 200px 0 110px;
}

@media (max-width: 1399px) {
    .banner-18 {
        padding: 120px 0 90px;
    }
}

@media (max-width: 991px) {
    .banner-18 {
        padding: 160px 0 70px;
    }
}

@media (max-width: 767px) {
    .banner-18 .banner-thumb img {
        max-width: 100%;
    }
}

/* Banner Content */
.banner-content-18 .title {
    font-size: 70px;
    line-height: 80px;
    margin-bottom: 15px;
}

.banner-content-18 p {
    font-family: "Josefin Sans", sans-serif;
    font-size: 24px;
    line-height: 34px;
    margin: 0;
    margin-bottom: 38px;
}

@media (max-width: 1199px) {
    .banner-content-18 .title {
        font-size: 60px;
        line-height: 70px;
    }
}

@media (max-width: 767px) {
    .banner-content-18 .title {
        margin-bottom: 10px;
    }

    .banner-content-18 p {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 35px;
    }
}

@media (max-width: 575px) {
    .banner-content-18 .title {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 10px;
    }

    .banner-content-18 p {
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .client-header {
        margin-bottom: 50px;
    }
}
@media (max-width: 575px) {
    .client-header {
        margin-bottom: 30px;
    }
}
.client-say-16 {
    position: relative;
    justify-content: space-between;
    margin: 50px -15px -30px;
}
@media (min-width: 992px) {
    .client-say-16 {
        margin: 0;
        height: 785px;
    }
    .client-say-16::before {
        position: absolute;
        content: "";
        left: -42px;
        right: -42px;
        bottom: 0;
        top: 0;
        background: url(./img/map.webp) no-repeat center center;
    }
    .client-say-16 .client-content {
        transition: all ease 0.3s;
        transform: translateY(30px);
        visibility: hidden;
        opacity: 0;
    }
    .client-say-16 .client-content.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
    .client-say-16 .client-item-16 {
        position: absolute;
        width: 445px;
    }
    .client-say-16 .client-item-16.active {
        z-index: 9;
    }
    .client-say-16 .client-item-16:nth-child(6) {
        left: 200px;
        bottom: calc(100% - 135px);
    }
    .client-say-16 .client-item-16:nth-child(5) {
        left: 330px;
        bottom: 330px;
    }
    .client-say-16 .client-item-16:nth-child(4) {
        top: 70px;
        left: 0;
    }
    .client-say-16 .client-item-16:nth-child(3) {
        bottom: 140px;
        left: 80px;
    }
    .client-say-16 .client-item-16:nth-child(2) {
        right: 0;
        top: 25px;
        z-index: 2;
    }
    .client-say-16 .client-item-16:nth-child(1) {
        right: -120px;
        bottom: 80px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1600px) {
    .client-say-16 .client-item-16 .client-content {
        box-shadow: 0px 0px 30px rgba(60, 49, 172, 0.2);
    }
}
@media screen and (min-width: 992px) and (max-width: 1023px) {
    .client-say-16 .client-item-16 .client-content {
        box-shadow: none;
    }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .client-say-16 .client-item-16:nth-child(6) {
        left: 200px;
        bottom: calc(100% - 135px);
    }
    .client-say-16 .client-item-16:nth-child(5) {
        left: 330px;
        bottom: 330px;
    }
    .client-say-16 .client-item-16:nth-child(4) {
        top: 70px;
        left: 0;
    }
    .client-say-16 .client-item-16:nth-child(3) {
        bottom: 140px;
        left: 80px;
    }
    .client-say-16 .client-item-16:nth-child(2) {
        right: 0;
        top: 25px;
    }
    .client-say-16 .client-item-16:nth-child(1) {
        right: 0;
        bottom: 80px;
    }
    .client-say-16 .client-item-16:nth-child(1) .client-thumb {
        transform: translateX(120px);
    }
}

.client-item-16 {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 15px 30px;
    width: 100%;
}
.client-item-16 .client-thumb {
    margin: 20px auto 0;
    width: 87px;
    height: 87px;
    border-radius: 50%;
    overflow: hidden;
}
.client-item-16 .client-thumb a {
    display: block;
}
.client-item-16 .client-thumb a img {
    width: 100%;
}
.client-item-16 .client-content {
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0px 16px 43px 0px rgba(60, 49, 172, 0.2);
    position: relative;
}
.client-item-16 .client-content .body-area {
    padding: 30px 30px 34px;
    border-bottom: 1px solid rgb(218, 185, 250);
}
.client-item-16 .client-content .body-area .head {
    color: #4050e9;
}
.client-item-16 .client-content .body-area p {
    margin-top: 10px;
    color: #fff;
}
.client-item-16 .client-content .heading-area {
    padding: 15px 15px 10px;
}
.client-item-16 .client-content .heading-area .title {
    margin: 0;
}
.client-item-16 .client-content .heading-area .info {
    font-size: 14px;
}
.client-item-16 .client-content * {
    position: relative;
    z-index: 1;
}
.client-item-16 .client-content::before {
    width: 80px;
    height: 80px;
    background: #ffffff;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
}
.client-item-16 .client-content::before {
    position: absolute;
    content: "";
}
@media (min-width: 768px) {
    .client-item-16 {
        width: calc(50% - 30px);
    }
}
.client-say-16.change-maps::before {
    background: url(../imgs/about-us-exe.webp) no-repeat center center;
}
.stroke-counter-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* bannner-10 area style start */
.banner-10.banner-area {
    background-color: #fff6e4;
    padding-top: 80px;
    padding-bottom: 0px;
}
.banner-10.banner-area .wc-btn-primary {
    border-radius: 70px;
    background-color: var(--action);
    color: var(--primary);
    border-color: transparent;
}
.banner-10.banner-area .wc-btn-primary:hover {
    background-color: var(--primary);
    border-color: transparent;
    color: var(--white);
}
.banner-10.banner-area .wc-btn-play {
    height: 70px;
    width: 70px;
    background-color: var(--action);
    border-color: transparent;
}
.banner-10.banner-area .wc-btn-play:hover {
    background-color: var(--primary);
    border-color: transparent;
    color: var(--white);
}
.banner-10.banner-area .wc-btn-play:hover i {
    color: var(--white);
}
.banner-10.banner-area .wc-btn-play i {
    transform: rotate(45deg);
    color: var(--primary);
}
.banner-10 .banner-content .title {
    font-size: 90px;
    font-weight: 900;
    max-width: 535px;
    margin-top: 130px;
}
@media only screen and (max-width: 1919px) {
    .banner-10 .banner-content .title {
        font-size: 70px;
        max-width: 425px;
        margin-top: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-10 .banner-content .title {
        font-size: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-10 .banner-content .title {
        margin-top: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-10 .banner-content .title {
        margin-top: 60px;
        max-width: 100%;
    }
}
@media (max-width: 575px) {
    .banner-10 .banner-content .title {
        font-size: 40px;
    }
}
.banner-10 .content-box {
    display: flex;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    margin-top: 77px;
    margin-inline-start: -200px;
}
@media only screen and (max-width: 1919px) {
    .banner-10 .content-box {
        margin-top: 57px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-10 .content-box {
        margin-inline-start: -100px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-10 .content-box {
        margin-inline-start: 0;
        margin-top: 27px;
        border-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner-10 .content-box {
        flex-direction: column;
    }
}
.banner-10 .content-box .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.banner-10 .content-box .content {
    padding: 66px 80px;
    padding-inline-end: 110px;
}
.case-study-studies {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 1399px) {
    .banner-10 .content-box .content {
        padding: 36px 50px;
        padding-inline-end: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-10 .content-box .content {
        padding-inline-end: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner-10 .content-box .content {
        padding: 20px 0;
    }
}
.banner-10 .content-box .text {
    font-size: 20px;
    line-height: 1.4;
    max-width: 360px;
}
@media only screen and (max-width: 1399px) {
    .banner-10 .content-box .text {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-10 .content-box .text {
        max-width: 100%;
    }
}
.banner-10 .content-box .btn-wrapper {
    margin-top: 47px;
}
@media only screen and (max-width: 767px) {
    .banner-10 .content-box .btn-wrapper {
        margin-top: 17px;
    }
}
.banner-10 .banner-inner {
    display: flex;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .banner-10 .banner-inner {
        flex-direction: column;
    }
}
.banner-10 .banner-thumb {
    position: relative;
    margin-inline-end: -100px;
    align-self: stretch;
}
@media only screen and (max-width: 1199px) {
    .banner-10 .banner-thumb {
        margin-inline-end: -100px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-10 .banner-thumb {
        margin-inline-end: 0;
        margin-top: 30px;
        margin-bottom: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-10 .banner-thumb {
        margin-bottom: 60px;
    }
}
.banner-10 .banner-thumb .thumb {
    width: 100%;
    height: 100%;
}
.banner-10 .banner-thumb .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.banner-10 .banner-thumb .customer-box-wrapper {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
}
.banner-10 .customer-box {
    background-color: #f8e9d7;
    padding: 134px 125px 123px;
}
@media only screen and (max-width: 1919px) {
    .banner-10 .customer-box {
        padding: 104px 97px 100px;
    }
}
@media only screen and (max-width: 1399px) {
    .banner-10 .customer-box {
        padding: 88px 97px 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-10 .customer-box {
        padding: 78px 67px 65px;
    }
}
@media (max-width: 575px) {
    .banner-10 .customer-box {
        padding: 58px 57px 50px;
    }
}
.banner-10 .customer-box .title {
    font-size: 50px;
    font-weight: 800;
    line-height: 0.44;
    margin-bottom: 18px;
}
.banner-10 .customer-box .text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.16;
    margin-bottom: 26px;
    max-width: 166px;
}
.banner-10 .customer-box .thumbs {
    display: flex;
}

.banner-10 .customer-box .thumbs img:not(:first-child) {
    margin-inline-start: -20px;
}
.banner-10 .customer-box .border-corner {
    position: absolute;
    top: 40px;
    inset-inline-start: 40px;
}
@media (max-width: 575px) {
    .banner-10 .customer-box .border-corner {
        display: none;
    }
}
.dir-rtl .banner-10 .customer-box .border-corner {
    transform: rotateY(180deg);
}

/* bannner-10 area style end */

/*  */
.service-area.style-1 {
    color: var(--hover-color);
}
.service-area.style-1 {
    background-color: #bfced9;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 {
        padding-top: 50px;
    }
}
.service-area.style-1 .service-area-inner {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-area-inner {
        display: block;
    }
}
.service-area.style-1 .section-title-wrapper {
    padding-top: 80px;
    flex: 0.5;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .section-title-wrapper {
        padding-top: 45px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .section-title-wrapper {
        padding-top: 0;
    }
}
.service-area.style-1 .title-wrapper {
    max-width: 268px;
}
.service-area.style-1 .service-content {
    display: flex;
    gap: 110px;
    flex: 1;
    justify-content: flex-end;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-content {
        gap: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-content {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: 20px;
        gap: 30px;
    }
}
.service-area.style-1 .service-list li {
    color: var(--secondary);
    font-family: var(--font_hkgrotesk);
    padding: 50px 80px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-list li {
        padding: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-list li {
        border-top: 1px solid #2cc6ce;
        padding: 20px;
    }
}
.service-area.style-1 .service-list li span {
    font-size: 14px;
    font-weight: 500;
    line-height: 2.5;
}
.service-area.style-1 .service-list li .title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.13;
    max-width: 147px;
    color: var(--secondary);
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-list li .title {
        font-size: 18px;
    }
}
.service-area.style-1 .service-title-wrap {
    display: flex;
    gap: 30px;
}
.service-area.style-1 .service-list-item {
    flex-basis: 440px;
}
.service-area.style-1 .service-list-item li .title {
    transition: 0.3s;
}
.service-area.style-1 .service-list-item li:hover .title {
    color: var(--primary);
}
.service-area.style-1 .service-text {
    max-width: 305px;
    transition: 0.3s;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-text {
        padding-bottom: 50px;
    }
}
.service-area.style-1 .text-wrapper {
    margin-top: 23px;
}
.service-area.style-1 .btn-wrapper {
    margin-top: 43px;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .btn-wrapper {
        margin-top: 25px;
    }
}
.service-area.style-1 .wc-btn-primary {
    background-color: transparent;
    color: var(--primary);
    font-size: 16px;
    font-weight: 475;
    line-height: 1.5;
    border-bottom: 1px solid var(--primary);
    padding: 0;
    padding-bottom: 2px;
}
.service-area.style-1 .triangle {
    position: absolute;
    -webkit-clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    width: 94px;
    height: 60px;
    background-color: #8dcf9b;
    top: -30px;
}
.dir-rtl .service-area.style-1 .triangle {
    transform: rotateY(156deg);
}

.service-area.style-1 .section-title,
.service-area.style-1 .wc-btn-underline,
.service-area.style-2 .wc-btn-underline,
.service-area.style-2 .section-title {
    color: #000;
}
/*
--------------------------
Service Style 2
--------------------------
*/
.service-area.style-2 {
    padding-top: 200px;
    padding-bottom: 88px;
    background-color: #f5f5f5;
}

@media only screen and (max-width: 1199px) {
    .service-area.style-2 {
        padding-top: 150px;
        padding-bottom: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .service-area.style-2 {
        padding-top: 100px;
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-2 {
        padding-top: 70px;
    }
}
.service-area.style-2 .section-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
@media only screen and (max-width: 991px) {
    .service-area.style-2 .section-top {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-2 .section-top {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/*  */
.section-title-wrapper.style-3 .section-title {
    font-size: 50px;
}
@media only screen and (max-width: 1919px) {
    .section-title-wrapper.style-3 .section-title {
        font-size: 45px;
    }
}
@media only screen and (max-width: 991px) {
    .section-title-wrapper.style-3 .section-title {
        font-size: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .section-title-wrapper.style-3 .section-title {
        font-size: 35px;
    }
}
@media (max-width: 575px) {
    .section-title-wrapper.style-3 .section-title {
        font-size: 30px;
    }
}
.section-title-wrapper.style-3 .cf_text {
    margin-top: 32px;
}
.section-title-wrapper.style-3 .btn-wrapper {
    margin-top: 42px;
}
.main-menu .mega-style-3 {
    padding: 0 0 0 20px;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
}
.main-menu .mega-style-3 .title {
    height: 70px;
    padding-bottom: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    padding-left: 30px;
}
.main-menu .mega-style-3 .title:after {
    position: absolute;
    content: "";
    width: 5000px;
    height: 1px;
    background-color: #333337;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
}
.main-menu .mega-style-3 > li:not(:first-child) {
    border-left: 1px solid #333337;
}
.main-menu .mega-style-3 > li:last-child {
    border: none;
    width: 36vw;
}
@media only screen and (max-width: 1399px) {
    .main-menu .mega-style-3 > li:last-child {
        width: 32vw;
    }
}
.main-menu .mega-style-3 ul {
    -moz-column-count: 2;
    column-count: 2;
    position: relative;
    padding: 20px 0;
    -moz-column-gap: 0;
    column-gap: 0;
}
.main-menu .mega-style-3 ul:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 700px;
    background-color: #333337;
    top: 0;
    left: 50%;
    z-index: 1;
}
.main-menu .mega-style-3 ul li {
    margin: 0 10px;
}
.main-menu .mega-style-3 ul li a {
    padding-left: 20px;
}
.cf_feature.style-3 {
    border-right: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    padding: 50px;
    padding-bottom: 0;
}
@media only screen and (max-width: 1199px) {
    .cf_feature.style-3 {
        padding: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .cf_feature.style-3 {
        flex-basis: 45%;
        border: 0;
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .cf_feature.style-3 {
        padding-left: 0;
        margin-bottom: 0;
        flex-basis: 100%;
        padding-bottom: 20px;
    }
}
.cf_feature.style-3:first-child {
    padding-left: 0;
}
.cf_feature.style-3:last-child {
    border-right: 0;
}
.cf_feature.style-3:hover .title {
    padding-left: 15px;
}
.cf_feature.style-3:hover .title::before {
    left: 0;
}
.cf_feature.style-3 .content {
    overflow: hidden;
}
.cf_feature.style-3 .count-title {
    color: var(--primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 25px;
}
.cf_feature.style-3 .title {
    color: var(--primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 25px;
    transition: 0.3s;
    position: relative;
}
.cf_feature.style-3 .title::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--primary);
}
.cf_feature.style-3 .title:hover {
    color: var(--action);
}
.cf_feature.style-3 .text {
    margin-bottom: 100px;
}
@media only screen and (max-width: 991px) {
    .cf_feature.style-3 .text {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .cf_feature.style-3 .text {
        margin-bottom: 20px;
    }
}
.cf_feature.style-3 .btn-underline {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--primary);
    text-transform: capitalize;
}
.feature-area.style-3 {
    padding-bottom: 155px;
}
@media only screen and (max-width: 1199px) {
    .feature-area.style-3 {
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area.style-3 {
        padding-bottom: 70px;
    }
}
.wcf_iconbox.style-3 {
    border-inline-end: 1px solid #000;
    border-top: 1px solid #000;
    padding: 50px;
    padding-inline-end: 35px;
    padding-bottom: 0;
}
@media (min-width: 1800px) {
    .wcf_iconbox.style-3 {
        min-width: 300px;
    }
}
@media only screen and (max-width: 1199px) {
    .wcf_iconbox.style-3 {
        padding: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .wcf_iconbox.style-3 {
        flex-basis: 45%;
        border: 0;
        padding-inline-start: 0;
    }
}
@media only screen and (max-width: 767px) {
    .wcf_iconbox.style-3 {
        padding-inline-start: 0;
        margin-bottom: 0;
        flex-basis: 100%;
        padding-bottom: 20px;
    }
}
.wcf_iconbox.style-3:first-child {
    padding-inline-start: 0;
}
.wcf_iconbox.style-3:last-child {
    border-inline-end: 0;
}
.wcf_iconbox.style-3:hover .title {
    padding-inline-start: 15px;
}
.wcf_iconbox.style-3:hover .title::before {
    inset-inline-start: 0;
}
.wcf_iconbox.style-3 .content {
    overflow: hidden;
}
.wcf_iconbox.style-3 .count-title {
    color: var(--primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 25px;
}
.wcf_iconbox.style-3 .title {
    color: var(--primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 25px;
    transition: 0.3s;
    position: relative;
}
.wcf_iconbox.style-3 .title::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--primary);
}
.wcf_iconbox.style-3 .title:hover {
    color: #000;
}
.wcf_iconbox.style-3 .text {
    margin-bottom: 100px;
    color: var(--secondary);
    font-size: 16px;
}
@media only screen and (max-width: 991px) {
    .wcf_iconbox.style-3 .text {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wcf_iconbox.style-3 .text {
        margin-bottom: 20px;
    }
}
.wcf_iconbox.style-3 .btn-underline {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--primary);
    text-transform: capitalize;
}

/*
-----------------------------
FEATURES STYLES 3
-----------------------------
*/
.feature-section-top.style-3 {
    display: grid;
    margin-bottom: 60px;
    grid-template-columns: 1.2fr 1fr 1fr;
}
@media only screen and (max-width: 991px) {
    .feature-section-top.style-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .feature-section-top.style-3 {
        grid-template-columns: repeat(1, 1fr);
    }
}
.feature-section-top.style-3 .title-top {
    color: var(--primary);
    font-size: 50px;
}
@media only screen and (max-width: 1199px) {
    .feature-section-top.style-3 .title-top {
        font-size: 38px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-section-top.style-3 .title-top {
        font-size: 28px;
    }
}
.feature-section-top.style-3 .text {
    font-size: 18px;
}
.feature-section-top.style-3 .btn-wrapperr {
    text-align: end;
}
@media only screen and (max-width: 991px) {
    .feature-section-top.style-3 .btn-wrapperr {
        text-align: start;
    }
}
.feature-wrapper.style-3 {
    display: flex;
}
@media only screen and (max-width: 991px) {
    .feature-wrapper.style-3 {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.feature-area.style-3 .text span {
    text-decoration: underline;
    font-weight: 600;
}
.feature-area.style-3 .title-top-text {
    padding-left: 90px;
}
@media only screen and (max-width: 1199px) {
    .feature-area.style-3 .title-top-text {
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .client-say-16 .client-item-16.active {
        z-index: 9;
    }
}

.client-item-16 {
    position: relative;
    z-index: 1;
}

.client-item-16:hover {
    z-index: 100;
}

/* choose area style  */
.choose-area {
    background-color: #103142;
    margin: 0 20px;
    border-radius: 20px;
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .choose-area {
        margin: 0 0;
        border-radius: 0;
    }
}
.choose-area .content-wrap {
    width: 775px;
    padding-inline-start: 110px;
    padding-top: 110px;
    padding-bottom: 124px;
    margin-inline-start: auto;
}
@media only screen and (max-width: 1919px) {
    .choose-area .content-wrap {
        width: 690px;
        padding-inline-start: 70px;
        padding-top: 80px;
        padding-bottom: 94px;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area .content-wrap {
        width: 100%;
        padding-inline-start: 0;
    }
}
@media only screen and (max-width: 991px) {
    .choose-area .content-wrap {
        padding-top: 60px;
        padding-bottom: 74px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area .content-wrap {
        padding-top: 40px;
        padding-bottom: 54px;
    }
}
.choose-area .choose-area-inner {
    display: flex;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .choose-area .choose-area-inner {
        flex-direction: column;
    }
}
.choose-area .section-title {
    color: var(--white);
    max-width: 630px;
}
.choose-area .wcf_iconbox .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.04;
    color: var(--white);
    margin-bottom: 21px;
}
.choose-area .wcf_iconbox .title a:hover {
    color: inherit;
}
.choose-area .wcf_iconbox .thumb {
    margin-bottom: 27px;
}
.choose-area .wcf_iconbox .thumb span {
    color: var(--white);
    font-size: 28px;
}
.choose-area .wcf_iconbox .thumb img {
    height: 29px;
}
@media only screen and (max-width: 1199px) {
    .choose-area .wcf_iconbox .thumb img {
        height: 20px;
    }
}
.dir-rtl .choose-area .wcf_iconbox .thumb img {
    transform: rotateY(180deg);
}
.choose-area .wcf_iconbox .text {
    font-size: 18px;
    line-height: 1.33;
    color: #9faeb6;
}
.choose-area .choose-wrapper {
    display: grid;
    gap: 54px 30px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 276px));
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .choose-area .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 210px));
    }
}
@media only screen and (max-width: 991px) {
    .choose-area .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 310px));
    }
}
@media only screen and (max-width: 767px) {
    .choose-area .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 235px));
        gap: 45px 30px;
    }
}
@media (max-width: 575px) {
    .choose-area .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 330px));
    }
}
.choose-area .choose-thumb {
    position: absolute;
    inset-inline-end: 775px;
    height: 100%;
    width: 67%;
}
@media only screen and (max-width: 1919px) {
    .choose-area .choose-thumb {
        inset-inline-end: 690px;
        width: 65%;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area .choose-thumb {
        position: static;
        width: 100%;
    }
}
.choose-area .choose-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.choose-area .section-heading {
    margin-bottom: 59px;
}
@media only screen and (max-width: 991px) {
    .choose-area .section-heading {
        margin-bottom: 39px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area .section-heading {
        margin-bottom: 29px;
    }
}

/*Convencing Feature Section Starts Here*/
.feature-tabs {
    border: none;
    justify-content: space-between;
    margin: 0 -10px 25px;
}
.feature-tabs li {
    margin-bottom: 30px;
    padding: 0 10px;
}
.feature-tabs li a,
.feature-tabs li .nav-link {
    text-align: center;
    display: block;
    border: transparent;
    height: initial;
}
.feature-tabs li a .thumb,
.feature-tabs li .nav-link .thumb {
    width: 70px;
    height: 70px;
    display: block;
    line-height: 70px;
    border-radius: 50%;
    background: linear-gradient(
        0deg,
        rgb(226, 144, 110) 0%,
        rgb(232, 58, 153) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(232, 58, 153, 0.5);
    font-size: 36px;
    color: #ffffff;
    margin: 0 auto 20px;
}
.feature-tabs li a .subtitle,
.feature-tabs li .nav-link .subtitle {
    text-transform: capitalize;
    color: #fff;
}
.feature-tabs li a.active,
.feature-tabs li a:focus,
.feature-tabs li a:focus-visible,
.feature-tabs li .nav-link.active,
.feature-tabs li .nav-link:focus,
.feature-tabs li .nav-link:focus-visible {
    background-color: transparent;
    border-color: transparent;
}
.feature-tabs li a.active .subtitle,
.feature-tabs li a:focus .subtitle,
.feature-tabs li a:focus-visible .subtitle,
.feature-tabs li .nav-link.active .subtitle,
.feature-tabs li .nav-link:focus .subtitle,
.feature-tabs li .nav-link:focus-visible .subtitle {
    color: #202c39;
}
.feature-tabs li:nth-of-type(5n + 2) a,
.feature-tabs li:nth-of-type(5n + 2) .nav-link .thumb {
    background: linear-gradient(
        0deg,
        rgb(246, 211, 101) 0%,
        rgb(253, 160, 133) 100%
    );
    box-shadow: 2.419px 9.703px 18.24px 0.76px rgba(253, 160, 133, 0.5);
}
.feature-tabs li:nth-of-type(5n + 3) a,
.feature-tabs li:nth-of-type(5n + 3) .nav-link .thumb {
    background: linear-gradient(
        0deg,
        rgb(149, 180, 255) 0%,
        rgb(115, 151, 255) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(115, 151, 255, 0.5);
}
.feature-tabs li:nth-of-type(5n + 4) a,
.feature-tabs li:nth-of-type(5n + 4) .nav-link .thumb {
    background: linear-gradient(
        0deg,
        rgb(157, 243, 167) 0%,
        rgb(87, 212, 100) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(87, 212, 100, 0.5);
}
.feature-tabs li:nth-of-type(5n + 5) a,
.feature-tabs li:nth-of-type(5n + 5) .nav-link .thumb {
    background: linear-gradient(
        0deg,
        rgb(99, 238, 247) 0%,
        rgb(58, 209, 229) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(58, 209, 229, 0.5);
}
.get-button {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 11px 34px;
    color: #fff;
    border: 1px solid #d4cff4;
    border-radius: 25px;
}
.get-button i {
    margin-left: 14px;
    transition: all ease 0.3s;
}
.get-button:hover {
    box-shadow: 0px 17px 24px 0px rgba(18, 83, 252, 0.51);
}
.get-button:hover i {
    padding-left: 5px;
}
.get-button.white {
    color: #2cc6ce;
}
.get-button.light {
    font-weight: 400;
}
section#feature {
    background-image: url(../imgs/c-feature.webp);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}
@media (max-width: 991px) {
    .feature-tabs li {
        margin-bottom: 20px;
    }
    .feature-tabs li a .thumb {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        margin-bottom: 10px;
    }
    .feature-tabs li a .subtitle {
        font-size: 14px;
    }
}
@media (max-width: 575px) {
    .feature-tabs li {
        width: calc(50% - 20px);
    }
}

.convencing-feature-content .title {
    margin-bottom: 28px;
}
.convencing-feature-content p {
    margin-bottom: 38px;
}
@media (max-width: 767px) {
    .convencing-feature-content .title {
        margin-bottom: 20px;
    }
    .convencing-feature-content p {
        margin-bottom: 28px;
    }
}

@media (max-width: 991px) {
    .convencing-feature-thumb img {
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    .convencing-feature-thumb {
        margin-bottom: 40px;
    }
}
section.blog-area.style-5,
section.service-area.style-2,
.feature-area.style-3,
.lg-oh.padding-top {
    padding: 75px 0 75px;
}

/*  */

.banner12-area {
    padding-top: 90px;
    margin-left: 20px;
    margin-right: 20px;
}
@media only screen and (max-width: 767px) {
    .banner12-area {
        margin: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-area .btn-wrapper {
        margin-left: 23px;
    }
}
.banner12-area .wc-btn-primary {
    background-color: #fe5b2c;
    border-radius: 50px;
    padding: 17px 36px;
    text-transform: unset;
    font-size: 18px;
    border: 1px solid transparent;
    height: 70px;
    font-weight: 400;
}
@media only screen and (max-width: 767px) {
    .banner12-area .wc-btn-primary {
        height: 50px;
        padding: 17px 25px;
    }
}
.banner12-area .wc-btn-play {
    background-color: #fe5b2c;
    border: 1px solid transparent;
    height: 70px;
    width: 70px;
}
.banner12-area .wc-btn-play i {
    font-size: 14px;
}
@media only screen and (max-width: 767px) {
    .banner12-area .wc-btn-play {
        height: 50px;
        width: 50px;
    }
}

.banner12-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 1600px) {
    .banner12-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 1199px) {
    .banner12-wrapper {
        grid-template-columns: 1fr;
    }
}

.banner12-content {
    background-color: var(--primary);
    padding-top: 200px;
    padding-bottom: 190px;
    padding-inline-start: 140px;
    border-radius: 40px;
    position: relative;
}
@media (max-width: 1600px) {
    .banner12-content {
        padding-inline-start: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner12-content {
        padding-top: 100px;
        padding-bottom: 65px;
        padding-inline-start: 58px;
        border-radius: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-content {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
        padding-bottom: 50px;
        border-radius: 0;
        padding-top: 50px;
    }
}
.banner12-content .shape-1 {
    position: absolute;
    top: -48px;
    left: -45px;
}
@media only screen and (max-width: 767px) {
    .banner12-content .shape-1 {
        display: none;
    }
}
.banner12-content .shape-x-icon {
    position: absolute;
    bottom: 60px;
    right: 60px;
}
@media only screen and (max-width: 991px) {
    .banner12-content .shape-x-icon {
        right: 0;
        bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-content .shape-x-icon {
        max-width: 210px;
    }
}
.banner12-content .subtitle-wrapper {
    position: relative;
    padding-bottom: 23px;
}
.banner12-content .subtitle {
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid #4c6279;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 9px;
    font-family: var(--font_primary);
}
.banner12-content .title-wrapper {
    padding-bottom: 10px;
    max-width: 506px;
}
@media only screen and (max-width: 991px) {
    .banner12-content .title-wrapper {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-content .title-wrapper {
        max-width: 100%;
    }
}
.banner12-content .title {
    font-size: 80px;
    color: var(--white);
}
@media (max-width: 1600px) {
    .banner12-content .title {
        font-size: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner12-content .title {
        font-size: 45px;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-content .title {
        font-size: 40px;
    }
}
.banner12-content .cf_text {
    padding-bottom: 42px;
    max-width: 400px;
}
.banner12-content .text {
    color: var(--white);
}

.banner12-shape-img {
    -webkit-mask-image: url("../imgs/shape/img-r-1.webp");
    mask-image: url("../imgs/shape/img-r-1.webp");
    -webkit-mask-position: top left;
    mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
@media only screen and (max-width: 1199px) {
    .banner12-shape-img img {
        width: 100%;
        height: 400px;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
@media only screen and (max-width: 991px) {
    .banner12-shape-img img {
        height: 300px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner12-shape-img {
        mask-image: unset;
        -webkit-mask-image: unset;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-shape-img {
        margin-inline-start: 15px;
        margin-inline-end: 15px;
    }
}

.banner12-content-item {
    padding: 80px 60px;
    background-color: #d8e7ef;
    border-radius: 40px;
    max-width: 300px;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .banner12-content-item {
        border-radius: 0;
    }
}
@media only screen and (max-width: 991px) {
    .banner12-content-item {
        width: 240px;
        padding: 50px 20px;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-content-item {
        width: 100%;
        max-width: 100%;
        padding: 25px 20px;
        border-radius: 0;
    }
}
.banner12-content-item .shape-2 {
    position: absolute;
    right: 60px;
    bottom: 80px;
}
@media only screen and (max-width: 767px) {
    .banner12-content-item .shape-2 {
        bottom: 18px;
    }
}
.banner12-content-item .title {
    font-size: 50px;
    max-width: 109px;
    position: relative;
    padding-bottom: 3px;
}
@media only screen and (max-width: 767px) {
    .banner12-content-item .title {
        font-size: 40px;
    }
}
.banner12-content-item .title span {
    position: absolute;
    font-size: 30px;
}
.banner12-content-item .text-wrapper {
    max-width: 153px;
    padding-bottom: 70px;
    margin-top: -3px;
}
@media only screen and (max-width: 767px) {
    .banner12-content-item .text-wrapper {
        padding-bottom: 0;
    }
}
.banner12-content-item .text {
    font-size: 16px;
    font-weight: 600;
    color: #001f3f;
    line-height: 1;
}
.banner12-content-item .case-thumb {
    padding-top: 23px;
}
.banner12-content-item .case-thumb img {
    border-radius: 50px;
    margin-left: -25px;
    border: 3px solid var(--white);
    max-width: 55px;
}
@media only screen and (max-width: 1919px) {
    .banner12-content-item .case-thumb img {
        max-width: 40px;
    }
}
.banner12-content-item .case-thumb img:first-child {
    margin-left: 0;
}

.banner12-thumb-bottom {
    display: grid;
    grid-template-columns: 2fr 274px;
    gap: 20px;
    align-items: self-start;
    padding-top: 20px;
}
@media only screen and (max-width: 1199px) {
    .banner12-thumb-bottom {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-bottom {
        grid-template-columns: 1fr;
    }
}

.banner12-thumb-left {
    display: grid;
    grid-template-columns: 300px 300px;
    gap: 20px;
    position: relative;
}
@media only screen and (max-width: 991px) {
    .banner12-thumb-left {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-left {
        grid-template-columns: 1fr 1fr;
        margin-inline-start: 15px;
        margin-inline-end: 15px;
    }
}
.banner12-thumb-left::before {
    position: absolute;
    content: "";
    left: 49%;
    transform: translateX(-50%);
    z-index: 2;
    bottom: 80px;
    background-image: url("../imgs/shape/img-r-2.webp");
    height: 40px;
    width: 20px;
    background-repeat: no-repeat;
}
@media (max-width: 1600px) {
    .banner12-thumb-left::before {
        left: 50%;
    }
}
@media only screen and (max-width: 1199px) {
    .banner12-thumb-left::before {
        transform: translateX(-50%);
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-left::before {
        display: none;
    }
}

.banner12-thumb-right {
    margin-top: -130px;
    position: relative;
    max-width: 275px;
}
@media only screen and (max-width: 1199px) {
    .banner12-thumb-right {
        max-width: 277px;
        margin-top: 0;
    }
}
@media only screen and (max-width: 991px) {
    .banner12-thumb-right {
        max-width: 215px;
        margin-left: auto;
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-right {
        max-width: 100%;
        margin-left: unset;
        margin-top: 0;
    }
}
.banner12-thumb-right img {
    border-radius: 40px;
}
@media only screen and (max-width: 1199px) {
    .banner12-thumb-right img {
        border-radius: 0;
    }
}
@media only screen and (max-width: 991px) {
    .banner12-thumb-right img {
        height: 250px;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-right img {
        width: 100%;
        border-radius: 0;
        height: 300px;
        -o-object-fit: cover;
        object-fit: cover;
        margin-inline-start: 15px;
        margin-inline-end: 15px;
    }
}
.banner12-thumb-right .wc-btn-play {
    background-color: transparent;
    border-color: var(--white);
    height: 80px;
    width: 80px;
}
@media only screen and (max-width: 991px) {
    .banner12-thumb-right .wc-btn-play {
        height: 60px;
        width: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .banner12-thumb-right .wc-btn-play {
        height: 50px;
        width: 50px;
    }
}
.banner12-thumb-right .btn-wrapper {
    margin-left: 0;
}

/*  */
/* blog style 2 */
.blog.style-2 {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 27px;
    padding-bottom: 20px;
}
@media only screen and (max-width: 991px) {
    .blog.style-2 {
        gap: 30px;
    }
}
@media (max-width: 575px) {
    .blog.style-2 {
        flex-direction: column-reverse;
        gap: 20px;
    }
}
.blog.style-2:hover .wc-btn-icon i {
    transform: rotate(0);
}
.dir-rtl .blog.style-2:hover .wc-btn-icon i {
    transform: rotate(-180deg);
}
.blog.style-2 .content-wrapper {
    display: flex;
    align-items: center;
    gap: 56px;
    flex-basis: 67%;
    justify-content: space-between;
}
@media (max-width: 575px) {
    .blog.style-2 .content-wrapper {
        gap: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .blog.style-2 .content-wrapper .btn-wrapper {
        display: none;
    }
}
.blog.style-2 .author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.blog.style-2 .author .avatar img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
}
.blog.style-2 .author .meta-title {
    font-size: 12px;
    display: inline-block;
    margin-bottom: 6px;
}
.blog.style-2 .author .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    display: block;
}
.blog.style-2 .tag {
    font-size: 12px;
    font-weight: 600;
    color: #091542;
    line-height: 1;
    background-color: rgba(9, 21, 66, 0.05);
    padding: 4px 6px;
    display: inline-block;
    border-radius: 5px;
}
.blog.style-2 .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 11px;
}
.blog.style-2 .date {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
}
.blog.style-2 .has-left-line {
    padding-inline-start: 25px;
}
.blog.style-2 .has-left-line:before {
    width: 15px;
    color: var(--black);
}
.blog.style-2 .title {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 16px;
}
@media only screen and (max-width: 1399px) {
    .blog.style-2 .title {
        font-size: 24px;
    }
}
@media only screen and (max-width: 991px) {
    .blog.style-2 .title {
        font-size: 22px;
    }
}
.blog.style-2 .title span {
    font-weight: 600;
}
.blog.style-2 .text {
    font-size: 16px;
    line-height: 1.5;
}

.blog-area.style-8 .blog-wrapper {
    border-top: 1px solid #ededed;
}
.blog-area.style-8 .blog-wrapper-area {
    max-width: 850px;
}
@media only screen and (max-width: 991px) {
    .blog-area.style-8 .blog-wrapper-area {
        max-width: 100%;
    }
}
.blog-area.style-8 .blog {
    border-bottom: 1px solid #ededed;
    padding-top: 47px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 1199px) {
    .blog-area.style-8 .blog {
        padding-top: 37px;
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area.style-8 .blog {
        padding-top: 27px;
        padding-bottom: 20px;
    }
}
.blog-area.style-8 .section-heading {
    display: flex;
    gap: 53px;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}
@media only screen and (max-width: 991px) {
    .blog-area.style-8 .section-heading {
        flex-direction: row;
        align-items: flex-end;
    }
}
@media only screen and (max-width: 767px) {
    .blog-area.style-8 .section-heading {
        gap: 20px;
    }
}
.blog-area.style-8 .section-heading .text {
    font-size: 18px;
    line-height: 1.44;
    min-width: 290px;
    max-width: 315px;
}
.blog-area.style-8 .section-title {
    max-width: 394px;
}
.blog-area.style-8 .blog-area-inner {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
}
section.blog-area.section-spacing.style-8.pin__area {
    background-color: rgb(245, 242, 237);
}
section.blog-area.section-spacing.style-8.pin__area {
    padding: 130px 0 130px;
}
@media only screen and (max-width: 991px) {
    .blog-area.style-8 .blog-area-inner {
        flex-direction: column;
        align-items: normal;
    }
}
.section-title-wrapper.style-8 .subtitle-wrapper {
    margin-bottom: 25px;
}
@media only screen and (max-width: 991px) {
    .section-title-wrapper.style-8 .subtitle-wrapper {
        margin-bottom: 15px;
    }
}
.section-title-wrapper.style-8 .section-subtitle {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
}
.section-title-wrapper.style-8 .section-title {
    font-size: 70px;
}
@media only screen and (max-width: 1919px) {
    .section-title-wrapper.style-8 .section-title {
        font-size: 55px;
    }
}
@media only screen and (max-width: 991px) {
    .section-title-wrapper.style-8 .section-title {
        font-size: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .section-title-wrapper.style-8 .section-title {
        font-size: 35px;
    }
}
@media (max-width: 575px) {
    .section-title-wrapper.style-8 .section-title {
        font-size: 30px;
    }
}
.section-title-wrapper.style-8 .cf_text {
    margin-top: 27px;
}
.section-title-wrapper.style-8 .btn-wrapper {
    margin-top: 42px;
}

/* choose area style  */
.choose-area13 {
    background-color: #091542;
}
.choose-area13 .content-wrap {
    width: 740px;
    padding-inline-end: 110px;
    padding-top: 116px;
    padding-bottom: 125px;
}
@media only screen and (max-width: 1919px) {
    .choose-area13 .content-wrap {
        width: 630px;
        padding-inline-end: 70px;
        padding-top: 86px;
        padding-bottom: 95px;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area13 .content-wrap {
        width: 100%;
        padding-inline-end: 0;
    }
}
@media only screen and (max-width: 991px) {
    .choose-area13 .content-wrap {
        padding-top: 66px;
        padding-bottom: 75px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area13 .content-wrap {
        padding-top: 46px;
        padding-bottom: 55px;
    }
}
.choose-area13 .choose-area13-inner {
    display: flex;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .choose-area13 .choose-area13-inner {
        flex-direction: column;
    }
}
.choose-area13 .section-title {
    color: var(--white);
}
.choose-area13 .wcf_iconbox .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 15px;
}
.choose-area13 .wcf_iconbox .title a:hover {
    color: inherit;
}
.choose-area13 .wcf_iconbox .thumb {
    margin-bottom: 26px;
}
.choose-area13 .wcf_iconbox .thumb img {
    height: 29px;
}
@media only screen and (max-width: 1199px) {
    .choose-area13 .wcf_iconbox .thumb img {
        height: 20px;
    }
}
.dir-rtl .choose-area13 .wcf_iconbox .thumb img {
    transform: rotateY(180deg);
}
.choose-area13 .wcf_iconbox .text {
    font-size: 16px;
    line-height: 1.37;
    color: #a1a6ba;
}
.choose-area13 .choose-wrapper {
    display: grid;
    gap: 65px 30px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 245px));
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .choose-area13 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 210px));
    }
}
@media only screen and (max-width: 991px) {
    .choose-area13 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 310px));
    }
}
@media only screen and (max-width: 767px) {
    .choose-area13 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 235px));
        gap: 45px 30px;
    }
}
@media (max-width: 575px) {
    .choose-area13 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 330px));
    }
}
.choose-area13 .choose-thumb {
    position: absolute;
    inset-inline-start: 740px;
    height: 100%;
    width: 67%;
}
@media only screen and (max-width: 1919px) {
    .choose-area13 .choose-thumb {
        inset-inline-start: 630px;
        width: 65%;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area13 .choose-thumb {
        position: static;
        width: 100%;
    }
}
.choose-area13 .choose-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.choose-area13 .section-heading {
    margin-bottom: 58px;
}
@media only screen and (max-width: 991px) {
    .choose-area13 .section-heading {
        margin-bottom: 38px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area13 .section-heading {
        margin-bottom: 28px;
    }
}

/* bannner-1 area style start */
.banner-1.banner-area .swiper-slide-item {
    padding-top: 354px;
    padding-bottom: 294px;
}
@media only screen and (max-width: 1399px) {
    .banner-1.banner-area .swiper-slide-item {
        padding-top: 234px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-1.banner-area .swiper-slide-item {
        padding-top: 164px;
        padding-bottom: 120px;
    }
}
@media (min-width: 1366px) and (max-width: 2500px) {
    .banner-1.banner-area {
        height: 100%;
    }
}
.banner-1 .banner-area-bg:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.3);
    top: 0;
    inset-inline-start: 0;
}
.banner-1 .banner-content {
    max-width: 650px;
}
.dir-rtl .banner-1 .banner-content {
    margin-left: auto;
}
.banner-1 .subtitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    padding: 9.5px 12px;
    background: rgba(255, 255, 255, 0.0705882353);
    display: inline-block;
    border-radius: 8px;
}
.banner-1 .title {
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    color: var(--white);
    margin-top: 23px;
}
@media only screen and (max-width: 1919px) {
    .banner-1 .title {
        font-size: 70px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-1 .title {
        font-size: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-1 .title {
        font-size: 50px;
    }
}
@media (max-width: 575px) {
    .banner-1 .title {
        font-size: 40px;
    }
}
.banner-1 .banner-content .text {
    max-width: 200px;
    margin-top: -12px;
    margin-inline-start: 215px;
}
@media only screen and (max-width: 767px) {
    .banner-1 .banner-content .text {
        margin-inline-start: 0;
        margin-top: 40px;
    }
}
.banner-1 .banner-content .text p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
}
.banner-1 .banner-content .text p.has-top-line {
    padding-top: 14px;
    border-width: 2px;
}
.banner-1 .banner-area-vision {
    position: absolute;
    max-width: 33%;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 2;
}
@media only screen and (max-width: 1399px) {
    .banner-1 .banner-area-vision {
        max-width: 475px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-1 .banner-area-vision {
        position: relative;
        margin-top: 0;
    }
}
.banner-area-vision {
    background: var(--black);
    padding-top: 80px;
    padding-bottom: 73px;
    padding-inline-start: 110px;
    padding-inline-end: 165px;
    position: relative;
}
@media only screen and (max-width: 1919px) {
    .banner-area-vision {
        padding: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-area-vision {
        padding: 30px;
    }
}
.banner-area-vision .text-wrapper {
    padding-top: 43px;
}
.banner-area-vision .text {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--white);
}
.banner-area-vision .shape-x {
    width: 264px;
    position: absolute;
    top: 72px;
    inset-inline-end: 138px;
}
@media only screen and (max-width: 1199px) {
    .banner-area-vision .shape-x {
        inset-inline-end: 38px;
    }
}

.swiper-pagination-current {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.dash {
    width: 2px;
    height: 11px;
    background-color: var(--white);
    display: inline-block;
    transform: rotate(30deg);
}

.swiper-pagination-total {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.pagination-style-1 {
    bottom: 54px;
    z-index: 2;
    max-width: 47px;
    display: flex;
    justify-content: space-between;
}

.swiper-pagination-current {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.dash {
    width: 2px;
    height: 11px;
    background-color: var(--white);
    display: inline-block;
    transform: rotate(30deg);
}

.swiper-pagination-total {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.pagination-style-1 {
    bottom: 54px;
    z-index: 2;
    max-width: 47px;
    display: flex;
    justify-content: space-between;
}

.pagination-wrapper {
    position: absolute;
    bottom: 60px;
    z-index: 2;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .pagination-wrapper {
        display: none;
    }
}

/* bannner-1 area style end */

/*
-----------------------------
FEATURES STYLES 1
-----------------------------
*/
.feature-area.style-1 {
    position: relative;
    z-index: 2;
    max-width: 1920px;
    margin: auto;
}
@media (min-width: 1800px) {
    .feature-area.style-1 {
        max-width: 1920px;
    }
}
.feature-area.style-1::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    background-color: #f1f6f6;
    width: 60%;
    z-index: -2;
}
@media only screen and (max-width: 1199px) {
    .feature-area.style-1::before {
        background-color: transparent;
    }
}
.feature-area.style-1 .wc-btn-primary i {
    font-size: 8px;
}
.feature-area.style-1 .wc-btn-primary:hover {
    color: var(--white);
}

.feature-inner.style-1 {
    display: flex;
    gap: 200px;
}
@media only screen and (max-width: 1919px) {
    .feature-inner.style-1 {
        gap: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .feature-inner.style-1 {
        gap: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .feature-inner.style-1 {
        flex-wrap: wrap;
    }
}

.feature-wrapper.style-1 {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px 115px;
    padding-inline-end: 110px;
}
@media only screen and (max-width: 1919px) {
    .feature-wrapper.style-1 {
        gap: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .feature-wrapper.style-1 {
        gap: 30px;
        padding-right: 0;
    }
}
@media only screen and (max-width: 991px) {
    .feature-wrapper.style-1 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 767px) {
    .feature-wrapper.style-1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
.feature-wrapper.style-1 .thumb {
    grid-column: span 2;
}
@media only screen and (max-width: 767px) {
    .feature-wrapper.style-1 .thumb {
        grid-column: unset;
    }
}

.feature-about.style-1 .inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.feature-about.style-1 .section-heading {
    height: 100%;
}
.feature-about.style-1 .section-title-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.feature-about.style-1 .btn-wrapper {
    margin-top: auto;
}
@media only screen and (max-width: 991px) {
    .feature-about.style-1 .btn-wrapper {
        margin-top: 42px;
    }
}
.feature-about.style-1 .sub-title-wrapper {
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .feature-about.style-1 .sub-title-wrapper {
        margin-bottom: 20px;
    }
}
.feature-about.style-1 .title {
    color: var(--primary);
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 35px;
}
@media only screen and (max-width: 1199px) {
    .feature-about.style-1 .title {
        font-size: 40px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-about.style-1 .title {
        font-size: 30px;
        margin-bottom: 25px;
    }
}
.feature-about.style-1 .text {
    color: var(--secodary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.44;
}

.consultant-agency p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.44;
}

.about-area.style-1 {
    max-width: 1920px;
    margin: auto;
    position: relative;
    z-index: 2;
}
.about-area.style-1::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    top: 0;
    height: 250px;
    width: 100%;
    background-color: #f1f6f6;
    z-index: -2;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1::before {
        display: none;
    }
}
.about-area.style-1 .about-inner {
    display: flex;
    justify-content: space-between;
    background-color: #d7ddcb;
    margin-inline-start: 200px;
    padding-inline-start: 115px;
    height: 100vh;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-inner {
        margin-left: 0;
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner {
        flex-wrap: wrap;
        height: 100%;
        padding-bottom: 50px;
    }
}
.about-area.style-1 .about-inner .subtitle-wrapper {
    margin-bottom: 164px;
    padding-top: 38px;
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-inner .subtitle-wrapper {
        margin-bottom: 50px;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .subtitle-wrapper {
        margin-bottom: 30px;
    }
}
.about-area.style-1 .about-inner .title-wrapper {
    max-width: 201px;
}

.about-area.style-1 .about-inner .cf_text {
    margin-top: 22px;
    margin-bottom: 46px;
    max-width: 390px;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .cf_text {
        margin-bottom: 30px;
    }
}
.about-area.style-1 .about-inner .list-check li {
    font-family: var(--font_hkgrotesk);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.31;
    margin-bottom: 14px;
}
.about-area.style-1 .about-inner .list-check li:last-child {
    margin-bottom: 0;
}
.about-area.style-1 .about-inner .btn-wrapper {
    margin-top: 90px;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-inner .btn-wrapper {
        margin-top: 45px;
    }
}
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.18;
}
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary:hover {
    color: var(--white);
    background-color: var(--primary);
}
.about-area.style-1 .about-text-wrapper {
    padding-left: 50px;
    margin-bottom: 80px;
    border-left: 1px solid rgba(18, 18, 18, 0.06);
}
@media only screen and (max-width: 1199px) {
    .about-area.style-1 .about-text-wrapper {
        border: 0;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-text-wrapper {
        margin-bottom: 0;
    }
}
.about-area.style-1 .about-thumb img {
    height: 100%;
    margin-inline-end: 4px;
    max-width: 645px;
    margin-left: auto;
    -o-object-fit: cover;
    object-fit: cover;
}
@media only screen and (max-width: 767px) {
    .about-area.style-1 .about-thumb img {
        display: none;
        height: 0;
    }
}

.about-more.style-1 {
    max-width: 850px;
    margin: auto;
    text-align: center;
}
.about-more.style-1 .about-more-content p {
    color: var(--primary);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.22;
}
@media only screen and (max-width: 991px) {
    .about-more.style-1 .about-more-content p {
        font-size: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .about-more.style-1 .about-more-content p {
        font-size: 22px;
    }
}
.about-more.style-1 .about-more-content p span {
    color: rgba(18, 18, 18, 0.6);
}
.about-more.style-1 .about-more-content .wc-btn-primary {
    background-color: transparent;
    color: var(--primary);
    font-size: 16px;
    font-weight: 475;
    line-height: 1.5;
    border-bottom: 1px solid var(--primary);
    padding: 0;
    padding-bottom: 2px;
}
.about-more.style-1 .about-more-content .btn-wrapper {
    margin-top: 52px;
}
@media only screen and (max-width: 767px) {
    .about-more.style-1 .about-more-content .btn-wrapper {
        margin-top: 30px;
    }
}
.about-more.style-1 .about-more-content .wcf_logo {
    margin-top: 100px;
}
@media only screen and (max-width: 767px) {
    .about-more.style-1 .about-more-content .wcf_logo img {
        max-width: 150px;
    }
}
@media only screen and (max-width: 767px) {
    .about-more.style-1 .about-more-content .wcf_logo {
        margin-top: 60px;
    }
}

.content-wrapper {
    display: flex;
    gap: 100px;
}

.service-area.style-1 {
    background-color: #bfced9;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 {
        padding-top: 50px;
    }
}
.service-area.style-1 .service-area-inner {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-area-inner {
        display: block;
    }
}
.service-area.style-1 .section-title-wrapper {
    padding-top: 80px;
    flex: 0.5;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .section-title-wrapper {
        padding-top: 45px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .section-title-wrapper {
        padding-top: 0;
    }
}
.service-area.style-1 .title-wrapper {
    max-width: 268px;
}
.service-area.style-1 .service-content {
    display: flex;
    gap: 110px;
    flex: 1;
    justify-content: flex-end;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-content {
        gap: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-content {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: 20px;
        gap: 30px;
    }
}
.service-area.style-1 .service-list li {
    color: var(--secondary);
    font-family: var(--font_hkgrotesk);
    padding: 50px 80px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-list li {
        padding: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .service-list li {
        border-top: 1px solid #2cc6ce;
        padding: 20px;
    }
}
.service-area.style-1 .service-list li span {
    font-size: 14px;
    font-weight: 500;
    line-height: 2.5;
}
.service-area.style-1 .service-list li .title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.13;
    max-width: 147px;
    color: var(--secondary);
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-list li .title {
        font-size: 18px;
    }
}
.service-area.style-1 .service-title-wrap {
    display: flex;
    gap: 30px;
}
.service-area.style-1 .service-list-item {
    flex-basis: 440px;
}
.service-area.style-1 .service-list-item li .title {
    transition: 0.3s;
}
.service-area.style-1 .service-list-item li:hover .title {
    color: var(--primary);
}
.service-area.style-1 .service-text {
    max-width: 305px;
    transition: 0.3s;
}
@media only screen and (max-width: 1199px) {
    .service-area.style-1 .service-text {
        padding-bottom: 50px;
    }
}
.service-area.style-1 .text-wrapper {
    margin-top: 23px;
}
.service-area.style-1 .btn-wrapper {
    margin-top: 43px;
}
@media only screen and (max-width: 767px) {
    .service-area.style-1 .btn-wrapper {
        margin-top: 25px;
    }
}
.service-area.style-1 .wc-btn-primary {
    background-color: transparent;
    color: var(--primary);
    font-size: 16px;
    font-weight: 475;
    line-height: 1.5;
    border-bottom: 1px solid var(--primary);
    padding: 0;
    padding-bottom: 2px;
}
.service-area.style-1 .triangle {
    position: absolute;
    -webkit-clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    clip-path: polygon(0 0, 55% 0, 100% 100%, 45% 100%);
    width: 94px;
    height: 60px;
    background-color: #8dcf9b;
    top: -30px;
}
.dir-rtl .service-area.style-1 .triangle {
    transform: rotateY(156deg);
}

.testimonial-item.style-1 {
    display: flex;
    gap: 140px;
}
@media only screen and (max-width: 1199px) {
    .testimonial-item.style-1 {
        gap: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .testimonial-item.style-1 {
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial-item.style-1 {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}
.testimonial-item.style-1 .image-wrapper {
    flex: 0 0 30%;
}
.testimonial-item.style-1 .image img {
    width: 100%;
    /* Make the image fill its container */
}
.testimonial-item.style-1 .content {
    flex: 0 0 70%;
}
@media only screen and (max-width: 767px) {
    .testimonial-item.style-1 .content {
        flex: 0 0 100%;
    }
}
.testimonial-item.style-1 .text-wrapper {
    max-width: 520px;
}
@media only screen and (max-width: 767px) {
    .testimonial-item.style-1 .text-wrapper {
        max-width: unset;
    }
}
.testimonial-item.style-1 .quote-icon-wrap {
    margin-bottom: 70px;
}
@media only screen and (max-width: 991px) {
    .testimonial-item.style-1 .quote-icon-wrap {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial-item.style-1 .quote-icon-wrap {
        margin-bottom: 15px;
    }
}
.testimonial-item.style-1 .text {
    color: var(--primary);
    font-size: 30px;
    line-height: 1.17;
    margin-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .testimonial-item.style-1 .text {
        font-size: 26px;
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .testimonial-item.style-1 .text {
        font-size: 18px;
        margin-bottom: 30px;
    }
}
.testimonial-item.style-1 .meta {
    position: relative;
    border-left: 1px solid var(--primary);
    padding-left: 15px;
}
@media only screen and (max-width: 767px) {
    .testimonial-item.style-1 .meta {
        border: 0;
    }
}
.testimonial-item.style-1 .name {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 5px;
}
.testimonial-item.style-1 .post {
    color: var(--white-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.22;
}

.testimonial-section.style-1 .section-heading {
    text-align: center;
    margin-bottom: 50px;
}
.testimonial-section.style-1 .subtitle-wrapper {
    margin-bottom: 30px;
}

.testimonial-inner.style-1 {
    padding-left: 90px;
    padding-right: 90px;
    position: relative;
}
@media only screen and (max-width: 991px) {
    .testimonial-inner.style-1 {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .testimonial-inner.style-1 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*
    ---------------------------------
    # Swiper Prev and Next Button Styles
    # Apply custom styles using the Like "style-1" class
    # Adjust styles for disabled icons with the "swiper-button-disabled" class
    # Apply custom text prev-text next and prev navigation
*/
@media only screen and (max-width: 991px) {
    .swiper-button-prev.style-1,
    .swiper-button-next.style-1 {
        display: none;
    }
}
.swiper-button-prev.style-1::after,
.swiper-button-next.style-1::after {
    color: var(--primary);
}
.swiper-button-prev.style-1.swiper-button-disabled::after,
.swiper-button-next.style-1.swiper-button-disabled::after {
    color: #e4e4e4;
}

.prev-text {
    position: absolute;
    left: 25px;
}

.case-upper {
    text-transform: uppercase;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.specialization-area.style-1 {
    background-color: var(--primary);
}
.specialization-area.style-1 .specialization-inner {
    display: flex;
}
@media only screen and (max-width: 767px) {
    .specialization-area.style-1 .specialization-inner {
        flex-wrap: wrap;
    }
}
.specialization-area.style-1 .specialization-thumb {
    flex: 1.2;
}
@media only screen and (max-width: 767px) {
    .specialization-area.style-1 .specialization-thumb {
        flex: unset;
    }
}
.specialization-area.style-1 .specialization-thumb img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.specialization-area.style-1 .specialization-content {
    flex: 1;
}
.specialization-area.style-1 .section-title-wrapper {
    max-width: 560px;
    margin-inline-start: 115px;
}
@media only screen and (max-width: 1919px) {
    .specialization-area.style-1 .section-title-wrapper {
        margin-inline-start: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .specialization-area.style-1 .section-title-wrapper {
        margin-inline-start: 15px;
    }
}
.specialization-area.style-1 .section-subtitle {
    color: var(--white);
}
.specialization-area.style-1 .section-title {
    color: var(--white);
}
.specialization-area.style-1 .text {
    color: #999999;
}
.specialization-area.style-1 .text span {
    color: var(--white);
}
.specialization-area.style-1 .list-plus {
    margin-top: 23px;
}
.specialization-area.style-1 .list-plus li {
    color: var(--white);
}
.specialization-area.style-1 .list-plus li::before {
    top: -5px;
}
.img_anim_reveal {
    visibility: unset;
    overflow: hidden;
}
.img_anim_reveal img {
    -o-object-fit: cover;
    object-fit: cover;
    transform-origin: left;
}
.wcf_iconbox.style-1 .thumb {
    margin-bottom: 50px;
}
@media only screen and (max-width: 1919px) {
    .wcf_iconbox.style-1 .thumb {
        margin-bottom: 30px;
    }
}
.wcf_iconbox.style-1 .thumb img {
    height: 75px;
}
@media only screen and (max-width: 1919px) {
    .wcf_iconbox.style-1 .thumb img {
        height: 60px;
    }
}
.wcf_iconbox.style-1 .title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}
.wcf_iconbox.style-1 .text {
    color: var(--primary);
    line-height: 1.37;
    font-size: 16px;
}

/*
--------------------------
Service Style 3
--------------------------
*/
section.service-area2.style-3 {
    background-color: #f5f5f5;
}
.service-area2.style-3 {
    padding-top: 190px;
    padding-bottom: 140px;
}
@media only screen and (max-width: 1199px) {
    .service-area2.style-3 {
        padding-top: 150px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .service-area2.style-3 {
        padding-top: 130px;
        padding-bottom: 70px;
    }
}
.service-area2.style-3 .title-wrapper {
    padding-bottom: 27px;
}
.service-area2.style-3 .service-wrapper {
    display: grid;
    grid-template-columns: 0.53fr 1fr;
    gap: 215px;
}
@media only screen and (max-width: 1919px) {
    .service-area2.style-3 .service-wrapper {
        gap: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .service-area2.style-3 .service-wrapper {
        grid-template-columns: 1fr;
    }
}
.service-area2.style-3 .section-heading {
    max-width: 450px;
}
.service-area2.style-3 .wcf_iconbox .thumb img {
    filter: brightness(0);
}
.service-area2.style-3 .wcf_iconbox .title,
.service-area2.style-3 .section-title {
    color: var(--primary);
}
.service-area2.style-3 .wcf_iconbox .text {
    color: rgb(74, 113, 114);
}
.wcf_iconbox.style-6 {
    flex-basis: 47%;
    padding-inline-start: 50px;
    padding-inline-end: 50px;
    padding: 43px 50px;
    border-inline-start: 1px solid rgb(235, 241, 241);
    border-inline-end: 1px solid rgb(235, 241, 241);
}

/*  */
.faq-area {
    background-color: #fef2ed;
}

.faq-area .faq-area-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 767px) {
    .faq-area .faq-area-inner {
        grid-template-columns: 1fr;
    }
}
.faq-area .section-title {
    max-width: 403px;
}
.faq-area .section-title-wrapper {
    padding-top: 125px;
    padding-bottom: 118px;
}
@media only screen and (max-width: 1919px) {
    .faq-area .section-title-wrapper {
        padding-top: 95px;
        padding-bottom: 88px;
    }
}
@media only screen and (max-width: 991px) {
    .faq-area .section-title-wrapper {
        padding-top: 75px;
        padding-bottom: 68px;
    }
}
@media only screen and (max-width: 767px) {
    .faq-area .section-title-wrapper {
        padding-top: 55px;
        padding-bottom: 48px;
    }
}
.faq-area .accordion-wrapper {
    padding-top: 125px;
    padding-bottom: 123px;
    border-inline-start: 1px solid rgba(9, 21, 66, 0.08);
    display: flex;
    justify-content: flex-end;
    padding-inline-start: 30px;
}
@media only screen and (max-width: 1919px) {
    .faq-area .accordion-wrapper {
        padding-top: 95px;
        padding-bottom: 93px;
    }
}
@media only screen and (max-width: 991px) {
    .faq-area .accordion-wrapper {
        padding-top: 75px;
        padding-bottom: 73px;
    }
}
@media only screen and (max-width: 767px) {
    .faq-area .accordion-wrapper {
        padding-top: 55px;
        padding-bottom: 53px;
        border-top: 1px solid rgba(9, 21, 66, 0.08);
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}
.faq-area .accordion {
    width: 465px;
}
@media only screen and (max-width: 991px) {
    .faq-area .accordion {
        width: 310px;
    }
}
@media only screen and (max-width: 767px) {
    .faq-area .accordion {
        width: 100%;
    }
}
.faq-area .accordion .accordion-button {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.44;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: var(--primary);
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.faq-area .accordion .accordion-button span {
    font-weight: 600;
}
.faq-area .accordion .accordion-button::after {
    content: "+";
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 26px;
    font-weight: 600;
    margin-inline-start: 0;
    margin-inline-end: 10px;
}
.faq-area .accordion .accordion-button:not(.collapsed) {
    pointer-events: none;
}
.faq-area .accordion .accordion-button:not(.collapsed)::after {
    content: "-";
}
.faq-area .accordion .accordion-item {
    background-color: transparent;
    border: none;
    position: relative;
}
.faq-area .accordion .accordion-item:not(:last-child) {
    margin-bottom: 7px;
}
.faq-area .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.44;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-top: 12px;
    padding-bottom: 10px;
    color: var(--secondary);
}
.faq-area .accordion .accordion-body span {
    font-weight: 600;
    color: #f8f5f3;
}

/*
--------------------------------
INTRO STYLES
--------------------------------
*/
.intro-area {
    background-color: #004e50;
    display: grid;
    grid-template-columns: auto 755px;
}
@media only screen and (max-width: 1199px) {
    .intro-area {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 991px) {
    .intro-area {
        grid-template-columns: 1fr;
    }
}
.intro-area .intro-thumb {
    position: relative;
}
@media only screen and (max-width: 991px) {
    .intro-area .intro-thumb {
        text-align: center;
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .intro-area .intro-thumb {
        text-align: start;
    }
}
@media only screen and (max-width: 1199px) {
    .intro-area .intro-thumb img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
@media only screen and (max-width: 991px) {
    .intro-area .intro-thumb img {
        max-width: 350px;
    }
}
.intro-area .intro-thumb .cta-text {
    background-color: var(--primary);
    margin-top: -190px;
    position: relative;
    padding: 25px 45px;
    padding-inline-start: 94px;
}
@media only screen and (max-width: 1919px) {
    .intro-area .intro-thumb .cta-text {
        margin-top: -95px;
    }
}
@media only screen and (max-width: 1199px) {
    .intro-area .intro-thumb .cta-text {
        margin-top: -140px;
    }
}
@media only screen and (max-width: 991px) {
    .intro-area .intro-thumb .cta-text {
        margin-top: -96px;
    }
}
@media only screen and (max-width: 767px) {
    .intro-area .intro-thumb .cta-text {
        margin-top: 0;
    }
}
.intro-area .intro-thumb .cta-text::before {
    content: "";
    position: absolute;
    left: 45px;
    top: 50%;
    height: 1px;
    width: 30px;
    background-color: #337173;
}
@media only screen and (max-width: 991px) {
    .intro-area .intro-thumb .cta-text::before {
        display: none;
    }
}
.intro-area .intro-thumb .cta-text::after {
    content: "";
    position: absolute;
    left: -100px;
    top: 0;
    height: 100%;
    width: 100px;
    background-color: #337173;
}
@media only screen and (max-width: 1199px) {
    .intro-area .intro-thumb .cta-text::after {
        width: 0;
    }
}
.intro-area .intro-thumb .cta-text .text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.66);
    padding-bottom: 5px;
}
.intro-area .intro-thumb .cta-text .phone {
    font-size: 18px;
    color: var(--white);
}
.intro-area .intro-content-wrapper {
    padding-top: 215px;
    padding-left: 200px;
}
@media only screen and (max-width: 1919px) {
    .intro-area .intro-content-wrapper {
        padding-left: 60px;
        padding-top: 260px;
    }
}
@media only screen and (max-width: 1199px) {
    .intro-area .intro-content-wrapper {
        padding-left: 30px;
        padding-top: 150px;
    }
}
@media only screen and (max-width: 767px) {
    .intro-area .intro-content-wrapper {
        padding-left: 15px;
        padding-top: 110px;
    }
}
.intro-area .video-wrapper {
    display: flex;
    max-width: 180px;
    align-items: center;
    gap: 20px;
    padding-bottom: 47px;
}
.intro-area .wc-btn-primary {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    border-radius: 50%;
    padding: 0;
}
.intro-area .wc-btn-primary i {
    color: var(--primary);
    font-size: 18px !important;
}
.intro-area .video-title {
    font-size: 18px;
    color: var(--white);
    line-height: 1.16;
}
.intro-area .video-title span {
    display: block;
    font-weight: 700;
}
.intro-area .title-wrapper {
    position: relative;
    padding-bottom: 63px;
}
.intro-area .title-wrapper .arrow-shape {
    position: absolute;
    right: 50px;
    bottom: 0;
}
.intro-area .text-wrapper {
    padding: 43px 30px;
    background-color: rgba(255, 255, 255, 0.2);
}
.intro-area .text {
    color: var(--white);
}
.intro-area .text span {
    font-weight: 700;
    display: block;
}
.intro-area .scroll-wrapper {
    padding-top: 40px;
}
@media only screen and (max-width: 767px) {
    .intro-area .scroll-wrapper {
        padding-top: 0;
    }
}
.intro-area .intro-content {
    max-width: 845px;
    display: grid;
    grid-template-columns: auto 180px;
    gap: 66px;
    padding-bottom: 8px;
}
.intro-area .intro-title-wrapper {
    position: relative;
    padding-top: 40px;
    border-top: 1px solid #337173;
}
.intro-area .intro-title-wrapper .title {
    font-size: 90px;
    line-height: 1;
    color: var(--white);
    font-weight: 300;
}
@media only screen and (max-width: 1919px) {
    .intro-area .intro-title-wrapper .title {
        font-size: 75px;
    }
}
@media only screen and (max-width: 1199px) {
    .intro-area .intro-title-wrapper .title {
        font-size: 50px;
    }
}
.intro-area .intro-title-wrapper .title span {
    font-weight: 700;
}

.intro-counter {
    display: grid;
    grid-template-columns: 225px auto 100px;
    gap: 80px;
    max-width: 735px;
    padding-top: 40px;
}
@media only screen and (max-width: 1199px) {
    .intro-counter {
        padding-top: 0;
        grid-template-columns: 170px auto 100px;
        gap: 35px;
        max-width: 500px;
    }
}
@media only screen and (max-width: 991px) {
    .intro-counter {
        max-width: 600px;
    }
}
@media only screen and (max-width: 767px) {
    .intro-counter {
        grid-template-columns: 1fr;
    }
}

.intro-count-item.awards {
    background-color: #00e234;
    padding: 60px;
    max-width: 225px;
    position: relative;
    bottom: -60px;
}
@media only screen and (max-width: 1199px) {
    .intro-count-item.awards {
        padding: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .intro-count-item.awards {
        bottom: 0;
    }
}
.intro-count-item.awards::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 60px;
    width: 60px;
    background-color: var(--white);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.intro-count-item.client {
    position: relative;
    padding-top: 60px;
}
@media only screen and (max-width: 767px) {
    .intro-count-item.client {
        padding-top: 0;
    }
}
.intro-count-item.client::before {
    content: "";
    position: absolute;
    right: -60px;
    top: 80px;
    height: 1px;
    width: 183px;
    background-color: #337173;
}
@media only screen and (max-width: 1199px) {
    .intro-count-item.client::before {
        right: 0;
        width: 90px;
    }
}
.intro-count-item.client .title {
    padding-bottom: 10px;
    font-size: 42px;
    color: var(--white);
}
.intro-count-item.client .text {
    max-width: 166px;
}
.intro-count-item .title {
    font-size: 50px;
    line-height: 1;
    position: relative;
    color: var(--white);
    font-weight: 400;
}
.intro-count-item .title span {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 28px;
}
.intro-count-item .thumb-wrapper {
    text-align: end;
}
@media only screen and (max-width: 767px) {
    .intro-count-item .thumb-wrapper {
        text-align: center;
    }
}

.scroll-btn {
    position: relative;
}
.scroll-btn .scroll-play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*  */
/* service area style  */
.services-area .section-title {
    max-width: 298px;
}
section.service-area.section-spacing {
    background-color: #004e50;
}

.services-area .section-title-wrapper {
    margin-top: 57px;
}
@media only screen and (max-width: 1199px) {
    .services-area .section-title-wrapper {
        margin-top: 37px;
    }
}
.services-area .section-title-wrapper .text-wrapper {
    margin-top: 23px;
}
.services-area .section-title-wrapper .text-wrapper .text {
    max-width: 410px;
}
.services-area .section-header {
    max-width: 635px;
}

.services-area-inner {
    display: flex;
    gap: 80px;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .services-area-inner {
        gap: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .services-area-inner {
        flex-direction: column;
    }
}

.services-wrapper-box {
    max-width: 805px;
    display: flex;
}
.services-wrapper-box .counts {
    margin-top: 70px;
    display: flex;
}
@media only screen and (max-width: 1199px) {
    .services-wrapper-box .counts {
        margin-top: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .services-wrapper-box .counts {
        display: none;
    }
}
.services-wrapper-box .counts .item {
    width: 90px;
    height: 90px;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .services-wrapper-box .counts .item {
        width: 60px;
        height: 60px;
    }
}
.services-wrapper-box .counts .item:not(:first-child) {
    margin-inline-start: -20px;
}
@media only screen and (max-width: 767px) {
    .services-wrapper-box .counts .item:not(:first-child) {
        margin-inline-start: -10px;
    }
}
.services-wrapper-box .counts .item:first-child {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    font-size: 18px;
}

.services-wrapper {
    border-inline-start: 1px solid #eef1f2;
}
.services-wrapper .intro-text {
    padding-inline-start: 59px;
    padding-bottom: 38px;
    padding-inline-end: 139px;
}
@media only screen and (max-width: 1399px) {
    .services-wrapper .intro-text {
        padding-inline-end: 59px;
    }
}
@media only screen and (max-width: 1199px) {
    .services-wrapper .intro-text {
        padding-inline-start: 29px;
        padding-inline-end: 29px;
        padding-bottom: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .services-wrapper .intro-text {
        padding-inline-end: 0;
    }
}
.services-wrapper .intro-text span {
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
}
.services-wrapper .service-box {
    border-top: 1px solid #eef1f2;
    padding-top: 58px;
    padding-inline-start: 40px;
    padding-inline-end: 139px;
    display: flex;
    gap: 60px;
}
@media only screen and (max-width: 1399px) {
    .services-wrapper .service-box {
        padding-inline-end: 59px;
    }
}
@media only screen and (max-width: 1199px) {
    .services-wrapper .service-box {
        padding-inline-start: 29px;
        padding-inline-end: 29px;
        padding-top: 28px;
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .services-wrapper .service-box {
        padding-inline-end: 0;
    }
}
.services-wrapper .service-box:not(:last-child) {
    padding-bottom: 39px;
}
@media only screen and (max-width: 1199px) {
    .services-wrapper .service-box:not(:last-child) {
        padding-bottom: 28px;
    }
}
.services-wrapper .service-box .count {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
}
.services-wrapper .service-box .title {
    font-size: 30px;
}
@media only screen and (max-width: 1199px) {
    .services-wrapper .service-box .title {
        font-size: 26px;
    }
}
.services-wrapper .service-box .text-wrapper {
    margin-top: 13px;
}
.services-wrapper .service-box .btn-wrapper {
    margin-top: 22px;
}
.services-wrapper .service-box .wc-btn-normal {
    gap: 10px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary);
}
/*  */
/*
---------------------------
Ideas Style 01
---------------------------
*/
.ideas-area {
    background-color: var(--black);
}
.ideas-area-inner {
    position: relative;
}
.ideas-area-bg {
    position: absolute;
    width: 69%;
    height: 100%;
    inset-inline-end: 665px;
}
@media only screen and (max-width: 1199px) {
    .ideas-area-bg {
        inset-inline-end: 525px;
    }
}
@media only screen and (max-width: 991px) {
    .ideas-area-bg {
        position: static;
        width: 100%;
    }
}
.ideas-area-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.ideas-area .ideas-section-content {
    padding-inline-start: 105px;
    max-width: 665px;
    margin-inline-start: auto;
    padding-top: 113px;
}
@media only screen and (max-width: 1199px) {
    .ideas-area .ideas-section-content {
        padding-inline-start: 55px;
        max-width: 525px;
    }
}
@media only screen and (max-width: 991px) {
    .ideas-area .ideas-section-content {
        padding-inline-start: 40px;
        padding-inline-end: 40px;
        max-width: 100%;
        padding-top: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .ideas-area .ideas-section-content {
        padding-inline-start: 0;
        padding-inline-end: 0;
        padding-top: 60px;
    }
}
.ideas-area .ideas-section-content .title-wrapper {
    margin-bottom: 62px;
}
@media only screen and (max-width: 767px) {
    .ideas-area .ideas-section-content .title-wrapper {
        margin-bottom: 42px;
    }
}
.ideas-area .ideas-section-content .section-title {
    max-width: 436px;
    color: #f8f5f3;
}

.ideas-area .accordion .accordion-button {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.44;
    color: #f8f5f3;
    padding-top: 19px;
    padding-bottom: 17px;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: transparent;
    box-shadow: none;
}
.ideas-area .accordion .accordion-button::after {
    content: "+";
    color: #f8f5f3;
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 22px;
    margin-inline-start: auto;
    margin-inline-end: 0;
}
.ideas-area .accordion .accordion-button:not(.collapsed) {
    pointer-events: none;
}
.ideas-area .accordion .accordion-button:not(.collapsed)::after {
    content: "-";
}
.ideas-area .accordion .accordion-item {
    border-bottom: 1px solid #000;
    background-color: transparent;
}
.ideas-area .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.33;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-bottom: 34px;
    padding-top: 0;
    color: #999999;
}
.ideas-area .accordion .accordion-body span {
    font-weight: 600;
    color: #f8f5f3;
}
/* bannner-2 area style start */
.banner-22 .banner-content {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .banner-22 .banner-content {
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 767px) {
    .banner-22 .banner-content {
        gap: 20px;
    }
}
.banner-22 .banner-content .text {
    max-width: 415px;
    margin-bottom: 53px;
    margin-top: 11px;
}
@media only screen and (max-width: 767px) {
    .banner-22 .banner-content .text {
        margin-bottom: 33px;
    }
}
.banner-22 .banner-content .text p {
    font-size: 18px;
    line-height: 1.44;
}
.banner-22 .banner-content .text p span {
    text-decoration: underline;
    color: var(--primary);
    text-underline-offset: 2px;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}
@media only screen and (max-width: 991px) {
    .banner-22 .title-wrapper {
        flex-basis: 100%;
    }
}
.banner-22 .title-wrapper .title {
    max-width: 658px;
}
@media only screen and (max-width: 1199px) {
    .banner-22 .title-wrapper .title {
        max-width: 460px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-22 .title-wrapper .title {
        max-width: 540px;
    }
}
.banner-22 .title {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.125;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 5px;
    text-underline-offset: 10px;
}
@media only screen and (max-width: 1919px) {
    .banner-22 .title {
        font-size: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-22 .title {
        font-size: 54px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-22 .title {
        font-size: 40px;
        text-decoration-thickness: 3px;
        text-underline-offset: 5px;
    }
}
@media (max-width: 575px) {
    .banner-22 .title {
        font-size: 38px;
    }
}
.banner-22 .arrow-curved {
    width: 163px;
    margin-top: 65px;
    margin-inline-start: 65px;
}
@media only screen and (max-width: 1199px) {
    .banner-22 .arrow-curved {
        margin-inline-start: 0;
        width: 123px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-22 .arrow-curved {
        display: none;
    }
}
.dir-rtl .banner-22 .arrow-curved {
    transform: rotateY(180deg);
}
.banner-22 .title-shape-image {
    width: 45px;
    position: absolute;
    inset-inline-start: -39px;
    top: -36px;
}
section.banner-area.banner-22 {
    padding-top: 183px;
    padding-bottom: 40px;
}

.banner-22 .wc-btn-primary {
    padding: 23px 33px;
    font-size: 13px;
}
.banner-22 .banner-img-wrapper .button-bottom-shape {
    position: absolute;
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
    top: -1px;
}
@media only screen and (max-width: 991px) {
    .banner-22 .banner-img-wrapper .button-bottom-shape {
        width: 260px;
    }
}
.banner-22 .banner-img-wrapper .btn-wrapper {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
}

/* bannner-2 area style end */
/*

/*  */
.blog-area.style-2 .blog-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    margin: 0 -35px;
}
@media only screen and (max-width: 1199px) {
    .blog-area.style-2 .blog-wrapper {
        margin: 0 -25px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area.style-2 .blog-wrapper {
        margin: 0;
        gap: 30px;
    }
}
.blog-area.style-2 .blog-wrapper-area {
    max-width: 990px;
}
.blog-area.style-2 .blog {
    border-left: 1px solid #e2e2e2;
    padding: 0 35px;
}
@media only screen and (max-width: 1199px) {
    .blog-area.style-2 .blog {
        padding: 0 25px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area.style-2 .blog {
        padding: 0;
        margin: 0;
        border: none;
    }
}
.blog-area.style-2 .blog:hover .thumb img {
    transform: scale(1.02);
}
.blog-area.style-2 .blog .thumb img {
    transition: all 0.5s;
}
.blog-area.style-2 .blog .title {
    font-weight: 600;
}
.blog-area.style-2 .section-heading {
    display: flex;
    gap: 53px;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}
@media only screen and (max-width: 991px) {
    .blog-area.style-2 .section-heading {
        flex-direction: row;
        align-items: flex-end;
    }
}
@media only screen and (max-width: 767px) {
    .blog-area.style-2 .section-heading {
        gap: 20px;
    }
}
.blog-area.style-2 .section-heading .text {
    font-size: 18px;
    line-height: 1.44;
    min-width: 290px;
    max-width: 315px;
}
.blog-area.style-2 .section-title {
    max-width: 291px;
}
.blog-area.style-2 .blog-area-inner {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .blog-area.style-2 .blog-area-inner {
        flex-direction: column;
        align-items: normal;
    }
}

/* bannner-7 area style start */
.banner-7.banner-area {
    padding-top: 80px;
    position: relative;
    z-index: 2;
    max-width: 1920px;
    margin: auto;
}
@media only screen and (max-width: 1919px) {
    .banner-7.banner-area {
        padding-top: 490px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-7.banner-area {
        padding-top: 400px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-7.banner-area {
        padding-top: 140px;
    }
}
.banner-7 .banner-area-bg {
    position: absolute;
    width: calc(100% + 315px);
    height: 100%;
    top: 0;
    inset-inline-end: 0;
}
.banner-7 .banner-area-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.banner-7 .features-wrapper {
    display: flex;
    padding: 97px 80px 91px 110px;
    align-items: center;
}
@media only screen and (max-width: 1919px) {
    .banner-7 .features-wrapper {
        padding: 74px 7px 66px 36px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-7 .features-wrapper {
        padding: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-7 .features-wrapper {
        flex-direction: column;
        padding: 40px 15px;
    }
}
.banner-7 .banner-content {
    display: flex;
    position: relative;
    z-index: 1;
    background-color: #202c39;
}
@media only screen and (max-width: 991px) {
    .banner-7 .banner-content {
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 767px) {
    .banner-7 .banner-content {
        margin-top: 150px;
    }
}
.banner-7 .title-box {
    background-color: #293441;
    padding: 74px 53px 74px;
    min-width: 463px;
}
@media only screen and (max-width: 1919px) {
    .banner-7 .title-box {
        min-width: 300px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-7 .title-box {
        min-width: auto;
        padding: 70px 40px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-7 .title-box {
        width: 100%;
        padding: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-7 .title-box {
        padding: 40px 15px;
    }
}
.banner-7 .title-box .content {
    max-width: 300px;
}
@media only screen and (max-width: 1199px) {
    .banner-7 .title-box .content {
        max-width: 240px;
    }
}
.banner-7 .title-box .logo {
    margin-bottom: 26px;
}
.banner-7 .title-box .title {
    font-size: 36px;
    font-weight: 400;
    color: var(--white);
    line-height: 1.11;
    margin-bottom: 19px;
}
@media only screen and (max-width: 1199px) {
    .banner-7 .title-box .title {
        font-size: 26px;
    }
}
.banner-7 .title-box .wc-btn-underline {
    color: var(--white);
    gap: 10px;
    font-size: 12px;
}
.banner-7 .wcf_iconbox:not(:first-child) {
    padding-inline-start: 36px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.0352941176);
    margin-inline-start: 36px;
}
@media only screen and (max-width: 1199px) {
    .banner-7 .wcf_iconbox:not(:first-child) {
        padding-inline-start: 26px;
        margin-inline-start: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-7 .wcf_iconbox:not(:first-child) {
        padding-inline-start: 0;
        margin-inline-start: 0;
        border-inline-start: 0;
        padding-top: 26px;
        margin-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, 0.0352941176);
    }
}
.banner-7 .wcf_iconbox .thumb {
    margin-bottom: 24px;
}
.banner-7 .wcf_iconbox .title {
    font-size: 22px;
    line-height: 1.13;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 21px;
}
.banner-7 .wcf_iconbox .text {
    font-size: 18px;
    line-height: 1.33;
    color: #98a3af;
}

/* bannner-7 area style end */
.service-area {
    padding-top: 150px;
    padding-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
    .service-area {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .service-area {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
.service-area .title-wrapper {
    margin-bottom: 31px;
}
.service-area .service-wrapper {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 211px;
}
@media only screen and (max-width: 1919px) {
    .service-area .service-wrapper {
        gap: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .service-area .service-wrapper {
        grid-template-columns: 330px 1fr;
        gap: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .service-area .service-wrapper {
        grid-template-columns: 1fr;
    }
}
.service-area .services-list {
    max-width: 835px;
}
@media only screen and (max-width: 1199px) {
    .service-area .services-list {
        max-width: 100%;
    }
}
.service-area .services-item {
    display: grid;
    grid-template-columns: auto 232px 290px auto;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
    transition: 0.3s;
    gap: 30px;
    border-bottom: 1px solid #e9eaeb;
}
.service-area .services-item:first-child {
    border-top: 1px solid #e9eaeb;
}
@media only screen and (max-width: 1919px) {
    .service-area .services-item {
        grid-template-columns: auto 160px 215px auto;
    }
}
@media only screen and (max-width: 1199px) {
    .service-area .services-item {
        padding: 35px 0;
    }
}
@media only screen and (max-width: 991px) {
    .service-area .services-item {
        grid-template-columns: 45px 162px 247px 95px;
    }
}
@media only screen and (max-width: 767px) {
    .service-area .services-item {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px 0;
    }
}
.service-area .services-item:hover {
    padding: 50px 30px;
    background-color: #f9f9f9;
}
.service-area .services-item:hover .circle-btn {
    background-color: var(--white);
}
.service-area .count {
    color: #202c39;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.33;
    align-self: flex-start;
    padding-top: 7px;
}
.service-area .title {
    color: #202c39;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.16;
    max-width: 212px;
}
.service-area .text {
    color: #555;
    font-size: 18px;
}
.service-area .circle-btn {
    padding: 24px;
    background-color: #f9f9f9;
    border-radius: 50px;
    margin-left: 32px;
}
@media only screen and (max-width: 767px) {
    .service-area .circle-btn {
        max-width: 65px;
        margin-left: 0;
    }
}
.service-area .circle-btn i {
    transform: rotate(-30deg);
}
section.service-area.pin__area {
    background-color: #fff;
}

section.service-area.pin__area .section-title {
    color: #000;
}
.btn-link-arrow {
    color: #121212;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    gap: 5px;
    position: relative;
    display: inline-block;
}
.btn-link-arrow::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -3px;
    height: 1px;
    width: 100%;
    background-color: #121212;
}
.btn-link-arrow i {
    transform: rotate(-30deg);
}

/* choose area style  */
.choose-area8 {
    background-color: #fff6e4;
    overflow: hidden;
}
.choose-area8 .content-wrap {
    width: 775px;
    padding-inline-start: 123px;
    padding-top: 128px;
    padding-bottom: 123px;
    margin-inline-start: auto;
}
@media only screen and (max-width: 1919px) {
    .choose-area8 .content-wrap {
        width: 690px;
        padding-inline-start: 70px;
        padding-top: 98px;
        padding-bottom: 93px;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .content-wrap {
        width: 100%;
        padding-inline-start: 0;
    }
}
@media only screen and (max-width: 991px) {
    .choose-area8 .content-wrap {
        padding-top: 78px;
        padding-bottom: 73px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area8 .content-wrap {
        padding-top: 58px;
        padding-bottom: 53px;
    }
}
.choose-area8 .choose-area8-inner {
    display: flex;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .choose-area8-inner {
        flex-direction: column;
    }
}
.choose-area8 .section-title {
    max-width: 550px;
}
.choose-area8 .wcf_iconbox .title {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 15px;
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .wcf_iconbox .title {
        font-size: 26px;
    }
}
.choose-area8 .wcf_iconbox .thumb {
    margin-bottom: 38px;
}
.choose-area8 .wcf_iconbox .thumb img {
    height: 60px;
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .wcf_iconbox .thumb img {
        height: 40px;
    }
}
.dir-rtl .choose-area8 .wcf_iconbox .thumb img {
    transform: rotateY(180deg);
}
.choose-area8 .wcf_iconbox .text {
    font-size: 18px;
    line-height: 1.33;
}
.choose-area8 .choose-wrapper {
    display: grid;
    gap: 54px 30px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 276px));
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 210px));
    }
}
@media only screen and (max-width: 991px) {
    .choose-area8 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 310px));
    }
}
@media only screen and (max-width: 767px) {
    .choose-area8 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 235px));
        gap: 45px 30px;
    }
}
@media (max-width: 575px) {
    .choose-area8 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(210px, 330px));
    }
}
.choose-area8 .choose-thumb {
    position: absolute;
    inset-inline-end: 775px;
    height: 100%;
    width: 62%;
}
@media only screen and (max-width: 1919px) {
    .choose-area8 .choose-thumb {
        inset-inline-end: 690px;
        width: 65%;
    }
}
@media only screen and (max-width: 1199px) {
    .choose-area8 .choose-thumb {
        position: static;
        width: 100%;
    }
}
.choose-area8 .choose-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.choose-area8 .section-heading {
    margin-bottom: 48px;
}
@media only screen and (max-width: 991px) {
    .choose-area8 .section-heading {
        margin-bottom: 38px;
    }
}
@media only screen and (max-width: 767px) {
    .choose-area8 .section-heading {
        margin-bottom: 38px;
    }
}
.choose-area8 .section-title {
    margin-top: 27px;
}

/*  */

.project-item.style-1 {
    flex-basis: 48%;
}
@media only screen and (max-width: 1199px) {
    .project-item.style-1 {
        flex-basis: 45%;
    }
}
@media only screen and (max-width: 991px) {
    .project-item.style-1 {
        flex-basis: 100%;
    }
}
.project-item.style-1 .project-thumb {
    margin-bottom: 10px;
}
.project-item.style-1 .project-thumb img {
    width: 100%;
}
.project-item.style-1 .title {
    color: #202c39;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transition: 0.3s;
    text-transform: unset;
    gap: 10px;
    align-items: center;
}
@media only screen and (max-width: 991px) {
    .project-item.style-1 .title {
        font-size: 20px;
    }
}
.project-item.style-1 .title i {
    font-size: 14px;
    transform: rotate(-45deg);
}
.dir-rtl .project-item.style-1 .title i {
    transform: rotate(-135deg);
}
.project-item.style-1 .title:hover {
    color: var(--primary);
}
.project-item.style-1 .text {
    color: var(--secondary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.project-area.style-1 .project-inner {
    display: flex;
    gap: 130px;
    padding-top: 162px;
    padding-bottom: 140px;
}
@media only screen and (max-width: 1199px) {
    .project-area.style-1 .project-inner {
        gap: 80px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .project-area.style-1 .project-inner {
        gap: 40px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .project-area.style-1 .project-inner {
        padding-top: 30px;
        padding-bottom: 30px;
        flex-wrap: wrap;
        gap: 50px;
    }
}
.project-area.style-1 .project-inner .section-text {
    margin-top: 40px;
    color: var(--secondary);
    font-size: 18px;
    font-weight: 400;
}
@media only screen and (max-width: 767px) {
    .project-area.style-1 .project-inner .section-text {
        margin-top: 20px;
    }
}
.project-area.style-1 .project-inner .btn-wrapper {
    margin-top: 45px;
}
@media only screen and (max-width: 991px) {
    .project-area.style-1 .project-inner .btn-wrapper {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .project-area.style-1 .project-inner .btn-wrapper {
        margin-top: 20px;
    }
}
.project-area.style-1 .project-wrapper {
    display: flex;
    gap: 50px 25px;
    flex-wrap: wrap;
}
@media only screen and (max-width: 991px) {
    .project-area.style-1 .project-wrapper {
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .project-area.style-1 .project-wrapper {
        gap: 20px;
        flex-wrap: wrap;
    }
}
.project-area.style-1 .project-section-content {
    max-width: 340px;
}
.project-area.style-1 .project-list.style-1 {
    flex-basis: 100%;
}
.project-area.style-1 .section-title span {
    color: #c5c8cc;
    font-style: normal;
}
.project-area.style-1 .section-text {
    margin-top: 35px;
}

/* services area style  */
.services-area9 {
    padding-top: 128px;
    padding-bottom: 128px;
}
.services-area9 .section-title {
    max-width: 572px;
    margin: 0 auto;
    font-size: 70px;
    font-family: var(--font_recoleta);
    font-weight: 500;
    line-height: 1;
}
.subtitle-wrapper.has_fade_anim {
    margin-bottom: 25px;
}
.services-area9 .section-heading {
    text-align: center;
    margin-bottom: 57px;
}
.services-area9 .services-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin: 0 -75px;
}
@media only screen and (max-width: 1199px) {
    .services-area9 .services-wrapper {
        margin: 0 -35px;
    }
}
@media only screen and (max-width: 991px) {
    .services-area9 .services-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}
.services-area9 .wcf_iconbox {
    border-inline-start: 1px solid #e6e3dc;
    border-top: 1px solid #e6e3dc;
    padding-top: 51px;
    padding-inline-start: 74px;
    padding-inline-end: 75px;
}
@media only screen and (max-width: 1199px) {
    .services-area9 .wcf_iconbox {
        padding-inline-start: 34px;
        padding-inline-end: 35px;
        padding-top: 31px;
    }
}
@media only screen and (max-width: 991px) {
    .services-area9 .wcf_iconbox {
        padding-bottom: 35px;
    }
}
.services-area9 .wcf_iconbox .thumb {
    margin-bottom: 46px;
}
@media only screen and (max-width: 1199px) {
    .services-area9 .wcf_iconbox .thumb {
        margin-bottom: 31px;
    }
}
.services-area9 .wcf_iconbox .thumb img {
    height: 65px;
}
.services-area9 .wcf_iconbox .title {
    font-size: 30px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 1199px) {
    .services-area9 .wcf_iconbox .title {
        font-size: 26px;
    }
}
.services-area9 .wcf_iconbox .text {
    font-size: 18px;
    line-height: 1.44;
    margin-bottom: 55px;
}
@media only screen and (max-width: 1199px) {
    .services-area9 .wcf_iconbox .text {
        margin-bottom: 35px;
    }
}
.services-area9 .wcf_iconbox .wc-btn-underline {
    font-size: 12px;
    font-weight: 500;
}
.services-area9 .section-bottom {
    text-align: center;
    margin-top: 58px;
}
@media only screen and (max-width: 767px) {
    .services-area9 .section-bottom {
        margin-top: 0;
    }
}
.services-area9 .section-bottom .wc-btn-underline {
    font-size: 14px;
    font-weight: 600;
    gap: 5px;
}
.services-area9 .section-bottom .wc-btn-underline i {
    transform: rotate(-45deg);
}
.fix {
    overflow: hidden;
}

/* team area style  */
.team-area1 .counts {
    display: flex;
}
@media only screen and (max-width: 991px) {
    .team-area1 .counts {
        display: none;
    }
}
.team-area1 .counts .item {
    width: 90px;
    height: 90px;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .team-area1 .counts .item {
        width: 60px;
        height: 60px;
    }
}
.team-area1 .counts .item:not(:first-child) {
    margin-inline-start: -20px;
}
@media only screen and (max-width: 767px) {
    .team-area1 .counts .item:not(:first-child) {
        margin-inline-start: -10px;
    }
}
.team-area1 .counts .item:first-child {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    font-size: 18px;
}
.team-area1 .section-title-wrapper {
    display: flex;
    gap: 80px;
    justify-content: space-between;
    flex: 0 1 1075px;
}
@media only screen and (max-width: 767px) {
    .team-area1 .section-title-wrapper {
        flex: auto;
        flex-direction: column;
        gap: 20px;
    }
}
.team-area1 .section-title-wrapper .text {
    max-width: 393px;
}
.team-area1 .section-title-wrapper .text span {
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
}
.team-area1 .section-title {
    max-width: 337px;
}
.team-area1 .section-header {
    display: flex;
    gap: 80px;
    justify-content: space-between;
    margin-bottom: 53px;
    max-width: unset;
}
@media only screen and (max-width: 991px) {
    .team-area1 .section-header {
        margin-bottom: 33px;
    }
}
.team-area1 .team-wrapper {
    display: grid;
    gap: 40px 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media only screen and (max-width: 1399px) {
    .team-area1 .team-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.team:hover .team-thumb img {
    transform: scale(1.02);
}
.team .name {
    font-size: 30px;
}
@media only screen and (max-width: 1199px) {
    .team .name {
        font-size: 26px;
    }
}
.team .post {
    font-size: 18px;
    margin-top: 13px;
    padding-bottom: 15px;
    position: relative;
}
@media only screen and (max-width: 1919px) {
    .team .post {
        margin-top: 8px;
        padding-bottom: 10px;
    }
}
.team .post:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 2px;
    background-color: #d9d9d9;
    bottom: 0;
    inset-inline-start: 0;
}
.team .team-thumb img {
    transition: all 0.5s;
}
.team .team-content {
    margin-top: 43px;
}
@media only screen and (max-width: 1919px) {
    .team .team-content {
        margin-top: 33px;
    }
}

/* blog area style  */
.blog-area .counts {
    display: flex;
    margin-top: 53px;
}
@media only screen and (max-width: 991px) {
    .blog-area .counts {
        display: none;
    }
}
.blog-area .counts .item {
    width: 90px;
    height: 90px;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .blog-area .counts .item {
        width: 60px;
        height: 60px;
    }
}
.blog-area .counts .item:not(:first-child) {
    margin-inline-start: -20px;
}
@media only screen and (max-width: 767px) {
    .blog-area .counts .item:not(:first-child) {
        margin-inline-start: -10px;
    }
}
.blog-area .counts .item:first-child {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    font-size: 18px;
}
.blog-area .blog-wrapper > *:last-child .blog {
    padding-bottom: 0;
}
.blog-area .blog-wrapper-area {
    max-width: 770px;
}
@media only screen and (max-width: 991px) {
    .blog-area .blog-wrapper-area {
        max-width: 100%;
    }
}
.blog-area .blog {
    border-top: 1px solid #eef1f2;
    padding-top: 45px;
    padding-bottom: 40px;
}
@media only screen and (max-width: 1199px) {
    .blog-area .blog {
        padding-top: 35px;
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .blog {
        padding-top: 25px;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-area .section-heading {
        display: flex;
        gap: 0 50px;
        flex-direction: row;
        align-items: flex-end;
    }
}
.blog-area .section-heading .text {
    font-size: 18px;
    line-height: 1.44;
    min-width: 290px;
    max-width: 315px;
}
.blog-area .section-heading .text-wrapper {
    margin-top: 23px;
}
.blog-area .section-title {
    max-width: 300px;
}
.blog-area .blog-area-inner {
    display: flex;
    gap: 30px 80px;
    justify-content: space-between;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .blog-area .blog-area-inner {
        flex-direction: column;
        align-items: normal;
    }
}
.blog {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 27px;
    padding-bottom: 20px;
}
@media only screen and (max-width: 991px) {
    .blog {
        gap: 30px;
    }
}
@media (max-width: 575px) {
    .blog {
        flex-direction: column-reverse;
        gap: 20px;
    }
}
.blog:hover .wc-btn-icon i {
    transform: rotate(0);
}
.dir-rtl .blog:hover .wc-btn-icon i {
    transform: rotate(-180deg);
}
.blog .content-wrapper {
    flex-basis: 63%;
}
.blog .content-wrapper .btn-wrapper {
    margin-top: 23px;
}
.blog .content-wrapper .text {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;
}
.blog .author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.blog .author .avatar img {
    width: 120px;
    height: 120px;
    min-width: 50px;
    border-radius: 50%;
}
.blog .author .meta-title {
    font-size: 14px;
    display: inline-block;
    margin-top: 4px;
}
.blog .author .name {
    font-size: 18px;
    white-space: nowrap;
}
.blog .tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    background-color: rgba(9, 21, 66, 0.05);
    padding: 4px 7px;
    display: inline-block;
    border-radius: 5px;
}
.blog .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 11px;
}
.blog .date {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
}
.blog .has-left-line {
    padding-inline-start: 25px;
}
.blog .has-left-line:before {
    width: 15px;
    color: var(--black);
}
.blog .title {
    font-size: 30px;
    line-height: 1;
    margin-top: 18px;
}
@media only screen and (max-width: 1399px) {
    .blog .title {
        font-size: 24px;
    }
}
@media only screen and (max-width: 991px) {
    .blog .title {
        font-size: 22px;
    }
}
.blog .title span {
    font-weight: 600;
}
.blog .wc-btn-normal {
    font-size: 16px;
    gap: 12px;
    font-weight: 500;
    color: var(--secondary);
    text-transform: capitalize;
}

/* service details intro area style start */
.service-details-intro-area {
    position: relative;
}
@media (max-width: 575px) {
    .service-details-intro-area {
        background-color: #f1f6f6;
    }
}
.service-details-intro-area .details-intro-area-top {
    padding-top: 188px;
}
@media only screen and (max-width: 1919px) {
    .service-details-intro-area .details-intro-area-top {
        padding-top: 158px;
    }
}
@media only screen and (max-width: 991px) {
    .service-details-intro-area .details-intro-area-top {
        padding-top: 138px;
    }
}
@media only screen and (max-width: 767px) {
    .service-details-intro-area .details-intro-area-top {
        padding-top: 118px;
    }
}
.service-details-intro-area .details-intro-content {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
@media (max-width: 575px) {
    .service-details-intro-area .details-intro-content {
        flex-direction: column;
    }
}
.service-details-intro-area .text-wrapper .text {
    font-size: 18px;
    line-height: 1.33;
    margin-bottom: 49px;
    max-width: 270px;
}
@media only screen and (max-width: 1199px) {
    .service-details-intro-area .text-wrapper .text {
        margin-bottom: 30px;
    }
}
@media (max-width: 575px) {
    .service-details-intro-area .text-wrapper .text {
        max-width: 100%;
    }
}
.service-details-intro-area .section-title-wrapper {
    display: flex;
    gap: 80px;
}
@media only screen and (max-width: 1199px) {
    .service-details-intro-area .section-title-wrapper {
        gap: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .service-details-intro-area .section-title-wrapper {
        gap: 20px;
        flex-direction: column;
    }
}
.service-details-intro-area .subtitle-wrapper {
    width: 250px;
    margin-top: 18px;
}
.service-details-intro-area .wc-btn-underline {
    font-size: 16px;
    font-weight: 500;
}
.service-details-intro-area .text-box {
    background-color: #f1f6f6;
    position: relative;
    padding-top: 243px;
    padding-bottom: 60px;
    padding-inline-end: 115px;
    padding-inline-start: 60px;
}
@media only screen and (max-width: 1919px) {
    .service-details-intro-area .text-box {
        padding-top: 163px;
    }
}
@media only screen and (max-width: 1399px) {
    .service-details-intro-area .text-box {
        padding-top: 143px;
        padding-bottom: 40px;
        padding-inline-end: 40px;
        padding-inline-start: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .service-details-intro-area .text-box {
        padding-top: 123px;
    }
}
@media only screen and (max-width: 991px) {
    .service-details-intro-area .text-box {
        padding-top: 173px;
    }
}
@media only screen and (max-width: 767px) {
    .service-details-intro-area .text-box {
        padding-inline-end: 0;
        padding-top: 153px;
    }
}
@media (max-width: 575px) {
    .service-details-intro-area .text-box {
        padding: 0;
        background-color: transparent;
    }
}
.service-details-intro-area .details-intro-inner {
    position: relative;
    z-index: 1;
}
.service-details-intro-area .shape-1 {
    position: absolute;
    top: -88px;
    inset-inline-end: -78px;
    z-index: 1;
    width: 286px;
}
@media only screen and (max-width: 1919px) {
    .service-details-intro-area .shape-1 {
        width: 186px;
    }
}
@media only screen and (max-width: 767px) {
    .service-details-intro-area .shape-1 {
        width: 116px;
        top: -18px;
        inset-inline-end: -38px;
    }
}
.dir-rtl .service-details-intro-area .shape-1 {
    transform: rotateY(180deg);
}
.service-details-intro-area .details-intro-thumb {
    margin-top: -221px;
    margin-inline-start: -204px;
    position: relative;
}
@media (max-width: 575px) {
    .service-details-intro-area .details-intro-thumb {
        margin-top: 30px;
        margin-inline-start: 0;
    }
}
.service-details-intro-area .details-intro-thumb:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 69, 71, 0.2);
    top: 0;
    inset-inline-start: 0;
}
.service-details-intro-area .details-intro-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.service-details-intro-area .social-links {
    display: flex;
    align-items: center;
    gap: 20px;
    transform: rotate(90deg);
}
.dir-rtl .service-details-intro-area .social-links {
    transform: rotate(-90deg);
}
.service-details-intro-area .social-links .text {
    font-size: 16px;
    font-weight: 550;
    text-transform: uppercase;
    margin: 0;
}
.service-details-intro-area .social-links .social-icons {
    gap: 20px;
}
.service-details-intro-area .social-links .social-icons li a:hover {
    color: var(--primary);
}
.service-details-intro-area .social-links-position {
    position: absolute;
    inset-inline-end: -180px;
    bottom: -70px;
    z-index: 2;
}
@media only screen and (max-width: 1919px) {
    .service-details-intro-area .social-links-position {
        inset-inline-end: -155px;
    }
}
@media only screen and (max-width: 1199px) {
    .service-details-intro-area .social-links-position {
        bottom: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .service-details-intro-area .social-links-position {
        display: none;
    }
}

/*
-----------------------------
FEATURES STYLES 9
-----------------------------
*/
.feature-area.style-9 .feature-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 991px) {
    .feature-area.style-9 .feature-inner {
        grid-template-columns: 1fr;
    }
}
.feature-area.style-9 .feature-inner .section-title {
    color: var(--white);
}
.feature-area.style-9 .feature-inner .cf_image {
    height: 100%;
}
.feature-area.style-9 .feature-inner .feature-thumb img {
    width: 100%;
    border-top-left-radius: 20px;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.feature-area.style-9 .feature-inner .content-wrap {
    border-radius: 0 20px 20px 0px;
    background: var(--primary);
    padding-left: 110px;
    padding-top: 110px;
    padding-right: 180px;
    padding-bottom: 110px;
}
@media only screen and (max-width: 1919px) {
    .feature-area.style-9 .feature-inner .content-wrap {
        padding-right: 50px;
        padding-left: 80px;
    }
}
@media only screen and (max-width: 1199px) {
    .feature-area.style-9 .feature-inner .content-wrap {
        padding-top: 50px;
        padding-left: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area.style-9 .feature-inner .content-wrap {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .feature-area.style-9 .feature-inner .content-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
}
.feature-area.style-9 .section-heading {
    margin-bottom: 60px;
}
@media only screen and (max-width: 991px) {
    .feature-area.style-9 .section-heading {
        margin-bottom: 40px;
    }
}
.feature-area.style-9 .feature-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
}
@media only screen and (max-width: 991px) {
    .feature-area.style-9 .feature-wrapper {
        gap: 40px;
    }
}

.feature-area.style-9.style-3 .feature-inner {
    grid-template-columns: 0.9fr 1.123fr;
}
@media only screen and (max-width: 991px) {
    .feature-area.style-9.style-3 .feature-inner {
        grid-template-columns: 1fr;
    }
}
.feature-area.style-9.style-3 .feature-thumb img {
    width: unset;
    border-top-left-radius: 0;
}
.feature-area.style-9.style-3 .content-wrap {
    border-radius: 0;
    padding-bottom: 120px;
}
@media only screen and (max-width: 1199px) {
    .feature-area.style-9.style-3 .content-wrap {
        padding-bottom: 50px;
    }
}
.feature-area.style-9.style-3 .wcf_iconbox.style-9 .text {
    color: #999999;
    max-width: 245px;
}

.feature-area.graph-area .feature-inner {
    grid-template-columns: 0.82fr 1fr;
}
@media only screen and (max-width: 991px) {
    .feature-area.graph-area .feature-inner {
        grid-template-columns: 1fr;
    }
}
.feature-area.style-9 .graph-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feature-area.style-9 .graph-wrapper .graph-btn-wrapper {
    margin-bottom: 60px;
    gap: 25px;
}
.feature-area.style-9 .graph-wrapper .nav-link {
    color: #999;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    text-transform: capitalize;
    padding: 7px 15px;
}
.feature-area.style-9 .graph-wrapper .nav-link.active {
    color: #2cc6ce !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    border-radius: 10px;
    background: #fff;
    padding: 7px 15px;
}

.exclusive-item {
    align-items: center;
    border: 1px solid #cac7f6;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    max-width: 400px;
    transition: all ease 0.3s;
    display: flex;
    flex-wrap: wrap;
}
.exclusive-item:hover {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(52, 69, 199, 0.4);
}
.exclusive-item .exclusive-thumb {
    width: 60px;
}
.exclusive-item .exclusive-thumb img {
    width: 100%;
}
.exclusive-item .exclusive-content {
    width: calc(100% - 60px);
    padding-left: 20px;
}
.exclusive-item .exclusive-content .title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 28px;
}

.feature-1-thumb {
    text-align: left;
    margin-top: 170px;
    position: relative;
}
@media screen and (max-width: 1310px) {
    .feature-1-thumb img {
        max-width: 700px;
    }
}
@media screen and (max-width: 1200px) {
    .feature-1-thumb img {
        max-width: 650px;
    }
}
@media screen and (min-width: 1650px) {
    .feature-1-thumb.ex-feature img {
        transform: translateX(80px);
    }
}
.feature-1-thumb .main-thumb {
    transition: all ease 0.5s;
}
.feature-1-thumb .layer {
    transition: all ease 0.5s;
    position: absolute;
    top: 6px;
    left: 6px;
}
.feature-1-thumb .layer img {
    max-width: 904px;
}
@media screen and (max-width: 1310px) {
    .feature-1-thumb .layer {
        top: -3px;
        left: 3px;
    }
    .feature-1-thumb .layer img {
        max-width: 680px;
    }
}
@media screen and (max-width: 1200px) {
    .feature-1-thumb .layer img {
        max-width: 630px;
    }
}
.feature-1-thumb:hover .main-thumb {
    transform: skeW(-9deg, 6deg);
}
.feature-1-thumb:hover .layer:nth-child(5) {
    transform: translate(24px, -160px) skeW(-9deg, 6deg);
}
.feature-1-thumb:hover .layer:nth-child(4) {
    transform: translate(18px, -120px) skeW(-9deg, 6deg);
}
.feature-1-thumb:hover .layer:nth-child(3) {
    transform: translate(12px, -80px) skeW(-9deg, 6deg);
}
.feature-1-thumb:hover .layer:nth-child(2) {
    transform: translate(6px, -40px) skeW(-9deg, 6deg);
}
@media (max-width: 991px) {
    .feature-1-thumb .layer:nth-child(5) {
        transform: translate(24px, -120px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(4) {
        transform: translate(18px, -90px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(3) {
        transform: translate(12px, -60px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(2) {
        transform: translate(6px, -30px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb:hover .layer,
    .feature-1-thumb:hover .main-thumb {
        transform: translate(0, 0) skeW(0, 0) !important;
    }
}
@media (max-width: 767px) {
    .feature-1-thumb .main-thumb img {
        width: 100%;
    }
    .feature-1-thumb .layer {
        left: 1%;
        top: 1%;
    }
    .feature-1-thumb .layer img {
        width: 98%;
    }
}
@media screen and (max-width: 499px) {
    .feature-1-thumb {
        margin-top: 90px;
    }
    .feature-1-thumb .layer:nth-child(5) {
        transform: translate(12px, -60px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(4) {
        transform: translate(9px, -45px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(3) {
        transform: translate(6px, -30px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb .layer:nth-child(2) {
        transform: translate(3px, -15px) skeW(-9deg, 6deg);
    }
    .feature-1-thumb:hover .layer,
    .feature-1-thumb:hover .main-thumb {
        transform: translate(0, 0) skeW(0, 0) !important;
    }
}
.section-header.left-style {
    text-align: left;
    margin-left: 0;
    max-width: 100%;
}

/*History Section Starts Here*/
.history-slider .owl-stage-outer {
    padding-top: 20px;
}
section.history-section.padding-top.pt-lg-0.padding-bottom-2 {
    padding: 75px 0 75px;
    background-color: #f0f5fc;
}
.history-item {
    text-align: center;
}
.history-item .history-content {
    margin: 0 auto 52px;
    position: relative;
}
.history-item .history-content .content {
    padding: 35px 15px;
    max-width: 220px;
    border-radius: 20px;
    box-shadow: 3.629px 14.554px 30.72px 1.28px rgba(24, 37, 163, 0.2);
    background: #ffffff;
    margin: 0 auto 52px;
    transition: all ease 0.3s;
    opacity: 0;
    visibility: hidden;
}
.history-item .history-content::before {
    height: 28px;
    width: 2px;
    background: #21959b;
    left: 50%;
    top: calc(100% + 7px);
    transition: all ease 0.3s;
    opacity: 0;
    visibility: hidden;
}
.history-item .history-content::before,
.history-item .history-content::after {
    position: absolute;
    content: "";
}
.anime-item-2::after,
.anime-item-2::before,
.anime-item-2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.history-item .history-content::after {
    width: 100%;
    height: 2px;
    background: #234151;
    top: calc(100% + 52px);
    left: 0;
}
.history-item .history-content .title {
    font-size: 18px;
    margin: 0;
    margin-bottom: 4px;
    font-weight: 600;
}
.history-item .history-content p {
    margin-top: 0;
    font-size: 14px;
}
.history-item .history-thumb {
    padding-top: 23px;
    position: relative;
    cursor: pointer;
}

.owl-item.center .history-item .history-content::before,
.owl-item.center .history-item .history-content .content {
    opacity: 1;
    visibility: visible;
}

.anime-item-2 {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #234151;
    z-index: 1;
    top: 0;
    left: 50%;
}

@keyframes outer-ripple {
    0% {
        transform: scale(1);
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-filter: alpha(opacity=50);
    }
    80% {
        transform: scale(1.5);
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: scale(2.5);
        -moz-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
    }
    100% {
        transform: scale(3.5);
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: scale(3.5);
        -moz-transform: scale(3.5);
        -ms-transform: scale(3.5);
        -o-transform: scale(3.5);
    }
}
@keyframes inner-ripple {
    0% {
        transform: scale(1);
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    30% {
        transform: scale(2);
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
    }
    100% {
        transform: scale(2.5);
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: scale(2.5);
        -moz-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
    }
}
.anime-item-2::after,
.anime-item-2::before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #21959b;
    box-shadow: 3.694px -4.728px 38px 0px #21959b;
    margin-left: -5px;
    margin-top: -5px;
    cursor: pointer;
}
.anime-item-2::before {
    animation: inner-ripple 2000ms linear infinite;
}
.anime-item-2::after {
    animation: outer-ripple 2000ms linear infinite;
}

/*  */
/* .feature-thumb-20 {
  margin-bottom: -100px;
  margin-top: -80px;
} */

.feature-content-20 {
    padding: 60px 15px 60px 0;
}
.feature-content-20 .title {
    margin-bottom: 27px;
}
.feature-content-20 .feat-nav a {
    background: rgba(255, 255, 255, 0.2);
}
.feature-content-20 .feat-nav a:hover,
.feature-content-20 .feat-nav a.active {
    background: linear-gradient(
        -103deg,
        #28b2b9 0%,
        #21959b 35%,
        #234151 76%,
        #2cc6ce 100%
    );
}
/* .cl-white * {
  color: #ffffff;
} */

.feature-content-icon-20 {
    width: 150px;
    height: 110px;
}

.feature-wrapper-bg-20 {
    border-radius: 20px;
    margin-top: 80px;
    margin-bottom: 100px;
    background-image: url(../imgs/feature-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
@media (max-width: 991px) {
    .feature-wrapper-bg-20 {
        margin: 0;
    }
    .feature-wrapper-bg-20 .feature-content-20 {
        padding: 60px 30px;
    }
}
@media (max-width: 575px) {
    .feature-wrapper-bg-20 .feature-content-20 {
        padding: 30px 15px;
    }
}

.how-slider-wrapper {
    position: relative;
}
.how-slider-wrapper .dots-2 {
    position: absolute;
    left: 0;
    justify-content: center;
    width: 100%;
    bottom: 20%;
    z-index: 9;
    margin: -5px;
}
.how-slider-wrapper .dots-2 .owl-dot {
    border: 0;
    margin: 0;
}
.how-slider-wrapper .dots-2 .owl-dot.active span {
    background: #ee4730;
}

.how-item-20 {
    display: flex;
    align-items: center;
    border-radius: 50%;
    width: 230px;
    position: relative;
    z-index: 9;
    margin-left: auto;
}
.how-item-20 .how-thumb {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    box-shadow: 16.773px 10.893px 43px 0px rgba(60, 49, 172, 0.39);
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.how-item-20 .how-thumb img {
    max-width: 100%;
}
.how-item-20 .title {
    font-size: 18px;
    padding-right: 12px;
    width: calc(100% - 106px);
    margin: 0;
}
@media (min-width: 992px) {
    .how-item-20:nth-child(1) {
        margin-bottom: 20px;
        margin-right: -85px;
    }
    .how-item-20:nth-child(2) {
        margin-right: -145px;
    }
    .how-item-20:nth-child(3) {
        margin-right: -235px;
    }
}
@media (min-width: 1200px) {
    .how-item-20:nth-child(1) {
        margin-bottom: 20px;
        margin-right: -105px;
    }
    .how-item-20:nth-child(2) {
        margin-right: -185px;
    }
    .how-item-20:nth-child(3) {
        margin-right: -325px;
    }
}

@media (max-width: 991px) {
    .how-item-wrapper-20 {
        display: flex;
        flex-wrap: wrap;
    }
    .how-item-wrapper-20 .how-item-20 {
        margin: 0;
        width: unset;
        padding: 0 15px 20px;
        flex-direction: row-reverse;
    }
    .how-item-wrapper-20 .how-item-20 .title {
        padding: 0 0 0 12px;
    }
    .how-item-wrapper-20 .how-item-20 .how-thumb {
        width: 60px;
        height: 60px;
    }
    .how-item-wrapper-20 .how-item-20 .how-thumb img {
        width: 35px;
        height: 35px;
        -o-object-fit: contain;
        object-fit: contain;
    }
    .how-item-wrapper-20 .how-item-20 .title {
        width: unset;
    }
}
.feat-nav a {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 5px;
    transition: background-color 0.3s ease;
    display: inline-block; /* Ensure it's inline */
}

.feat-nav a:hover {
    background-color: #fff;
    color: #ffffff;
}

/* Ensure the Prev and Next buttons are visible */
.feat-prev {
    margin-left: 10px;
}

.feat-next {
    margin-right: 10px;
}

.feature-area17 {
    position: relative;
}
.feature-area17 .feature-wrapper {
    width: 1275px;
    max-width: 1275px;
    margin-left: auto;
    background-color: rgb(240, 247, 243);
    display: grid;
    grid-template-columns: 534px 1fr;
    padding-bottom: 0;
    gap: 70px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .feature-area17 .feature-wrapper {
        position: unset;
        padding: 0;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-wrapper {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 30px;
    }
}
.feature-area17 .feature-thumb {
    position: relative;
}
.feature-area17 .feature-thumb::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 81, 83, 0.4);
}
.feature-area17 .section-title {
    font-weight: 600;
}
.feature-area17 .feature-content {
    max-width: 370px;
    padding-top: 70px;
}
@media only screen and (max-width: 1199px) {
    .feature-area17 .feature-content {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-content {
        max-width: 100%;
        padding-left: 40px;
        padding-top: 0;
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .feature-area17 .feature-content {
        padding-left: 20px;
    }
}
.feature-area17 .title-wrapper {
    padding-bottom: 25px;
}
.feature-area17 .cf_text {
    padding-bottom: 53px;
}
@media only screen and (max-width: 991px) {
    .feature-area17 .cf_text {
        padding-bottom: 22px;
    }
}
.feature-area17 .text span {
    text-decoration: underline;
    font-weight: 600;
}
.feature-area17 .feature-list-wrapper {
    position: relative;
}
.feature-area17 .feature-list-wrapper::before {
    position: absolute;
    content: "";
    right: 0;
    top: -100px;
    height: 120%;
    width: 1px;
    background-color: #d8e6e3;
}
.feature-area17 .feature-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-list {
        gap: 25px;
    }
}
.feature-area17 .feature-item {
    display: flex;
    gap: 30px;
    padding-bottom: 40px;
    padding-inline-start: 60px;
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-item {
        padding-bottom: 20px;
        padding-inline-start: 20px;
    }
}
.feature-area17 .feature-item:first-child {
    padding-top: 70px;
}
@media only screen and (max-width: 1199px) {
    .feature-area17 .feature-item:first-child {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-item:first-child {
        padding-top: 20px;
    }
}
.feature-area17 .feature-item:last-child {
    padding-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .feature-area17 .feature-item:last-child {
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area17 .feature-item:last-child {
        padding-bottom: 20px;
    }
}
.feature-area17 .feature-item:not(:last-child) {
    border-bottom: 1px solid #d8e6e3;
}
.feature-area17 .feature-item .title {
    font-size: 24px;
    line-height: 1.16;
    max-width: 240px;
    font-weight: 500;
}
@media only screen and (max-width: 767px) {
    .feature-area17 .feature-item .title {
        font-size: 20px;
    }
}
.feature-area17 .sub-title {
    padding-top: 5px;
    color: var(--primary);
    font-weight: 600;
}
.feature-area17 .x-shape {
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 991px) {
    .feature-area17 .x-shape {
        max-width: 30%;
    }
}
.feature-area17 .wc-btn-primary {
    padding: 20px 28.5px;
}
.button-3 {
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid #cac7f6;
    color: #33406a;
    padding: 15px 35px;
}
.button-3.active,
.button-3:hover {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(-65deg, #fff 0%, #fff 100%);
    box-shadow: 0px 17px 24px 0px #234151;
}
.button-3.active:hover {
    background: transparent;
    border: 1px solid #cac7f6;
    color: #fff;
    box-shadow: none;
}
.button-3 i {
    margin-left: 5px;
}
.button-3.long-light {
    padding: 10px 30px;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 16px;
}
/* section#feature img{
max-width: unset;
} */
/*  */
.to-access-item {
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 3.871px 15.525px 68px 0px #2cc6ce;
    padding: 60px 15px;
    text-align: center;
    margin: 0 auto 30px;
}

.to-access-item .to-access-thumb span::after {
    width: 13px;
    height: 13px;
    left: auto;
    bottom: auto;
    right: 5px;
    top: 5px;
}
.to-access-item .to-access-thumb span::after {
    position: absolute;
    content: "";
}
@media (max-width: 575px) {
    .to-access-item {
        max-width: 350px;
    }
}
.to-access-item .to-access-thumb {
    margin: 0 auto 28px;
    width: 90px;
    height: 90px;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
}
.to-access-item .to-access-thumb span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #c2c6f7;
    -webkit-animation: rotate2 8s linear infinite;
    -webkit-animation-play-state: paused;
}
.to-access-item .to-access-thumb span::before,
.to-access-item .to-access-thumb span::after {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(0deg, #21959b 0%, #2cc6ce 100%);
    box-shadow: 1.21px 4.851px 6.72px 0.28px #28b2b9;
    left: 5px;
    bottom: 5px;
}
.to-access-item .to-access-thumb span::after {
    width: 13px;
    height: 13px;
    left: auto;
    bottom: auto;
    right: 5px;
    top: 5px;
}
.to-access-item .to-access-thumb .thumb {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(219, 218, 255, 0.5);
    background: #ffffff;
}
.to-access-item .to-access-thumb .thumb img {
    width: 100%;
}
.to-access-item.active .to-access-thumb span,
.to-access-item:hover .to-access-thumb span {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
}
@keyframes rotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(1440deg);
    }
}
.to-access-item .to-access-thumb span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.to-access-item.style-two {
    box-shadow: none;
    border: 1px solid #beedf0;
    background: transparent;
}

/* .to-access-section {
    background-image: url(../imgs/to-access-bg.webp) !important;
    background-size: cover;
    background-repeat: no-repeat;
} */
.to-access-item .to-access-thumb span::before {
    position: absolute;
    content: "";
}
.to-access-item .to-access-thumb {
    display: flex;
    flex-wrap: wrap;
}

/*  */
.case-area .case-wrapper {
    display: grid;
    grid-template-columns: 500px auto;
    gap: 140px;
}
@media only screen and (max-width: 1919px) {
    .case-area .case-wrapper {
        gap: 40px;
        grid-template-columns: 400px auto;
    }
}
@media only screen and (max-width: 1199px) {
    .case-area .case-wrapper {
        gap: 40px;
        grid-template-columns: 400px auto;
    }
}
@media only screen and (max-width: 991px) {
    .case-area .case-wrapper {
        grid-template-columns: 300px auto;
    }
}
@media only screen and (max-width: 767px) {
    .case-area .case-wrapper {
        grid-template-columns: 1fr;
    }
}
.case-area .review-wrapper {
    overflow: hidden;
}
.case-area .case-left {
    padding-top: 135px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .case-area .case-left {
        padding-top: 70px;
    }
}
.case-area .case-left .shape-1 {
    position: absolute;
    bottom: 80px;
    right: -60px;
    max-width: 154px;
}
.case-area .review-slide-wrapper {
    display: grid;
    grid-template-columns: 60px calc(100% - 90px);
    gap: 30px;
    margin-top: 60px;
}
@media only screen and (max-width: 767px) {
    .case-area .review-slide-wrapper {
        grid-template-columns: 300px;
        margin-top: 40px;
    }
}
.case-area .review-slide-wrapper .icon img {
    width: 60px;
    min-width: 60px;
}
.case-area .author-text {
    font-size: 21px;
}
.case-area .meta {
    margin-top: 37px;
    display: flex;
    gap: 20px;
}
.case-area .author-meta {
    padding-inline-start: 20px;
    border-inline-start: 1px solid #e9eaeb;
}
.case-area .name {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}
.case-area .designation {
    font-size: 14px;
    line-height: 1;
    margin-top: 4px;
}
.case-area .review-content {
    padding-bottom: 37px;
}
.case-area .review-arrow-wrapper {
    display: flex;
    justify-content: space-between;
    max-width: 115px;
    padding: 15px 20px;
    border: 1px solid #eef1f2;
    border-radius: 50px;
    position: relative;
}
.case-area .review-arrow-wrapper::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 23px;
    background-color: #eef1f2;
}
.case-area .case-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-inline-start: 64px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .case-area .case-right {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .case-area .case-right {
        padding-inline-start: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .case-area .case-right {
        padding-inline-start: 0;
        padding-top: 20px;
    }
}
.case-area .case-right::before {
    content: "";
    position: absolute;
    right: -22%;
    top: 1px;
    height: 99.8%;
    width: 122%;
    background-color: #e6edee;
    z-index: -2;
}
@media only screen and (max-width: 767px) {
    .case-area .case-right::before {
        display: none;
    }
}
.case-area .case-item.counter {
    max-width: 183px;
}
.case-area .case-item .title {
    font-size: 50px;
    font-weight: 600;
    line-height: 0.44;
    padding-bottom: 17px;
}
.case-area .case-item .text-wrapper {
    padding-bottom: 26px;
}
.case-area .case-item .section-heading {
    max-width: 320px;
    padding-inline-start: 35px;
    padding-top: 47px;
}
@media only screen and (max-width: 991px) {
    .case-area .case-item .section-heading {
        padding-inline-start: 0;
        padding-top: 15px;
    }
}
.case-area .case-item .section-title-wrapper {
    padding-bottom: 27px;
}
.case-area .case-thumb img {
    border-radius: 50px;
    margin-left: -25px;
    border: 3px solid var(--white);
    max-width: 55px;
}
.case-area .case-thumb img:first-child {
    margin-left: 0;
}
.case-area .thumb {
    position: relative;
}
.case-area .thumb::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 69, 71, 0.2);
}
.case-area .content {
    width: 200px;
    background-color: var(--primary);
    padding: 16px 25px;
    position: absolute;
    bottom: 30px;
    left: 0;
}
.case-area .content .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    line-height: 0.8;
    padding-bottom: 4px;
}
.case-area .content .text {
    font-size: 14px;
    color: var(--white);
    line-height: 1.14;
}

/* work area style  */
.work-area {
    padding-top: 124px;
}
@media only screen and (max-width: 1919px) {
    .work-area {
        padding-top: 94px;
    }
}
@media only screen and (max-width: 991px) {
    .work-area {
        padding-top: 74px;
    }
}
@media only screen and (max-width: 767px) {
    .work-area {
        padding-top: 54px;
    }
}
.work-area .section-title {
    max-width: 355px;
}
.work-area .section-title-wrapper {
    display: flex;
    gap: 60px;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .work-area .section-title-wrapper {
        flex-direction: column;
        gap: 20px;
    }
}
.work-area .section-title-wrapper .text {
    max-width: 660px;
    padding-inline-end: 230px;
    font-size: 18px;
    line-height: 1.44;
}
@media only screen and (max-width: 1199px) {
    .work-area .section-title-wrapper .text {
        max-width: 486px;
        padding-inline-end: 55px;
    }
}
@media only screen and (max-width: 991px) {
    .work-area .section-title-wrapper .text {
        padding-inline-end: 0;
    }
}
.work-area .section-title-wrapper .text span {
    font-weight: 500;
    color: var(--primary);
}
.work-area .section-heading {
    margin-bottom: 51px;
}
.work-area .accordion {
    width: 380px;
}
@media only screen and (max-width: 991px) {
    .work-area .accordion {
        width: 450px;
    }
}
@media only screen and (max-width: 767px) {
    .work-area .accordion {
        width: 100%;
    }
}
.work-area .accordion .accordion-button {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.16;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    color: var(--primary);
    text-align: start;
}
@media only screen and (max-width: 767px) {
    .work-area .accordion .accordion-button {
        font-size: 20px;
    }
}
.work-area .accordion .accordion-button span {
    font-weight: 600;
}
.work-area .accordion .accordion-button::after {
    content: "+";
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 26px;
    font-weight: 600;
    margin-inline-start: auto;
    margin-inline-end: 0;
}
.work-area .accordion .accordion-button:not(.collapsed) {
    pointer-events: none;
}
.work-area .accordion .accordion-button:not(.collapsed)::after {
    content: "-";
}
.work-area .accordion .accordion-item {
    padding-inline-start: 80px;
    background-color: transparent;
    border: none;
    padding-bottom: 43px;
    position: relative;
    counter-increment: item-count;
}
@media only screen and (max-width: 767px) {
    .work-area .accordion .accordion-item {
        padding-inline-start: 50px;
    }
}
@media (max-width: 575px) {
    .work-area .accordion .accordion-item {
        padding-inline-start: 40px;
    }
}
.work-area .accordion .accordion-item::after {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% - 37px);
    background-color: rgba(9, 21, 66, 0.1);
    inset-inline-start: 11px;
    bottom: 0;
}
.work-area .accordion .accordion-item:before {
    content: counter(item-count, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 300;
    color: var(--primary);
}
.work-area .accordion .accordion-item:last-child {
    padding-bottom: 3px;
}
.work-area .accordion .accordion-item:not(:last-child) {
    margin-bottom: 16px;
}
.work-area .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.44;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-bottom: 0;
    padding-top: 24px;
    color: var(--secondary);
}
.work-area .accordion .accordion-body span {
    font-weight: 600;
    color: #f8f5f3;
}
.work-area .section-content {
    display: flex;
    gap: 70px;
    align-items: flex-start;
    justify-content: space-between;
}
@media only screen and (max-width: 991px) {
    .work-area .section-content {
        gap: 30px;
        flex-direction: column;
    }
}
.work-area .section-content .thumb {
    max-width: 660px;
    margin-top: -63px;
}
@media only screen and (max-width: 767px) {
    .work-area .section-content .thumb {
        margin-top: 0;
    }
}

/*  */
.video-area.style-3 .section-title-wrapper {
    max-width: 691px;
    margin: auto;
    margin-bottom: 63px;
    text-align: center;
}
.video-area.style-3 .title-wrapper {
    margin-bottom: 28px;
}
.video-area.style-3 .desc-text {
    max-width: unset;
    margin-left: unset;
}
.strategy-area .strategy-info-wrapper {
    margin-top: 50px;
}
.strategy-area .strategy-info-content {
    max-width: 850px;
    display: flex;
    align-items: center;
    padding-top: 19px;
    padding-bottom: 19px;
    margin: 0px auto;
    border-top: 1px solid rgb(241, 241, 241);
    border-bottom: 1px solid rgb(241, 241, 241);
    gap: 40px;
}
.strategy-area .strategy-list {
    display: flex;
    align-items: center;
    padding-right: 40px;
    gap: 30px;
    border-right: 1px solid rgb(241, 241, 241);
}
.strategy-area .strategy-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.strategy-area .strategy-item .number {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(243, 243, 243);
    min-width: 30px;
    border-radius: 50%;
}
.strategy-area .strategy-item .text {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    line-height: 1;
}
section.video-area.strategy-area.style-3.section-spacing {
    margin: 0 0px;
}
/*Testimonial Two Section Starts Here*/
@media (max-width: 991px) {
    .testi-wrapper {
        margin-bottom: 60px;
    }
}
.testi-wrapper .testi-header {
    margin-bottom: 40px;
}
.testi-wrapper .testi-header .button-3 {
    padding: 10px 35px;
    font-size: 16px;
}

.sponsor-slider-two .sponsor-thumb {
    width: 100%;
}

.tool-wrapper {
    position: relative;
}
.tool-wrapper .owl-nav .owl-prev,
.tool-wrapper .owl-nav .owl-next {
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: linear-gradient(
        -65deg,
        rgb(193, 101, 221) 0%,
        rgb(17, 83, 252) 100%
    );
    position: absolute;
    top: 50%;
    margin: 0 !important;
    margin-top: -15px !important;
}
.tool-wrapper .owl-nav .owl-prev {
    left: -15px;
}
.tool-wrapper .owl-nav .owl-next {
    right: -15px;
}

/*Feature Section Starts Here*/
.feature-items {
    padding: 30px;
    border: 1px solid #239ea5;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    transition: all ease 0.3s;
    cursor: pointer;
}
.feature-items .feature-thumb {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #a4e2e5;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: rotate 3s linear infinite;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}
.feature-items .feature-thumb::after,
.feature-items .feature-thumb::before {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #000 0%, #28b2b9 100%);
}
.feature-items .feature-thumb::before,
.feature-items .feature-thumb::after {
    position: absolute;
    content: "";
}
.feature-items .feature-thumb::after {
    top: 6px;
    right: 6px;
}
.feature-items .feature-thumb::before {
    bottom: 6px;
    left: 6px;
}
.feature-items .feature-thumb .thumb {
    width: 71px;
    height: 71px;
    border-radius: 50%;
    animation: rev-rotate 3s linear infinite;
    -webkit-animation: rev-rotate 3s linear infinite;
    -moz-animation: rev-rotate 3s linear infinite;
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}
.feature-items .feature-thumb .thumb img {
    width: 100%;
}
.feature-items:nth-of-type(4n + 2) .feature-thumb::after,
.feature-items:nth-of-type(4n + 2) .feature-thumb::before {
    background-image: linear-gradient(0deg, #000 0%, #28b2b9 100%);
}

.feature-items:nth-of-type(4n + 3) .feature-thumb::after,
.feature-items:nth-of-type(4n + 3) .feature-thumb::before {
    background-image: linear-gradient(0deg, #000 0%, #28b2b9 100%);
}

.feature-items:nth-of-type(4n + 4) .feature-thumb::after,
.feature-items:nth-of-type(4n + 4) .feature-thumb::before {
    background-image: linear-gradient(0deg, #000 0%, #28b2b9 100%);
}

.feature-items .feature-content {
    width: calc(100% - 90px);
    padding-left: 30px;
}
.feature-items .feature-content .title {
    margin: 0;
    margin-bottom: 29px;
}
@media (max-width: 767px) {
    .feature-items .feature-content .title {
        margin-bottom: 20px;
    }
}
.feature-items::before {
    width: 100%;
    height: 100%;
    background: url(../imgs/feature-bg-bg.webp) no-repeat center center;
    background-size: cover;
    transition: all ease 0.3s;
    opacity: 0;
    border-radius: 10px;
}
.feature-items::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.feature-items .feature-thumb,
.feature-items {
    display: flex;
    flex-wrap: wrap;
}
.feature-items * {
    position: relative;
    z-index: 1;
}
.feature-items.active .feature-thumb,
.feature-items.active .feature-thumb .thumb,
.feature-items:hover .feature-thumb,
.feature-items:hover .feature-thumb .thumb {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.feature-items.active,
.feature-items:hover {
    border-color: transparent;
}
.feature-items.active .feature-thumb,
.feature-items.active .feature-thumb .thumb,
.feature-items:hover .feature-thumb,
.feature-items:hover .feature-thumb .thumb {
    animation-play-state: running;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
}
.feature-items.active .feature-content .title,
.feature-items:hover .feature-content .title {
    color: #000;
}
.feature-items.active .feature-content p,
.feature-items:hover .feature-content p {
    color: #000;
}
.feature-items.active::before,
.feature-items:hover::before {
    opacity: 1;
}
@media (max-width: 575px) {
    .feature-items {
        padding: 30px 20px;
    }
}
@media screen and (max-width: 499px) {
    .feature-items .feature-thumb {
        margin-bottom: 20px;
    }
    .feature-items .feature-content {
        padding: 0;
        width: 100%;
    }
}
.feature-items::after {
    width: 100%;
    height: 100%;
    z-index: 99;
}
.feature-items::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}

.feature--thumb {
    width: 822px;
}
@media (max-width: 1199px) {
    .feature--thumb {
        width: 700px;
    }
}
@media (max-width: 991px) {
    .feature--thumb {
        margin: 0 auto 40px;
        width: 100%;
        max-width: 450px;
    }
    .feature--thumb img {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .feature--thumb {
        max-width: 400px;
    }
}
@media (min-width: 992px) {
    .feature--thumb.style-two {
        width: 650px;
    }
    .feature--thumb.style-two .owl-item .main-thumb img {
        width: 100%;
    }
}
@media (min-width: 992px) and (min-width: 1200px) {
    .feature--thumb.style-two {
        width: 1000px;
    }
}
@media (min-width: 992px) and (min-width: 1200px) and (min-width: 1400px) {
    .feature--thumb.style-two {
        width: 1100px;
    }
    .feature--thumb.style-two img {
        width: auto !important;
    }
}
@media (min-width: 992px) {
    .feature--thumb.style-two .owl-item .main-thumb,
    .feature--thumb {
        direction: rtl;
        width: auto;
    }
}

.feature-shapes {
    position: absolute;
    right: 0;
    top: 0;
}
.feature-shapes img {
    width: 100%;
    max-width: 595px;
}
@media (max-width: 1399px) {
    .feature-shapes {
        max-width: 395px;
    }
}
.feature-shapes.style-two {
    left: 0;
    right: auto;
    max-width: 695px;
}
.feat-nav a:hover,
.feat-nav a.active {
    color: #ffffff;
    background: linear-gradient(
        -103deg,
        #28b2b9 0%,
        #21959b 35%,
        #234151 76%,
        #2cc6ce 100%
    );
}

/*  */
.experience-area {
    position: relative;
    padding-top: 458px;
    overflow: hidden;
    z-index: 1;
}
@media only screen and (max-width: 1919px) {
    .experience-area {
        padding-top: 268px;
    }
}
@media only screen and (max-width: 991px) {
    .experience-area {
        padding-top: 158px;
    }
}
.experience-area .counter-box {
    background-color: #28b2b9;
    display: inline-block;
    padding: 70px 48px 54px;
    text-align: center;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box {
        padding: 40px 38px 34px;
    }
}
.experience-area .counter-box .number {
    font-size: 100px;
    font-weight: 900;
    line-height: 0.5;
    letter-spacing: -3px;
    margin-bottom: 34px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: flex-start;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box .number {
        font-size: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .experience-area .counter-box .number {
        font-size: 50px;
        margin-bottom: 24px;
    }
}
.experience-area .counter-box .number span {
    font-size: 50px;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box .number span {
        font-size: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .experience-area .counter-box .number span {
        font-size: 30px;
    }
}
.experience-area .counter-box .text {
    text-align: center;
    font-size: 42px;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box .text {
        font-size: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .experience-area .counter-box .text {
        font-size: 20px;
    }
}
.experience-area .counter-box-wrapper {
    margin-inline-end: 90px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box-wrapper {
        margin-inline-end: 60px;
    }
}
.experience-area .counter-box-wrapper .shadow {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #28b2b9;
    top: 0;
    inset-inline-start: 0;
    z-index: -1;
}
.experience-area .counter-box-wrapper .shadow-1 {
    opacity: 0.5;
    inset-inline-start: 30px;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box-wrapper .shadow-1 {
        inset-inline-start: 20px;
    }
}
.experience-area .counter-box-wrapper .shadow-2 {
    opacity: 0.4;
    inset-inline-start: 60px;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box-wrapper .shadow-2 {
        inset-inline-start: 40px;
    }
}
.experience-area .counter-box-wrapper .shadow-3 {
    opacity: 0.3;
    inset-inline-start: 90px;
}
@media only screen and (max-width: 1919px) {
    .experience-area .counter-box-wrapper .shadow-3 {
        inset-inline-start: 60px;
    }
}
.experience-area .section-content {
    display: flex;
    justify-content: flex-end;
}

.experience-area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1;
}
.experience-area-bg:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(5, 54, 68, 0.3);
    top: 0;
    inset-inline-start: 0;
}
.experience-area-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.rtl {
    direction: rtl;
}

/*  */
/* contact area style  */
.contact-area {
    padding-top: 140px;
}
@media only screen and (max-width: 1919px) {
    .contact-area {
        padding-top: 82px;
    }
}
@media only screen and (max-width: 991px) {
    .contact-area {
        padding-top: 62px;
    }
}
@media only screen and (max-width: 767px) {
    .contact-area {
        padding-top: 42px;
    }
}
.contact-area .line-vertical {
    width: 1px;
    height: 120px;
    background: var(--primary);
    margin: 0 auto;
}
@media only screen and (max-width: 767px) {
    .contact-area .line-vertical {
        display: none;
    }
}

.contact-area .logo {
    padding-top: 20px;
    text-align: center;
}
.contact-area .title-wrapper {
    margin-bottom: 38px;
}
.contact-area .meta-list {
    margin-top: 41px;
}
.contact-area .meta-list li {
    font-size: 16px;
    line-height: 1.62;
}
.contact-area .meta-list li:not(:last-child) {
    margin-bottom: 15px;
}
.contact-area .meta-list li a {
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    font-size: 18px;
}
.contact-area .section-heading {
    max-width: 220px;
    padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .contact-area .section-heading {
        max-width: 100%;
    }
}
.contact-area .contact-area-inner {
    display: flex;
    gap: 80px;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .contact-area .contact-area-inner {
        gap: 40px;
        flex-direction: column;
    }
}
.contact-area .contact-wrapper {
    max-width: 850px;
    width: 100%;
}
.contact-area form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
}
@media only screen and (max-width: 991px) {
    .contact-area form {
        grid-template-columns: repeat(1, 1fr);
    }
}
.contact-area form > *:nth-child(1) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .contact-area form > *:nth-child(1) {
        grid-column: auto;
    }
}
.contact-area form > *:nth-child(6) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .contact-area form > *:nth-child(6) {
        grid-column: auto;
    }
}
.contact-area form > *:nth-child(7) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .contact-area form > *:nth-child(7) {
        grid-column: auto;
    }
}
.contact-area form > *:nth-child(8) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .contact-area form > *:nth-child(8) {
        grid-column: auto;
    }
}
.contact-area form input {
    width: 100%;
    height: 55px;
    border: 1px solid #e7eaec;
    border-radius: 5px;
    padding: 10px 25px;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .contact-area form input {
        height: 45px;
    }
}
.contact-area form select {
    width: 100%;
    height: 55px;
    border: 1px solid #e7eaec;
    border-radius: 5px;
    padding: 10px 25px;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .contact-area form select {
        height: 45px;
    }
}
.contact-area form textarea {
    width: 100%;
    height: 170px;
    border: 1px solid #e7eaec;
    border-radius: 5px;
    padding: 18px 25px;
    display: block;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .contact-area form textarea {
        height: 120px;
    }
}
.contact-area form .wc-form-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 9px;
}
.contact-area form .wc-single-input {
    margin-bottom: 23px;
}
.contact-area form .btn-wrapper {
    margin-top: 10px;
}
.contact-area form .wc-btn-primary {
    font-size: 18px;
    gap: 29px;
    padding: 26px 40px;
}
@media only screen and (max-width: 1199px) {
    .contact-area form .wc-btn-primary {
        padding: 16px 30px;
    }
}

/*
--------------------------------
FAQ STYLES
--------------------------------
*/
.faq-area11 {
    background-color: #f7f8f9;
    border-radius: 40px;
    margin: 0 20px;
}
@media only screen and (max-width: 767px) {
    .faq-area11 {
        margin: 0;
        border-radius: 0;
    }
}
.faq-area11 .section-title-wrapper {
    text-align: center;
    max-width: 428px;
    margin: auto;
    padding-bottom: 58px;
}
.faq-area11 .accordion-item {
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: transparent;
}
.faq-area11 .accordion-item:last-child {
    margin-bottom: 0;
}
.faq-area11 .accordion-button {
    font-size: 24px;
    line-height: 1.25;
    color: var(--primary);
    font-weight: 700;
    padding-left: 30px;
    background-color: transparent;
    padding-right: 30px;
}
@media only screen and (max-width: 991px) {
    .faq-area11 .accordion-button {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .faq-area11 .accordion-button {
        padding-inline-start: 10px;
        padding-inline-end: 10px;
    }
}
.faq-area11 .accordion-button::after {
    background-image: unset;
    content: "+";
    transform: unset;
    height: 24px;
    width: 24px;
    border: 2px solid #566e7c;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.faq-area11 .accordion-button:focus {
    outline: 0;
    box-shadow: unset;
}
.faq-area11 .accordion-body {
    padding-top: 0;
    padding-left: 50px;
}
.faq-area11 .text {
    position: relative;
}
.faq-area11 .text::before {
    position: absolute;
    content: "";
    left: -21px;
    top: 11px;
    width: 13px;
    height: 1px;
    background-color: #566e7c;
}
.faq-area11 .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: unset;
}
.faq-area11 .accordion-button:not(.collapsed)::after {
    background-image: unset;
    content: "-";
    transform: unset;
}
.faq-area11 .accordion-item:not(:first-of-type) {
    border-top: 1px solid #e8e9ea;
}

/*  */
.ex-item .ex-thumb {
    display: flex;
    flex-wrap: wrap;
}
.ex-item::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.ex-item {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgb(110, 127, 238);
    overflow: hidden;
    padding: 40px 25px;
    margin-bottom: 30px;
    text-align: center;
}
.ex-item * {
    position: relative;
    z-index: 1;
}
.ex-item::before {
    width: 100%;
    height: 100%;
    background: url(../imgs/ex-bg.webp) no-repeat center center;
    background-size: cover;
    transition: all ease 0.3s;
    opacity: 0;
}
.ex-item .ex-thumb {
    width: 100px;
    height: 100px;
    padding: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        0deg,
        rgb(209, 128, 221) 0%,
        rgb(121, 107, 232) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(121, 107, 232, 0.5);
    margin: 0 auto 30px;
}
.ex-item .ex-thumb img {
    max-height: 100%;
}
.ex-item .ex-content .title {
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .ex-item {
        max-width: 400px;
    }
}
@media screen and (max-width: 400px) {
    .ex-item .ex-thumb {
        width: 80px;
        height: 80px;
    }
}
.ex-item:hover,
.ex-item.active {
    border-color: transparent;
}
.ex-item:hover::before,
.ex-item.active::before {
    opacity: 1;
}
.ex-item:hover .ex-thumb,
.ex-item.active .ex-thumb {
    background: linear-gradient(
        0deg,
        rgb(226, 144, 110) 0%,
        rgb(232, 58, 153) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(232, 58, 153, 0.5);
}
.ex-item:hover *,
.ex-item.active * {
    color: #000 !important;
}

.owl-item:nth-of-type(4n + 2) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 2) .ex-item .ex-thumb {
    background: linear-gradient(
        0deg,
        rgb(226, 144, 110) 0%,
        rgb(232, 58, 153) 100%
    );
    box-shadow: 2.419px 9.703px 12.48px 0.52px rgba(232, 58, 153, 0.5);
}
.owl-item:nth-of-type(4n + 3) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 3) .ex-item .ex-thumb {
    background: linear-gradient(
        0deg,
        rgb(225, 53, 143) 0%,
        rgb(126, 108, 231) 100%
    );
    box-shadow: 4.232px 12.292px 10.56px 0.44px rgba(121, 107, 232, 0.5);
}
.owl-item:nth-of-type(4n + 4) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 4) .ex-item .ex-thumb {
    background: linear-gradient(
        0deg,
        rgb(246, 190, 101) 0%,
        rgb(230, 96, 58) 100%
    );
    box-shadow: 2.419px 9.703px 18.24px 0.76px rgba(253, 160, 133, 0.5);
}

/*History Section Starts Here*/
.history-slider .owl-stage-outer {
    padding-top: 20px;
}

.history-item {
    text-align: center;
}
.history-item .history-content {
    margin: 0 auto 52px;
    position: relative;
}
.history-item .history-content .content {
    padding: 35px 15px;
    max-width: 250px;
    border-radius: 20px;
    box-shadow: 3.629px 14.554px 30.72px 1.28px rgba(24, 37, 163, 0.2);
    background: #ffffff;
    margin: 0 auto 52px;
    transition: all ease 0.3s;
}

.history-item .history-content::before {
    height: 28px;
    width: 2px;
    background: #21959b;
    left: 50%;
    top: calc(100% + 7px);
    transition: all ease 0.3s;
}
.history-item .history-content::after {
    width: 100%;
    height: 2px;
    background: #21959b;
    top: calc(100% + 52px);
    left: 0;
}
.history-item .history-content .title {
    font-size: 18px;
    margin: 0;
    margin-bottom: 4px;
    font-weight: 600;
}
.history-item .history-content p {
    margin-top: 0;
    font-size: 14px;
}
.history-item .history-thumb {
    padding-top: 23px;
    position: relative;
    cursor: pointer;
}

.owl-item.center .history-item .history-content::before,
.owl-item.center .history-item .history-content .content {
    opacity: 1;
    visibility: visible;
}

.anime-item-2 {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #21959b;
    z-index: 1;
    top: 0;
    left: 50%;
}
.anime-item-2::after,
.anime-item-2::before {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #21959b;
    box-shadow: 3.694px -4.728px 38px 0px rgba(17, 65, 189, 0.52);
    margin-left: -5px;
    margin-top: -5px;
    cursor: pointer;
}
.anime-item-2::before {
    animation: inner-ripple 2000ms linear infinite;
}
.anime-item-2::after {
    animation: outer-ripple 2000ms linear infinite;
}

.colaboration-item .colaboration-thumb {
    width: 90px;
    height: 90px;
    padding: 15px;
    border-radius: 50%;
}
.colaboration-item .colaboration-thumb .icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #beedf0, #beedf0 100%);
    color: #ffffff;
    line-height: 70px;
    text-align: center;
    font-size: 50px;
}
.colaboration-item {
    display: flex;
    flex-wrap: wrap;
}
.colaboration-item .colaboration-content {
    width: calc(100% - 90px);
    padding-left: 27px;
}
.colaboration-item .colaboration-content .title {
    margin: 0;
    margin-bottom: 13px;
}
.colaboration-item .colaboration-content p {
    margin-bottom: 0 !important;
}
@media screen and (max-width: 399px) {
    .colaboration-item .colaboration-thumb {
        width: 60px;
        height: 60px;
        padding: 5px;
    }
    .colaboration-item .colaboration-thumb .icon {
        font-size: 36px;
        line-height: 50px;
    }
    .colaboration-item .colaboration-content {
        width: calc(100% - 60px);
        padding-left: 18px;
    }
    .colaboration-item .colaboration-content .title {
        font-size: 20px;
    }
}

.colaboration-slider {
    padding-bottom: 33px;
}

.cola-next,
.cola-prev {
    font-size: 20px;
    line-height: 1;
    color: #33406a;
    font-weight: 700;
}
.cola-next:hover,
.cola-prev:hover {
    color: #fff;
}

.collaboration-anime-area {
    position: relative;
}
@media (max-width: 1199px) {
    .collaboration-anime-area .main-thumb img {
        width: 100%;
        max-width: 600px;
    }
}
.collaboration-anime-area .mobile,
.collaboration-anime-area .girl {
    position: absolute;
}
.collaboration-anime-area .mobile img,
.collaboration-anime-area .girl img {
    width: 100%;
}
.collaboration-anime-area .mobile {
    bottom: 90px;
    right: 295px;
}
@media screen and (max-width: 1300px) {
    .collaboration-anime-area .mobile {
        width: 210px;
        right: 320px;
    }
}
@media (max-width: 1199px) {
    .collaboration-anime-area .mobile {
        width: 180px;
        right: 180px;
    }
}
@media (max-width: 767px) {
    .collaboration-anime-area .mobile {
        width: 180px;
        right: 50%;
        transform: translate(50%);
        bottom: 50px;
    }
}
.collaboration-anime-area .mobile .show-up {
    opacity: 1;
}
.ltr {
    direction: ltr;
}
.oh {
    overflow: hidden;
}
@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}
.collaboration-anime-area .girl {
    width: 294px;
    bottom: 75px;
    right: 540px;
    z-index: 1;
}
@media screen and (max-width: 1300px) {
    .collaboration-anime-area .girl {
        width: 240px;
        right: 500px;
    }
}
@media (max-width: 1199px) {
    .collaboration-anime-area .girl {
        width: 200px;
        right: 340px;
    }
}
@media screen and (max-width: 530px) {
    .collaboration-anime-area .mobile {
        position: relative;
        width: 100%;
        right: 0;
        bottom: 0;
        transform: translateX(0);
        margin: 35px auto 0;
        max-width: 180px;
    }
    .collaboration-anime-area .girl {
        display: none;
    }
    .collaboration-anime-area .main-thumb {
        display: none;
    }
}
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.mobile-slider {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 38px;
    padding: 4px;
}
@media screen and (max-width: 1300px) {
    .mobile-slider {
        border-radius: 26px;
    }
}
@media (max-width: 1199px) {
    .mobile-slider {
        border-radius: 22px;
    }
}
.mobile-slider::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../imgs/mobile-container.webp) no-repeat center center;
    background-size: contain;
}
.mobile-slider .mobile-item,
.mobile-slider .owl-item,
.mobile-slider .owl-stage,
.mobile-slider .owl-stage-outer {
    width: 100%;
    height: 100%;
}

/*Smart Watch Section Starts Here*/
@media (min-width: 992px) {
    .smart-watch-content {
        max-width: 480px;
    }
}
@media (min-width: 768px) {
    .smart-watch-content .app-button-group {
        margin-top: -22px;
    }
}

.smart-watch-section {
    position: relative;
}

@media (max-width: 1399px) {
    .smart-watch img {
        max-width: 680px;
    }
}

.smart-bg {
    position: absolute;
    top: -160px;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: right top;
    background-size: 100% 100%;
    z-index: -1;
}

/*  */
.blog-details-area {
    padding-top: 188px;
}
@media only screen and (max-width: 1919px) {
    .blog-details-area {
        padding-top: 158px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-details-area {
        padding-top: 138px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details-area {
        padding-top: 118px;
    }
}
.blog-details-area .section-title {
    max-width: 1100px;
}
@media only screen and (max-width: 1919px) {
    .blog-details-area .section-title {
        max-width: 800px;
    }
}
.blog-details-area .section-heading {
    margin-bottom: 48px;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .section-heading {
        margin-bottom: 28px;
    }
}
.blog-details-area .meta {
    display: flex;
    margin-bottom: 70px;
    flex-wrap: wrap;
    gap: 10px 0;
}
@media only screen and (max-width: 1919px) {
    .blog-details-area .meta {
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details-area .meta {
        margin-bottom: 20px;
    }
}
.blog-details-area .meta .meta-box:not(:last-child) {
    padding-inline-end: 61px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .meta .meta-box:not(:last-child) {
        padding-inline-end: 20px;
    }
}
.blog-details-area .meta .meta-box:not(:last-child):after {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background-color: rgba(18, 18, 18, 0.062745098);
    inset-inline-end: 30px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
    .blog-details-area .meta .meta-box:not(:last-child):after {
        display: none;
    }
}
.blog-details-area .meta-box {
    display: flex;
    gap: 15px;
    align-items: center;
}
.blog-details-area .meta-box .icon {
    width: 50px;
    height: 50px;
    background-color: rgba(141, 207, 155, 0.062745098);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.blog-details-area .meta-box .title {
    font-size: 12px;
    line-height: 1;
    margin-bottom: 5px;
}
.blog-details-area .meta-box .text {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}
.blog-details-area .section-main-content {
    display: flex;
    gap: 140px;
    margin-top: 100px;
    align-items: flex-start;
}
@media only screen and (max-width: 1919px) {
    .blog-details-area .section-main-content {
        margin-top: 70px;
        gap: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-details-area .section-main-content {
        flex-direction: column;
        gap: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details-area .section-main-content {
        margin-top: 30px;
        gap: 30px;
    }
}
.blog-details-area .social-meta-box {
    border-inline-end: 1px solid #e9e9e9;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .social-meta-box {
        display: flex;
        align-items: center;
        border-inline-end: 0;
        border-bottom: 1px solid #e9e9e9;
    }
}
.blog-details-area .social-meta-box .meta-item {
    width: 80px;
    text-align: center;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .social-meta-box .meta-item {
        padding-bottom: 5px;
    }
}
.blog-details-area .social-meta-box .meta-item p {
    line-height: 1;
    font-size: 12px;
}
.blog-details-area .social-meta-box .meta-item img {
    margin-bottom: 7px;
}
.blog-details-area .social-meta-box .meta-item:not(:first-child) {
    border-top: 1px solid #e9e9e9;
    padding-top: 20px;
    margin-top: 19px;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .social-meta-box .meta-item:not(:first-child) {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
        border-inline-start: 1px solid #e9e9e9;
        border-inline-end: 1px solid #e9e9e9;
    }
}
.blog-details-area .social-meta-box .social-icons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
    align-items: center;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .social-meta-box .social-icons {
        flex-direction: row;
        margin-top: 0;
        margin-inline-start: 25px;
    }
}
.blog-details-area .text-wrapper .text:not(:last-child) {
    margin-bottom: 24px;
}
.blog-details-area .quote-box {
    display: flex;
    gap: 70px;
    margin-top: 55px;
    margin-bottom: 38px;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .quote-box {
        gap: 30px;
        margin-top: 35px;
        margin-bottom: 28px;
    }
}
.blog-details-area .quote-box .text {
    font-size: 36px;
    line-height: 1.19;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 23px;
}
@media only screen and (max-width: 1399px) {
    .blog-details-area .quote-box .text {
        font-size: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details-area .quote-box .text {
        font-size: 20px;
    }
}
.blog-details-area .quote-box .icon img {
    width: 70px;
    min-width: 70px;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .quote-box .icon img {
        width: 50px;
        min-width: 50px;
    }
}
.dir-rtl .blog-details-area .quote-box .icon img {
    transform: rotateY(180deg);
}
.blog-details-area .quote-box .author {
    font-size: 14px;
}
.blog-details-area .quote-box .author.has-left-line {
    padding-inline-start: 50px;
}
.blog-details-area .quote-box .author.has-left-line:before {
    width: 40px;
}
.blog-details-area .image-content {
    display: grid;
    gap: 30px;
    grid-template-columns: 600px auto;
    margin-top: 64px;
    margin-bottom: 61px;
}
@media only screen and (max-width: 1399px) {
    .blog-details-area .image-content {
        grid-template-columns: 430px auto;
    }
}
@media only screen and (max-width: 1199px) {
    .blog-details-area .image-content {
        grid-template-columns: auto;
    }
}
@media only screen and (max-width: 767px) {
    .blog-details-area .image-content {
        margin-top: 34px;
        margin-bottom: 31px;
    }
}
.blog-details-area .image-content .thumb .text {
    text-align: center;
    font-size: 14px;
    line-height: 1;
    margin-top: 13px;
}
.blog-details-area .image-content .thumb img {
    width: 100%;
}
.blog-details-area .feature-content .section-title {
    margin-bottom: 32px;
}
.blog-details-area .feature-content .feature-list {
    margin-top: 31px;
    margin-bottom: 31px;
    margin-inline-start: 77px;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .feature-content .feature-list {
        margin-inline-start: 37px;
    }
}
.blog-details-area .feature-content .list-plus li {
    font-size: 18px;
    line-height: 1.66;
    color: var(--primary);
    padding-inline-start: 25px;
}
.blog-details-area .feature-content .list-plus li:not(:last-child) {
    margin-bottom: 0;
}
.blog-details-area .feature-content .list-plus li::before {
    top: 3px;
}
.blog-details-area .tags-wrapper {
    margin-top: 39px;
}
.blog-details-area .tags-wrapper {
    margin-top: 39px;
}
.blog-details-area .tags {
    display: flex;
    gap: 7px;
}
.blog-details-area .tags .tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    padding: 4px 6px;
    background-color: #f0f0f0;
}
.blog-details-area .comment-box {
    margin-top: 63px;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .comment-box {
        margin-top: 33px;
    }
}
.blog-details-area .comment-box .section-title {
    margin-bottom: 16px;
}
.blog-details-area .comment-box form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
    margin-top: 60px;
}
@media only screen and (max-width: 1399px) {
    .blog-details-area .comment-box form {
        margin-top: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .blog-details-area .comment-box form {
        grid-template-columns: repeat(1, 1fr);
    }
}
.blog-details-area .comment-box form > *:nth-child(1) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .comment-box form > *:nth-child(1) {
        grid-column: auto;
    }
}
.blog-details-area .comment-box form > *:nth-child(4) {
    grid-column: span 2;
}
@media only screen and (max-width: 991px) {
    .blog-details-area .comment-box form > *:nth-child(4) {
        grid-column: auto;
    }
}
.blog-details-area .comment-box form input {
    width: 100%;
    height: 55px;
    border: 1px solid #e7eaec;
    border-radius: 0px;
    padding: 10px 25px;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .comment-box form input {
        height: 45px;
    }
}
.blog-details-area .comment-box form select {
    width: 100%;
    height: 55px;
    border: 1px solid #e7eaec;
    border-radius: 0px;
    padding: 10px 25px;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .comment-box form select {
        height: 45px;
    }
}
.blog-details-area .comment-box form textarea {
    width: 100%;
    height: 170px;
    border: 1px solid #e7eaec;
    border-radius: 0px;
    padding: 18px 25px;
    display: block;
    outline: 0;
}
@media only screen and (max-width: 767px) {
    .blog-details-area .comment-box form textarea {
        height: 120px;
    }
}
.blog-details-area .comment-box form .wc-form-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 9px;
}
.blog-details-area .comment-box form .wc-single-input {
    margin-bottom: 23px;
}
.blog-details-area .comment-box form .btn-wrapper {
    margin-top: 10px;
}
.blog-details-area .comment-box form .wc-btn-primary {
    font-size: 16px;
    font-weight: 700;
    padding: 20px 35px;
}
@media only screen and (max-width: 1199px) {
    .blog-details-area .comment-box form .wc-btn-primary {
        padding: 16px 30px;
    }
}
.font-heading-hkgrotesk-bold h1,
.font-heading-hkgrotesk-bold h2,
.font-heading-hkgrotesk-bold h3,
.font-heading-hkgrotesk-bold h4,
.font-heading-hkgrotesk-bold h5,
.font-heading-hkgrotesk-bold h6 {
    font-family: var(--font_hkgrotesk);
    font-weight: 700;
    line-height: 1;
}
/*  */
.footer-area10.style-1 {
    background-color: #121212;
}
.footer-area10.style-1 .footer-inner {
    display: flex;
}
@media only screen and (max-width: 767px) {
    .footer-area10.style-1 .footer-inner {
        flex-wrap: wrap;
    }
}
.footer-area10.style-1 .logo-wrapper {
    width: 334px;
    min-width: 334px;
    padding-top: 95px;
}
@media only screen and (max-width: 1919px) {
    .footer-area10.style-1 .logo-wrapper {
        width: 274px;
        min-width: 274px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area10.style-1 .logo-wrapper {
        padding-top: 30px;
        width: 184px;
        min-width: 184px;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area10.style-1 .logo-wrapper {
        text-align: center;
        width: 100%;
        margin: 20px 0;
    }
}
.footer-area10.style-1 .footer-menu-item.subscribe-form-item {
    width: 330px;
}
@media only screen and (max-width: 1919px) {
    .footer-area10.style-1 .footer-menu-item.subscribe-form-item {
        width: 290px;
    }
}
.footer-area10.style-1 .footer-menu-item.subscribe-form-item .title {
    margin-bottom: 27px;
}
.footer-area10.style-1 .footer-menu-item .title {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 20px;
}
.footer-area10.style-1 .footer-menu-item li a:hover {
    color: var(--white);
}
.footer-area10.style-1 .social-icons li a:hover {
    color: var(--white);
}
.footer-area10.style-1 .links-wrapper {
    flex-grow: 1;
    border-inline-start: 1px solid #282828;
    padding-inline-start: 80px;
    padding-top: 95px;
    padding-inline-start: 60px;
}
@media only screen and (max-width: 1199px) {
    .footer-area10.style-1 .links-wrapper {
        padding-inline-start: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .footer-area10.style-1 .links-wrapper {
        padding-inline-start: 30px;
        padding-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .footer-area10.style-1 .links-wrapper {
        border-left: 0;
        padding-left: 0;
    }
}
.footer-area10.style-1 .footer-menu {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 90px;
}
@media only screen and (max-width: 1199px) {
    .footer-area10.style-1 .footer-menu {
        flex-wrap: wrap;
        padding-bottom: 40px;
    }
}
.footer-area10.style-1 .footer-copyright {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 26px 0;
    border-top: 1px solid #282828;
    text-align: center;
}
@media (max-width: 575px) {
    .footer-area10.style-1 .footer-copyright {
        flex-direction: column;
        align-items: center;
    }
}
.footer-area10.style-1 .text-copy {
    color: #999;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}
.footer-area10.style-1 .text-copy a {
    font-weight: 600;
    color: var(--white);
}

/*  */
section.service-area.section-spacing .subtitle-wrapper,
section.service-area.section-spacing p.text,
section.case-study.has_fade_anim .section-subtitle {
    color: #fff;
}
.banner-6.banner-area,
.testimonal-area-12 {
    padding: 130px 0 0;
}
.to-access-section h5.title {
    font-size: 20px;
}
.to-access-item {
    margin: 0;
}

/*  */
.apps-download-screen-20 {
    position: relative;
    margin-top: -380px;
}
.apps-download-screen-20 img {
    max-width: 100%;
}
.apps-download-screen-20 .apps-download-thumb {
    width: 120%;
    top: 60%;
    left: 56%;
}
.apps-download-screen-20 .apps-download-thumb img {
    max-width: 100%;
}
@media (max-width: 1199px) {
    .apps-download-screen-20 {
        margin-top: -340px;
    }
}
@media (max-width: 991px) {
    .apps-download-screen-20 {
        margin-top: -340px;
    }
    .apps-download-screen-20 .apps-download-thumb {
        top: 70%;
    }
}
@media (max-width: 767px) {
    .apps-download-screen-20 {
        margin-top: -250px;
    }
}

.apps-download-bg {
    animation: rotate3 6s alternate infinite;
}

@keyframes rotate3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}
.apps-download-buttons-20 {
    position: relative;
    z-index: 9;
    margin-top: 150px;
}
.apps-download-buttons-20 .download-options {
    margin: 0 -15px -30px;
}
.apps-download-buttons-20 .download-options li {
    margin: 0 15px 30px;
}
.cl-white {
    color: #ffffff;
}
.testimonial-area p.name {
    color: #fff;
    margin-top: 16px;
}
.apps-download-buttons-20 .download-options li a {
    display: inline-block;
    line-height: 96px !important;
    text-align: center;
    width: 96px;
    height: 96px;
    background: #bcbdf8;
    font-size: 46px !important;
}
.apps-download-buttons-20 .download-options li a i {
    background: #9d30fc;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.apps-download-buttons-20 .download-options li a:hover,
.apps-download-buttons-20 .download-options li a.active {
    background: #ffffff;
}
@media (max-width: 767px) {
    .apps-download-buttons-20 .download-options li a {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
    }
}
.apps-download-buttons-20 .download-options li span {
    display: block;
    text-align: center;
    margin-top: 10px;
}
@media (max-width: 991px) {
    .apps-download-buttons-20 {
        margin-top: 60px;
    }
}
.apps-download-screen-20 .apps-download-thumb {
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.download-options {
    display: flex;
    flex-wrap: wrap;
}
.download-options {
    margin: -7px;
    justify-content: center;
}
.download-options li a {
    color: #ffffff;
    border-radius: 50%;
}
.download-options li a {
    line-height: 96px;
    text-align: center;
    width: 96px;
    height: 96px;
    background: #bcbdf8;
    font-size: 46px;
}

/* services area style  */
.services-area13 {
    background-color: #dccdbf;
}
.services-area13 .services-area13-inner {
    display: flex;
    gap: 80px;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .services-area13 .services-area13-inner {
        gap: 50px;
        flex-direction: column;
    }
}
.services-area13 .thumb {
    position: relative;
    margin-bottom: 93px;
}
@media only screen and (max-width: 991px) {
    .services-area13 .thumb {
        margin-bottom: 43px;
    }
}
.services-area13 .section-heading {
    max-width: 775px;
}
@media only screen and (max-width: 1199px) {
    .services-area13 .section-heading {
        max-width: 375px;
    }
}
@media only screen and (max-width: 991px) {
    .services-area13 .section-heading {
        max-width: 295px;
    }
}
@media only screen and (max-width: 767px) {
    .services-area13 .section-heading {
        max-width: 100%;
    }
}
.services-area13 .section-heading .content {
    display: flex;
    gap: 50px;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .services-area13 .section-heading .content {
        flex-direction: column;
    }
}
@media only screen and (max-width: 767px) {
    .services-area13 .section-heading .content {
        gap: 30px;
    }
}
.services-area13 .section-heading .content .section-title {
    max-width: 312px;
}
@media only screen and (max-width: 767px) {
    .services-area13 .section-heading .content .section-title {
        max-width: 100%;
    }
}
.services-area13 .section-heading .content .text-wrapper {
    margin-bottom: 43px;
}
@media only screen and (max-width: 767px) {
    .services-area13 .section-heading .content .text-wrapper {
        margin-bottom: 23px;
    }
}
.services-area13 .section-heading .content .text {
    max-width: 283px;
    font-size: 18px;
    line-height: 1.44;
    color: var(--black);
}
@media only screen and (max-width: 991px) {
    .services-area13 .section-heading .content .text {
        max-width: 600px;
    }
}
.services-area13 .services-wrapper {
    border-inline-start: 1px solid #14595d;
    max-width: 635px;
    flex-grow: 1;
}
.services-area13 .services-wrapper > a {
    opacity: 0.7;
    transition: all 0.5s;
}
.services-area13 .services-wrapper > a:hover {
    opacity: 1;
}
.services-area13 .services-wrapper > a:first-child .service-item {
    padding-top: 0;
    border-top: 0;
}
.services-area13 .services-wrapper > a:last-child .service-item {
    padding-bottom: 20px;
}

.service-item {
    display: flex;
    gap: 72px;
    justify-content: space-between;
    padding-top: 36px;
    padding-bottom: 33px;
    padding-inline-start: 41px;
}
@media only screen and (max-width: 1199px) {
    .service-item {
        gap: 42px;
        padding-inline-start: 31px;
    }
}
@media only screen and (max-width: 991px) {
    .service-item {
        gap: 20px;
        padding-inline-start: 10px;
    }
}
@media (max-width: 575px) {
    .service-item {
        gap: 22px;
        padding-inline-start: 21px;
        flex-direction: column;
        padding-bottom: 18px;
    }
}
.service-item:hover .title {
    transform: rotateX(90deg) translateY(-12px);
}
.service-item .number {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
}
.service-item .title {
    font-size: 30px;
    text-decoration: underline;
    text-decoration-thickness: 1.4px;
    text-underline-offset: 3px;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    margin-bottom: 25px;
    perspective: 1000px;
    position: relative;
    display: inline-block;
    padding: 0;
    transition: transform 0.5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
@media (max-width: 575px) {
    .service-item .title {
        font-size: 24px;
    }
}
.service-item .title:before {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    content: attr(data-text);
    transition: color 0.5s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
}
.service-item .text {
    font-size: 18px;
    line-height: 1.44;
    color: var(--black);
}
.service-item .content-wrapper {
    display: flex;
    gap: 109px;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 991px) {
    .service-item .content-wrapper {
        gap: 39px;
    }
}
@media only screen and (max-width: 767px) {
    .service-item .content-wrapper {
        gap: 69px;
    }
}
.service-item .content {
    max-width: 390px;
}
.service-item .wc-btn-normal img {
    width: 7px;
    min-width: 7px;
}

.service-item-border:not(:first-child) {
    border-top: 1px solid #14595d;
}

/*  */

/*  */
.brand-area.style-3 .brand-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}
@media only screen and (max-width: 991px) {
    .brand-area.style-3 .brand-inner {
        flex-wrap: wrap;
        gap: 50px;
    }
}
.brand-area.style-3 .brand-text {
    max-width: 200px;
}
@media only screen and (max-width: 991px) {
    .brand-area.style-3 .brand-text {
        max-width: 100%;
    }
}
.brand-area.style-3 .brand-logos {
    max-width: 900px;
}
@media only screen and (max-width: 1199px) {
    .brand-area.style-3 .brand-logos {
        max-width: 700px;
    }
}
.brand-area.style-3 .brand-logo img {
    max-width: 140px;
}
.brand-area.style-3 .brand-text-title-wrapper {
    padding-left: 17px;
    border-left: 2px solid var(--primary);
}
.brand-area.style-3 .brand-text-title-wrapper .title {
    font-size: 16px;
    font-weight: 500;
}
.service-area.style-2 .section-top {
    grid-template-columns: 1fr;
}
section.service-area.style-2.service-22 {
    padding: 75px 0 0 0;
}
.feature-area.style-3.feature-22 {
    padding: 0 0 75px 0;
}
.choose-area .section-subtitle,
.choose-area13 .section-subtitle,
.feature-area.style-9.graph-area .section-subtitle {
    color: #000;
}
.banner12-content-item .title,
.banner-10 .customer-box .title {
    font-size: 35px;
    margin-bottom: 10px;
}
.banner-10 .customer-box .text {
    max-width: 350px;
}
.intro-counter {
    padding-bottom: 40px;
}
section.services-area.section-spacing.pin__area13.services-area
    .section-title-wrapper
    .text-wrapper
    .text,
section.services-area.section-spacing.pin__area13.services-area .section-title,
section.services-area.section-spacing.pin__area13
    .subtitle-wrapper.has_fade_anim {
    text-align: left;
    max-width: 100%;
}
.team-area.style-2 .feature-section-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 60px;
    align-items: center;
}
.team-area1 .section-header {
    display: unset;
}
.team-area1 .section-title-wrapper {
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    margin-bottom: 35px;
}
.section-title-wrapper .title-wrapper:not(:first-child) {
    margin-top: 27px;
}
.feature-area.style-9.graph-area p {
    margin-top: 25px;
    color: #999;
    font-family: var(--font_tropline) !important;
}
.feature-area.style-9 .feature-inner .content-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.feature-section-top.style-3 {
    grid-template-columns: 1fr 1fr;
}
.team-area1 .section-title-wrapper {
    display: grid;
    margin-bottom: 60px;
    grid-template-columns: 1fr 1fr;
}
section.history-section.padding-top.pt-lg-0.padding-bottom-2,
section#feature {
    padding: 70px 0px 70px !important;
}
.blog-area1 .section-header {
    max-width: 60%;
}
.feature-area.style-8 .feature-section-top {
    grid-template-columns: 1fr 1fr;
}
.wcf_iconbox.style-8 .thumb {
    margin-bottom: 40px;
}
.work-area .section-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    gap: 20px;
}
.work-area .section-title-wrapper .text {
    padding: unset;
}

.section-title-wrapper .title-wrapper:not(:first-child) {
    margin-top: 27px;
}
.faq22 {
    padding-top: 140px;
}

/* .about-area.style-1 .about-thumb img {
    max-width: 100%;
    margin-inline-end: unset;
} */
/*  */

/*Work Section Starts Here*/
.work-item {
    max-width: 540px;
    margin: 0 auto 40px;
    text-align: center;
}
@media (min-width: 768px) {
    .work-item {
        padding-top: 10px;
    }
}
.work-item .work-thumb {
    width: 288px;
    margin: 0 auto 30px;
}
.work-item .work-thumb img {
    max-width: 100%;
}
.work-item .work-content .title {
    margin-bottom: 28px;
}

@media (max-width: 575px) {
    .work-item .work-thumb {
        max-width: 180px;
        margin-bottom: 10px;
    }
    .work-item .work-content .title {
        margin-bottom: 18px;
    }
    .work-item .work-content p {
        margin-bottom: 28px;
    }
}

.work-slider .owl-nav [class*="owl-"] {
    background: transparent !important;
    font-size: 24px !important  ;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    line-height: 1;
    margin-top: -12px;
    width: auto;
    margin: 0;
    color: rgba(255, 255, 255, 0.3);
    transition: all ease 0.3s;
    font-weight: 400;
}
@media (max-width: 575px) {
    .work-slider .owl-nav [class*="owl-"] {
        font-size: 14px;
        top: 70px;
        padding: 0;
        color: rgba(255, 255, 255, 0.8);
    }
}
.work-slider .owl-nav [class*="owl-"]::before {
    left: 0px !important;
    width: 100%;
    height: 24px;
    transition: all ease 0.3s;
    background: url(../imgs/arrow.webp) no-repeat center center;
    background-size: contain;
}
@media (max-width: 575px) {
    .work-slider .owl-nav [class*="owl-"]::before {
        height: 14px;
    }
}
.work-slider .owl-nav [class*="owl-"]:hover {
    background: transparent;
}
.work-slider .owl-nav [class*="owl-"]:hover:before {
    left: 10px;
}
.work-slider .owl-nav [class*="owl-"].disabled {
    opacity: 0;
}

.work-slider .owl-nav .owl-next {
    right: 0;
}

.work-slider .owl-nav .owl-prev {
    left: 0;
}

.count-slider {
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    padding: 45px 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .count-slider {
        padding: 25px 0;
    }
}
.count-slider .count-item {
    width: 25%;
    text-align: center;
    min-height: 110px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    position: relative;
    border-right: 1px solid #d9deef;
    cursor: pointer;
}
.count-slider .count-item::after {
    width: 100%;
    height: 100%;
}
.count-slider .count-item .title {
    margin: 0;
}
.count-slider .count-item .serial {
    font-size: 100px;
    line-height: 1;
    color: rgba(59, 54, 140, 0.102);
}
@media (max-width: 767px) {
    .count-slider .count-item {
        min-height: 80px;
    }
    .count-slider .count-item .serial {
        font-size: 60px;
    }
}
@media screen and (max-width: 510px) {
    .count-slider .count-item {
        width: 50%;
        min-height: 50px;
    }
    .count-slider .count-item:nth-child(even) {
        border: none;
    }
    .count-slider .count-item .serial {
        font-size: 50px;
    }
}
.count-slider,
.count-slider .count-item {
    display: flex;
    flex-wrap: wrap;
}
.count-slider .count-item .serial,
.count-slider .count-item::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.work-slider .owl-nav [class*="owl-"]::before {
    position: absolute;
    content: "";
}

.top-shape,
.bottom-shape {
    position: absolute;
    z-index: 1;
    width: 102%;
    left: 50%;
    transform: translateX(-50%);
}
.top-shape img,
.bottom-shape img {
    width: 100%;
}
@media (max-width: 1199px) {
    .top-shape,
    .bottom-shape {
        min-width: 1400px;
    }
    .top-shape.mw-0,
    .bottom-shape.mw-0 {
        min-width: 0;
    }
}

.top-shape {
    top: -3px;
}

.bottom-shape {
    bottom: -2px;
}
nav.main-menu {
    display: none;
}
section.feature-section.ovelflow-hidden.padding-bottom.padding-top {
    padding: 75px 0 75px;
}

/*  */
@media screen and (min-width: 1024px) {
    nav.main-menu {
        display: block;
    }
    .strategy-area {
        padding-top: 165px;
        padding-bottom: 123px;
    }
    .main-menu > ul {
        margin-right: 15%;
    }
}
@media screen and (max-width: 991px) {
    .plan-area .section-title {
        font-size: 36px;
        padding-top: unset;
    }
    .achievement-area .circle {
        width: 340px;
        height: 340px;
    }
    .client-say-16 {
        margin: 30px 0 0;
        padding-top: 30px;
    }
    .client-item-16 {
        margin: 30px 0 0 0;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    .convencing-feature-thumb img {
        max-width: 100% !important;
    }
    section#screenshot,
    .banner-6.banner-area,
    .testimonal-area-12,
    section.project-details-area.section-spacing,
    .achievement-area .dynamic-section,
    section.choose-area,
    .section-spacing,
    .service-area2.style-3,
    .intro-area,
    .services-area9,
    section.blog-area.style-5,
    section.service-area.style-2,
    .feature-area.style-3,
    .lg-oh.padding-top,
    section.feature-section.ovelflow-hidden.padding-bottom.padding-top,
    .work-section,
    section.experience-section.padding-bottom.padding-top.bg_img.top_center.bg-max-lg-ash.oh {
        padding: 50px 0 50px;
    }
    section.service-area.style-2.service-22,
    .faq-area .section-title-wrapper {
        padding: 50px 0 0 0;
    }
    .lg-oh.padding-top {
        padding: 0;
    }
    .banner12-content-item .title,
    .banner-10 .customer-box .title {
        font-size: 20px;
    }
    .wcf_iconbox.style-6 {
        flex-basis: 50%;
        padding: 20px;
    }
    .banner12-thumb-right img {
        margin: 0;
    }
    .intro-area .intro-content {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 20px;
    }
    .intro-area .intro-content-wrapper {
        padding: 20px;
    }
    section.services-area.section-spacing.pin__area13 {
        padding-top: 90px;
    }
    .services-area-inner {
        gap: 0;
    }
    .team-area.style-2 .feature-section-top {
        grid-template-columns: 1fr;
    }
    .services-area9 .section-title {
        font-size: 36px;
    }
    .service-details-intro-area .shape-1,
    .case-area .case-left .shape-1 {
        display: none;
    }
    .faq22,
    section.contact-area.section-spacing,
    section.apps-download-section.overflow-hidden.padding-top.padding-bottom.body--bg {
        padding-top: 150px;
    }
}
@media screen and (max-width: 767px) {
    .achievement-area .achievement-items {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tool-wrapper .owl-nav .owl-next {
        right: -12px;
    }
}
.intro-area .video-wrapper {
    max-width: 100%;
    padding-bottom: 20px;
}
.intro-area .text span {
    font-weight: 700;
    display: block;
    font-size: 22px;
    margin-bottom: 10px;
}
.feature-content-20 .title-small {
    margin-bottom: 15px;
    margin-top: 15px;
}
.section-title-wrapper .title-wrapper:not(:first-child) {
    margin-top: 0;
}
.work-area .subtitle-wrapper.has_fade_anim {
    margin: 0;
}
.wc-btn-primary {
    padding: 15px 30px;
}
section#screenshot {
    padding: 0;
}
.inner-policy h3.title {
    font-size: 30px !important;
}
.services-area13 .section-heading .content .section-title {
    margin-bottom: 50px !important;
}
.services-area13 .thumb {
    margin-bottom: 40px;
}

/* updating images changes */
/* .banner-5 .banner-area-top {
  background-image: url(../imgs/banner-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner-5 .title{
  color: #fff;
}
.header-area.style-2{
  background: #eaf9fa;
}
.banner-5 .banner-thumb{
  margin-top: 0;
}
.banner-5 .banner-content{
  display: unset;
}
.banner-5 .text-box {

  background-color: unset;
  position: absolute;
  padding-inline-start: 80px;
  right: 0;
}
.banner-5 .banner-thumb:after{
  background: none;
} */

.achievement-area {
    background-color: #28b2b9;
}

/* login */
.login-section a:hover {
    color: darken(#239ea5, 5%);
}

.login-section .form {
    background: rgba(19, 35, 47, 0.9);
    padding: 40px;
    max-width: 600px;
    margin: 40px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.login-section .tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.login-section .tab-group:after {
    content: "";
    display: table;
    clear: both;
}

.login-section .tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    background: rgba(160, 179, 176, 0.25);
    color: #a0b3b0;
    font-size: 20px;
    float: left;
    width: 50%;
    text-align: center;
    cursor: pointer;
    transition: 0.5s ease;
}

.login-section .tab-group li a:hover {
    background: darken(#239ea5, 5%);
    color: #ffffff;
}

.login-section .tab-group .active a {
    background: #239ea5;
    color: #ffffff;
}

.login-section .tab-content > div:last-child {
    display: none;
}

.login-section h1 {
    text-align: center;
    color: #ffffff;
    font-weight: 300;
    margin: 0 0 40px;
}

.login-section label {
    position: absolute;
    transform: translateY(6px);
    left: 13px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    font-size: 22px;
}

.login-section label .req {
    margin: 2px;
    color: #239ea5;
}

.login-section label.active {
    transform: translateY(50px);
    left: 2px;
    font-size: 14px;
}

.login-section label.active .req {
    opacity: 0;
}

.login-section label.highlight {
    color: #ffffff;
}

.login-section input,
.login-section textarea {
    font-size: 22px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    background: none;
    background-image: none;
    border: 1px solid #a0b3b0;
    color: #ffffff;
    border-radius: 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.login-section input:focus,
.login-section textarea:focus {
    outline: 0;
    border-color: #239ea5;
}

.login-section textarea {
    border: 2px solid #a0b3b0;
    resize: vertical;
}

.login-section .field-wrap {
    position: relative;
    margin-bottom: 40px;
}

.login-section .top-row:after {
    content: "";
    display: table;
    clear: both;
}

.login-section .top-row > div {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.login-section .top-row > div:last-child {
    margin: 0;
}

.login-section .button {
    border: 0;
    outline: none;
    border-radius: 0;
    padding: 15px 0;
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: #239ea5;
    color: #ffffff;
    transition: all 0.5s ease;
    -webkit-appearance: none;
}

.login-section .button:hover,
.login-section .button:focus {
    background: darken(#239ea5, 5%);
}

.login-section .button-block {
    display: block;
    width: 100%;
}

.login-section .forgot {
    margin-top: -20px;
    text-align: right;
}

/* images uploading */
.case-study-inner {
    background-image: url(../imgs/our-priority-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.service-item .content h3,
span.section-subtitle {
    color: #000;
}
.banner-5.banner-area h2 {
    color: #fff;
}
.feature-area.style-1::before,
.section-home,
.services-area13,
.cta-area.style-1 .cta-left,
.service-area.style-1,
.faq-area,
section.testimonial-section.style-5.section-spacing,
.choose-area8,
.service-details-intro-area,
.service-details-intro-area .text-box,
section.service-details-area.section-spacing.pt-0,
section.history-section.padding-top.pt-lg-0.padding-bottom-2,
.feature-area17 .feature-wrapper,
section#how {
    background-color: #eaf9fa;
}
.info-content-wrapper .thumb {
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-content-wrapper .thumb img {
    object-fit: contain;
    max-height: 400px;
}
.info-content-wrapper .content {
    background-color: #239ea5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 0.5px solid #000;
}
.info-content-wrapper,
.cta-area.style-1:before,
.footer-area .footer-menu > *:first-child::before {
    background-color: #28b2b9;
}

.counter-area .number-wrapper,
.counter-area .counter-content .sign,
.about-area.style-1 .about-inner,
.info-area,
.banner-5 .banner-area-top,
.banner-5 .text-box {
    background-color: #239ea5;
}

.service-area.style-1 .triangle {
    display: none;
}
.bg-2,
section.video-area.strategy-area.style-3.section-spacing {
    background-color: #28b2b9;
}
.colaboration-item img {
    width: 70px;
    display: flex;
    align-items: center;
}
/* .wc-btn-primary
{
  background-color: #2cc6ce;
  border: 1px solid #2cc6ce;
} */
.video-area::before {
    background: none;
}
section.experience-section .ex-thumb img {
    max-width: 120px;
    max-height: 120px;
}
.owl-item:nth-of-type(4n + 2) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 2) .ex-item .ex-thumb,
.ex-item .ex-thumb,
.owl-item:nth-of-type(4n + 3) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 3) .ex-item .ex-thumb,
.owl-item:nth-of-type(4n + 4) .ex-item .ex-thumb,
div[class*="col"]:nth-of-type(4n + 4) .ex-item .ex-thumb,
.ex-item:hover .ex-thumb,
.ex-item.active .ex-thumb {
    background: unset;
    box-shadow: unset;
}

.banner-7 .banner-area-bg {
    position: unset;
    width: 100%;
}
section.apps-download-section.overflow-hidden.padding-top.padding-bottom.body--bg.login-section {
    padding: 120px 0 0px;
}
@media only screen and (max-width: 1919px) {
    .banner-7.banner-area {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 1919px) {
    .banner-7 .features-wrapper {
        padding: 0 40px 0 40px;
    }
}
.feature-tabs li img {
    width: 150px;
}

.banner12-content,
.banner-7 .title-box {
    background-image: url(../imgs/methos-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-5 .text-box p,
.counter-area .counter-content .sign,
.am-content h5,
.about-area.style-1 h2.section-title,
.about-inner-wrapper.pin__elem,
.about-area.style-1 .cf_text p,
.info-area span.section-subtitle,
.info-area .section-title,
.info-area .nav-tabs .nav-link,
.info-content-wrapper .title,
.info-content-wrapper .text,
.info-content-wrapper .list-plus li,
.widget-item .section-title-wrapper .text,
.widget-item ul li a,
.widget-item .header .text,
.widget-item ul li,
.testimonal-area-12 p,
h3.text.has_fade_anim,
.counter-box p,
.about-area.style-1 .about-inner .list-check li,
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary,
h1.section-title,
.banner-10 .content-box .text,
.banner-10 .customer-box .title,
.banner-10 .customer-box .text,
section.service-area.style-2.service-22 span.section-subtitle,
.section-title-wrapper .title-wrapper:not(:first-child),
.wcf_iconbox.style-3 .title,
.wcf_iconbox.style-3 .text,
.wcf_iconbox.style-3 .count-title,
.wcf_iconbox.style-3 .btn-underline,
.service-area.style-2 .section-title,
.cf_title a:hover,
.choose-area .wcf_iconbox .text,
.banner12-content-item .title,
.banner-10 .customer-box .title,
.banner12-content-item .text,
.choose-area13 .wcf_iconbox .text,
.service-area span.section-subtitle,
.ideas-area .accordion .accordion-body,
.intro-area .intro-thumb .cta-text .text,
.team-area.style-2 .text,
.banner-7 .wcf_iconbox .text,
.achievement-area .achievement-item .desc,
.feature-area.style-9 .graph-wrapper .nav-link,
.feature-area.style-9.graph-area p,
.feature-area .section-subtitle,
.feature-area .section-title-wrapper.style-3 .section-title,
.feature-section-top.style-3 .text,
.wc-btn-underline::before,
.wcf_iconbox.style-8 .title,
.feature-area .content .text,
.info-area .note-wrapper .text,
.info-area .note-wrapper .text span,
.exclusive-section h5.cate,
.exclusive-section h2.section-title,
.exclusive-section p,
.exclusive-item .exclusive-content .title,
.banner-6 .customer-box .title,
.banner-6 .customer-box .text,
.banner-6 .text-box .text,
.banner-6 .text-box .text,
.banner-6 .industries-box .title,
p.post,
.testimonial-area.style-3.testi p,
.video-area .section-title-wrapper.style-3 .section-title,
.video-area p,
section.service-area.section-spacing span.section-subtitle,
.header-area.style-2 .main-menu li a {
    color: #000;
}

span.section-subtitle.qr-sub {
    color: #000 !important;
}
.btn-underline::before,
.wcf_iconbox.style-3 .title::before,
.intro-count-item.client::before {
    background: #000;
}
.client-item-16 .client-content .body-area p,
.blog-area .blog h3,
.feature-content.style-6 .text,
.wcf_iconbox.style-6 .text,
.service-area2.style-3 .wcf_iconbox .text,
.service-area2.style-3 span.section-subtitle,
section.service-details-area h1 {
    color: #000;
}
.team-area1 .section-subtitle,
.team-area1 .section-title,
section.feature-area.section-spacing.style-8 .section-subtitle,
section.feature-area.section-spacing.style-8 .section-title,
.case-area span.section-subtitle,
.case-area h2.section-title,
.work-area span.section-subtitle,
.work-area h2.section-title {
    color: #000;
}
.widget-item .subscribe-form input,
.about-area.style-1 .about-inner .btn-wrapper .wc-btn-primary:hover {
    background-color: transparent;
}
.info-area .nav-tabs .nav-link.active {
    color: #fff;
}
.ex-item {
    border-color: #0f4548;
}
.swiper-pagination-bullet-active {
    background-color: #0f4548 !important;
}
.footer-area {
    background: #239ea5;
}
.banner-5.banner-area,
.testimonial-area.style-3 .testimonial-item-wrapper,
.banner-area-vision {
    background: #239ea5;
}
h4.title,
.wcf_iconbox.style-1 .text,
.section-title-wrapper.style-1 .section-subtitle,
.section-header .cate,
.blog-area1 .section-subtitle {
    color: #000;
}
.banner12-content-item,
.choose-area13,
.intro-area,
.feature-area.style-9 .feature-inner .content-wrap,
.feat-nav a {
    background: #2cc6ce;
}
h2.section-title,
h3.title,
.feature-inner .style-6 h1,
.wcf_iconbox.style-6 .title,
.blog-area.style-8 .blog-wrapper-area h3,
.project-details-area p,
.project-details-area .content-box .list-plus li,
section#feature p,
.banner-5.banner-area h2 {
    color: #000;
}
.about-area.style-1::before {
    background: #fff;
}
.swiper-button-next,
.swiper-button-prev {
    color: #2cc6ce !important;
}
.feature-area.style-1 .wc-btn-primary.btn-text-flip,
.plan-area .wc-btn-primary,
.banner-6 .content-box .first-column .text-box,
.banner-6 .customer-box {
    background: #2cc6ce;
    border: 1px solid #2cc6ce;
}
.widget-item .wc-btn-primary,
.widget-item .subscribe-form input {
    border: 1px solid #000;
}
.wcf_iconbox.style-8 .wc-btn-default,
.info-area .note-wrapper,
.exclusive-item {
    border-color: #000;
}
.exclusive-item:hover {
    box-shadow: #239ea5 !important;
    background: unset;
    border-color: #239ea5;
}
.banner-5 .wc-btn-primary,
.banner-10.banner-area .wc-btn-primary,
.banner-10.banner-area .wc-btn-play,
.banner-10.banner-area .wc-btn-primary:hover,
.banner-10.banner-area .wc-btn-play:hover,
.wcf_iconbox.style-8 .wc-btn-default:hover,
.banner-6 .text-box .wc-btn-primary,
.banner-6 .text-box .wc-btn-play,
.button-3.active,
.button-3:hover,
.button-3.active:hover,
.button-3 {
    background-color: #000;
    color: #2cc6ce;
    border: 1px solid #2cc6ce;
}
.service-area .wcf_iconbox .wc-btn-primary,
.contact-area form .wc-btn-primary,
.wc-btn-primary,
.wc-btn-primary:hover,
.header-area.sticky .wc-btn-primary,
.about-feature .feature-wrapper,
.blog-area.style-5 .wc-btn-primary {
    border-color: #beedf0 !important;
}
.service-area .wcf_iconbox:hover .wc-btn-primary,
.contact-area form .wc-btn-primary,
.wc-btn-primary,
.header-area.sticky .wc-btn-primary,
.banner-10.banner-area,
.banner-10 .customer-box,
.feature-area.style-3.feature-22,
.choose-area,
.service-area.style-2,
.blog-area.style-5 .wc-btn-primary,
section.service-area.section-spacing,
.ideas-area,
.intro-area .intro-thumb .cta-text,
.team-area.style-2,
.banner-7 .banner-content,
.feature-area.section-spacing.style-3,
.wcf_iconbox.style-8,
.exclusive-section {
    background: #28b2b9;
}
.widget-item .wc-btn-primary:hover {
    background: #21959b;
}
.banner-5 .call-text a:hover,
.counter-area .counter-content .text,
.banner-10.banner-area .wc-btn-play i,
.service-area.style-1 .section-title,
.service-area.style-1 .text-wrapper p,
.service-area.style-1 .wc-btn-underline,
.feature-tabs li a .subtitle,
.feature-tabs li .nav-link .subtitle,
.convencing-feature-content p,
.get-button,
a.get-button:hover,
.faq-area .accordion .accordion-button,
.faq-area .accordion .accordion-body,
section.service-area2.style-3,
.services-wrapper .service-box h3,
.work-section h2,
.work-section p,
.tool-section p {
    color: #2cc6ce;
}
.get-button {
    border: 1px solid #2cc6ce;
}
.exclusive-section {
    padding: 75px 0 75px;
}
.get-button:hover {
    box-shadow: 0px 17px 24px 0px #2cc6ce;
}
.feature-tabs li a .subtitle,
.feature-tabs li .nav-link .subtitle {
    font-size: 20px;
}
.about-area.style-1 .about-thumb img {
    object-fit: cover;
}
.banner-10 .customer-box {
    padding: 60px;
}
.banner12-area {
    padding-top: 90px;
    margin-left: 20px;
    margin-right: 20px;
}
.feature-thumb-20 {
    margin-bottom: -100px;
    margin-top: -80px;
}
.am-item .am-thumb {
    height: 100%;
}
.am-item {
    padding: 20px 20px;
}
.contact-intro {
    padding-top: 155px;
    max-width: 55%;
    margin: 0 auto;
    text-align: center;
}
section#feature,
.about-feature .feature-wrapper {
    background-color: #eaf9fa;
    background-image: unset;
}
section.experience-section.padding-bottom.padding-top.bg_img.top_center.bg-max-lg-ash.oh {
    background-color: #000;
    background-image: none;
}
.testimonial-inner.style-5 {
    background-color: unset;
}
.banner-6.banner-area,
.testimonal-area-12 {
    padding: 130px 0 70px;
}
.testimonial-area.style-3.testi .testimonial-item-wrapper {
    background-color: #fff;
}
.banner-5 .title span:before {
    background: none;
}
.offcanvas-3__area,
.header-area.sticky,
.header-area.style-2,
.confirm {
    background-color: #28b2b9 !important;
}
.confirm:hover {
    color: #000 !important;
}
.main-menu li a,
section.case-study.has_fade_anim .section-subtitle {
    color: #fff;
}
.close-button,
.offcanvas-3__menu li a {
    background-color: #000;
}
.progress-wrap svg.progress-circle path {
    stroke: #28b2b9;
}
.choose-area .content-wrap {
    padding-top: 60px;
    padding-bottom: 60px;
}
.choose-area .choose-thumb img {
    transition: transform 0.5s ease;
    transform: scale(1);
}

.choose-area .choose-thumb:hover img {
    transform: scale(0.9);
}
.choose-area {
    margin: 0;
}

.banner-6 .title-wrapper .title {
    font-size: 60px;
}
.banner12-thumb-left::before {
    display: none;
}

.choose-area13 .content-wrap {
    width: 50%;
}
@media only screen and (max-width: 1199px) {
    .banner-10 .banner-thumb {
        margin-inline-end: 0;
    }
    .banner-10 .customer-box {
        padding: 30px;
    }
    .wcf_iconbox.style-3 .text {
        margin-bottom: 50px;
    }
    .choose-area .section-heading,
    .choose-area .section-title {
        text-align: center;
    }
    .choose-area .section-title {
        max-width: 100%;
    }
    .section-title-wrapper.style-1 .section-title {
        font-size: 40px;
    }
    .choose-area13 .choose-thumb,
    .choose-area13 .content-wrap {
        width: 100%;
    }
}
@media only screen and (max-width: 1024px) {
    .banner-5 .title {
        font-size: 50px !important;
        max-width: 531px;
    }
    .feature-area.style-1::before {
        width: 65%;
    }
    .achievement-area .achievement-item .title-2,
    .achievement-area .achievement-item .title {
        text-align: center;
    }
    nav.main-menu {
        display: none;
    }
    .wcf_iconbox.style-6 {
        flex-basis: 50%;
    }
    .achievement-area .achievement-item .title-2,
    .achievement-area .achievement-item .title {
        text-align: left;
    }
    .case-area .case-right::before {
        width: 100%;
        right: 0;
    }
    .work-area .section-content .thumb {
        max-width: 100%;
        margin-top: 0;
    }
}

@media screen and (max-width: 991px) {
    .feature-area.style-1::before {
        width: 100%;
    }
    .info-area .nav-tabs .nav-link {
        font-size: 16px;
    }
    .service-area .section-heading {
        max-width: 100%;
    }
    .banner-5.banner-area h2,
    section.service-details-area.section-spacing.pt-0 h1,
    section.banner-area.banner-10 h1,
    .banner-6 .title-wrapper .title {
        font-size: 40px;
    }
    .achievement-area .achievement-item .desc,
    .about-area.style-1 .about-inner .title-wrapper {
        max-width: 100%;
    }
    .content-wrapper {
        flex-direction: column;
        gap: 0;
    }
    .banner-10 .customer-box {
        padding: 20px 0;
    }
    .banner12-shape-img {
        margin: 0;
    }
    .choose-area13 .choose-thumb,
    .choose-area13 .content-wrap {
        width: 100%;
    }
    .achievement-area .achievement-item .title-2,
    .achievement-area .achievement-item .title {
        text-align: center;
    }
    .client-item-16 {
        margin: 0 auto;
        padding-top: 45px;
    }
    .banner-6 .content-box .first-column {
        max-width: 50%;
    }
    .banner12-content-item .shape-2 {
        position: unset;
        margin-bottom: 20px;
    }
    .banner12-thumb-right img {
        height: auto;
    }
    .banner12-content-item .text-wrapper {
        padding-bottom: 0;
    }
    .service-details-intro-area .social-links {
        display: none;
    }
    .service-details-intro-area .details-intro-thumb {
        margin-inline-start: -60px;
    }
    .work-section {
        padding-bottom: 150px !important;
    }
    .contact-area .section-heading {
        max-width: 100%;
    }
    .contact-area .contact-area-inner {
        flex-direction: column;
    }
}
@media only screen and (max-width: 767px) {
    .banner-5.banner-area h2,
    section#how h2,
    .about-area.style-1 .about-inner .section-title {
        font-size: 30px;
    }

    h2.section-title,
    h3.title {
        font-size: 36px;
    }
    .banner12-thumb-left {
        margin: 0;
        grid-template-columns: 1fr;
    }

    h2.section-title,
    h3.title,
    .feature-area17 .section-title {
        font-size: 25px;
    }
    .banner-7.banner-area {
        background-color: #28b2b9;
    }
    .banner-7 .banner-content,
    section.choose-area8 {
        margin-top: 70px;
    }
    .banner-7 .features-wrapper {
        padding-bottom: 70px;
    }
    .count-slider .count-item .title {
        font-size: 13px;
    }
    section.video-area.strategy-area.style-3.section-spacing {
        padding: 120px 0 0;
    }
}
.feature-area.style-9 .graph-thumb img,
.choose-area .choose-thumb img {
    object-fit: contain;
}
.feature-wrapper-bg-20,
.feature-items::before,
.ex-item::before {
    background-image: none;
    background-color: #beedf0;
}
.feature-items * p {
    color: #000;
}

/* .banner-6 .industries-box .title{
  max-width: 0%;
  margin-inline-start: unset;
  font-size: 28px !important;
}
.banner-6 .industries-box .number{
  margin-inline-start: unset;
} */
.wc-btn-primary:hover {
    background: unset;
    color: #000;
}
h3.number {
    color: #000;
    padding-top: 25px;
}
.banner-6.banner-area h3.title,
h3.number {
    font-size: 30px;
}
.banner-6 .industries-box {
    padding: 0;
}
/*  */
.offcanvas_logo img {
    margin-bottom: 45px;
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
}
.footer-logo img{
    max-width: 130px;
    max-height: 90px;
    object-fit: contain;
}
.offcanvas-3__menu li a {
    color: #fff !important;
    background-image: none;
}
.offcanvas-3__meta li a:hover,
.service-area.style-1 .service-content h3 {
    color: #000;
}
.service-area.style-1 .service-list li span:active {
    color: #4ab0b2;
    font-weight: bold;
}
.close-button:hover,
.feature-area.style-1,
.main-menu ul.dp-menu {
    background-color: #fff;
}
.close-button:hover span {
    background: #000;
}
.offcanvas-3__menu {
    overflow-y: scroll !important;
    scrollbar-width: auto !important; /* For Firefox */
}
.banner-5 .banner-inner {
    padding-top: 140px;
}
/* For WebKit browsers */
.offcanvas-3__menu::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}
.offcanvas-3__menu::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
}
.wcf_iconbox.style-1 .text,
.service-area .section-title,
.service-area span.section-subtitle,
section.service-area.section-spacing .subtitle-wrapper,
section.service-area.section-spacing p.text,
.service-area .wcf_iconbox .title,
.counter-area .counter-content .text,
.counter-area .counter-content .title,
.counter-area .number-wrapper .number,
.counter-area .counter-content .sign.about-area.style-1,
.widget-item .widget-title,
.widget-item .section-title-wrapper .section-title,
.footer-area .btn-text-flip span,
.footer-copy-wrapper .copy-text,
.achievement-area .section-title,
.achievement-area .section-subtitle,
.achievement-area .achievement-item .title,
.achievement-area .achievement-item .title-2,
section.apps-download-section.login-section p,
section.apps-download-section.login-section h5.cate,
.work-section h2.title,
.work-section p,
.owl-theme .owl-nav [class*="owl-"]:hover,
.choose-area span.section-subtitle,
.choose-area .section-title,
.choose-area .wcf_iconbox .thumb span,
.choose-area .wcf_iconbox .title,
section.blog-area.style-5 span.section-subtitle,
.blog-area.style-5 .section-heading .text,
.choose-area13 .wcf_iconbox .title,
.choose-area13 .wcf_iconbox .title,
.choose-area13 .section-title,
.choose-area13 .section-subtitle,
.service-area2.style-3 .section-title,
.service-area2.style-3 .wcf_iconbox .title,
.faq-area .accordion .accordion-button,
.faq-area .accordion .accordion-body,
.intro-area .video-title,
.intro-area .intro-title-wrapper .title,
.intro-area .text,
.intro-count-item.client .title,
.intro-area .intro-thumb .cta-text .phone,
.services-area h3.title-small,
.services-area .section-title-wrapper .text-wrapper .text,
.ideas-area .accordion .accordion-button,
.ideas-area .accordion .accordion-button::after,
.section-title-wrapper.style-2 .section-title,
.ideas-area .section-title .ideas-area .section-subtitle,
section.feature-area.style-6,
.team-area.style-2 .section-title,
.team.style-2 .name,
.testimonial-item.style-5 .text,
.testimonial-item.style-5 .name,
.banner-7 .wcf_iconbox .title,
.choose-area8 .wcf_iconbox .text,
.project-item.style-1 .title,
.project-area.style-1 p,
.services-area9 .wcf_iconbox .text,
.team-area1 .section-title-wrapper .text,
.blog-area1 p,
.service-details-intro-area .text-wrapper .text,
.banner-area p.text-small,
.banner-area-vision .text,
.exclusive-section p,
.exclusive-section p,
.colaboration-section p,
.banner-6.banner-area p,
.offcanvas-3__meta li {
    color: #000 !important;
}
.testimonial-item.style-5 .name,
.project-area.style-1 h2 {
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 22px;
    font-weight: bold;
}
.team.style-2 .name,
.text-slider h2.title {
    font-size: 22px !important;
}
.team-area1 .section-title-wrapper {
    align-items: center;
    justify-content: start;
    gap: 20px;
    margin-bottom: 0;
    text-align: left;
}
.achievement-area .achievement-item .title-2,
.choose-area8 .wcf_iconbox .title,
.services-area9 .wcf_iconbox .title,
.team .name,
.blog .title,
.banner-area p.text-small,
.history-section span,
.choose-area .wcf_iconbox .title,
.feature-content-20 .title-small,
.amazing-feature-section h5.title,
.about-area.style-1 .section-subtitle {
    font-size: 22px;
}
.section-title-wrapper.style-1 .section-subtitle {
    font-size: 15px;
}
.feature-content-20 .feat-nav a {
    background: #000;
}
.info-content-wrapper .title {
    font-size: 30px !important;
    font-weight: 600 !important;
    margin-bottom: 10px;
}
.team .name {
    text-align: center;
}
.text-slider {
    background: #beedf0;
}
.section-title-wrapper.style-2 .section-title {
    text-decoration: none;
}
.service-area.style-1 .service-list-item {
    flex-basis: 50%;
}
section.apps-download-section.login-section p.forgot {
    margin-bottom: 15px !important;
    color: #fff !important;
}
p.forgot a:hover,
.main-menu ul.dp-menu li:hover > a {
    color: #4ab0b2 !important;
}
.footer-copy-wrapper {
    justify-content: center;
}
.achievement-area .achievement-item {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
.cta-area.style-1 .cta-right .wc-btn-underline::before {
    width: 0;
}
.counter-area .counter-content .title {
    font-size: 50px;
    margin-bottom: 23px;
}
.banner-5.banner-area .wcf_iconbox.style-1 .title,
.services-area9 .wcf_iconbox .text {
    margin-bottom: 0;
}
.service-area .wcf_iconbox .wc-btn-primary,
.header-area.sticky .wc-btn-primary,
.wc-btn-primary,
.wc-btn-primary,
.wc-btn-primary:hover {
    border: 1px solid #000 !important;
    color: #000;
}
.service-area .wcf_iconbox {
    border-inline-start: 1px solid #000;
    border-bottom: 1px solid #000;
}
.about-area.style-1 .about-text-wrapper {
    padding-left: 0;
}
.service-area .wcf_iconbox {
    padding-top: 0;
}
.services-wrapper .service-box {
    padding-top: 30px;
}
.banner-222 .title {
    text-decoration: none;
}
.service-area .section-title-wrapper {
    padding-bottom: 0;
}

.info-content-wrapper .info-list {
    margin-bottom: 0;
}
.about-area.style-1 .about-inner {
    margin-inline-start: 0;
}
.about-area.style-1 .about-inner .subtitle-wrapper {
    margin-bottom: 38px;
    padding-top: 38px;
}
.about-area.style-1 .about-inner .title-wrapper {
    max-width: 615px;
}
.achievement-area .section-heading,
.about-feature .feature-content,
.about-area.style-1 .about-inner .cf_text,
.feature-area17 .feature-content {
    max-width: 75%;
}
.service-area .section-heading,
.case-area .case-item .section-heading,
.work-area .section-title,
.service-area.style-1 .title-wrapper,
.blog-area.style-5 .section-title,
.banner12-content-item .title,
.banner12-content-item .text-wrapper,
.faq-area .section-title,
.testimonial-item.style-5 .text,
.achievement-area .achievement-item .desc,
.team-area1 .section-title,
.team-area1 .section-title-wrapper .text {
    max-width: 100%;
}
.banner12-content-item .text-wrapper {
    max-width: 50%;
}
.service-area.style-1 .service-list li {
    padding: 20px;
}
.work-area .accordion {
    width: 100%;
}
.blog-area.style-5 .section-heading .text {
    max-width: 522px;
}
.case-study-inner .section-heading,
.banner-10 .content-box .text {
    max-width: 480px;
}
.team-area1 .team-wrapper {
    margin-top: 40px;
}
.case-study-inner .list-check li,
.case-study-inner .list-check li:nth-child(even) {
    width: 50%;
}
.case-study-inner .line-2 {
    display: none;
}
.feature-area17 .feature-item:last-child,
.work-area .section-title-wrapper .text {
    padding-bottom: 40px;
}
.feature-area17 .feature-item:first-child {
    padding-top: 40px;
}
.feature-area17 .feature-item {
    padding-inline-start: 40px;
}
.feature-area17 .feature-item,
.banner12-area h3.title.wc-counter {
    font-size: 30px !important;
}
.feature-area17 .sub-title {
    padding-top: 0;
}
.about-area.style-1 .about-inner {
    padding-inline-start: 45px;
}
.banner12-content-item .shape-2 {
    position: absolute;
    right: 30px;
    bottom: 30px;
}
.info-area .nav-tabs .nav-link,
.section-title-wrapper.style-7 .section-subtitle,
.colaboration-item .colaboration-thumb,
.blog-area .blog,
.banner12-content-item .text-wrapper {
    padding: 0;
}
.project-details-area .content-box .section-title,
.faq-area11 .section-title-wrapper,
.project-details-area p,
.services-area9 .section-title {
    max-width: 50%;
}
.project-details-area .content-box .section-title,
.testimonial-item.style-5 .text,
.testimonial-section.style-5 .section-heading {
    margin-bottom: 10px;
}
section.case-study.has_fade_anim .section-subtitle,
.section-header .cate,
.info-area span.section-subtitle,
.services-area13 span.section-subtitle,
.plan-area span.section-subtitle,
.project-details-area .content-box .section-subtitle,
.section-title-wrapper.style-7 .section-subtitle,
.dynamic-section span.section-subtitle,
.testimonal-area-12 span.section-subtitle,
.contact-intro span.section-subtitle,
.service-area span.section-subtitle,
.case-area span.section-subtitle,
.work-area span.section-subtitle,
.blog-area span.section-subtitle,
.choose-area span.section-subtitle,
section.blog-area.style-5 span.section-subtitle,
.choose-area13 .section-subtitle,
.service-area2 span.section-subtitle,
.faq-area span.section-subtitle,
.services-area span.section-subtitle,
.ideas-area .section-subtitle,
.feature-area span.section-subtitle,
.choose-area8 span.section-subtitle,
.services-area9 span.section-subtitle,
section.team-area1 span.section-subtitle,
.blog-area1 span.section-subtitle {
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 2px;
}
.blog {
    padding-top: 40px;
}
.section-title-wrapper.style-5 .section-subtitle {
    padding-bottom: 2px !important;
    border-bottom: 1px solid currentColor !important;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 2px;
}
.section-title-wrapper.style-5 .section-subtitle {
    padding: 0;
}
.choose-area13 .content-wrap {
    padding-inline-end: 0;
}
.tool-section * h5.title,
.service-area.style-1 * h3.title-small,
.service-area.style-1 .service-list li span,
.wcf_iconbox.style-6 .title,
.services-area h3.title-small,
.services-wrapper .service-box .count {
    font-size: 20px;
}
.section-title-wrapper.style-7 .section-subtitle::after,
.section-title-wrapper.style-7 .section-subtitle::before {
    display: none;
}
.blog-area .section-title,
.blog-area .section-heading .text {
    max-width: 100%;
    margin-top: 23px;
}
.title-wrapper.has_fade_anim.text-center.mb-5,
.work-item {
    max-width: 75%;
    margin: 0 auto;
}
.count-slider .count-item .title {
    margin: 0;
    font-size: 20px;
}
.work-section .section-header.left-style {
    text-align: center;
    margin: 0 auto;
    max-width: 75%;
}
.key-solution .section-header.left-style {
    text-align: left;
    margin: 0 auto 40px;
    max-width: 100%;
}

.service-area .wcf_iconbox .thumb {
    padding-top: 35px;
}

.case-area h4.title {
    font-size: 25px;
    margin-bottom: 10px;
}
.service-area,
.plan-area,
.work-area,
section.project-details-area,
.blog-area,
.tool-section,
section.faq-area,
.services-area,
.team-area.style-2,
section.style-5.testimonial-section,
.section-home,
.services-area9,
.blog-area1,
section.info-area.section-spacing,
.testimonal-area-12 {
    padding: 70px 0 70px;
}
section.team-area1 {
    padding: 70px 0 70px !important;
}
.banner-1 .banner-content .text {
    max-width: 100%;
    margin-top: 0px;
    margin-inline-start: 215px;
}
.info-content-wrapper .title,
.banner-7 .title-box .content {
    max-width: 100%;
}
.info-area .nav-tabs .nav-link.active {
    color: #fff !important;
}
.plan-area .title-wrapper {
    padding-bottom: 30px;
}
.widget-item ul li {
    margin-bottom: 8px;
    list-style: none;
}

.widget-item ul li i {
    margin-right: 8px;
    color: #000;
}
.logo-wrapper {
    margin-bottom: 40px;
}
.banner-6 .title-box {
    margin-top: 40px;
    margin-bottom: 40px;
}
.banner-6 .thumb-box img,
.experience-area-bg img {
    object-fit: unset;
}
.experience-area-bg {
    top: 10%;
}
.banner-7 .title-box .wc-btn-underline {
    font-size: 16px;
}
.banner-6.banner-area {
    padding-bottom: 70px;
    padding-top: 70px !important;
}
.achievement-area,
section.client-section.pos-rel.padding-bottom.padding-top.bg-2,
.feature-area {
    padding: 70px 0 70px !important;
}
.faq-escrow-area {
    padding-top: 0 !important;
}
.project-details-area .section-main-content {
    margin-top: 0;
}
.feature-items * h4 {
    font-size: 24px;
}
.feature-items .feature-content .title {
    margin-bottom: 10px;
}

.tool-section .section-header p:last-child {
    color: #000;
    margin-bottom: 15px !important;
}
.experience-area .counter-box p,
.experience-area .counter-box .text {
    text-align: left;
}
.achievement-area .achievement-item .title {
    margin-bottom: 20px;
}
.achievement-area .achievement-item {
    padding: 40px;
    text-align: center;
}
.faq-area .section-title-wrapper,
.faq-area .accordion-wrapper {
    padding: 0;
}

.banner-6.banner-area,
.testimonal-area-12 .faq-area .accordion-wrapper {
    padding: 70px 0 0;
}
.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
}
.colaboration-slider.owl-carousel.owl-theme.owl-loaded {
    background: #beedf0;
    padding: 20px;
    margin-bottom: 20px;
}
p.text.quata {
    padding: 20px 0 20px;
}
.wcf_iconbox.style-1 .thumb {
    margin-bottom: 20px;
}
.wcf_iconbox.style-1 .title {
    margin-bottom: 0;
}
.feature-wrapper.style-1 {
    gap: 70px 70px;
}
.list-check.two-columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 20px;
}
section.bg-max-lg-ash.experience-section,
.work-section {
    padding: 70px 0 70px;
}
.feature-section {
    padding: 0 0 70px;
}
.feature-items {
    padding: 20px;
    margin-bottom: 30px;
}
section.bg-max-lg-ash.experience-section h2.section-title,
.section-header p:last-child,
section.bg-max-lg-ash.experience-section h4.title,
section.bg-max-lg-ash.experience-section p {
    color: #fff;
}
.testimonial-area h2.section-title {
    font-size: 30px !important;
}
.testimonial-area .section-header {
    margin-bottom: 10px;
}
.testimonial-area p.text {
    text-align: center;
}
.testimonial-area.style-3 .testimonial-item-wrapper {
    padding: 40px;
}
.contact-area .section-heading {
    max-width: 45%;
}
.contact-area form > *:nth-child(4) {
    grid-column: span 2;
}
.contact-area .section-title {
    text-align: left;
}
.case-area .review-arrow-wrapper {
    padding: 0;
}
.case-area .case-right {
    padding-inline-start: 20px;
}

.meta-list ul li:nth-child(3) {
    width: 100%;
}
.banner-10 .customer-box .title,
section.bg-max-lg-ash.experience-section h4.title {
    font-size: 22px !important;
}
.meta-list ul li i {
    margin-right: 8px;
    color: #000;
}
.contact-area .contact-wrapper .error {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
}
.contact-area h2.section-title,
.banner-6 .industries-box .title,
.banner-6.banner-area h3.number {
    font-size: 40px !important;
}
.section-title-wrapper.style-5 .section-subtitle {
    border: unset;
    border-radius: 0;
    padding: none;
    font-size: 15px;
    display: inline-block;
}
.wcf_iconbox.style-6 .title:hover {
    color: #2cc6ce;
}
.feature-area17 .feature-wrapper.has_fade_anim {
    opacity: 0.69 !important;
}
.vendor-banner.banner-10 .customer-box {
    background: none;
}
.banner-10.banner-area {
    padding-top: 120px;
}
.testimonial-item-wrapper.testi-about p {
    text-align: left;
}
.feature-section .section-header p:last-child,
.service-area.style-1 .text-wrapper p {
    color: #000;
}
.tool-section .section-header.left-style {
    text-align: left;
    margin-left: 0;
    max-width: 100%;
}
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.owl-nav button {
    background: #fff;
    border: none;
    pointer-events: all;
    font-size: 24px;
    padding: 10px;
    color: #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
    background-color: #239ea5 !important;
}
.wcf_iconbox.style-6 .title {
    margin-bottom: 0;
}
.service-area.style-1 .section-title-wrapper {
    padding-top: 0;
}
.feature-area .content .text {
    padding-top: 15px;
}
.blog.style-2 .content-wrapper {
    flex-basis: 50%;
}
.choose-area13 .choose-thumb {
    padding: 25px;
}
.section-title-wrapper.style-1 .section-subtitle {
    letter-spacing: 2px;
}
.text-slider-active .swiper-wrapper {
    transition-timing-function: linear !important;
}
.service-details-intro-area .text-box {
    padding-bottom: 10px;
    padding-inline-start: 40px;
}
.service-details-intro-area .text-wrapper .text {
    margin-bottom: 0;
}
.feature-area.style-9 .graph-wrapper .nav-link.active {
    background: #000;
}

/* bannner-6 area style start */
.banner-6.banner-area {
    padding-top: 130px;
    padding-bottom: 130px;
}
@media only screen and (max-width: 1199px) {
    .banner-6.banner-area {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-6.banner-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
.banner-6 .title-wrapper {
    max-width: 1034px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1919px) {
    .banner-6 .title-wrapper {
        max-width: 844px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-6 .title-wrapper {
        max-width: 654px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-6 .title-wrapper {
        max-width: 564px;
    }
}
.banner-6 .title-wrapper .title {
    font-size: 100px;
    font-weight: 500;
    line-height: 0.85;
    text-align: center;
}
@media only screen and (max-width: 1919px) {
    .banner-6 .title-wrapper .title {
        font-size: 78px;
    }
}
@media only screen and (max-width: 1199px) {
    .banner-6 .title-wrapper .title {
        font-size: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-6 .title-wrapper .title {
        font-size: 50px;
    }
}
@media (max-width: 575px) {
    .banner-6 .title-wrapper .title {
        font-size: 42px;
    }
}
.banner-6 .title-wrapper .title img {
    max-height: 65px;
}
@media only screen and (max-width: 1199px) {
    .banner-6 .title-wrapper .title img {
        max-height: 45px;
    }
}
@media only screen and (max-width: 991px) {
    .banner-6 .title-wrapper .title img {
        max-height: 35px;
    }
}
.banner-6 .title-box {
    margin-top: 74px;
    margin-bottom: 79px;
}
@media only screen and (max-width: 767px) {
    .banner-6 .title-box {
        margin-bottom: 36px;
    }
}
.banner-6 .shape-2 {
    position: absolute;
    top: -21px;
    inset-inline-end: -52px;
    z-index: -1;
}
@media only screen and (max-width: 767px) {
    .banner-6 .shape-2 {
        inset-inline-end: 0;
    }
}
.dir-rtl .banner-6 .shape-2 {
    transform: rotateY(180deg);
}
.banner-6 .shape-1 {
    position: absolute;
    bottom: -43px;
    inset-inline-start: 46px;
    z-index: -1;
    width: 72px;
}
@media only screen and (max-width: 1199px) {
    .banner-6 .shape-1 {
        width: 52px;
    }
}
@media only screen and (max-width: 767px) {
    .banner-6 .shape-1 {
        display: none;
    }
}
.dir-rtl .banner-6 .shape-1 {
    transform: rotateY(180deg);
}
.banner-6 .customer-box {
    background-color: #d8e7ef;
    padding: 60px 40px 51px;
    border-radius: 20px;
}
.banner-6 .customer-box .title {
    font-size: 50px;
    font-weight: 700;
    line-height: 0.44;
    margin-bottom: 18px;
}
.banner-6 .customer-box .text {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 21px;
    max-width: 134px;
}
.banner-6 .customer-box .thumbs {
    display: flex;
}
.banner-6 .customer-box .thumbs img {
    width: unset;
    border-radius: unset;
    border: unset;
}
.banner-6 .customer-box .thumbs img:not(:first-child) {
    margin-inline-start: -20px;
}
.banner-6 .text-box {
    background-color: #a2d3d9;
    border-radius: 20px;
    padding: 50px 40px 57px;
}
.banner-6 .text-box .text {
    font-size: 22px;
    line-height: 1.36;
    margin-bottom: 43px;
    color: var(--primary);
}
.banner-6 .text-box .wc-btn-play {
    width: 70px;
    height: 70px;
    background-color: #103142;
    border-color: #103142;
}
.banner-6 .text-box .btn-wrapper {
    display: flex;
}
.banner-6 .text-box .wc-btn-primary {
    font-size: 18px;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 70px;
    border: 1.5px solid #103142;
    background-color: #a2d3d9;
    color: #103142;
}
.banner-6 .text-box .border-shape-1 {
    position: absolute;
    inset-inline-start: calc(100% - 200px);
    bottom: calc(100% + 19px);
}
@media only screen and (max-width: 767px) {
    .banner-6 .text-box .border-shape-1 {
        display: none;
    }
}
.banner-6 .text-box .border-shape-2 {
    position: absolute;
    inset-inline-start: 100%;
    bottom: -1px;
}
@media only screen and (max-width: 767px) {
    .banner-6 .text-box .border-shape-2 {
        display: none;
    }
}
.banner-6 .thumb-box {
    border-radius: 20px;
}
@media only screen and (max-width: 991px) {
    .banner-6 .thumb-box {
        order: 3;
    }
}
.banner-6 .thumb-box img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.banner-6 .industries-box {
    border-radius: 20px;
    text-align: center;
    padding: 40px 37px 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 414px;
    flex-grow: 1;
}
.banner-6.banner-area {
    padding-top: 130px;
    padding-bottom: 0px;
}
.banner12-content-item {
    padding: 50px 35px;
}
@media only screen and (max-width: 991px) {
    .banner-6 .industries-box {
        max-width: 100%;
    }
}
.banner-6 .industries-box .number {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 16px 4px;
    background: var(--white);
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 9px;
    width: -moz-max-content;
    width: max-content;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.banner-6 .industries-box .title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    max-width: 226px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-bottom: 6px;
}
.feature-area.style-3.feature-22 {
    padding: 0 0 70px 0 !important;
}
@media only screen and (max-width: 1199px) {
    .banner-6 .industries-box .title {
        font-size: 24px;
    }
}
.banner-6 .industries-box .bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    z-index: -1;
}
.banner-6 .industries-box .image {
    margin-top: auto;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.banner-6 .content-box {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
@media only screen and (max-width: 991px) {
    .banner-6 .content-box {
        flex-wrap: wrap;
    }
}
.banner-6 .content-box .first-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 240px;
}
@media only screen and (max-width: 767px) {
    .banner-6 .content-box .first-column {
        max-width: 100%;
    }
}
.banner-6 .content-box .first-column .text-box {
    margin-inline-end: -200px;
    position: relative;
    z-index: 2;
    outline: 20px solid var(--white);
    flex-grow: 1;
}
@media only screen and (max-width: 767px) {
    .banner-6 .content-box .first-column .text-box {
        margin-inline-end: 0;
    }
}

@media only screen and (max-width: 1919px) {
    .banner-10 .customer-box {
        padding: 60px;
    }
    .choose-area13 .choose-thumb {
        width: 60%;
    }
}
@media screen and (max-width: 1650px) {
    .banner-5 .banner-thumb {
        margin-inline-start: -120px;
    }
}

.about-collab {
    padding: 70px 0 70px !important;
}
.banner-area-vision .text-wrapper {
    padding-top: 0;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .counter-area .number-wrapper .number {
        font-size: 180px;
    }
    .counter-area .counter-content .sign {
        width: 100%;
    }
    .case-study-inner .section-heading {
        max-width: 340px;
    }
    .banner-5 .banner-thumb {
        margin-inline-start: -90px;
    }
    .service-area .wcf_iconbox {
        padding: 20px;
    }
    .info-content-wrapper .thumb img {
        object-fit: unset;
    }
    .feature-wrapper.style-1 {
        gap: 30px;
        padding-right: 0;
    }
    .feature-area .wc-btn-primary {
        margin-top: 20px;
    }
    .project-details-area .content-box .section-title,
    .faq-area11 .section-title-wrapper,
    .project-details-area p,
    .services-area9 .section-title,
    .service-area2.style-3 .section-heading,
    .feature-1-thumb img,
    .banner-6 .title-wrapper,
    .contact-intro {
        max-width: 100%;
    }
    .about-feature .feature-wrapper {
        width: 100%;
    }
    .footer-area .footer-menu > *:first-child {
        width: 330px;
        min-width: 250px;
    }
    .banner-10 .customer-box,
    .wcf_iconbox.style-3 {
        padding: 20px;
    }
    .service-area.style-1 .service-content {
        padding: 15px;
    }
    .service-22 {
        padding: 70px 0 70px;
    }
    .service-area.style-1 .service-content {
        gap: 15px;
    }
    .choose-area13 .choose-thumb,
    .feature-area17 .feature-wrapper {
        width: 100%;
    }

    .choose-area13 .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(450px, 450px));
    }
    .feature-area.style-1::before,
    .ideas-area-bg {
        width: 58%;
    }
    .feature-wrapper.style-1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-area2.style-3 {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .faq-area .accordion-wrapper {
        padding-inline-start: 30px;
    }
    section.banner-1.banner-area img,
    .intro-area .intro-thumb img,
    .ideas-area-bg img {
        object-fit: unset;
    }
    .testimonial-item.style-5 {
        max-width: 100%;
    }
    .testimonial-rating.style-5 {
        flex-basis: 100%;
    }
    .achievement-area .achievement-item {
        text-align: left;
    }
    section#screenshot {
        padding: 70px 0 70px;
    }
    .choose-area .choose-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(410px, 210px));
    }
    .testimonial-area.style-3 .testimonial-thumb img {
        padding-top: 75px;
    }
    .case-area .review-slide-wrapper {
        display: unset;
    }
    section.banner-area.banner-22 {
        padding-top: 180px;
        padding-bottom: 40px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .about-area.style-1 .about-inner {
        height: 70vh;
    }
    .experience-area .counter-box {
        padding: 20px;
    }
    .contact-area form > *:nth-child(1) {
        grid-column: span 2;
    }
    .faq22,
    section.contact-area.section-spacing,
    section.apps-download-section.overflow-hidden.padding-top.padding-bottom.body--bg {
        padding-top: 130px;
    }
    .strategy-area {
        padding-top: 111px;
        padding-bottom: 70px;
    }
    section#screenshot {
        padding: 70px 0 70px;
    }
    .banner-5 .title,
    .banner-5 .text-wrapper .text {
        max-width: 100%;
    }
    .banner-5 .text-box,
    .service-details-intro-area .text-box {
        padding: 10px 0 10px;
    }
    .banner-5 .banner-content,
    .feature-inner.style-1,
    .project-area.style-1 .project-inner,
    .details-intro-content {
        flex-wrap: wrap;
    }
    .feature-wrapper.style-1,
    .feature-about.style-1 {
        flex: 1 1 100%;
    }

    .feature-about.style-1 {
        order: -1;
    }

    .feature-wrapper.style-1 {
        order: 1;
    }

    .banner-5 .scroll-btn {
        display: none;
    }
    .banner-5 .banner-thumb,
    .project-area.style-1 .project-inner .section-text {
        margin-top: 0;
    }
    .banner-5 .banner-thumb {
        margin-inline-start: 0;
    }
    .banner-5 .text-wrapper .text {
        margin: 0;
    }
    .work-section {
        padding-bottom: 70px !important;
    }
    .case-area .review-slide-wrapper {
        display: unset;
    }
    .banner-5 .btn-wrapper {
        padding: 15px 0 15px;
    }
    .banner-5 .banner-inner {
        padding-top: 100px;
    }
    .banner-area.banner-5.font-heading-tropline-regular {
        padding: 40px 0 40px;
    }
    .info-area .nav-tabs .nav-link {
        font-size: 20px;
    }
    .info-content-wrapper .thumb img {
        object-fit: contain;
    }
    .footer-area .footer-menu .logo-wrapper {
        text-align: unset;
    }
    .banner-6 .thumb-box {
        order: 3;
    }
    .banner-6 .industries-box .image {
        margin-top: auto;
        margin-inline-start: 45px;
        margin-inline-end: -40px;
    }
    .banner-6 .content-box .first-column .text-box {
        margin-inline-end: -90px;
    }
    .banner-6.banner-area,
    .testimonal-area-12 .faq-area .accordion-wrapper,
    section.service-area.section-spacing {
        padding: 40px 0 0;
    }
    .project-details-area .content-box .section-title,
    .faq-area11 .section-title-wrapper,
    .project-details-area p,
    .services-area9 .section-title,
    .achievement-area .section-heading,
    .about-feature .feature-content,
    .about-area.style-1 .about-inner .cf_text,
    .feature-area17 .feature-content,
    .title-wrapper.has_fade_anim.text-center.mb-5,
    .work-item,
    .service-area2.style-3 .section-heading,
    .banner-222 .title-wrapper .title,
    .blog-area.style-2 .section-title,
    .blog-area.style-2 .section-heading .text,
    .project-area.style-1 .project-section-content,
    .banner-10 .banner-content .title,
    .blog-area1 .section-header,
    .service-details-intro-area .text-wrapper .text,
    .banner-6 .title-wrapper,
    .feature-area17 .feature-wrapper,
    .contact-intro,
    .contact-area .section-heading {
        max-width: 100%;
    }
    .achievement-area .section-heading,
    .banner-222 .banner-inner {
        margin-bottom: 0;
    }
    .project-area.style-1 .project-content h2 {
        padding: 20px 0 0px;
    }
    .achievement-area .achievement-item {
        border: none;
    }
    .achievement-area .achievement-item {
        flex-basis: 50%;
    }
    .history-item .history-content .content {
        padding: 10px 10px;
        max-width: 100%;
        margin: 0 auto 32px;
    }
    .service-details-intro-area .details-intro-thumb {
        margin-top: 0;
    }
    .client-say-16 {
        margin: 0;
        padding-top: 0;
    }
    h2.section-title,
    h3.title,
    .about-area.style-1 .about-inner .section-title,
    .plan-area .section-title,
    .section-title-wrapper.style-7 .section-title,
    .achievement-area h2,
    .about-feature .section-title,
    .about-feature .sub-title,
    .experience-area .counter-box .text,
    .work-section h2.title {
        font-size: 40px !important;
    }
    .service-area.style-1 .service-list-item {
        flex-basis: 100%;
    }
    .service-area.style-1 .service-content,
    .testimonial-area.style-3 .testimonial-item-wrapper {
        padding: 10px;
    }
    .service-area.style-1 .service-content {
        gap: 15px;
    }
    .to-access-item {
        margin: 0 auto 20px;
    }
    .service-area.style-2 .section-top {
        padding-top: 0;
    }
    .blog-area.style-5 .section-heading {
        text-align: center;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .choose-area13 .choose-thumb,
    .blog-area.style-2 .section-heading {
        width: 100%;
    }
    section.banner-1.banner-area img {
        object-fit: unset;
    }
    .testimonial-area.style-3 .testimonial-thumb img {
        padding-top: 75px;
    }
    .intro-counter,
    .intro-area .intro-thumb,
    .intro-area .title-wrapper {
        padding: 0;
    }
    .intro-count-item.client::before {
        display: none;
    }
    .testimonial-item.style-5 {
        max-width: 100%;
    }
    .testimonial-rating.style-5 {
        flex-basis: 100%;
    }
    .banner-7 .features-wrapper {
        padding: 40px;
    }
    .achievement-area .achievement-item {
        padding-top: 50px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .service-area .services-item {
        grid-template-columns: 45px 162px 440px 0;
    }
    .banner-10 .banner-content .title,
    .service-area.style-1 .text-wrapper {
        margin-top: 0;
    }
    .team-area1 .team-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    h2.title,
    h1.section-title,
    .intro-area .intro-title-wrapper .title,
    h2.title.wc-counter.count,
    .banner-10 .banner-content .title {
        font-size: 50px !important;
    }
    section.banner-area.banner-22 {
        padding-top: 120px;
        padding-bottom: 40px;
    }
}
@media (max-width: 767px) {
    .banner-6 .title-wrapper .title,
    .banner-5.banner-area h2,
    section#how h2,
    .about-area.style-1 .about-inner .section-title,
    h2.title,
    h1.section-title,
    .intro-area .intro-title-wrapper .title,
    h2.title.wc-counter.count,
    .banner-10 .banner-content .title,
    .login-section h1 {
        font-size: 42px !important;
    }
    .login-section .top-row > div:last-child {
        margin-bottom: 40px;
    }
    .login-section .top-row > div {
        width: 100%;
    }
    .section-title-wrapper.style-1 .section-title,
    h2.section-title,
    h3.title,
    .about-area.style-1 .about-inner .section-title,
    .plan-area .section-title,
    .section-title-wrapper.style-7 .section-title,
    .achievement-area h2,
    .about-feature .section-title,
    .about-feature .sub-title,
    .experience-area .counter-box .text,
    .work-section h2.title,
    .banner-6.banner-area h3.title,
    h3.number,
    .contact-area h2.section-title,
    .banner-6 .industries-box .title,
    .banner-6.banner-area h3.number {
        font-size: 30px !important;
    }
    .banner-5 .scroll-btn,
    .banner-5 .text-wrapper .text,
    .section-title-wrapper.style-1 .subtitle-wrapper,
    .service-area .title-wrapper,
    .counter-area .counter-content .text,
    .banner-6 .text-box .text {
        margin-bottom: 15px;
    }
    .services-area13 .section-heading .content .section-title {
        margin-bottom: 15px !important;
    }
    .banner-6 .title-box {
        margin: 70px 0 40px;
    }
    .section-title-wrapper.style-1 .cf_text,
    .banner-7 .banner-content,
    section.choose-area8 {
        margin-top: 15px;
    }
    .services-area13 .section-heading .content,
    .blog-area.style-8 .blog-area-inner,
    .service-area2.style-3 .service-wrapper,
    .service-area.style-1 .service-content,
    .feature-inner.style-6 {
        gap: 0;
    }
    h2.section-title,
    h3.title,
    .feature-area17 .section-title {
        font-size: 22px;
    }
    .testimonial-area.style-3.testi {
        padding-top: 80px;
    }
    .experience-area .counter-box {
        padding: 30px;
    }
    .to-access-item {
        margin: 0 auto 20px;
    }
    .feature-area17 .feature-item,
    .banner12-area h3.title.wc-counter {
        font-size: 22px !important;
    }
    .feature-area17 .feature-item {
        padding-inline-start: 20px;
    }
    .banner-7 .features-wrapper {
        padding: 0 20px 20px 20px;
    }
    .text-slider h2.title {
        font-size: 20px !important;
    }
    .count-slider .count-item .title,
    .login-section .button {
        font-size: 16px;
    }
    .login-section h1 {
        margin-bottom: 20px;
    }
    .blog-details-area.inner-policy {
        padding-top: 118px !important;
    }
    .work-section
        .owl-carousel
        .owl-nav
        button.owl-next
        .owl-carousel
        .owl-nav
        button.owl-prev {
        display: none;
    }
    .feature-area17 .feature-item:first-child {
        padding-top: 20px;
    }
    .achievement-area .section-heading {
        max-width: 100%;
        margin-bottom: 36px;
    }
    .banner-10 .customer-box {
        padding: 20px 0;
    }
    .service-area .service-wrapper,
    .services-area13 .services-area13-inner,
    .feature-wrapper.style-1 {
        gap: 20px;
    }
    .services-area9 .services-wrapper {
        margin: 0;
    }
    .services-area9 .wcf_iconbox {
        padding-inline-start: 20px;
        padding-inline-end: 0;
        padding-top: 20px;
    }
    .team-area1 .section-title-wrapper {
        grid-template-columns: 1fr;
    }
    .blog-area.style-8 .blog {
        padding-top: 0;
        padding-bottom: 0;
    }
    .service-area.style-1 .service-list-item,
    .testimonial-rating.style-5 {
        flex-basis: 100%;
    }
    .banner-6 .industries-box .image {
        margin-inline-start: 40px;
    }
    .banner-5 .banner-thumb {
        margin-inline-start: 0;
    }
    .banner-thumb-wrapper.line-area,
    .service-area .wcf_iconbox {
        padding-bottom: 15px;
    }
    .service-area.style-1 .service-text,
    .feature-area .wcf_iconbox:nth-child(4) {
        padding-bottom: 0;
    }
    .service-area.style-2 .section-top,
    .banner-7 .wcf_iconbox:not(:first-child) {
        padding-top: 0;
    }
    section.service-area.style-2.service-22,
    .faq-area .section-title-wrapper {
        padding: 50px 0 0 0 !important;
    }
    .vendor-banner.banner-10 .customer-box {
        background: #28b2b9;
    }
    .wcf_iconbox.style-3 .text,
    .wcf_iconbox.style-3 .title,
    .banner-222 .banner-inner {
        margin-bottom: 0;
    }
    .feature-tabs li a .subtitle,
    .feature-tabs li .nav-link .subtitle {
        font-size: 16px;
    }
    .achievement-area,
    section.client-section.pos-rel.padding-bottom.padding-top.bg-2,
    .feature-area,
    .service-area,
    .plan-area,
    .work-area,
    section.project-details-area,
    .blog-area,
    .tool-section,
    section.faq-area,
    .services-area,
    .team-area.style-2,
    section.style-5.testimonial-section,
    .section-home,
    .services-area9,
    .blog-area1,
    section.info-area.section-spacing,
    .testimonal-area-12,
    section.history-section.padding-top.pt-lg-0.padding-bottom-2,
    section#feature,
    section.case-study.has_fade_anim,
    .about-collab,
    section.team-area1,
    section#screenshot,
    section.bg-max-lg-ash.experience-section,
    .work-section {
        padding: 50px 0 50px !important;
    }
    .banner-6.banner-area,
    .testimonal-area-12 .faq-area .accordion-wrapper,
    section.blog-area.section-spacing.style-8.pin__area1,
    section.blog-area.section-spacing.pin_blog_area.bill-sec {
        padding: 50px 0 0 !important;
    }
    .banner-6 .customer-box .text,
    .banner-6 .industries-box .title,
    .project-details-area .content-box .section-title,
    .faq-area11 .section-title-wrapper,
    .project-details-area p,
    .services-area9 .section-title,
    .achievement-area .section-heading,
    .about-feature .feature-content,
    .about-area.style-1 .about-inner .cf_text,
    .feature-area17 .feature-content,
    .title-wrapper.has_fade_anim.text-center.mb-5,
    .work-item,
    .service-area2.style-3 .section-heading,
    .banner-222 .title-wrapper .title,
    .blog-area.style-2 .section-title,
    .blog-area.style-2 .section-heading .text,
    .project-area.style-1 .project-section-content,
    .banner-10 .banner-content .title,
    .blog-area1 .section-header,
    .service-details-intro-area .text-wrapper .text,
    .banner-6 .title-wrapper,
    .feature-area17 .feature-wrapper,
    .contact-intro,
    .contact-area .section-heading,
    .service-area.style-1 .service-text,
    .work-section .section-header.left-style,
    .blog-details-area .section-title {
        max-width: 100%;
    }
    .feature-wrapper.style-1,
    .feature-section-top.style-3,
    .feature-area.style-8 .feature-section-top {
        grid-template-columns: 1fr;
    }
    .service-area .wcf_iconbox .thumb,
    .wcf_iconbox.style-6 {
        padding: 15px 0 15px;
    }
    .service-area .wcf_iconbox {
        border: 0;
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
    .info-content-wrapper .thumb img,
    .bg-full img {
        object-fit: unset;
    }
    .services-wrapper .service-box,
    .case-area .case-right,
    .about-area.style-1 .about-inner {
        padding-inline-end: 0;
        padding-inline-start: 0;
    }
    .about-area.style-1 .about-inner {
        padding: 10px;
    }
    .services-wrapper .service-box,
    .ideas-area .ideas-section-content {
        padding-top: 0;
    }
    .contact-area form {
        display: block;
    }
    .info-content-wrapper .content,
    .banner-6 .customer-box,
    .banner-6 .text-box {
        padding: 30px 30px 30px;
    }
    .info-content-wrapper .title {
        font-size: 22px !important;
    }
    .achievement-area .achievement-item {
        border: 0;
    }
    .banner12-area {
        margin: 0;
    }
    .case-area .case-item .section-title-wrapper {
        padding-bottom: 0;
    }
    .achievement-area .achievement-item,
    .intro-area .title-wrapper,
    .intro-area .intro-thumb,
    .intro-counter,
    .blog {
        padding: 0;
    }
    .choose-area13 .choose-thumb {
        width: 100%;
    }
    .service-details-intro-area .text-box {
        padding-inline-start: 0;
    }
    .testimonial-section .style-5.swiper-button-next,
    .swiper-button-prev {
        display: inline-flex;
    }
    section.banner-area.banner-22 {
        padding-top: 120px;
        padding-bottom: 0px;
    }
}