@charset "UTF-8";
.line-3,
.line::after,
.line::before {
    width: 1px;
    height: 100%;
    content: "";
    top: 0
}

.modal__apply .form-btn button,
.service__image:nth-child(9),
a,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
img,
li,
p,
video {
    z-index: 1
}

.blog__area .row,
.blog__area-2 .row,
.row.reset-grid {
    --bs-gutter-x: 60px
}

.scroll-top,
a {
    -webkit-transition: .3s;
    transition: .3s
}

*,
.mega-menu li,
.mega-menu-2 li,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
img,
ol,
p,
ul,
video {
    margin: 0;
    padding: 0
}

#hero_texture,
.footer-line,
.hero__area,
.hero__area-2,
.line,
.offcanvas__search form,
.sec-title-16 span,
a,
body,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
img,
li,
p,
video {
    position: relative
}

.line-3,
.line::before {
    background: var(--white-4)
}

#switcher_close,
.hero__area-3 .intro-title .video-title.close-video-title,
.hero__plane img,
.logo-light,
.logo-secondary,
.scroll-top {
    display: none
}

.wc-btn-dark,
p {
    font-weight: 400
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
    text-align: justify
}

.blog__item-2,
.brand__item,
.brand__item-2,
.brand__title-2,
.brand__title-3,
.choose-title-wrapper,
.counter__item p,
.counter__item-2,
.cta__content,
.cursor.large,
.faq__btm,
.hero__title::after,
.main-menu-3,
.portfolio__area-2 .sec-title-wrapper,
.portfolio__big,
.portfolio__footer-area .pc-btn,
.portfolio__service .ps-btn,
.portfolio__slide-7,
.portfolio__text,
.react_border,
.roll__slide,
.rollslide_wrap,
.testimonial__item.item-2,
.testimonial__slide-3,
.wc-btn-dark,
.work8__btn,
.workflow__slide {
    text-align: center
}

.switcher__items,
body {
    font-family: Kanit, sans-serif
}



.award__counter,
.career__benefits .sec-title-wrapper,
.career__benefits-list li,
.career__gallery-img,
.error__content,
.header__inner,
.mixtup_btn .wc-btn,
.portfolio__project .pp-slide-thumb,
.portfolio__slider-11-title .swiper-slide,
.service__area .sec-title-wrapper,
.service__item-6,
.showcase__menu-4,
.story__img-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}



.content a,
a {
    text-decoration: none
}





.footer__contact li a.phone:hover::after,
.footer__info-6 li a.phone:hover::after {
    width: 0%
}

:root {
    --primary: #d6b9a8;
    --secondary: #1e2d42;
    --black: #000;
    --black-2: #0b1626;
    --black-3: #555;
    --black-4: #162032;
    --black-5: #22344e;
    --black-6: #182338;
    --black-7: #555555;
    --black-13: #666;
    --white: #fff;
    --white-2: #efefef;
    --white-3: #e9e9e9;
    --white-4: #f0f0f0;
    --white-5: #fbfbfb;
    --white-6: #d7d7d7;
    --gray: #c2c2c2;
    --gray-2: #999;
    --gray-3: #a8a8a8;
    --gray-4: #f6f6f6;
    --gray-5: #bbb;
    --gray-6: #1e2d42;
    --gray-7: #b9b9b9;
    --gray-8: #8e8e8e;
    --gray-9: #aaa;
    --gray-10: #7c7c7c;
    --gray-11: #d9d9d9;
    --gray-12: #383838;
    --gray-13: #ccc;
    --gray-14: #dfdfdf;
    --gray-15: #c0c0c0;
    --pink: #faede9;
    --pink-2: #ff9776;
    --pink-3: #f3ecec;
    --pink-4: #fffaf0;
    --pink-5: #e0e3cc;
    --bg-line: #162032;
    --d-gray: #6a6a6a;
    --d-black: #162032;
    --d-black-2: #0d1b2e;
    --d-black-3: #162032;
    --fs-intro-header: clamp(48px, 5vw + 1rem, 133px);
    --fs-main-sub-head: clamp(37px, 3vw + 2px, 130px);
    --fs-main-sub-intro: clamp(37px, 6vw + 2px, 130px);
    --pink-6: #eee5dc;
    --purple: #d9dbeb;
    --purple-2: #cccede;
    --green: #81c3a3;
    --green-2: #dce4e0;
    --white-6: #d7d7d7;
    --white-7: #b7b7c5;
    --black-14: #20314a;
    --black-15: #1e2d42;
    --lime: #d6b9a8;
    --lime-2: #b8946f;
    --gray-16: #6b6b6b;
    --gray-17: #f7f7fc;
    --gray-18: #999999;
    --gray-20: #d7d7d7;
    --gray-21: #f2f2f8;
    --gray-22: #fcfcfe;
    --gray-23: #ececf3;
    --gray-24: #ececf4;
    --gray-25: #d3d3d3;
}

@font-face {
    font-family: newYork;
    src: url("../fonts/newyork/FontsFree-Net-NewYork.ttf");
    font-weight: 400
}

#home10_menu li>a,
.black {
    color: var(--black)
}

.black-2,
.header__area-2 .main-dropdown li a,
.header__area-2 .mega-menu li a,
.header__area-2 .mega-menu li a:not([href]):not([class]),
.header__area-2 .mega-menu-2 li a,
.header__area-2 .mega-menu-2 li a:not([href]):not([class]),
.main-menu-4>li>a,
.sec-title,
.sec-title-16,
.sec-title-16 span,
.sec-title-4,
.sec-title-8,
.wc-btn-dark,
.wc-btn-dark:hover {
    color: var(--black-2)
}

.black-3,
.client__role-3,
.portfolio__slide-2 .btn-common:hover,
.rollslide_title:hover,
p {
    color: #fff
}

.black-4 {
    color: var(--black-4)
}

.black-5 {
    color: var(--black-5)
}

.black-6 {
    color: var(--black-6)
}

.black-7 {
    color: var(--black-7)
}

.black-13 {
    color: var(--black-13)
}

.main-menu .mega-menu li a,
.main-menu .mega-menu-2 li a,
.main-menu-4 .mega-menu li a,
.main-menu-4 .mega-menu-2 li a,
.mega-menu li a:not([href]):not([class]),
.mega-menu-2 li a:not([href]):not([class]),
.switcher__btn button.active,
.switcher__btn button:hover,
.switcher__title,
.white {
    color: var(--white)
}

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

.white-3 {
    color: var(--white-3)
}

.white-4 {
    color: var(--white-4)
}

.white-5 {
    color: var(--white-5)
}

.white-6 {
    color: var(--white-6)
}

.btn-together:hover,
.gray {
    color: var(--gray)
}

.gray-2,
.scroll-top:hover {
    color: var(--gray-2)
}

.gray-3 {
    color: var(--gray-3)
}

.gray-4 {
    color: var(--gray-4)
}

.gray-5 {
    color: var(--gray-5)
}

.gray-6 {
    color: var(--gray-6)
}

.gray-7 {
    color: var(--gray-7)
}

.gray-8 {
    color: var(--gray-8)
}

.gray-9 {
    color: var(--gray-9)
}

.gray-10 {
    color: var(--gray-10)
}

.gray-11 {
    color: var(--gray-11)
}

.gray-12 {
    color: var(--gray-12)
}

.gray-13 {
    color: var(--gray-13)
}

.gray-14 {
    color: var(--gray-14)
}

.gray-15 {
    color: var(--gray-15)
}

.pink {
    color: var(--pink)
}

.pink-2 {
    color: var(--pink-2)
}

.pink-3 {
    color: var(--pink-3)
}

.pink-4 {
    color: var(--pink-4)
}

.pink-5 {
    color: var(--pink-5)
}

.primary {
    color: var(--primary)
}

.blog__meta a:hover,
.blog__meta-2 a:hover,
.secondary {
    color: var(--secondary)
}

.bg-line {
    color: var(--bg-line)
}

.d-gray {
    color: var(--d-gray)
}

.d-black {
    color: var(--d-black)
}

.d-black-2 {
    color: var(--d-black-2)
}

.d-black-3 {
    color: var(--d-black-3)
}



.pb-30 {
    padding-bottom: 30px
}

.pb-100 {
    padding-bottom: 100px
}

.pb-110 {
    padding-bottom: 110px
}

.pb-120 {
    padding-bottom: 120px
}

.pb-130 {
    padding-bottom: 130px
}

.pb-140 {
    padding-bottom: 140px
}

.pb-150 {
    padding-bottom: 150px
}

.pb-200 {
    padding-bottom: 200px
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .pb-100,
    .pb-110,
    .pb-120,
    .pb-130,
    .pb-140,
    .pb-150,
    .pb-200 {
        padding-bottom: 90px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pb-100,
    .pb-110,
    .pb-120,
    .pb-130,
    .pb-140,
    .pb-150,
    .pb-200 {
        padding-bottom: 80px
    }
}

.pt-42,
.team__member-social,
.team__member-work {
    padding-top: 40px
}

.pt-100,
.team__slide:nth-child(2n) {
    padding-top: 100px
}

.pt-110 {
    padding-top: 110px
}

.pt-120 {
    padding-top: 120px
}

.hero__right-6,
.pt-130 {
    padding-top: 130px
}

.pt-140 {
    padding-top: 140px
}

.pt-150,
.section_title_wrapper .title_right {
    padding-top: 150px
}

@media only screen and (max-width:767px) {
    .pb-100,
    .pb-110,
    .pb-120,
    .pb-130,
    .pb-140,
    .pb-150,
    .pb-200 {
        padding-bottom: 60px
    }
    .pt-100,
    .pt-110,
    .pt-120,
    .pt-130,
    .pt-140,
    .pt-150 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-100,
    .pt-110,
    .pt-120,
    .pt-130,
    .pt-140,
    .pt-150 {
        padding-top: 80px
    }
}

.sp-x {
    padding-left: 100px;
    padding-right: 100px
}

.mt-60 {
    margin-top: 60px
}

.ht-200 {
    padding-top: 200px
}

@-webkit-keyframes wcRotate {
    0%,
    100% {
        -webkit-transform: rotate(0) scale(1.1);
        transform: rotate(0) scale(1.1)
    }
    50% {
        -webkit-transform: rotate(5deg) scale(1.17);
        transform: rotate(5deg) scale(1.17)
    }
}

@keyframes wcRotate {
    0%,
    100% {
        -webkit-transform: rotate(0) scale(1.1);
        transform: rotate(0) scale(1.1)
    }
    50% {
        -webkit-transform: rotate(5deg) scale(1.17);
        transform: rotate(5deg) scale(1.17)
    }
}

@-webkit-keyframes wcBubble {
    0%,
    100% {
        scale: 1
    }
    50% {
        scale: 1.5
    }
}

@keyframes wcBubble {
    0%,
    100% {
        scale: 1
    }
    50% {
        scale: 1.5
    }
}

@-webkit-keyframes wcZoom {
    0%,
    100% {
        scale: 1
    }
    50% {
        scale: 0.5
    }
}

@keyframes wcZoom {
    0%,
    100% {
        scale: 1
    }
    50% {
        scale: 0.5
    }
}

@-webkit-keyframes wcSlideBottom {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

@keyframes wcSlideBottom {
    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

@-webkit-keyframes reveal {
    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

@keyframes reveal {
    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px)
    }
}

@-webkit-keyframes wcfadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes wcfadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes wcSpinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

html {
    scroll-behavior: smooth
}

li {
    list-style: none
}

button {
    background-color: transparent;
    border: 0
}

p {
    font-style: normal;
    line-height: 1.5;
    font-size: 16px
}

.btn-item,
.footer-line::after,
.line-3,
.line::after,
.line::before,
.shape,
.solution__shape img {
    position: absolute
}

.line::before {
    left: 0
}

.line::after {
    left: calc(50% - 1px)
}

.line-3 {
    right: 0
}

.shape {
    left: -90px;
    bottom: -350px
}

.shape .primary {
    width: 54px;
    height: 56px;
    background-color: var(--primary);
    margin-top: -37px;
    margin-left: 24px
}

.shape .secondary {
    width: 53px;
    height: 56px;
    background-color: var(--secondary)
}

.pos-inherit {
    position: inherit
}

.portfolio__area-6 .zi-9,
.sec-title-wrapper {
    position: relative;
    z-index: 9
}

.footer-line::after {
    content: "";
    width: 1px;
    height: 500px;
    left: 0;
    bottom: -400px;
    background: var(--white-4)
}

.scroll-top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9991;
    border-radius: 100px;
    color: var(--white);
    background: var(--white);
    mix-blend-mode: exclusion
}

.scroll-top i {
    font-size: 18px;
    color: var(--black-2)
}



.font-20 {
    font-size: 20px !important
}

.wc-btn-black,
.wc-btn-light,
.wc-btn-pink,
.wc-btn-primary,
.wc-btn-secondary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    text-transform: capitalize;
    color: #e7d3c5;
    text-shadow: 0 0 10px rgba(231, 211, 197, 0.55), 0 0 22px rgba(214, 185, 168, 0.35);
    --btn-border-color: var(--gray);
    border: 1px solid transparent;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s
}

.wc-btn-black::before,
.wc-btn-light::before,
.wc-btn-pink::before,
.wc-btn-primary::before,
.wc-btn-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--btn-border-color);
    border-radius: 50%;
    pointer-events: none;
    animation: morphFrame 8s ease-in-out infinite
}

.wc-btn-black:hover,
.wc-btn-light:hover,
.wc-btn-pink:hover,
.wc-btn-primary:hover,
.wc-btn-secondary:hover {
    color: #000000;
    text-shadow: 0 0 10px rgba(231, 211, 197, 0.25);
    --btn-border-color: var(--primary);
    border: 1px solid transparent;
    box-shadow: 0 0 22px rgba(231, 211, 197, 0.35), 0 0 40px rgba(214, 185, 168, 0.25);
    font-weight: 700
}

.wc-btn-black:hover span,
.wc-btn-light:hover span,
.wc-btn-pink:hover span,
.wc-btn-primary:hover span,
.wc-btn-secondary:hover span {
    width: 350px;
    height: 350px
}

.wc-btn-black i,
.wc-btn-light i,
.wc-btn-pink i,
.wc-btn-primary i,
.wc-btn-secondary i {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    padding-left: 5px
}

.wc-btn-black span,
.wc-btn-light span,
.wc-btn-pink span,
.wc-btn-primary span,
.wc-btn-secondary span {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-color: var(--primary);
    z-index: -1;
    border-radius: 100%;
    -webkit-transition: .7s;
    transition: .7s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(231, 211, 197, 0.35), 0 0 22px rgba(214, 185, 168, 0.25)
}

.wc-btn-black:hover span,
.wc-btn-light:hover span,
.wc-btn-pink:hover span,
.wc-btn-primary:hover span,
.wc-btn-secondary:hover span {
    animation: morphFrame 8s ease-in-out infinite;
    box-shadow: 0 0 22px rgba(231, 211, 197, 0.65), 0 0 46px rgba(214, 185, 168, 0.4)
}

.wc-btn-light,
.wc-btn-pink,
.wc-btn-secondary {
    border: 1px solid transparent
}

.wc-btn-pink:hover {
    border-color: transparent
}

.wc-btn-pink span {
    background-color: var(--primary)
}

.faq__sec-title .btn-view::after,
.header__area-2 .main-dropdown,
.header__area-2 .main-dropdown .sub-dropdown,
.header__area-2 .mega-menu,
.header__area-2 .mega-menu-2,
.header__area-3.sticky-3,
.hero__area-3.start-video .sec-sub-title::after,
.wc-btn-dark:hover,
.wc-btn-light span {
    background-color: var(--white)
}

.wc-btn-light span {
    background-color: var(--primary)
}

.wc-btn-dark:hover,
.wc-btn-light:hover {
    border-color: var(--white)
}

.about8__title a::after,
.job__area,
.portfolio__area,
.portfolio__area-3,
.research__tools li a:hover,
.sec-title-16 span::after,
.service__area,
.service__area-2,
.service__area-6,
.service__detail-circle span::after,
.testimonial__slider-3 .swipper-btn:hover,
.wc-btn-black span {
    background-color: var(--black-2)
}

.wc-btn-black:hover {
    color: var(--white);
    border-color: var(--black-2)
}

.wc-btn-dark {
    display: inline-block;
    font-size: 15px;
    line-height: 1.5;
    text-transform: uppercase;
    border: 1.3px solid var(--black-2);
    border-radius: 33px;
    padding: 20px 54px;
    -webkit-transition: .3s;
    transition: .3s
}

.offcanvas__logo,
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child,
.offcanvas__menu-wrapper.mean-container .mean-nav>ul>li:last-child>a,
.offcanvas__social {
    border-bottom: 1px solid var(--black-4)
}

#btn_wrapper,
.btn_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 100%;
    margin-left: -40px
}







.main-dropdown,
.main-dropdown .sub-dropdown,
.mega-menu,
.mega-menu-2 {
    z-index: 9;
    background-color: var(--black-2);
    opacity: 0;
    visibility: hidden
}

.sec-title {
    font-weight: 500;
    font-size: clamp(42px, 6vw + 2px, 60px);
    line-height: 1
}

.header_v1,
.page_title_header {
    font-size: var(--fs-main-sub-intro);
    font-weight: 500
}



.header_v1,
.header_v2,
.header_v3,
.sec-title-4,
.sec-title-8 {
    line-height: 1;
    text-transform: uppercase
}

.header_v2,
.header_v3 {
    font-weight: 500;
    font-size: var(--fs-main-sub-head)
}























.blog__area,
.blog__area-3,
.blog__area-6,
.blog__detail,
.blog__related,
.brand__area,
.counter__area,
.cta__area,
.development__area,
.faq__area,
.faq__area-6,
.hero__area,
.hero__area-2,
.hero__area-3,
.job__area,
.portfolio__detail,
.portfolio__detail .block-gallery,
.service__area,
.service__area-3,
.service__detail,
.story__area,
.team__area,
.team__btm,
.team__detail,
.testimonial__area,
.title-line,
.workflow__area {
    overflow: hidden
}

.workflow__item {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.workflow__item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.workflow__item .workflow__number {
    font-size: 60px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    line-height: 1;
}

.workflow__item .workflow__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--black-2);
    margin-bottom: 15px;
    line-height: 1.3;
}

.workflow__item p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--black-3);
    margin: 0;
    text-align: center;
}

/* Responsive styles for workflow items */
@media (max-width: 991px) {
    .workflow__item {
        margin-bottom: 40px;
        padding: 30px 15px;
    }
    
    .workflow__item .workflow__number {
        font-size: 50px;
    }
    
    .workflow__item .workflow__title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .workflow__area .row {
        justify-content: center;
    }
    
    .workflow__item {
        max-width: 400px;
        margin: 0 auto 30px;
        padding: 25px 20px;
    }
    
    .workflow__item .workflow__number {
        font-size: 45px;
    }
    
    .workflow__item .workflow__title {
        font-size: 20px;
    }
    
    .workflow__item p {
        font-size: 15px;
    }
}

@media (min-width:1200px) {
    .img-anim {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 565px
    }
    .img-anim img {
        position: absolute;
        bottom: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 120%;
        margin-left: auto;
        margin-right: auto
    }
}





.main-dropdown,
.main-dropdown .sub-dropdown {
    width: 300px;
    padding: 15px 0;
    position: absolute
}







#header_10,
.main-menu-3>li.has-megamenu,
.main-menu-4>li.has-megamenu,
.main-menu>li.has-megamenu {
    position: static
}





.logos_wrapper li,
.privacy-policy p,
.section_title_wrapper .title_right__inner__right ul li {
    margin-bottom: 10px
}







.main-menu-4>li:hover .main-dropdown,
.main-menu-4>li:hover .mega-menu,
.main-menu-4>li:hover .mega-menu-2,
.main-menu>li:hover .main-dropdown,
.main-menu>li:hover .mega-menu,
.main-menu>li:hover .mega-menu-2 {
    top: 75px;
    opacity: 1;
    visibility: visible
}



.main-menu-4>li>a .menu-text,
.main-menu>li>a .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-shadow: 0 16px 0 var(--white)
}

.footer-menu li a .menu-text span,
.footer-menu-2 li a .menu-text span,
.main-menu-3>li>a .menu-text span,
.main-menu-4>li>a .menu-text span,
.main-menu>li>a .menu-text span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    -webkit-transform: translateY(var(--m)) translateZ(0);
    transform: translateY(var(--m)) translateZ(0)
}

.footer-menu li a .menu-text span:first-child,
.footer-menu-2 li a .menu-text span:first-child,
.main-menu-3>li>a .menu-text span:first-child,
.main-menu-4>li>a .menu-text span:first-child,
.main-menu>li>a .menu-text span:first-child {
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.footer-menu li a .menu-text span:nth-child(2),
.footer-menu-2 li a .menu-text span:nth-child(2),
.main-menu-3>li>a .menu-text span:nth-child(2),
.main-menu-4>li>a .menu-text span:nth-child(2),
.main-menu>li>a .menu-text span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.footer-menu li a .menu-text span:nth-child(3),
.footer-menu-2 li a .menu-text span:nth-child(3),
.main-menu-3>li>a .menu-text span:nth-child(3),
.main-menu-4>li>a .menu-text span:nth-child(3),
.main-menu>li>a .menu-text span:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.footer-menu li a .menu-text span:nth-child(4),
.footer-menu-2 li a .menu-text span:nth-child(4),
.main-menu-3>li>a .menu-text span:nth-child(4),
.main-menu-4>li>a .menu-text span:nth-child(4),
.main-menu>li>a .menu-text span:nth-child(4) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.footer-menu li a .menu-text span:nth-child(5),
.footer-menu-2 li a .menu-text span:nth-child(5),
.main-menu-3>li>a .menu-text span:nth-child(5),
.main-menu-4>li>a .menu-text span:nth-child(5),
.main-menu>li>a .menu-text span:nth-child(5) {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s
}

.footer-menu li a .menu-text span:nth-child(6),
.footer-menu-2 li a .menu-text span:nth-child(6),
.main-menu-3>li>a .menu-text span:nth-child(6),
.main-menu-4>li>a .menu-text span:nth-child(6),
.main-menu>li>a .menu-text span:nth-child(6) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

.footer-menu li a .menu-text span:nth-child(7),
.footer-menu-2 li a .menu-text span:nth-child(7),
.main-menu-3>li>a .menu-text span:nth-child(7),
.main-menu-4>li>a .menu-text span:nth-child(7),
.main-menu>li>a .menu-text span:nth-child(7) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s
}

.footer-menu li a .menu-text span:nth-child(8),
.footer-menu-2 li a .menu-text span:nth-child(8),
.main-menu-3>li>a .menu-text span:nth-child(8),
.main-menu-4>li>a .menu-text span:nth-child(8),
.main-menu>li>a .menu-text span:nth-child(8) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.footer-menu li a .menu-text span:nth-child(9),
.footer-menu-2 li a .menu-text span:nth-child(9),
.main-menu-3>li>a .menu-text span:nth-child(9),
.main-menu-4>li>a .menu-text span:nth-child(9),
.main-menu>li>a .menu-text span:nth-child(9) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s
}

.footer-menu li a .menu-text span:nth-child(10),
.footer-menu-2 li a .menu-text span:nth-child(10),
.main-menu-3>li>a .menu-text span:nth-child(10),
.main-menu-4>li>a .menu-text span:nth-child(10),
.main-menu>li>a .menu-text span:nth-child(10) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

.footer-menu li a .menu-text span:nth-child(11),
.footer-menu-2 li a .menu-text span:nth-child(11),
.main-menu-3>li>a .menu-text span:nth-child(11),
.main-menu-4>li>a .menu-text span:nth-child(11),
.main-menu>li>a .menu-text span:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s
}

.footer-menu li a .menu-text span:nth-child(12),
.footer-menu-2 li a .menu-text span:nth-child(12),
.main-menu-3>li>a .menu-text span:nth-child(12),
.main-menu-4>li>a .menu-text span:nth-child(12),
.main-menu>li>a .menu-text span:nth-child(12) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.footer-menu li a .menu-text span:nth-child(13),
.footer-menu-2 li a .menu-text span:nth-child(13),
.main-menu-3>li>a .menu-text span:nth-child(13),
.main-menu-4>li>a .menu-text span:nth-child(13),
.main-menu>li>a .menu-text span:nth-child(13) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s
}

.footer-menu li a .menu-text span:nth-child(14),
.footer-menu-2 li a .menu-text span:nth-child(14),
.main-menu-3>li>a .menu-text span:nth-child(14),
.main-menu-4>li>a .menu-text span:nth-child(14),
.main-menu>li>a .menu-text span:nth-child(14) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}

.footer-menu li a .menu-text span:nth-child(15),
.footer-menu-2 li a .menu-text span:nth-child(15),
.main-menu-3>li>a .menu-text span:nth-child(15),
.main-menu-4>li>a .menu-text span:nth-child(15),
.main-menu>li>a .menu-text span:nth-child(15) {
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s
}

.footer-menu li a .menu-text span:nth-child(16),
.footer-menu-2 li a .menu-text span:nth-child(16),
.main-menu-3>li>a .menu-text span:nth-child(16),
.main-menu-4>li>a .menu-text span:nth-child(16),
.main-menu>li>a .menu-text span:nth-child(16) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s
}

.footer-menu li a .menu-text span:nth-child(17),
.footer-menu-2 li a .menu-text span:nth-child(17),
.main-menu-3>li>a .menu-text span:nth-child(17),
.main-menu-4>li>a .menu-text span:nth-child(17),
.main-menu>li>a .menu-text span:nth-child(17) {
    -webkit-transition-delay: 0.85s;
    transition-delay: 0.85s
}

.footer-menu li a .menu-text span:nth-child(18),
.footer-menu-2 li a .menu-text span:nth-child(18),
.main-menu-3>li>a .menu-text span:nth-child(18),
.main-menu-4>li>a .menu-text span:nth-child(18),
.main-menu>li>a .menu-text span:nth-child(18) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s
}

.footer-menu li a .menu-text span:nth-child(19),
.footer-menu-2 li a .menu-text span:nth-child(19),
.main-menu-3>li>a .menu-text span:nth-child(19),
.main-menu-4>li>a .menu-text span:nth-child(19),
.main-menu>li>a .menu-text span:nth-child(19) {
    -webkit-transition-delay: 0.95s;
    transition-delay: 0.95s
}

.footer-menu li a .menu-text span:nth-child(20),
.footer-menu-2 li a .menu-text span:nth-child(20),
.main-menu-3>li>a .menu-text span:nth-child(20),
.main-menu-4>li>a .menu-text span:nth-child(20),
.main-menu>li>a .menu-text span:nth-child(20) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.footer-menu li a .menu-text span:nth-child(21),
.footer-menu-2 li a .menu-text span:nth-child(21),
.main-menu-3>li>a .menu-text span:nth-child(21),
.main-menu-4>li>a .menu-text span:nth-child(21),
.main-menu>li>a .menu-text span:nth-child(21) {
    -webkit-transition-delay: 1.05s;
    transition-delay: 1.05s
}

.footer-menu li a .menu-text span:nth-child(22),
.footer-menu-2 li a .menu-text span:nth-child(22),
.main-menu-3>li>a .menu-text span:nth-child(22),
.main-menu-4>li>a .menu-text span:nth-child(22),
.main-menu>li>a .menu-text span:nth-child(22) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

.footer-menu li a .menu-text span:nth-child(23),
.footer-menu-2 li a .menu-text span:nth-child(23),
.main-menu-3>li>a .menu-text span:nth-child(23),
.main-menu-4>li>a .menu-text span:nth-child(23),
.main-menu>li>a .menu-text span:nth-child(23) {
    -webkit-transition-delay: 1.15s;
    transition-delay: 1.15s
}

.footer-menu li a .menu-text span:nth-child(24),
.footer-menu-2 li a .menu-text span:nth-child(24),
.main-menu-3>li>a .menu-text span:nth-child(24),
.main-menu-4>li>a .menu-text span:nth-child(24),
.main-menu>li>a .menu-text span:nth-child(24) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.footer-menu li a .menu-text span:nth-child(25),
.footer-menu-2 li a .menu-text span:nth-child(25),
.main-menu-3>li>a .menu-text span:nth-child(25),
.main-menu-4>li>a .menu-text span:nth-child(25),
.main-menu>li>a .menu-text span:nth-child(25) {
    -webkit-transition-delay: 1.25s;
    transition-delay: 1.25s
}

.footer-menu li a .menu-text span:nth-child(26),
.footer-menu-2 li a .menu-text span:nth-child(26),
.main-menu-3>li>a .menu-text span:nth-child(26),
.main-menu-4>li>a .menu-text span:nth-child(26),
.main-menu>li>a .menu-text span:nth-child(26) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s
}

.footer-menu li a .menu-text span:nth-child(27),
.footer-menu-2 li a .menu-text span:nth-child(27),
.main-menu-3>li>a .menu-text span:nth-child(27),
.main-menu-4>li>a .menu-text span:nth-child(27),
.main-menu>li>a .menu-text span:nth-child(27) {
    -webkit-transition-delay: 1.35s;
    transition-delay: 1.35s
}

.footer-menu li a .menu-text span:nth-child(28),
.footer-menu-2 li a .menu-text span:nth-child(28),
.main-menu-3>li>a .menu-text span:nth-child(28),
.main-menu-4>li>a .menu-text span:nth-child(28),
.main-menu>li>a .menu-text span:nth-child(28) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s
}

.footer-menu li a .menu-text span:nth-child(29),
.footer-menu-2 li a .menu-text span:nth-child(29),
.main-menu-3>li>a .menu-text span:nth-child(29),
.main-menu-4>li>a .menu-text span:nth-child(29),
.main-menu>li>a .menu-text span:nth-child(29) {
    -webkit-transition-delay: 1.45s;
    transition-delay: 1.45s
}

.footer-menu li a .menu-text span:nth-child(30),
.footer-menu-2 li a .menu-text span:nth-child(30),
.main-menu-3>li>a .menu-text span:nth-child(30),
.main-menu-4>li>a .menu-text span:nth-child(30),
.main-menu>li>a .menu-text span:nth-child(30) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

.footer-menu li a .menu-text span:nth-child(31),
.footer-menu-2 li a .menu-text span:nth-child(31),
.main-menu-3>li>a .menu-text span:nth-child(31),
.main-menu-4>li>a .menu-text span:nth-child(31),
.main-menu>li>a .menu-text span:nth-child(31) {
    -webkit-transition-delay: 1.55s;
    transition-delay: 1.55s
}

.footer-menu li a .menu-text span:nth-child(32),
.footer-menu-2 li a .menu-text span:nth-child(32),
.main-menu-3>li>a .menu-text span:nth-child(32),
.main-menu-4>li>a .menu-text span:nth-child(32),
.main-menu>li>a .menu-text span:nth-child(32) {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s
}

.footer-menu li a .menu-text span:nth-child(33),
.footer-menu-2 li a .menu-text span:nth-child(33),
.main-menu-3>li>a .menu-text span:nth-child(33),
.main-menu-4>li>a .menu-text span:nth-child(33),
.main-menu>li>a .menu-text span:nth-child(33) {
    -webkit-transition-delay: 1.65s;
    transition-delay: 1.65s
}

.footer-menu li a .menu-text span:nth-child(34),
.footer-menu-2 li a .menu-text span:nth-child(34),
.main-menu-3>li>a .menu-text span:nth-child(34),
.main-menu-4>li>a .menu-text span:nth-child(34),
.main-menu>li>a .menu-text span:nth-child(34) {
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s
}

.footer-menu li a .menu-text span:nth-child(35),
.footer-menu-2 li a .menu-text span:nth-child(35),
.main-menu-3>li>a .menu-text span:nth-child(35),
.main-menu-4>li>a .menu-text span:nth-child(35),
.main-menu>li>a .menu-text span:nth-child(35) {
    -webkit-transition-delay: 1.75s;
    transition-delay: 1.75s
}

.footer-menu li a .menu-text span:nth-child(36),
.footer-menu-2 li a .menu-text span:nth-child(36),
.main-menu-3>li>a .menu-text span:nth-child(36),
.main-menu-4>li>a .menu-text span:nth-child(36),
.main-menu>li>a .menu-text span:nth-child(36) {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s
}

.footer-menu li a .menu-text span:nth-child(37),
.footer-menu-2 li a .menu-text span:nth-child(37),
.main-menu-3>li>a .menu-text span:nth-child(37),
.main-menu-4>li>a .menu-text span:nth-child(37),
.main-menu>li>a .menu-text span:nth-child(37) {
    -webkit-transition-delay: 1.85s;
    transition-delay: 1.85s
}

.footer-menu li a .menu-text span:nth-child(38),
.footer-menu-2 li a .menu-text span:nth-child(38),
.main-menu-3>li>a .menu-text span:nth-child(38),
.main-menu-4>li>a .menu-text span:nth-child(38),
.main-menu>li>a .menu-text span:nth-child(38) {
    -webkit-transition-delay: 1.9s;
    transition-delay: 1.9s
}

.footer-menu li a .menu-text span:nth-child(39),
.footer-menu-2 li a .menu-text span:nth-child(39),
.main-menu-3>li>a .menu-text span:nth-child(39),
.main-menu-4>li>a .menu-text span:nth-child(39),
.main-menu>li>a .menu-text span:nth-child(39) {
    -webkit-transition-delay: 1.95s;
    transition-delay: 1.95s
}

.footer-menu li a .menu-text span:nth-child(40),
.footer-menu-2 li a .menu-text span:nth-child(40),
.main-menu-3>li>a .menu-text span:nth-child(40),
.main-menu-4>li>a .menu-text span:nth-child(40),
.main-menu>li>a .menu-text span:nth-child(40) {
    -webkit-transition-delay: 2s;
    transition-delay: 2s
}

.footer-menu li a .menu-text span:nth-child(41),
.footer-menu-2 li a .menu-text span:nth-child(41),
.main-menu-3>li>a .menu-text span:nth-child(41),
.main-menu-4>li>a .menu-text span:nth-child(41),
.main-menu>li>a .menu-text span:nth-child(41) {
    -webkit-transition-delay: 2.05s;
    transition-delay: 2.05s
}

.footer-menu li a .menu-text span:nth-child(42),
.footer-menu-2 li a .menu-text span:nth-child(42),
.main-menu-3>li>a .menu-text span:nth-child(42),
.main-menu-4>li>a .menu-text span:nth-child(42),
.main-menu>li>a .menu-text span:nth-child(42) {
    -webkit-transition-delay: 2.1s;
    transition-delay: 2.1s
}

.footer-menu li a .menu-text span:nth-child(43),
.footer-menu-2 li a .menu-text span:nth-child(43),
.main-menu-3>li>a .menu-text span:nth-child(43),
.main-menu-4>li>a .menu-text span:nth-child(43),
.main-menu>li>a .menu-text span:nth-child(43) {
    -webkit-transition-delay: 2.15s;
    transition-delay: 2.15s
}

.footer-menu li a .menu-text span:nth-child(44),
.footer-menu-2 li a .menu-text span:nth-child(44),
.main-menu-3>li>a .menu-text span:nth-child(44),
.main-menu-4>li>a .menu-text span:nth-child(44),
.main-menu>li>a .menu-text span:nth-child(44) {
    -webkit-transition-delay: 2.2s;
    transition-delay: 2.2s
}

.footer-menu li a .menu-text span:nth-child(45),
.footer-menu-2 li a .menu-text span:nth-child(45),
.main-menu-3>li>a .menu-text span:nth-child(45),
.main-menu-4>li>a .menu-text span:nth-child(45),
.main-menu>li>a .menu-text span:nth-child(45) {
    -webkit-transition-delay: 2.25s;
    transition-delay: 2.25s
}

.footer-menu li a .menu-text span:nth-child(46),
.footer-menu-2 li a .menu-text span:nth-child(46),
.main-menu-3>li>a .menu-text span:nth-child(46),
.main-menu-4>li>a .menu-text span:nth-child(46),
.main-menu>li>a .menu-text span:nth-child(46) {
    -webkit-transition-delay: 2.3s;
    transition-delay: 2.3s
}

.footer-menu li a .menu-text span:nth-child(47),
.footer-menu-2 li a .menu-text span:nth-child(47),
.main-menu-3>li>a .menu-text span:nth-child(47),
.main-menu-4>li>a .menu-text span:nth-child(47),
.main-menu>li>a .menu-text span:nth-child(47) {
    -webkit-transition-delay: 2.35s;
    transition-delay: 2.35s
}

.footer-menu li a .menu-text span:nth-child(48),
.footer-menu-2 li a .menu-text span:nth-child(48),
.main-menu-3>li>a .menu-text span:nth-child(48),
.main-menu-4>li>a .menu-text span:nth-child(48),
.main-menu>li>a .menu-text span:nth-child(48) {
    -webkit-transition-delay: 2.4s;
    transition-delay: 2.4s
}

.footer-menu li a .menu-text span:nth-child(49),
.footer-menu-2 li a .menu-text span:nth-child(49),
.main-menu-3>li>a .menu-text span:nth-child(49),
.main-menu-4>li>a .menu-text span:nth-child(49),
.main-menu>li>a .menu-text span:nth-child(49) {
    -webkit-transition-delay: 2.45s;
    transition-delay: 2.45s
}



.main-menu-3>li:hover .main-dropdown,
.main-menu-3>li:hover .mega-menu,
.main-menu-3>li:hover .mega-menu-2 {
    top: 80px;
    opacity: 1;
    visibility: visible
}



.main-dropdown li a,
.mega-menu li a,
.mega-menu-2 li a,
.menu-heading {
    color: var(--white);
    text-transform: capitalize
}

.footer-menu li a .menu-text,
.footer-menu-2 li a .menu-text,
.main-menu-3>li>a .menu-text,
.main-menu-4>li>a .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-shadow: 0 16px 0 var(--black-2)
}

.main-menu-4>li>a .menu-text span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    -webkit-transform: translateY(var(--m)) translateZ(0);
    transform: translateY(var(--m)) translateZ(0)
}

.main-dropdown {
    left: 0;
    top: 85px;
    text-align: left;
    -webkit-transition: .3s;
    transition: .3s
}

.main-dropdown .sub-dropdown {
    left: 100%;
    top: 0;
    text-align: left;
    -webkit-transition: .3s;
    transition: .3s
}

.main-dropdown li {
    display: block;
    margin: 0;
    padding: 0
}

.main-dropdown li:hover .sub-dropdown {
    opacity: 1;
    visibility: visible
}

.main-dropdown li a {
    display: block;
    padding: 10px 20px
}

.footer-menu-2 li a .menu-text,
.main-dropdown li a .menu-text,
.mega-menu li a .menu-text,
.mega-menu-2 li a .menu-text {
    text-shadow: 0 16px 0 var(--white)
}

.footer__menu-5 li a .menu-text,
.header__area-2 .main-dropdown li a .menu-text,
.header__area-2 .mega-menu li a .menu-text,
.header__area-2 .mega-menu-2 li a .menu-text {
    text-shadow: 0 16px 0 var(--black-2)
}

.main-dropdown li a:hover,
.mega-menu li a:hover,
.mega-menu-2 li a:hover {
    letter-spacing: 1px
}





.offcanvas__links ul li,
.offcanvas__social ul li {
    padding-bottom: 2px
}

.mega-menu li a:not([href]):not([class]):hover,
.mega-menu-2 li a:not([href]):not([class]):hover {
    letter-spacing: 0;
    background-color: transparent
}







@media only screen and (min-width:1200px) and (max-width:1399px) {
    #btn_wrapper,
    .btn_wrapper {
        width: 220px;
        height: 220px;
        margin-left: -25px
    }
    
    
    
    
    
    
}













.offcanvas__menu-wrapper.mean-container,
.service__list-6 {
    padding-top: 160px
}

.offcanvas__menu-wrapper.mean-container .mean-nav>ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important
}

.offcanvas__menu-wrapper.mean-container .mean-nav {
    background: 0 0;
    margin-top: 0
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 16px 0 20px 100px;
    font-weight: 400;
    font-size: 80px;
    line-height: 1;
    color: var(--white);
    text-transform: capitalize;
    border-top: 1px solid var(--black-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    outline: 0;
    -webkit-transform: translateY(var(--y)) translateZ(0);
    transform: translateY(var(--y)) translateZ(0);
    -webkit-transition: -webkit-transform .4s, -webkit-box-shadow .4s;
    transition: transform .4s, box-shadow .4s, -webkit-transform .4s, -webkit-box-shadow .4s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-shadow: 0 80px 0 var(--white)
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    -webkit-transform: translateY(var(--m)) translateZ(0);
    transform: translateY(var(--m)) translateZ(0)
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:first-child {
    -webkit-transition-delay: 33ms;
    transition-delay: 33ms
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(2) {
    -webkit-transition-delay: 0.0666666667s;
    transition-delay: 0.0666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(4) {
    -webkit-transition-delay: 0.1333333333s;
    transition-delay: 0.1333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(5) {
    -webkit-transition-delay: 0.1666666667s;
    transition-delay: 0.1666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(6) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(7) {
    -webkit-transition-delay: 0.2333333333s;
    transition-delay: 0.2333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(8) {
    -webkit-transition-delay: 0.2666666667s;
    transition-delay: 0.2666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(9) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(10) {
    -webkit-transition-delay: 0.3333333333s;
    transition-delay: 0.3333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(11) {
    -webkit-transition-delay: 0.3666666667s;
    transition-delay: 0.3666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(12) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(13) {
    -webkit-transition-delay: 0.4333333333s;
    transition-delay: 0.4333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(14) {
    -webkit-transition-delay: 0.4666666667s;
    transition-delay: 0.4666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(15) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(16) {
    -webkit-transition-delay: 0.5333333333s;
    transition-delay: 0.5333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(17) {
    -webkit-transition-delay: 0.5666666667s;
    transition-delay: 0.5666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(18) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(19) {
    -webkit-transition-delay: 0.6333333333s;
    transition-delay: 0.6333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(20) {
    -webkit-transition-delay: 0.6666666667s;
    transition-delay: 0.6666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(21) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(22) {
    -webkit-transition-delay: 0.7333333333s;
    transition-delay: 0.7333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(23) {
    -webkit-transition-delay: 0.7666666667s;
    transition-delay: 0.7666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(24) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(25) {
    -webkit-transition-delay: 0.8333333333s;
    transition-delay: 0.8333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(26) {
    -webkit-transition-delay: 0.8666666667s;
    transition-delay: 0.8666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(27) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(28) {
    -webkit-transition-delay: 0.9333333333s;
    transition-delay: 0.9333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(29) {
    -webkit-transition-delay: 0.9666666667s;
    transition-delay: 0.9666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(30) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(31) {
    -webkit-transition-delay: 1.0333333333s;
    transition-delay: 1.0333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(32) {
    -webkit-transition-delay: 1.0666666667s;
    transition-delay: 1.0666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(33) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(34) {
    -webkit-transition-delay: 1.1333333333s;
    transition-delay: 1.1333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(35) {
    -webkit-transition-delay: 1.1666666667s;
    transition-delay: 1.1666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(36) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(37) {
    -webkit-transition-delay: 1.2333333333s;
    transition-delay: 1.2333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(38) {
    -webkit-transition-delay: 1.2666666667s;
    transition-delay: 1.2666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(39) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(40) {
    -webkit-transition-delay: 1.3333333333s;
    transition-delay: 1.3333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(41) {
    -webkit-transition-delay: 1.3666666667s;
    transition-delay: 1.3666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(42) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(43) {
    -webkit-transition-delay: 1.4333333333s;
    transition-delay: 1.4333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(44) {
    -webkit-transition-delay: 1.4666666667s;
    transition-delay: 1.4666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(45) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(46) {
    -webkit-transition-delay: 1.5333333333s;
    transition-delay: 1.5333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(47) {
    -webkit-transition-delay: 1.5666666667s;
    transition-delay: 1.5666666667s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(48) {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(49) {
    -webkit-transition-delay: 1.6333333333s;
    transition-delay: 1.6333333333s
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover {
    --y: -0px;
    background-color: transparent
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a:hover span {
    --m: calc(80px * -1)
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 60px;
    height: 96px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 300;
    border: none !important
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
    background: var(--secondary);
    opacity: 1
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
    border-top: 1px solid var(--black-4)
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 24px;
    text-transform: none;
    border-top: none !important;
    padding: 20px 0 20px 150px;
    -webkit-transition: .3s;
    transition: .3s
}

.header__area-2 .main-dropdown li a:hover,
.header__area-2 .mega-menu li a:hover,
.header__area-2 .mega-menu-2 li a:hover,
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a:hover {
    letter-spacing: 1px
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 40px
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 180px
}

.offcanvas__menu-wrapper.mean-container .mean-bar {
    padding: 0;
    background: 0 0
}

.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
    display: none !important
}

.modal__testimonial {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index: 9991;
    -webkit-transition: visibility 0s linear .25s, opacity .25s, -webkit-transform .25s;
    transition: visibility 0s linear .25s, opacity .25s, transform .25s, -webkit-transform .25s
}

.cursor,
.cursor1,
.cursor2,
.modal__testimonial-content {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal__testimonial-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    border-radius: 5px;
    width: 760px;
    height: 500px
}

.modal__close,
.modal__close-2 {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer
}

.modal__application,
.modal__testimonial-content iframe {
    height: 100%;
    width: 100%
}

.modal__close {
    background: var(--secondary);
    color: var(--white);
    border: none;
    border-radius: 100%;
    font-size: 18px;
    right: -15px;
    top: -15px;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.modal__close:hover {
    color: var(--primary)
}

#featured_cursor,
.modal__close-2:hover,
.switcher__icon button {
    color: var(--black-2)
}

.modal__close-2 {
    background-color: transparent;
    color: var(--black-3);
    border: none;
    font-size: 24px;
    right: 30px;
    top: 30px;
    -webkit-transition: .3s;
    transition: .3s
}

.modal__application {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: visibility 0s linear .25s, opacity .25s, -webkit-transform .25s;
    transition: visibility 0s linear .25s, opacity .25s, transform .25s, -webkit-transform .25s;
    z-index: 9991
}

.modal__apply {
    padding: 100px 50px;
    max-width: 1130px;
    height: 96vh;
    margin: 2vh auto 0;
    overflow-y: auto;
    position: relative;
    background-color: var(--white)
}

.cursor,
.cursor-testi,
.cursor1,
.cursor2 {
    position: fixed;
    z-index: 999;
    left: 0;
    pointer-events: none
}

.modal__apply .wc-btn-black,
.modal__apply .wc-btn-light,
.modal__apply .wc-btn-pink,
.modal__apply .wc-btn-primary,
.modal__apply .wc-btn-secondary {
    width: 120px;
    height: 120px
}

.modal__apply .form-top {
    text-align: center;
    padding-bottom: 50px
}

.modal__apply .form-top img {
    margin-bottom: 40px
}

.modal__apply .form-top p {
    font-size: 18px;
    color: var(--black-2);
    border: 1px solid var(--black-3);
    border-radius: 30px;
    display: inline-block;
    padding: 5px 35px;
    margin-top: 20px
}

.modal__apply .input-apply textarea:focus,
.modal__apply .input-apply-2 input:focus {
    border: 1px solid var(--black-3)
}

.modal__apply .input-apply {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 90px 2.2fr;
    grid-template-columns: 1fr 2.2fr;
    grid-gap: 90px;
    margin-bottom: 20px
}

.modal__apply .input-apply-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 50px 4fr;
    grid-template-columns: 1fr 4fr;
    grid-gap: 50px;
    margin-bottom: 20px
}

.cursor,
.cursor-testi.play::after,
.header__inner,
.header__logo-2,
.hero__area-2 .sec-title-wrapper,
.modal__apply .form-btn-2,
.offcanvas__close button,
.switcher__icon button {
    display: -webkit-box;
    display: -ms-flexbox
}

.modal__apply .input-apply p,
.modal__apply .input-apply-2 p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black)
}

.modal__apply .input-apply-2 input {
    width: 100%;
    border: 1px solid var(--white-4);
    outline: 0;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s
}

.modal__apply .input-apply textarea {
    width: 100%;
    height: 125px;
    border: 1px solid var(--white-4);
    outline: 0;
    padding: 15px;
    -webkit-transition: .3s;
    transition: .3s
}

.modal__apply .form-btn button {
    margin-left: auto;
    margin-top: 30px;
    background-color: transparent
}

.modal__apply .form-btn-2 {
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px
}

.modal__apply .form-btn-2 button {
    background-color: transparent;
    z-index: 1
}

.modal-show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: visibility linear, opacity .25s, -webkit-transform .25s;
    transition: visibility linear, opacity .25s, transform .25s, -webkit-transform .25s
}

.cursor {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: var(--white);
    background: var(--black-2);
    text-transform: capitalize;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    mix-blend-mode: hard-light;
    -webkit-transition: .3s;
    transition: .3s
}



.cursor.large {
    width: 180px;
    height: 180px;
    font-size: 19px;
    font-weight: 400
}





.cursor-testi.hide,
.cursor1.hide,
.cursor2.hide {
    opacity: 0;
    visibility: hidden
}







#featured_cursor,
.switcher__icon {
    background: var(--white)
}













.blog__meta-2,
.blog__meta-2 a,
.header__support p,
.offcanvas__close button:hover,
.offcanvas__contact li a:hover,
.offcanvas__links ul li a:hover,
.offcanvas__social ul li a:hover,
.portfolio-v4 .blog__text p,
.service__link p,
.service__text p,
.switcher__icon button:hover {
    color: var(--gray-2)
}

.switcher__icon button#switcher_open {
    -webkit-animation: 5s linear infinite wcSpinner;
    animation: 5s linear infinite wcSpinner
}

















.header__area {
    position: fixed;
    width: 100px;
    height: auto;
    left: 0;
    top: 0;
    z-index: 9991;
    border-right: 1px solid rgba(240, 240, 240, .07);
    mix-blend-mode: exclusion;
    -webkit-transition: .5s;
    transition: .5s;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    
    .offcanvas__menu-wrapper.mean-container {
        padding-top: 140px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 60px;
        padding-left: 60px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 73px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        padding-left: 90px
    }
    .header__area {
        width: 62px
    }
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .offcanvas__menu-wrapper.mean-container {
        padding-top: 93px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 48px;
        padding-left: 50px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 64px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        padding-left: 80px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
        padding-left: 120px
    }
    .modal__apply .input-apply,
    .modal__apply .input-apply-2 {
        -ms-grid-columns: 1fr 30px 2fr;
        grid-template-columns: 1fr 2fr;
        grid-gap: 30px
    }
    .header__area {
        width: 62px
    }
}

.header__area button {
    display: block;
    margin-top: -58px;
    padding: 20px
}

.header__area-2,
.header__area-7 {
    padding: 3px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99
}

.header__area-3 {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999
}

.header__area-3.sticky-3 {
    border-bottom: 1px solid var(--white-2)
}

.header__inner {
    padding: 50px 0 70px;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 9
}

.header__logo {
    width: 100%
}

.header__logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

.header__logo img {
    width: 52px;
    height: auto;
    max-width: 100%;
    object-fit: contain
}

.offcanvas__logo img {
    width: 140px;
    height: auto;
    max-width: 100%;
    object-fit: contain
}



@media only screen and (min-width:992px) and (max-width:1199px) {
    .pt-100,
    .pt-110,
    .pt-120,
    .pt-130,
    .pt-140,
    .pt-150 {
        padding-top: 90px
    }
    .sp-x {
        padding-left: 30px;
        padding-right: 30px
    }
    .ht-200 {
        padding-top: 180px
    }
    .scroll-top {
        bottom: 80px
    }
    #btn_wrapper,
    .btn_wrapper {
        width: 190px;
        height: 190px;
        margin-left: -10px
    }
    
    
    
    
    
    
    
    
    
    
    .offcanvas__menu-wrapper.mean-container {
        padding-top: 93px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 40px;
        padding-left: 30px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 57px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        padding-left: 60px;
        font-size: 24px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
        padding-left: 40px
    }
    .modal__apply {
        max-width: 960px
    }
    .modal__apply .input-apply,
    .modal__apply .input-apply-2 {
        -ms-grid-columns: 1fr 30px 2fr;
        grid-template-columns: 1fr 2fr;
        grid-gap: 30px
    }
    .header__area {
        padding: 0 15px;
        width: 100%;
        height: auto;
        mix-blend-mode: normal !important
    }
    .header__area button {
        margin-top: 0
    }
    .header__inner {
        padding: 10px 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        width: 100%;
        height: auto;
        position: static
    }
    
    .header__logo {
        grid-column: 1;
        justify-self: start
    }
    
    .header__nav-icon {
        grid-column: 2;
        justify-self: end
    }
    
    .header__support {
        display: none
    }
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a,
    .sp-x {
        padding-left: 30px
    }
    .sp-x {
        padding-right: 30px
    }
    .ht-200 {
        padding-top: 160px
    }
    .shape {
        left: 200%;
        bottom: 0
    }
    .scroll-top {
        right: 10px;
        bottom: 60px
    }
    #btn_wrapper,
    .btn_wrapper {
        width: 180px;
        height: 180px;
        margin-left: -5px
    }
    .service__top-btn #btn_wrapper,
    .service__top-btn .btn_wrapper {
        width: 170px;
        height: 170px
    }
    .service__top-btn #btn_wrapper .btn-item,
    .service__top-btn .btn_wrapper .btn-item {
        top: 0;
        left: 0
    }
    
    
    
    
    
    
    
    
    
    
    
    .offcanvas__menu-wrapper.mean-container {
        padding-top: 60px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 30px;
        padding-left: 20px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 46px;
        width: 40px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        font-size: 20px;
        padding: 15px 0 15px 30px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
        height: 25px
    }
    .modal__testimonial-content {
        width: 700px;
        height: 480px
    }
    .modal__apply {
        max-width: 720px
    }
    .modal__apply .input-apply,
    .modal__apply .input-apply-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        margin-bottom: 30px
    }
    .modal__apply .input-apply textarea {
        height: 90px
    }
    .header__area {
        padding: 0 15px;
        width: 100%;
        height: auto;
        mix-blend-mode: normal !important
    }
    .header__area button {
        margin-top: 0
    }
    .header__inner {
        padding: 10px 0;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: repeat(12, 1fr)
    }
    
}

@media only screen and (max-width:767px) {
    .sec-title-16 span::after,
    .shape {
        bottom: 0
    }
    .sp-x {
        padding-left: 10px;
        padding-right: 10px
    }
    .ht-200 {
        padding-top: 130px
    }
    .shape {
        left: 70%
    }
    .g-0 {
        padding-right: 15px;
        padding-left: 15px
    }
    .main-menu-3,
    .sec-title-4 img,
    .section_title_wrapper .title_right__inner__left span::before,
    .switcher__area,
    br {
        display: none
    }
    .scroll-top {
        right: 5px;
        bottom: 55px
    }
    .wc-btn-black,
    .wc-btn-light,
    .wc-btn-pink,
    .wc-btn-primary,
    .wc-btn-secondary {
        padding: 30px
    }
    #btn_wrapper,
    .btn_wrapper {
        height: 175px;
        width: 175px;
        margin-left: -2.5px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .offcanvas__menu-wrapper.mean-container {
        padding-top: 40px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 20px;
        padding-left: 15px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 36px;
        width: 36px;
        padding: 11px 12px 13px !important
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        font-size: 18px;
        padding: 15px 0 15px 30px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
        height: 23px
    }
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
        padding-left: 30px
    }
    .modal__testimonial-content {
        width: 320px;
        height: 300px
    }
    .modal__close {
        right: -5px;
        top: -5px
    }
    .modal__close-2 {
        right: 20px;
        top: 15px
    }
    .modal__apply {
        padding: 50px 20px;
        margin-top: 0;
        height: 100vh
    }
    .modal__apply .input-apply,
    .modal__apply .input-apply-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 10px;
        margin-bottom: 30px
    }
    .modal__apply .input-apply textarea {
        height: 90px
    }
    .header__area {
        padding: 0 15px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        transition: all 0.3s ease;
        border-right: none;
        min-height: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
    .header__area button {
        margin-top: 0
    }
    .header__inner {
        padding: 10px 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        width: 100%;
        height: auto;
        position: static
    }
    
    .header__logo {
        grid-column: 1;
        justify-self: start
    }
    
    .header__nav-icon {
        grid-column: 2;
        justify-self: end
    }
    
    .header__support {
        display: none
    }
    
}











.header__nav-icon-3 #search_close {
    display: none;
    padding-right: 55px
}





.header__search,
.offcanvas__area {
    -webkit-transition: .3s;
    transition: .3s;
    position: fixed;
    visibility: hidden
}







.header__support p {
    width: 215px;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.3;
    text-align: right;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.header__support p a {
    display: inline-block;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: var(--white)
}



.sticky-2 .header__nav-icon-2 .menu-icon-2::after,
.sticky-7 .header__nav-icon-7 .menu-icon-2::after {
    width: 100px;
    height: 100px;
    right: -20px;
    top: -30px
}

.sticky-2 .header__logo-5 img,
.sticky-2 .header__nav-icon-5 {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.offcanvas__area {
    background-color: var(--black-2);
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.offcanvas__area.show {
    opacity: 1;
    visibility: visible;
}

.offcanvas__body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 0.9fr 3fr 1.3fr;
    grid-template-columns: 0.9fr 3fr 1.3fr;
    height: 100%
}

.offcanvas__left {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 0.5fr 2.1fr 1fr;
    grid-template-rows: 0.5fr 2.1fr 1fr;
    border-right: 1px solid var(--black-4)
}

.offcanvas__mid {
    overflow: hidden;
    overflow-y: auto
}

.offcanvas__mid::-webkit-scrollbar {
    width: 5px
}

.offcanvas__mid::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px var(--black);
    box-shadow: inset 0 0 5px var(--black);
    border-radius: 10px
}

.offcanvas__mid::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px
}

.about__area-2,
.about__area-3,
.hero__about,
.hero__area-2,
.hero__area-3::after,
.hero__area-3::before,
.hero__text-2,
.research__area,
.service__hero-2,
.service__hover-3,
.testimonial__area-3,
.testimonial__inner-2,
.testimonial__slide-3 p::before {
    background-repeat: no-repeat
}

.offcanvas__right {
    background-color: var(--black-4);
    padding: 0 50px;
    position: relative
}

.offcanvas__right .shape-1 {
    position: absolute;
    bottom: 0;
    left: 125px
}

.offcanvas__right .shape-2 {
    position: absolute;
    bottom: 90px;
    right: 110px
}

.offcanvas__logo {
    padding: 55px 0 55px 50px
}

.offcanvas__social {
    padding-left: 50px;
    padding-top: 220px
}

.offcanvas__contact p,
.offcanvas__social .social-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    color: var(--white);
    padding-bottom: 20px
}

.offcanvas__social ul li a {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white)
}

.offcanvas__links {
    padding-left: 50px;
    padding-top: 110px
}

.offcanvas__links ul li a {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white)
}

.offcanvas__close {
    position: absolute;
    right: 40px;
    top: 30px
}

.offcanvas__close button {
    font-size: 30px;
    width: 60px;
    height: 60px;
    color: var(--white);
    background: #16263c;
    border-radius: 100%;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: .3s;
    transition: .3s
}

.offcanvas__search {
    padding-top: 190px;
    padding-bottom: 140px
}

.hero__area-3,
.hero__inner-3 {
    padding-top: clamp(60px, 10vw, 70px);
    padding-bottom: clamp(60px, 10vw, 70px);
    position: relative
}

.offcanvas__search input {
    color: #585858;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    padding: 20px 45px 20px 20px;
    border-radius: 30px;
    border: 1px solid #243651;
    background-color: transparent;
    outline: 0
}

.offcanvas__search input::-webkit-input-placeholder {
    opacity: 1;
    color: #585858
}

.offcanvas__search input::-moz-placeholder {
    opacity: 1;
    color: #585858
}

.offcanvas__search input:-ms-input-placeholder {
    opacity: 1;
    color: #585858
}

.offcanvas__search input::-ms-input-placeholder {
    opacity: 1;
    color: #585858
}

.offcanvas__search input::placeholder {
    opacity: 1;
    color: #585858
}

.offcanvas__search button {
    color: var(--white);
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    border-radius: 0 100% 100% 0
}

.offcanvas__contact li {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white);
    padding-bottom: 7px;
    max-width: 260px
}

.hero__content .experience p,
.hero__text-2 p,
.hero__text-3 p {
    line-height: 1.4;
    font-size: 18px
}

.offcanvas__contact li a {
    color: var(--white)
}

.hero__area {
    background-color: var(--black)
}

.hero__area::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(0 0 0 / 22%)
}

.hero__area .hero1_bg {
    position: absolute;
    bottom: 0;
    z-index: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-animation: 18s linear infinite wcRotate;
    animation: 18s linear infinite wcRotate
}











.hero__area-2 .sec-title-wrapper {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.hero__area-2 .sec-title-wrapper .bg-shape {
    background-repeat: no-repeat;
    background-position: right top
}

.hero__area-3::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../images/elements/circle.png);
    background-position: left;
    z-index: -1
}

.hero__area-3::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    right: 50px;
    top: 140px;
    background-image: url(../images/elements/stars-black.png);
    background-position: right top
}

.hero__area-3 .sec-title-wrapper {
    display: inline-block;
    position: unset
}

.hero__area-3 .agency_title {
    z-index: 2;
    font-weight: 600;
    font-size: clamp(58px, 14vw + 0rem, 306px);
    line-height: .82;
    text-transform: uppercase;
    color: var(--black-2)
}

.hero__area-3 .agency_title span {
    font-size: clamp(60px, 8vw, 121px);
    font-style: italic
}

.hero__area-3 .wrapper {
    --clip-path: circle(65px at left);
    --clip-path-hover: circle(70px at left);
    --clip-path-clicked: circle(100vw at left);
    --duration: 0.4s;
    --timing-function: ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999
}

.about__right-7,
.award__counter,
.blog__detail-metalist,
.blog__meta-4,
.blog__text,
.choose-wrapper,
.contact__text,
.contact_wrap .link,
.cta__btn-5,
.error__content,
.footer__chekbox,
.footer__location-2,
.footer__menu-5,
.footer__menu-5 li a .menu-text,
.footer__nav,
.footer__nav-2,
.footer__newsletter-6,
.footer__social-6,
.header__inner-5,
.hero__about-text,
.hero__area-3 .video,
.hero__content-wrapper,
.hero__text-5,
.portfolio__inner-5,
.portfolio__wrapper-4,
.price__amount p,
.price__item,
.section_wrapper,
.showcase4__content,
.story__img-wrapper,
.team__item-7 .tm-name,
.work8:nth-child(2),
.work8:nth-child(3),
.work8:nth-child(6) {
    display: -webkit-box;
    display: -ms-flexbox
}

.hero__area-3 .video-info {
    width: 300px;
    height: 200px;
    position: absolute;
    left: calc(50% + 20vw);
    bottom: calc(10vh + 50px);
    transform: translate(-50%, 50%)
}

.hero__area-3 .video {
    height: 100%;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    -webkit-transition: -webkit-clip-path var(--duration) var(--timing-function);
    transition: -webkit-clip-path var(--duration) var(--timing-function);
    transition: clip-path var(--duration) var(--timing-function);
    transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
    position: relative;
    top: 55px;
    left: 100px
}

.hero__area-3 .video::before {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    background: url(../images/elements/play-icon.png) 0 0/100%;
    content: "";
    z-index: 999999999999
}

.hero__area-3 .video video {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: auto;
    width: auto;
    height: auto
}

.hero__area-3 .intro-title {
    position: relative;
    left: 175px;
    top: 70px
}

.hero__area-3 .intro-title .video-title {
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1.3
}

.hero__area-3 .intro-title .video-title span {
    display: block;
    font-size: 18px
}

.hero__area-3 #video_check {
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border-radius: 40px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 9999999
}

.hero__area-3 #video_check:focus {
    outline: 0
}

.hero__area-3 #video_check:hover~.text::after,
.hero__area-3 #video_check:hover~.text>span::after,
.hero__area-3 #video_check:hover~.video {
    -webkit-clip-path: var(--clip-path-hover);
    clip-path: var(--clip-path-hover)
}

.hero__area-3 #video_check:hover~.text::before {
    --r: 25px;
    --opacity: 1
}

.hero__area-3 #video_check:checked {
    width: 100%;
    height: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
    bottom: 0
}

.hero__area-3 #video_check:checked~.video {
    -webkit-clip-path: var(--clip-path-clicked);
    clip-path: var(--clip-path-clicked)
}

.hero__area-3 #video_check:checked~.text {
    --opacity: 0;
    -webkit-transition: opacity .3s var(--timing-function);
    transition: opacity .3s var(--timing-function)
}

.hero__area-3 #video_check:checked~.text::after,
.hero__area-3 #video_check:checked~.text>span::after {
    -webkit-clip-path: var(--clip-path-clicked);
    clip-path: var(--clip-path-clicked)
}

.hero__area-3.start-video .hero3-img {
    opacity: 0
}

.hero__area-3.start-video .hero__text-3 p,
.hero__area-3.start-video .intro-title .video-title,
.hero__area-3.start-video .sec-sub-title,
.hero__area-3.start-video .sec-title {
    color: var(--white-4)
}







.hero__content-wrapper .text {
    mix-blend-mode: difference;
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px)
}









.hero__content a,
.hero__link {
    border-bottom: 1px solid var(--white);
    overflow: hidden
}

.hero__text-2 {
    background-position: 64% 58%;
    padding-left: 32%;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.hero__text-2 p {
    max-width: 330px;
    font-weight: 400;
    color: var(--white);
    padding-bottom: 5px
}



.hero__content {
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.hero__content a {
    display: inline-block;
    max-width: 500px;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    color: var(--white);
    padding-bottom: 20px;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
    margin-bottom: 30px;
}

.hero__content a:hover i {
    -webkit-transform: translate(20px, -20px) rotate(-45deg);
    transform: translate(20px, -20px) rotate(-45deg)
}

.hero__content a:hover span::after,
.hero__link:hover i {
    -webkit-transform: translate(20px, -20px) rotate(-45deg);
    transform: translate(20px, -20px) rotate(-45deg)
}

.hero__content a:hover span::after {
    opacity: 1;
    visibility: visible;
    transform: translate(20px, -20px) rotate(-45deg)
}

.hero__content a span {
    position: absolute;
    top: 0;
    right: 0
}

.hero__content a span i {
    -webkit-transform: translate(0, 0) rotate(-45deg);
    transform: translate(0, 0) rotate(-45deg);
    -webkit-transition: .3s;
    transition: .3s
}

.hero__content a span::after,
.hero__link span i {
    -webkit-transform: translate(0, 0) rotate(-45deg);
    transform: translate(0, 0) rotate(-45deg)
}

.hero__content a span::after {
    position: absolute;
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    left: -20px;
    bottom: -20px;
    transform: translate(0, 0) rotate(-45deg);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s
}

.hero__content .experience {
    position: absolute;
    right: 30px;
    bottom: 140px
}

.hero__content .experience .title {
    font-weight: 400;
    font-size: 50px;
    line-height: 1.3;
    color: var(--white)
}

.hero__content .experience p {
    font-weight: 400;
    color: var(--white)
}

.hero__link span::after,
.service__link p::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    opacity: 0;
    visibility: hidden
}

.hero__title {
    font-weight: 500;
    font-size: clamp(60px, 8vw, 133px);
    line-height: 1.1;
    color: var(--white);
    margin-top: 60px;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.hero__title-wrapper {
    max-width: 1300px;
    position: relative;
    margin-bottom: 80px;
    text-align: left;
}

.hero__sub-title {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    color: var(--gray-3);
    max-width: 600px;
    position: relative;
    text-align: justify;
    text-align-last: left;
    margin: 0;
    padding-top: 20px;
}

.hero__sub-title.text-anim div,
.hero__sub-title.text-anim span {
    display: inline;
}

.hero__link,
.hero__sub-title span,
.roll__area-2 .roll__slide_title {
    color: var(--white)
}





.blog__area-7 .sec-title-wrapper,
.blog__related .sec-title-wrapper,
.brand__area .sec-title-wrapper,
.career__gallery p,
.faq__area-6 .sec-title-wrapper,
.hero__about-content .hero-title,
.portfolio-v5 .pb-100,
.portfolio__detail-text,
.portfolio__hero,
.price__area .sec-title,
.testimonial__sec-title {
    padding-bottom: 60px
}

















@media only screen and (min-width:1400px) and (max-width:1919px) {
    .offcanvas__right {
        padding: 0 30px
    }
    .offcanvas__right .shape-1 {
        left: 20px
    }
    
    .hero__area-3 .video-info {
        left: calc(68% + 18vw);
        bottom: calc(90vh + 200px)
    }
    
    .hero__text-2 {
        padding-left: 30%;
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%)
    }
    
    
    
}











.hero__link span::after,
.service__link p i {
    -webkit-transform: translate(0, 0) rotate(-45deg);
    transform: translate(0, 0) rotate(-45deg)
}



#hero_canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

























.roll__area {
    background-color: var(--primary);
    padding: 31px 10px
}





.roll__area-3 .roll__slide_title {
    color: var(--black-2)
}

.roll__wrapper {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear
}

.roll__slide_title {
    font-weight: 400;
    font-size: 26px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--black)
}









@media only screen and (min-width:1200px) and (max-width:1399px) {
    .offcanvas__body {
        -ms-grid-columns: 1.2fr 3fr 1.5fr;
        grid-template-columns: 1.2fr 3fr 1.5fr
    }
    .offcanvas__right {
        padding: 0 30px
    }
    .offcanvas__right .shape-1 {
        left: 0
    }
    .offcanvas__logo {
        padding: 30px 0 30px 50px
    }
    .offcanvas__social {
        padding-left: 50px;
        padding-top: 30px
    }
    .offcanvas__links {
        padding-left: 30px;
        padding-top: 30px
    }
    .offcanvas__search {
        padding-top: 140px;
        padding-bottom: 60px
    }
    
    
    .hero__area-3 .video-info {
        left: calc(50% + 15vw);
        bottom: calc(10vh + 30px)
    }
    
    
    .hero__text-2 {
        padding-left: 20%
    }
    .hero__text-2 p {
        max-width: 380px
    }
    
    .hero__content img {
        max-width: 120px
    }
    .hero__title {
        font-size: 94px;
        line-height: .9
    }
    .hero__title::after {
        display: none !important
    }
    .hero__title-wrapper {
        max-width: 700px
    }
    .hero__sub-title {
        bottom: -100px;
        right: -80px
    }
    
    
    
    
    .roll__slide_title {
        font-size: 19px
    }
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    .header__nav-2,
    .logo-primary {
        display: none
    }
    .header__nav-icon {
    grid-column: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.header__nav-icon button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__nav-icon button img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
    
    .header__support {
        -ms-grid-column: 11;
        grid-column: 11/11;
        -ms-grid-row: 1;
        grid-row: 1
    }
    .header__support p {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    .logo-secondary {
        display: block
    }
    .offcanvas__body {
        -ms-grid-columns: 1.2fr 2fr 1.5fr;
        grid-template-columns: 1.2fr 2fr 1.5fr
    }
    .offcanvas__right {
        padding: 0 30px
    }
    .offcanvas__right .shape-1 {
        left: 0
    }
    .offcanvas__logo {
    padding: 30px 0 30px 15px;
}

.offcanvas__logo img {
    width: 140px;
    height: auto;
    max-width: 100%;
    object-fit: contain
}
    .offcanvas__social {
        padding-left: 30px;
        padding-top: 50px
    }
    .offcanvas__links {
        padding-left: 30px;
        padding-top: 40px
    }
    .offcanvas__search {
        padding-top: 140px;
        padding-bottom: 60px
    }
    
    
    .hero__area-3 .video-info {
        left: calc(50% + 10vw);
        bottom: calc(10vh + 20px)
    }
    
    
    
    .hero__text-2 {
        padding-left: 15%;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    .hero__text-2 p {
        padding-bottom: 30px
    }
    
    .hero__title {
        font-size: 105px;
        line-height: .9
    }
    .hero__title::after {
        display: none !important
    }
    .hero__title-wrapper {
        max-width: 800px;
        margin-bottom: 20px
    }
    .hero__sub-title {
        bottom: -90px
    }
    
    
    
    
    
    
    
    
    
    
    
}



@media only screen and (min-width:768px) and (max-width:991px) {
    
    .header__nav-2,
    .hero__area-3 .wrapper,
    .logo-primary {
        display: none
    }
    .header__nav-icon {
        grid-column: -1
    }
    
    .header__support {
        -ms-grid-column: 11;
        grid-column: 11/11;
        -ms-grid-row: 1;
        grid-row: 1
    }
    .header__support p {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    .logo-secondary {
        display: block
    }
    .offcanvas__body {
        -ms-grid-columns: 1.2fr 2.3fr 1.8fr;
        grid-template-columns: 1.2fr 2.3fr 1.8fr
    }
    .offcanvas__right {
        padding: 0 15px
    }
    .offcanvas__right .shape-1 {
        left: 0
    }
    .offcanvas__right .shape-2 {
        right: 30px
    }
    .offcanvas__logo {
        padding: 30px 0 30px 15px
    }
    .offcanvas__social {
        padding-left: 15px;
        padding-top: 50px
    }
    .offcanvas__contact p,
    .offcanvas__social .social-title {
        font-size: 20px
    }
    .offcanvas__social ul li {
        padding-bottom: 5px
    }
    .offcanvas__contact li,
    .offcanvas__social ul li a {
        font-size: 16px
    }
    .offcanvas__links {
        padding-left: 15px;
        padding-top: 40px
    }
    .offcanvas__search {
        padding-top: 140px;
        padding-bottom: 60px
    }
    .offcanvas__search input {
        padding: 15px 40px 15px 15px
    }
    
    
    
    .hero__area-3 .video-info {
        left: calc(50% + 8vw);
        bottom: calc(10vh + 10px)
    }
    
    
    
    
    
    
    .hero__text-2 {
        padding-left: 5%;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    .hero__text-2 p {
        padding-bottom: 40px
    }
    
    .hero__content img {
        max-width: 120px
    }
    .hero__content .experience {
        bottom: 60px
    }
    .hero__title {
        font-size: 80px
    }
    .hero__title::after {
        display: none !important
    }
    .hero__title-wrapper {
        margin-bottom: 50px;
        max-width: 600px
    }
    .hero__sub-title {
        font-size: 16px;
        right: 30px
    }
    
    
    
    
    
    
    
    
    
    
    
    
}



@media only screen and (max-width:767px) {
    
    .header__nav-2,
    .header__support,
    .hero__area-3 .wrapper,
    .hero__inner-3 .scroll-down,
    .logo-primary,
    .offcanvas__left,
    .offcanvas__right {
        display: none
    }
    .header__nav-icon {
        grid-column: -1
    }
    
    
    .header__support p {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    .logo-secondary {
        display: block
    }
    .offcanvas__body {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .offcanvas__mid {
        margin-top: 75px
    }
    .offcanvas__close {
        right: 15px;
        top: 15px
    }
    .offcanvas__close button {
        font-size: 24px;
        width: 48px;
        height: 48px
    }
    
    
    
    .hero__area-2 .sec-title-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
    .hero__area-3 .video-info {
        left: calc(50% + 5vw);
        bottom: calc(5vh + 5px)
    }
    
    
    
    .hero__about-text p,
    .hero__text-2 {
        padding-left: 0
    }
    
    .hero__text-2 {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    .hero__text-2 p {
        padding-bottom: 40px
    }
    .hero__content img {
        max-width: 60px
    }
    .hero__content .experience {
        position: unset
    }
    .hero__title,
    .rollslide_title,
    .rollslide_title-1 {
        font-size: 48px
    }
    .hero__title::after {
        display: none !important
    }
    .hero__title-wrapper {
        margin-left: 10px;
        max-width: 270px
    }
    .hero__sub-title {
        position: unset;
        padding-top: 15px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .offcanvas__area {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    
    .offcanvas__body {
        background-color: var(--black-2);
        width: 400px;
        max-width: 400px;
        margin: 0;
        border-radius: 10px;
        margin-top: 50px;
        position: fixed;
        right: 20px;
        top: 0;
        height: calc(100vh - 100px);
        overflow-y: auto;
    }
    
    
}





.about__area {
    overflow: hidden;
    background-color: var(--white)
}



.about__area .sec-title {
    max-width: 770px;
    position: relative;
    z-index: 9
}



.about__area-2 .sec-title,
.service__area .sec-sub-title,
.service__area .sec-title,
.service__area-2 .sec-title,
.service__area-2 span,
.service__item:hover .service a,
.service__item:hover .service__link p,
.service__item:hover .service__number span,
.service__item:hover .service__title,
.service__top-text p span {
    color: var(--white)
}

.about__area-2 .sec-title-wrapper {
    max-width: 770px;
    padding-bottom: 70px
}

.about__area-2 .sec-text {
    max-width: 440px
}

.about__area-2 .sec-text p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-2)
}



.about__area-2 #btn_wrapper,
.about__area-2 .btn_wrapper {
    margin-left: 0;
    margin-right: -40px;
    margin-top: -50px
}





.about__area-3 .sec-sub-title,
.about__area-3 .sec-title {
    color: var(--white);
    text-transform: uppercase;
    background-color: var(--black-2)
}

.about__area-3 .sec-title,
.blog__area-3 .sec-title,
.feature__content-item img,
.service__list-6 li,
.story__area .sec-title-wrapper {
    padding-bottom: 40px
}



.about__area-3 .sec-text p {
    max-width: 410px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-2);
    padding-bottom: 22px
}





.about__title-wrapper {
    padding-left: 5px;
    padding-bottom: 60px
}

.about__title-wrapper .header_v1 {
    display: block;
    text-align: left;
    text-align-last: left;
    word-spacing: normal;
    letter-spacing: normal
}

.about__content {
    padding-top: 65px;
    position: relative;
    z-index: 1
}

.about__content p {
    max-width: 440px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-3);
    margin-bottom: 60px
}

.about__content-wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 80px 1.8fr;
    grid-template-columns: 1fr 1.8fr;
    grid-gap: 80px
}

.about__img img {
    width: 100%;
    overflow: hidden
}

.about__img-right {
    position: absolute;
    right: 0;
    top: 280px
}

.about__img-right img {
    width: auto
}









.portfolio__item {
    -webkit-transform: perspective(4000px) rotateX(90deg);
    transform: perspective(4000px) rotateX(90deg)
}



.about8__title,
.awards__content__title,
.brand__title-3,
.choose-title,
.client__name-3,
.client__role-3,
.client__section__title,
.content,
.gallary12__content,
.hero10__content__name,
.hero10__content__title,
.hero__area-15 .gallary__thumb,
.portfolio__hero .title,
.portfolio__text,
.portfolio__title-3,
.research__area .sec-title,
.research__number span,
.research__title,
.research__tools li a,
.service__area-3 .sec-sub-title,
.service__area-3 .sec-title,
.service__title-3,
.showcase4__content h2,
.showcase4__content span,
.showcase__sub-title-16,
.showcase__title-16,
.tech_title {
    text-transform: uppercase
}





















@media only screen and (min-width:992px) and (max-width:1199px) {
    
    .about__area-2 .sec-title-wrapper {
        max-width: 600px
    }
    
    
    .about__area-3 .pt-140 {
        padding-top: 100px
    }
    
    .about__content p {
        max-width: 90%
    }
    .about__content-wrapper {
        grid-gap: 30px
    }
    .about__img-right img {
        display: none
    }
    
    
    
    
    
}



@media only screen and (min-width:768px) and (max-width:991px) {
    .about8__content p,
    .about__content p {
        margin-bottom: 30px
    }
    .about__area .sec-title {
        max-width: 660px
    }
    
    
    .about__area-2 #btn_wrapper,
    .about__area-2 .btn_wrapper {
        margin-left: auto;
        margin-right: 0;
        margin-top: -20px
    }
    .about__area-3 .pt-140 {
        padding-top: 90px
    }
    
    
    .about__title-wrapper {
        padding-left: 0
    }
    .about__content {
        padding-top: 5px
    }
    .about__content-wrapper {
        -ms-grid-columns: 1fr 30px 1.5fr;
        grid-template-columns: 1fr 1.5fr;
        grid-gap: 30px
    }
    .about__img-right {
        position: relative;
        top: 30px;
        right: unset
    }
    .about__img-right img {
        display: none
    }
    
    
    
    
    
    
    
    
}



























.service__area a:first-child .service__item {
    border-top: 1px solid var(--secondary)
}

.service__area .sec-title-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.service__area .service__heading-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.service__area .service__heading-row .header_v2 {
    margin: 0;
    text-align: left;
}

.service__area .service__cta-wrapper {
    margin: 0;
}

.service__area .service__cta-btn {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .service__area .service__heading-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        align-items: center;
    }

    .service__area .service__heading-row .header_v2 {
        text-align: center;
    }
}

.service__area-2 .sec-text p,
.service__top-text p {
    font-size: 18px;
    color: var(--gray-2);
    line-height: 1.4
}

.service__area-2 .sec-text p {
    max-width: 410px
}

.service__area-3 .sec-title {
    padding-bottom: 40px;
    background-color: var(--white);
    position: relative;
    right: 291px
}

.service__area-3 .sec-title-wrapper {
    position: relative;
    padding-left: 327px
}

.service__area-3 .sec-title-wrapper::after {
    position: absolute;
    content: "";
    left: 42%;
    top: 0;
    width: 1px;
    height: 100%;
}

.service__area-3 .sec-title-wrapper p {
    padding-top: 70px;
    padding-bottom: 60px;
    max-width: 410px;
    font-size: 18px;
    line-height: 1.4;
    margin-left: 220px
}







#main,
.counter__wrapper,
.service__area-6 .content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}







@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    
    
    .service__top-text p {
        font-size: 18px
    }
}







@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    
    
    .service__area.pb-150 {
        padding-bottom: 100px
    }
    .service__area-3 .sec-title-wrapper {
        padding-left: 200px;
        position: relative;
        right: 0
    }
    .service__area-3 .sec-title-wrapper::after {
        left: 30%
    }
    .service__area-3 .sec-title-wrapper p {
        margin-left: 120px;
        padding-top: 30px;
        padding-bottom: 0
    }
    
    
    
    
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    .about__area-8,
    .service__area.pb-150 {
        padding-bottom: 90px
    }
    .service__area-3 .sec-title {
        padding-bottom: 0;
        position: relative;
        right: 0
    }
    .service__area-3 .sec-title-wrapper {
        padding-left: 100px
    }
    .service__area-3 .sec-title-wrapper::after {
        left: 30%
    }
    .service__area-3 .sec-title-wrapper p {
        margin-left: 120px
    }
    
    
    
    
    
    
}

.contact_form-checker input:checked~label::after,
.contact_wrap:hover .link,
.hero10:hover::after,
.portfolio__nitem.active .pitem-bg,
.portfolio__slider-3:hover .swiper-btn div,
.service__area-6 .mid-content #img1 {
    opacity: 1;
    visibility: visible
}



.service__top-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.service__top-text p {
    max-width: 505px;
    font-weight: 400
}

.service__top-btn #btn_wrapper,
.service__top-btn .btn_wrapper {
    margin-left: auto;
    margin-right: -40px
}

.portfolio__btn,
.service__list-wrapper {
    margin-top: 40px
}

.service__img {
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    position: absolute;
    -webkit-transform: rotate(0) translateX(-100px);
    transform: rotate(0) translateX(-100px)
}

.service__hero-left-2,
.service__img-3,
.service__item-2,
.service__item-3 {
    position: relative
}

.service__img.active {
    opacity: 1;
    -webkit-transform: rotate(15deg) translateX(60px) translateY(30px);
    transform: rotate(15deg) translateX(60px) translateY(30px)
}

.service__img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.service__img-wrapper span {
    position: absolute;
    display: none;
    width: 175px;
    height: 70px;
    background-color: var(--primary);
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-26deg) translate(-100%, -100%);
    transform: rotate(-26deg) translate(-100%, -100%);
    -webkit-transition: .3s .2s;
    transition: .3s .2s;
    z-index: 1
}

.service__img-wrapper span.current {
    -webkit-transform: rotate(-26deg) translate(120px, -100%);
    transform: rotate(-26deg) translate(120px, -100%)
}





.service__item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 0.7fr 2fr 2.5fr 1fr;
    grid-template-columns: 0.7fr 2fr 2.5fr 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 35px 0;
    border-bottom: 1px solid var(--secondary);
    -webkit-transition: .3s;
    transition: .3s
}

.service__area-portfolio .service__item {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(231, 211, 197, 0.7);
    box-shadow: 0 0 18px rgba(231, 211, 197, 0.35), 0 12px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 28px 24px;
    margin-bottom: 15px;
}

.service__area-portfolio .service__title-wrapper,
.service__area-portfolio .service__text {
    max-width: 720px;
}

.service__area-portfolio .service__title-wrapper {
    width: 100%;
    text-align: left;
}

.service__area-portfolio .sec-title-wrapper {
    text-align: left;
}

.service__area-portfolio .service__title {
    color: #000000;
}

.service__area-portfolio .service__text p,
.service__area-portfolio .service__top-text p {
    color: #1e2d42;
}

.service__area-portfolio .service__item:hover {
    box-shadow: 0 0 18px rgba(231, 211, 197, 0.45), 0 0 36px rgba(214, 185, 168, 0.3);
}

.service__area-portfolio .service__item:hover .service__title {
    color: #ffffff;
}

.service__item:hover .service__link p i {
    -webkit-transform: translate(60px, -60px) rotate(-45deg);
    transform: translate(60px, -60px) rotate(-45deg)
}

.service__item:hover .service__link p::after {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(20px, -20px) rotate(-45deg);
    transform: translate(20px, -20px) rotate(-45deg)
}



.blog-v3.blog__area-3 .sec-title-wrapper::after,
.career__gallery ul li:last-child::after,
.service__item-2:nth-child(3n+1)::before,
.solution__btm li:first-child::after {
    position: unset
}







.service__item-3 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 30% 40% 30%;
    grid-template-columns: 30% 45% 25%;
    padding: 55px 0 50px
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .service__img {
        max-width: 260px
    }
    .service__item-3 {
        -ms-grid-columns: 30% 40% 30%;
        grid-template-columns: 30% 40% 30%
    }
}

.service-v5 .portfolio__service-item,
.service-v5.portfolio__service .sec-text,
.service-v5.portfolio__service .sec-text p,
.service-v5.portfolio__service .sec-title,
.service__item-3:hover .service__hover-3 {
    opacity: 1
}



.hero__area-10 .swiper-button-next:after,
.hero__area-10 .swiper-button-prev:after,
.hero__area-10 .swiper-rtl .swiper-button-next:after,
.hero__area-10 .swiper-rtl .swiper-button-prev:after,
.service__item-6 .image-tab {
    display: none
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .service__top-btn #btn_wrapper,
    .service__top-btn .btn_wrapper {
        margin-right: -10px
    }
    .service__img {
        max-width: 200px
    }
    .service__img-wrapper {
        display: none
    }
    .service__img-wrapper span {
        bottom: 260px;
        height: 40px;
        width: 120px
    }
    .service__item {
        gap: 30px
    }
    
    .service__item-3 {
        -ms-grid-columns: 30% 50% 20%;
        grid-template-columns: 30% 50% 20%;
        padding: 30px 0
    }
    
    
    
}



.service__number span,
.service__title {
    font-size: 28px;
    color: var(--gray-2);
    font-weight: 400;
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal
}



@media only screen and (min-width:768px) and (max-width:991px) {
    .service__top-text p {
        font-size: 16px
    }
    .service__top-btn #btn_wrapper,
    .service__top-btn .btn_wrapper {
        margin-right: 0
    }
    
    
    .service__item-3 {
        -ms-grid-columns: 30% 2% 40% 2% 24%;
        grid-template-columns: 30% 40% 24%;
        gap: 2%;
        padding: 50px 0
    }
    
    
}

@media only screen and (max-width:767px) {
    .about8__content p,
    .about__content p,
    .section_wrapper {
        margin-bottom: 30px
    }
    .about__area-3::after,
    .service__area-3 .sec-title-wrapper::after {
        width: 0
    }
    .about__content-wrapper,
    .service__item,
    .service__item-3,
    .service__item-6 ul,
    .workitems {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .service__area-6 .left-content,
    .service__title br {
        display: none
    }
    
    .about__area-2 .sec-title-wrapper,
    .about__area-3 .sec-text p {
        padding-bottom: 50px
    }
    .about__area-2 .sec-text {
        padding-bottom: 40px
    }
    
    
    .about__title-wrapper,
    .service__area-3 .sec-title-wrapper {
        padding-left: 0
    }
    .about__content {
        padding-top: 50px
    }
    .about__content-wrapper {
        grid-gap: 0
    }
    .about__img-right {
        position: relative;
        top: 30px;
        right: unset
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .service__area-2 .sec-text {
        padding-bottom: 30px
    }
    .service__area-3 .sec-title {
        position: relative;
        right: 0
    }
    .service__area-3 .sec-title-wrapper p {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0
    }
    
    
    
    
    
    .service__top-text p {
        font-size: 18px;
        margin: 30px 0
    }
    .service__top-btn #btn_wrapper,
    .service__top-btn .btn_wrapper {
        margin-right: 0;
        margin-left: 0
    }
    
    .service__item {
        padding: 25px 0 10px
    }
    
    .service__item-3 {
        padding: 40px 0
    }
    
    
    .service__title {
        padding: 10px 0 20px
    }
}





.service__number span {
    line-height: 1.2;
    -webkit-transition: .3s;
    transition: .3s
}

.service__title {
    display: block;
    line-height: 1.3
}

.service__list .active .service__link p,
.service__list .active .service__number span,
.service__list .active .service__title,
.service__list-6 li.active a,
.service__title-6,
.service__title:hover {
    color: var(--white)
}



.blog__detail-tags p,
.client__name-3,
.cta__area-2 .wc-btn-pink:hover,
.menu-text-pp,
.service__btn-2 a,
.service__title-3,
.service__title-3:hover,
.team__area .sec-sub-title,
.team__area .sec-title,
.team__member-name-6,
.team__member-name-7,
.testimonial__author,
.testimonial__pagination .next-button:hover i,
.testimonial__pagination .prev-button:hover i {
    color: var(--black-2)
}

#main .part .section,
.counter__item,
.portfolio__detail-info,
.portfolio__detail-text .fonts ul,
.service__btn-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}



.service__text {
    max-width: 320px
}

.service__link {
    text-align: right;
    overflow: hidden
}

.service__link p {
    display: inline-block;
    font-size: 48px
}

.service__link p i {
    transform: translate(0, 0) rotate(-45deg);
    -webkit-transition: .3s;
    transition: .3s
}

.blog__btn span i,
.service__link p::after {
    -webkit-transform: translate(0, 0) rotate(-45deg);
    transform: translate(0, 0) rotate(-45deg)
}

.service__link p::after {
    position: absolute;
    content: "\f061";
    left: -20px;
    bottom: -20px;
    transform: translate(0, 0) rotate(-45deg);
    -webkit-transition: .3s;
    transition: .3s
}



.service__btn-2#btn_wrapper,
.service__btn-2.btn_wrapper {
    margin: 100px auto 0
}



.service__btn-3 #btn_wrapper,
.service__btn-3 .btn_wrapper {
    width: 200px;
    height: 200px;
    margin-top: -10px;
    margin-right: -15px
}



















.service__detail .sec-title {
    max-width: 630px;
    font-size: 36px;
    line-height: 1.3;
    padding-bottom: 90px
}

















.blog__area-2 .sec-text p,
.blog__text p,
.service__detail-content p {
    font-size: 18px;
    line-height: 1.4
}

.service-v4.pb-150 {
    padding-bottom: 0
}



.service-v5.portfolio__service .sec-title {
    text-indent: 0
}

.service__list-6 li a.active {
    color: red;
    -webkit-transition: .2s;
    transition: .2s
}











.service__image:nth-child(5),
.testimonial__area-2 .line-3 {
    z-index: 5
}







.service__hero-2 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-image: url(../images/elements/sh-bg.png);
    background-position: top center;
    position: relative
}

.service__hero-2 .shape-1 {
    position: absolute;
    width: 132px;
    height: auto;
    right: 165px;
    top: 275px
}

.service__hero-2 .shape-web-dev {
    position: absolute;
    width: 132px;
    height: auto;
    right: 110px;
    top: 275px
}

.service__hero-inner-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr;
    grid-template-columns: 1fr 3fr
}



.service__hero-left-2 img {
    margin-bottom: 15px
}

.service__hero-left-2 .image-1,
.service__hero-left-2 .image-3 {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px)
}

.service__hero-left-2 .image-2 {
    -webkit-transform: translateX(62px);
    transform: translateX(62px)
}

.service__hero-left-2 .image-4 {
    position: absolute;
    left: 318px;
    bottom: 80px
}

.service__hero-right-2 .title {
    font-weight: 500;
    font-size: 133px;
    line-height: 1;
    color: var(--black);
    text-transform: capitalize;
    padding-bottom: 40px;
    padding-top: 80px;
    padding-left: 20px
}

.service__hero-right-2 .title span {
    display: block;
    padding-left: 170px
}

.service__hero-right-2 p {
    font-size: 18px;
    max-width: 340px;
    margin-left: 350px
}

.service__hero-right-2 .scroll {
    margin-left: 350px;
    margin-top: 95px;
    -webkit-animation: 5s linear infinite wcSlideBottom;
    animation: 5s linear infinite wcSlideBottom
}

.portfolio__hero-2 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-image: url(../images/elements/sh-bg.png);
    background-position: top center;
    position: relative
}

.portfolio__hero-2 .shape-1 {
    position: absolute;
    width: 132px;
    height: auto;
    right: 165px;
    top: 275px
}

.portfolio__hero-2 .shape-web-dev {
    position: absolute;
    width: 132px;
    height: auto;
    right: 110px;
    top: 275px
}

.portfolio__hero-inner-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr;
    grid-template-columns: 1fr 3fr
}

.portfolio__hero-left-2 img {
    margin-bottom: 15px
}

.portfolio__hero-left-2 .portfolio-image-1,
.portfolio__hero-left-2 .portfolio-image-3 {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px)
}

.portfolio__hero-left-2 .portfolio-image-2 {
    -webkit-transform: translateX(62px);
    transform: translateX(62px)
}

.portfolio__hero-left-2 .portfolio-image-4 {
    position: absolute;
    left: 318px;
    bottom: 80px
}

.portfolio__hero-right-2 .title {
    font-weight: 500;
    font-size: 133px;
    line-height: 1;
    color: var(--black);
    text-transform: capitalize;
    padding-bottom: 40px;
    padding-top: 80px;
    padding-left: 20px
}

.portfolio__hero-right-2 .title span {
    display: block;
    padding-left: 170px
}

.portfolio__hero-right-2 p {
    font-size: 18px;
    max-width: 340px;
    margin-left: 350px
}

.portfolio__hero-right-2 .scroll {
    margin-left: 350px;
    margin-top: 95px;
    -webkit-animation: 5s linear infinite wcSlideBottom;
    animation: 5s linear infinite wcSlideBottom
}



.counter__area-3 .counter__number {
    color: var(--black-2);
    font-weight: 400;
    padding-bottom: 10px
}

.counter__wrapper-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(4, 1fr)
}









.counter__item-2 {
    position: relative;
    text-align: center;
    padding: 40px 20px;
    border-right: 1px solid var(--white-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px
}

.counter__item-2:last-child {
    border-right: none
}

.counter__item-2 p {
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
    color: var(--black-2)
}

.counter__border {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background-color: var(--white-2)
}

.counter__item-2:last-child .counter__border {
    display: none
}



.counter__number {
    font-weight: 300;
    font-size: 100px;
    line-height: 1.1;
    color: var(--secondary)
}



.blog__area .sec-title-wrapper,
.team__area .sec-title-wrapper,
.workflow__area .sec-title-wrapper {
    text-align: center;
    padding-bottom: 60px
}







.workflow__wrapper-3 {
    width: 400%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: no-wrap;
    flex-wrap: no-wrap
}













.brand__area .pb-100,
.research__area .sec-title,
.research__item,
.workflow__step {
    padding-bottom: 50px
}





.workflow__number {
    font-size: 85px;
    font-weight: 500;
    color: var(--gray-4)
}

.workflow__title {
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: var(--black-2);
    padding-bottom: 15px
}









.research__area .sec-title-wrapper {
    padding-right: 80px;
    padding-bottom: 100px
}

.research__area .sec-title-wrapper p {
    max-width: 360px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-2);
    margin-left: 80px
}



.research__tools,

/* Additional styles for service__hero-2 elements */
.creative {
    display: inline-block;
    font-weight: 500;
    color: var(--primary);
}

.solution {
    display: inline-block;
    font-weight: 500;
    color: var(--secondary);
}

.animate_content {
    display: inline-block;
    animation: fadeInUp 1s ease-in-out;
}

.border-radius {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



































.testimonial__area .sec-title-wrapper {
    max-width: 330px;
    padding-top: 120px
}

.testimonial__area p {
    padding-top: 30px;
    font-size: 18px;
    line-height: 1.4
}





















.award__area-8,
.award__left,
.contact_wrap,
.cta__area-5,
.cta__content,
.cta__list-left li,
.development__img,
.footer__inner,
.footer__subscribe form,
.footer__subscribe-2,
.footer__subscribe-2 form,
.footer_categories,
.hero__area-10 .hero10_activition,
.hero__area-6,
.hero_layer_9,
.hover_8_wrap,
.hover_wrap,
.line_4,
.portfolio__hero,
.portfolio__slider-3,
.single__thumb,
.solution__btm li,
.team__btm p,
.team__detail-page,
.team__join-btn a,
.team__member-role-7,
.testimonial__wrapper-2 {
    position: relative
}

.testimonial__item .button {
    display: inline-block;
    cursor: pointer
}

.testimonial__item.item-2 {
    padding-top: 20px
}

.testimonial__item.item-3 {
    padding-top: 220px;
    text-align: right
}























.blog__img,
.blog__img-3,
.img-box,
.portfolio__detail img,
.portfolio__item img,
.portfolio__slide-2 .slide-img img,
.team__slide img,
.testimonial__video video {
    width: 100%
}

.testimonial__author {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    padding-bottom: 5px
}

.testimonial__pagination {
    position: absolute;
    right: 0;
    top: calc(50% - 105px);
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%)
}

.testimonial__pagination .next-button,
.testimonial__pagination .prev-button {
    width: 60px;
    height: 60px;
    border: 1px solid var(--gray-7);
    color: var(--gray-7);
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 30px 35px;
    -webkit-transition: .3s;
    transition: .3s;
    position: relative
}

.testimonial__pagination .next-button::after,
.testimonial__pagination .prev-button::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.testimonial__pagination .next-button:hover,
.testimonial__pagination .prev-button:hover {
    border-color: var(--black-2)
}









@media only screen and (min-width:1400px) and (max-width:1919px) {
    
    
    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-3 {
        -webkit-transform: translateX(-40px);
        transform: translateX(-40px)
    }
    .portfolio__hero-left-2 .portfolio-image-1,
    .portfolio__hero-left-2 .portfolio-image-3 {
        -webkit-transform: translateX(-40px);
        transform: translateX(-40px)
    }
    .counter__area-3 .sec-title-wrapper {
        padding-top: 120px
    }
    
    
    
    
    
    
    .testimonial__pagination {
        -webkit-transform: unset;
        transform: unset;
        z-index: 9
    }
    
}





.portfolio__area,
.portfolio__area-2 {
    position: relative;
    overflow: hidden
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .counter__area-3 .sec-sub-title,
    .research__area .sec-title,
    .service__item-6 p,
    .service__item-6 ul {
        padding-bottom: 20px
    }
    
    
    
    
    
    
    .service__hero-2 .shape-1,
    .service__hero-2 .shape-web-dev {
        right: 100px;
        top: 180px
    }
    .portfolio__hero-2 .shape-1,
    .portfolio__hero-2 .shape-web-dev {
        right: 100px;
        top: 180px
    }
    .counter__area-3 .sec-title-wrapper {
        padding-top: 120px
    }
    
    
    
    
    
    
    .research__area.pt-150 {
        padding-top: 130px
    }
    .research__area .sec-title-wrapper {
        padding-right: 40px;
        padding-bottom: 50px
    }
    
    
    
    
    
    
    
    
    .testimonial__pagination {
        -webkit-transform: unset;
        transform: unset;
        top: unset;
        bottom: 110px;
        z-index: 9
    }
    
    
    
}





.portfolio__text {
    font-size: 150px;
    font-weight: 500;
    color: var(--white);
    padding: 120px 0 50px;
    opacity: 1
}



.portfolio__area-2 .swiper-slide-active .sec-title {
    -webkit-animation: 1s .5s forwards wcfadeUp;
    animation: 1s .5s forwards wcfadeUp
}

.portfolio__area-2 .swiper-slide-active p {
    -webkit-animation: 1s .7s forwards wcfadeUp;
    animation: 1s .7s forwards wcfadeUp
}

.portfolio__area-2 .swiper-slide-active .btn-common-wrap {
    -webkit-animation: 1s .9s forwards wcfadeUp;
    animation: 1s .9s forwards wcfadeUp
}

.portfolio__area-2 .sec-title-wrapper .sec-text {
    font-size: 24px;
    max-width: 410px;
    text-align: left
}





@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    .service__btn-2#btn_wrapper,
    .service__btn-2.btn_wrapper {
        margin-top: 80px
    }
    
    
    
    
    .service-v2.pt-110,
    .service-v3.pt-130,
    .service-v4 .pt-130,
    .service-v5.pt-140 {
        padding-top: 150px
    }
    .service__hero-2 {
        padding-bottom: 100px
    }
    .portfolio__hero-2 {
        padding-bottom: 100px
    }
    .service__hero-2 .shape-1,
    .service__hero-2 .shape-web-dev {
        right: 30px;
        top: 200px;
        width: 100px
    }
    .portfolio__hero-2 .shape-1,
    .portfolio__hero-2 .shape-web-dev {
        right: 30px;
        top: 200px;
        width: 100px
    }
    .service__hero-left-2 img {
        max-width: 200px
    }
    .portfolio__hero-left-2 img {
        max-width: 200px
    }
    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-3 {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    .portfolio__hero-left-2 .portfolio-image-1,
    .portfolio__hero-left-2 .portfolio-image-3 {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    .service__hero-left-2 .image-4 {
        left: 278px
    }
    .portfolio__hero-left-2 .portfolio-image-4 {
        left: 278px
    }
    .service__hero-right-2 .title {
        font-size: 72px;
        padding-top: 30px
    }
    .portfolio__hero-right-2 .title {
        font-size: 72px;
        padding-top: 30px
    }
    .service__hero-right-2 .title span {
        padding-left: 76px
    }
    .portfolio__hero-right-2 .title span {
        padding-left: 76px
    }
    .service__hero-right-2 .scroll,
    .service__hero-right-2 p {
        margin-left: 300px
    }
    .portfolio__hero-right-2 .scroll,
    .portfolio__hero-right-2 p {
        margin-left: 300px
    }
    .counter__area .pt-150 {
        padding-top: 100px
    }
    
    
    .counter__number {
        font-size: 72px
    }
    
    
    .workflow__wrapper-3 {
        width: 100%;
        height: auto;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    
    
    .research__area.pt-150 {
        padding-top: 70px
    }
    .research__area .sec-title {
        font-size: 40px
    }
    .research__area .sec-title-wrapper {
        padding-bottom: 40px;
        padding-right: 20px
    }
    .research__area .sec-title-wrapper p {
        margin-left: 0
    }
    
    
    
    
    
    .testimonial__area .sec-title-wrapper {
        width: 100%;
        padding-top: 60px;
        padding-left: 30px
    }
    .testimonial__area p {
        font-size: 16px
    }
    
    
    
    
    
    
    .testimonial__pagination {
        -webkit-transform: unset;
        transform: unset;
        top: unset;
        bottom: 60px;
        z-index: 9
    }
    
    
    
    
    
    .portfolio__text {
        font-size: 110px
    }
    
    
}



@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    
    .service__detail .sec-title,
    .service__title-6 {
        font-size: 30px
    }
    .service__btn-2#btn_wrapper,
    .service__btn-2.btn_wrapper {
        margin-top: 80px
    }
    .service__btn-3 #btn_wrapper,
    .service__btn-3 .btn_wrapper {
        margin-left: auto;
        margin-right: 0
    }
    
    
    
    
    
    .service-v2.pt-110,
    .service-v3.pt-130,
    .service-v4 .pt-130,
    .service-v5.pt-140 {
        padding-top: 130px
    }
    .service__hero-2 {
        padding-bottom: 90px
    }
    .portfolio__hero-2 {
        padding-bottom: 90px
    }
    .service__hero-2 .shape-1,
    .service__hero-2 .shape-web-dev {
        max-width: 80px;
        right: 10px;
        top: 200px
    }
    .portfolio__hero-2 .shape-1,
    .portfolio__hero-2 .shape-web-dev {
        max-width: 80px;
        right: 10px;
        top: 200px
    }
    .service__hero-left-2 img {
        max-width: 150px
    }
    .portfolio__hero-left-2 img {
        max-width: 150px
    }
    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-3 {
        -webkit-transform: translateX(-25px);
        transform: translateX(-25px)
    }
    .portfolio__hero-left-2 .portfolio-image-1,
    .portfolio__hero-left-2 .portfolio-image-3 {
        -webkit-transform: translateX(-25px);
        transform: translateX(-25px)
    }
    .service__hero-left-2 .image-4 {
        left: 225px;
        bottom: 50px
    }
    .portfolio__hero-left-2 .portfolio-image-4 {
        left: 225px;
        bottom: 50px
    }
    .service__hero-right-2 .title {
        font-size: 53px;
        padding-bottom: 30px;
        padding-top: 30px;
        padding-left: 0
    }
    .portfolio__hero-right-2 .title {
        font-size: 53px;
        padding-bottom: 30px;
        padding-top: 30px;
        padding-left: 0
    }
    .service__hero-right-2 .title span {
        padding-left: 90px
    }
    .portfolio__hero-right-2 .title span {
        padding-left: 90px
    }
    .service__hero-right-2 p {
        margin-left: 220px
    }
    .portfolio__hero-right-2 p {
        margin-left: 220px
    }
    .service__hero-right-2 .scroll {
        margin-left: 220px;
        margin-top: 60px
    }
    .portfolio__hero-right-2 .scroll {
        margin-left: 220px;
        margin-top: 60px
    }
    
    
    
    .brand__area .pb-100,
    .counter__item-3 {
        padding-bottom: 0
    }
    .counter__number {
        font-size: 48px
    }
    
    
    .workflow__wrapper-3 {
        width: 100%;
        height: auto;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    
    .research__area.pt-150 {
        padding-top: 60px
    }
    .research__area .sec-title {
        padding-bottom: 30px
    }
    .research__area .sec-title-wrapper {
        padding-bottom: 40px
    }
    .research__area .sec-title-wrapper p {
        max-width: 100%
    }
    
    
    
    
    
    .testimonial__area .sec-title-wrapper {
        padding-top: 0
    }
    
    
    
    
    
    
    
    .testimonial__pagination {
        -webkit-transform: unset;
        transform: unset;
        top: unset;
        bottom: 60px;
        z-index: 9
    }
    .testimonial__pagination .next-button,
    .testimonial__pagination .prev-button {
        margin: 20px
    }
    
    
    
    
    
    
    .portfolio__text {
        font-size: 90px
    }
    
    
    
}

.portfolio__area-3 .swiper-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px
}

.portfolio__area-3 .swiper-btn div {
    font-size: 20px;
    color: var(--white);
    border: 1px solid var(--white);
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 9;
    opacity: 0;
    visibility: hidden
}

.portfolio__area-3 .swiper-btn div:hover {
    color: var(--black-2);
    background-color: var(--white)
}

.portfolio__area-3 .swiper-btn div.pp-prev {
    left: 26px
}

.portfolio__area-3 .swiper-btn div.pp-next {
    right: 0
}

.portfolio__area-3 .swiper-pagination {
    width: 120px;
    left: 370px;
    top: 0;
    bottom: unset;
    font-weight: 400;
    font-size: 60px;
    line-height: 1;
    color: var(--white)
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .portfolio__area-3 .swiper-pagination {
        left: 300px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .portfolio__area-3 .swiper-pagination {
        left: 180px
    }
}

@media only screen and (max-width:767px) {
    
    .service__list-6 li,
    .service__title-3,
    .workflow__area-6 .pb-130 {
        padding-bottom: 20px
    }
    
    
    .service__btn-2#btn_wrapper,
    .service__btn-2.btn_wrapper {
        margin: 60px 0 0
    }
    
    .service__btn-3 #btn_wrapper,
    .service__btn-3 .btn_wrapper {
        margin-left: -15px
    }
    
    .service__detail-content,
    .service__hero-inner-2,
    .service__hero-inner-web-dev {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .portfolio__hero-inner-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    
    
    
    
    .service__detail .sec-title {
        font-size: 30px;
        padding-bottom: 30px
    }
    .about__area-7 .shape-1,
    .counter__area-3 .sec-sub-title,
    .research__area .sec-sub-title,
    .service__detail-circle,
    .testimonial__area-3 img,
    .testimonial__pagination {
        display: none
    }
    
    
    
    .service-v2.pt-110,
    .service-v3.pt-130,
    .service-v4 .pt-130 {
        padding-top: 120px
    }
    .service-v5.pt-140 {
        padding-top: 120px;
        padding-bottom: 40px
    }
    .service__hero-2 {
        padding-bottom: 60px
    }
    .portfolio__hero-2 {
        padding-bottom: 60px
    }
    .service__hero-2 .shape-1 {
        width: 75px;
        right: 6px;
        top: 130px
    }
    .service__hero-2 .shape-web-dev {
        width: 75px;
        right: 6px;
        top: 400px
    }
    .portfolio__hero-2 .shape-1 {
        width: 75px;
        right: 6px;
        top: 130px
    }
    .portfolio__hero-2 .shape-web-dev {
        width: 75px;
        right: 6px;
        top: 400px
    }
    .service__hero-left-2 {
        -ms-grid-row: 2;
        grid-row: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 15px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 30px
    }
    .portfolio__hero-left-2 {
        -ms-grid-row: 2;
        grid-row: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 15px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 30px
    }
    .service__hero-left-2 img {
        max-width: 160px;
        margin: 0
    }
    .portfolio__hero-left-2 img {
        max-width: 160px;
        margin: 0
    }
    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-2,
    .service__hero-left-2 .image-3 {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    .portfolio__hero-left-2 .portfolio-image-1,
    .portfolio__hero-left-2 .portfolio-image-2,
    .portfolio__hero-left-2 .portfolio-image-3 {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    .service__hero-left-2 .image-4 {
        position: unset
    }
    .portfolio__hero-left-2 .portfolio-image-4 {
        position: unset
    }
    .service__hero-right-2 {
        -ms-grid-row: 1;
        grid-row: 1
    }
    .portfolio__hero-right-2 {
        -ms-grid-row: 1;
        grid-row: 1
    }
    .service__hero-right-2 .title {
        font-size: 40px;
        padding-bottom: 20px;
        padding-top: 0;
        padding-left: 0
    }
    .portfolio__hero-right-2 .title {
        font-size: 40px;
        padding-bottom: 20px;
        padding-top: 0;
        padding-left: 0
    }
    .service__hero-right-2 .title span {
        padding-left: 60px
    }
    .portfolio__hero-right-2 .title span {
        padding-left: 60px
    }
    .service__hero-right-2 p {
        font-size: 16px;
        margin-left: 65px
    }
    .portfolio__hero-right-2 p {
        font-size: 16px;
        margin-left: 65px
    }
    .service__hero-right-2 .scroll {
        margin-left: 65px;
        margin-top: 40px
    }
    .portfolio__hero-right-2 .scroll {
        margin-left: 65px;
        margin-top: 40px
    }
    
    
    .counter__wrapper-2 {
        -ms-grid-columns: 1fr 50px 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px
    }
    
    
    
    
    
    .choose-title,
    .counter__number {
        font-size: 40px
    }
    
    .workflow__wrapper-3 {
        width: 100%;
        height: auto;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    
    
    
    
    .research__area .sec-title-wrapper {
        padding-right: 0;
        padding-bottom: 40px;
        text-align: center
    }
    .research__area .sec-title-wrapper p {
        margin: 0 auto
    }
    
    
    
    
    
    .brand__area .pb-100 {
        padding-bottom: 0
    }
    
    
    
    
    .brand__item-2,
    .testimonial__area p {
        padding-bottom: 20px
    }
    .testimonial__area .sec-title-wrapper {
        padding-top: 0
    }
    .testimonial__area-2 .g-0 {
        padding-right: 8px;
        padding-left: 8px
    }
    
    
    
    
    
    .testimonial__item {
        padding-bottom: 30px
    }
    .testimonial__item.item-1 {
        text-align: center;
        margin: 0 50px
    }
    .testimonial__item.item-1 img {
        width: 100%
    }
    .testimonial__item.item-3 {
        text-align: center;
        padding-top: 30px
    }
    
    
    
    
    .portfolio__text {
        font-size: 45px;
        padding: 50px 0
    }
    
    
    .portfolio__area-2 .sec-title-wrapper {
        text-align: left
    }
    .portfolio__area-2 .sec-title-wrapper .sec-text {
        font-size: 20px
    }
    
    
    
    .portfolio__area-3 .swiper-pagination {
        left: -22px;
        padding-top: 10px
    }
}

.portfolio__area-3 .swiper-pagination-total {
    font-size: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: -50px
}

.portfolio__area-6 .sec-title {
    font-size: 120px;
    padding-bottom: 20px
}

.portfolio__area-6 .sec-title-wrapper {
    position: sticky;
    top: 130px
}

.portfolio__area-6 .sec-title-wrapper p {
    font-size: 18px;
    line-height: 1.4;
    padding-left: 110px;
    position: relative
}

.portfolio__area-6 .sec-title-wrapper p::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 1px;
    background-color: var(--black-2);
    left: 0;
    top: 8px
}







.portfolio__slider-2-pagination .swiper-pagination-bullets {
    left: calc(100% - 135px);
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.portfolio__slider-2-pagination .swiper-pagination-bullet {
    display: block;
    margin: 15px 10px !important;
    width: 50px;
    height: 50px;
    background: 0 0;
    border: 1px solid #d6d6d6;
    opacity: 1;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s
}

.portfolio__content-6,
.portfolio__info {
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
    visibility: hidden
}

.portfolio__slider-2-pagination .swiper-pagination-bullet::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    border-radius: 50px;
    background-color: #d6d6d6;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.portfolio__slider-2-pagination .swiper-pagination-bullet-active,
.portfolio__slider-2-pagination .swiper-pagination-bullet:hover {
    border-color: var(--black-2)
}

.award__area,
.btn-extra,
.btn-view::after,
.cta__area,
.cta__area-7,
.footer__area-3,
.portfolio__slider-2-pagination .swiper-pagination-bullet-active::after,
.portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after,
.price__item,
.price__item:first-child,
.solution__btm li::after,
.solution__mid p::before,
.team__join-btn,
.team__member-role-7::after,
.team__member-work li a:hover {
    background-color: var(--black-2)
}

/* Services page sections styling */
.service__area {
    background: #FFFFFF !important;
    position: relative;
}

.service__area .sec-title-wrapper {
    position: relative;
    z-index: 2;
}

.service__area .header_v2 {
    color: #0d1b2e !important;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 20px;
}

.service__area .sec-title-wrapper p {
    color: #666666 !important;
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.service__item-large {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 15px;
    padding: 40px;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.service__item-large:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(13, 27, 46, 0.1);
    border-color: #d6b9a8;
}

.service__item-large .service__icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    transition: all 0.3s ease;
}

.service__item-large:hover .service__icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(214, 185, 168, 0.3);
}

.service__item-large .service__icon i {
    font-size: 32px;
    color: #FFFFFF;
}

.service__item-large .service__title {
    color: #0d1b2e;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}

.service__item-large .service__text {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service__item-large .service__features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.service__item-large .service__features li {
    color: #0d1b2e;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    position: relative;
    padding-left: 25px;
}

.service__item-large .service__features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    color: #d6b9a8;
    font-weight: 700;
    font-size: 14px;
}

.service__item-large .service__btn {
    margin-top: auto;
}

/* Removed service item large wc-btn-primary styles to use default circular button design */

/* Removed service item large wc-btn-primary hover styles to use default circular button design */

/* SEO Services Section */
.seo__area {
    background: var(--black-2);
    position: relative;
}

.seo__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.1) 0%, rgba(231, 211, 197, 0.05) 100%);
    z-index: 1;
}

.seo__area .container {
    position: relative;
    z-index: 2;
}

.seo__area .sec-title-wrapper {
    position: relative;
    z-index: 2;
}

.seo__area .sec-title-wrapper h2,
.seo__area .header_v2 {
    color: #FFFFFF;
}

.seo__area .sec-title-wrapper p {
    color: #CCCCCC;
    text-align: right;
}

.seo__item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.seo__item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(214, 185, 168, 0.5);
}

.seo__number {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.seo__item:hover .seo__number {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(214, 185, 168, 0.4);
}

.seo__title {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    text-align: center;
}

.seo__item p {
    color: #CCCCCC;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Additional Services */
.additional__services {
    background: #F8F8F8;
    position: relative;
}

.additional__services .sec-title-wrapper {
    position: relative;
    z-index: 2;
}

.additional__services .sec-title-wrapper h2,
.additional__services .header_v2 {
    color: #0d1b2e;
}

.additional__services .sec-title-wrapper p {
    color: #666666;
    text-align: right;
}

.additional__item {
    background: #FFFFFF;
    border-radius: 15px;
    padding: 40px;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #E5E5E5;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.additional__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(13, 27, 46, 0.1);
    border-color: #d6b9a8;
}

.additional__icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d6b9a8 0%, #e7d3c5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.additional__item:hover .additional__icon {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(214, 185, 168, 0.3);
}

.additional__icon i {
    font-size: 32px;
    color: #0d1b2e;
}

.additional__content {
    flex: 1;
}

.additional__title {
    color: #0d1b2e;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.additional__item p {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.additional__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.additional__features li {
    color: #0d1b2e;
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0;
    position: relative;
    padding-left: 20px;
}

.additional__features li:before {
    content: '•';
    position: absolute;
    left: 0;
    top: 6px;
    color: #d6b9a8;
    font-weight: 700;
    font-size: 16px;
}

/* Process Section */
.process__area {
    background: var(--black-2);
    position: relative;
}

.process__area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(231, 211, 197, 0.1) 0%, rgba(214, 185, 168, 0.05) 100%);
    z-index: 1;
}

.process__area .container {
    position: relative;
    z-index: 2;
}

.process__area .sec-title-wrapper {
    position: relative;
    z-index: 2;
}

.process__area .sec-title-wrapper h2,
.process__area .header_v2 {
    color: #FFFFFF;
}

.process__area .sec-title-wrapper p {
    color: #CCCCCC;
    text-align: right;
}

.process__item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 30px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    height: 100%;
}

.process__content {
    display: flex;
    flex-direction: column;
}

.process__item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(231, 211, 197, 0.5);
}

.process__number {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #e7d3c5 0%, #d6b9a8 100%);
    color: #0d1b2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
    flex-shrink: 0;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.45);
    animation: processFloat 6s ease-in-out infinite;
}

.process__item:hover .process__number {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 18px 32px rgba(231, 211, 197, 0.35), inset 0 4px 6px rgba(255, 255, 255, 0.5);
}

.process__icon i {
    font-size: 24px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.process__item:hover .process__icon i {
    transform: translateY(-3px) scale(1.06);
}

@keyframes processFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0);
    }
}

.process__title {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.process__item p {
    color: #CCCCCC;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* CTA Area */
.cta__area .cta__content h2,
.cta__area .cta__content p {
    color: var(--white);
    text-align: center;
}

.cta__area .cta__btn-gold {
    color: #e7d3c5;
    text-shadow: 0 0 10px rgba(231, 211, 197, 0.55), 0 0 22px rgba(214, 185, 168, 0.35);
}

.cta__area .cta__btn-gold span {
    box-shadow: 0 0 12px rgba(231, 211, 197, 0.35), 0 0 22px rgba(214, 185, 168, 0.25);
}

.cta__area .cta__btn-gold:hover {
    color: #000000;
    text-shadow: 0 0 10px rgba(231, 211, 197, 0.25);
    box-shadow: 0 0 22px rgba(231, 211, 197, 0.35), 0 0 40px rgba(214, 185, 168, 0.25);
    font-weight: 700;
}

.cta__area .cta__btn-gold:hover span {
    box-shadow: 0 0 22px rgba(231, 211, 197, 0.65), 0 0 46px rgba(214, 185, 168, 0.4);
}



.portfolio__slide-2 .sec-title {
    line-height: 1.1;
    padding-bottom: 30px;
    padding-left: 10px;
    opacity: 0
}

.portfolio__slide-2 .sec-title a {
    color: var(--black-2);
    text-transform: capitalize
}

.portfolio__slide-2 .sec-title span {
    display: block;
    padding-left: 60px;
    position: relative
}

.portfolio__slide-2 .sec-title span::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 1px;
    left: -10px;
    top: 50%;
    background-color: var(--black-2)
}



.pl-100,
.portfolio__slide-2 .slide-content,
.portfolio__wrapper-6 {
    padding-left: 100px
}



.portfolio__slide-2 .btn-common {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black-2)
}

.portfolio__slide-2 .btn-common i {
    padding-left: 5px
}

.portfolio__slide-2 .btn-common-wrap {
    opacity: 0
}





.portfolio__info p,
.portfolio__title {
    line-height: 1.3;
    color: var(--black-2)
}



.portfolio__item {
    padding-bottom: 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    scale: 0.5;
    opacity: 0
}

.portfolio__item:nth-child(2n) {
    top: 50%
}

.portfolio__item:hover .portfolio__info {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.portfolio__item .img-box {
    height: 100%
}



.career__gallery-img img,
.career__gallery-img video,
.client__logo img,
.portfolio__item-6 img,
.single__thumb img {
    max-width: 100%
}



.portfolio__info {
    width: 175px;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--primary);
    position: absolute;
    right: 0;
    bottom: 30%;
    z-index: 1;
    -webkit-transform: translateX(60px);
    transform: translateX(60px);
    transition: .3s
}

.portfolio__info p {
    font-weight: 400;
    font-size: 12px
}

.portfolio__title {
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 3px
}









.portfolio__list-1 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    position: relative;
    margin-bottom: 0
}



.portfolio__pagination-6 {
    padding-top: 430px;
    padding-left: 110px;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.1;
    color: var(--black-3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}



.cta__content,
.cta__content #btn_wrapper,
.cta__content .btn_wrapper,
.cta__inner-5,
.error__content a,
.faq__btm #btn_wrapper,
.faq__btm .btn_wrapper,
.mixtup_btn#btn_wrapper,
.mixtup_btn.btn_wrapper,
.portfolio__btn#btn_wrapper,
.portfolio__btn.btn_wrapper,
.price__btn a,
footer #btn_wrapper,
footer .btn_wrapper {
    margin: 0 auto
}



.portfolio__detail-top .sec-title {
    font-size: 120px
}























#main .part .section,
.portfolio__detail-text .fonts ul {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}







.blog__title-2:hover,
.blog__title-3:hover,
.blog__title:hover,
.cta__area-2 .wc-btn-pink,
.portfolio__detail-text .fonts ul .semibold,
.privacy-policy table td,
.team__member-role-6 {
    color: var(--black-3)
}









.btn-started i,
.btn-together i,
.btn-view i,
.portfolio__detail .block-gallery img:nth-child(2n) {
    padding-left: 10px
}















.portfolio__page .swiper-slide-active .wc-btn-dark,
.swiper-slide-active .portfolio__title-3 {
    -webkit-animation: 1s .7s forwards wcfadeUp;
    animation: 1s .7s forwards wcfadeUp
}



.circle-pagination,
.circle-pagination-2 {
    width: 90px !important;
    bottom: unset !important
}





.row_bottom {
    margin-top: 80vh
}

@keyframes wcSpinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
    from {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.portfolio__hero .title {
    font-weight: 600;
    font-size: 230px;
    line-height: .9;
    text-align: center;
    color: var(--black-2);
    opacity: 0
}

.portfolio__hero .title.shape-circle {
    position: relative;
    opacity: 0
}

.portfolio__hero .title.shape-circle::after {
    position: absolute;
    content: "";
    width: 62px;
    height: 62px;
    right: -50px;
    top: 75px;
    background-repeat: no-repeat;
    background-position: right;
    -webkit-animation: 3s linear infinite wcSpinner;
    animation: 3s linear infinite wcSpinner
}

.portfolio__hero .title.text-stroke {
    -webkit-text-stroke: 1px var(--black-2);
    color: transparent;
    margin: 0 -140px;
    opacity: 0
}

.portfolio__hero .pp-thumb {
    max-width: 100%;
    position: absolute;
    bottom: 0;
    left: 14%
}

.portfolio__hero .btn-wrapper {
    text-align: center;
    position: relative;
    z-index: 9;
    margin-top: 30px
}

















.portfolio__about .sec-title {
    max-width: 715px;
    text-transform: uppercase;
    opacity: 0
}

.portfolio__about .sec-title span {
    display: block;
    padding-left: 120px;
    position: relative
}

.portfolio__about .sec-title span::before {
    position: absolute;
    content: "";
    width: 90px;
    height: 1px;
    left: 0;
    top: 30px;
    background-color: var(--black-2)
}

.portfolio__about .sec-text p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-2);
    padding-bottom: 70px;
    opacity: 0
}





.part h2,
.part p,
.portfolio__about .brand-logo img,
.portfolio__page .contact__form,
.portfolio__page .contact__text,
.portfolio__page .footer-menu,
.portfolio__page .footer-menu-2,
.portfolio__page .footer__copyright-2 p,
.portfolio__page .wc-btn-dark {
    opacity: 0
}





































.portfolio__service .sec-title {
    max-width: 350px;
    text-indent: 80px;
    text-transform: uppercase;
    opacity: 0
}

.portfolio__service .sec-text {
    background-repeat: no-repeat;
    background-position: 0 80px;
    opacity: 0
}

.portfolio__service .sec-text p {
    max-width: 320px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-13);
    padding-top: 150px;
    opacity: 0
}



















































.mixtup_btn .wc-btn:hover,
.portfolio__footer-area .pf-social ul li a:hover {
    color: var(--white);
    background-color: var(--black-2)
}



.portfolio__page .swiper-slide-active .brand-logo img,
.portfolio__page .swiper-slide-active .contact__form,
.portfolio__page .swiper-slide-active .pf-contact ul li,
.portfolio__page .swiper-slide-active .portfolio__project .pp-slide-thumb,
.portfolio__page .swiper-slide-active .portfolio__service-item,
.portfolio__page .swiper-slide-active .pp-prev,
.portfolio__page .swiper-slide-active .title {
    -webkit-animation: 1s .6s forwards wcfadeUp;
    animation: 1s .6s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .pf-title,
.portfolio__page .swiper-slide-active .pp-title,
.portfolio__page .swiper-slide-active .sec-title,
.portfolio__page .swiper-slide-active .shape-circle {
    -webkit-animation: 1s .2s forwards wcfadeUp;
    animation: 1s .2s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .brand-title,
.portfolio__page .swiper-slide-active .contact__text,
.portfolio__page .swiper-slide-active .pf-contact h3,
.portfolio__page .swiper-slide-active .portfolio__about-left img,
.portfolio__page .swiper-slide-active .portfolio__project .pp-slider-wrapper,
.portfolio__page .swiper-slide-active .portfolio__service .sec-text,
.portfolio__page .swiper-slide-active .pp-next,
.portfolio__page .swiper-slide-active .sec-text p,
.portfolio__page .swiper-slide-active .text-stroke {
    -webkit-animation: 1s .4s forwards wcfadeUp;
    animation: 1s .4s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .pf-social h3,
.portfolio__page .swiper-slide-active .ps-btn a {
    -webkit-animation: 1s .8s forwards wcfadeUp;
    animation: 1s .8s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .pf-social ul li {
    -webkit-animation: 1s 1s forwards wcfadeUp;
    animation: 1s 1s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .footer__copyright-2 p {
    -webkit-animation: 1s 1.2s forwards wcfadeUp;
    animation: 1s 1.2s forwards wcfadeUp
}

.portfolio__page .swiper-slide-active .footer-menu,
.portfolio__page .swiper-slide-active .footer-menu-2 {
    -webkit-animation: 1s 1.3s forwards wcfadeUp;
    animation: 1s 1.3s forwards wcfadeUp
}

.portfolio__page .wc-btn-dark:hover {
    color: var(--white);
    background-color: var(--black-2);
    border-color: var(--black-2)
}

@media (max-width:1300px) {
    
    
    .swiper-slide .wc-btn-dark {
        -webkit-animation: 1s .7s forwards wcfadeUp;
        animation: 1s .7s forwards wcfadeUp
    }
    .swiper-slide .brand-logo img,
    .swiper-slide .contact__form,
    .swiper-slide .pf-contact ul li,
    .swiper-slide .portfolio__project .pp-slide-thumb,
    .swiper-slide .portfolio__service-item,
    .swiper-slide .pp-prev,
    .swiper-slide .title {
        -webkit-animation: 1s .6s forwards wcfadeUp;
        animation: 1s .6s forwards wcfadeUp
    }
    .swiper-slide .pf-title,
    .swiper-slide .pp-title,
    .swiper-slide .sec-title,
    .swiper-slide .shape-circle {
        -webkit-animation: 1s .2s forwards wcfadeUp;
        animation: 1s .2s forwards wcfadeUp
    }
    .swiper-slide .brand-title,
    .swiper-slide .contact__text,
    .swiper-slide .pf-contact h3,
    .swiper-slide .portfolio__about-left img,
    .swiper-slide .portfolio__project .pp-slider-wrapper,
    .swiper-slide .portfolio__service .sec-text,
    .swiper-slide .pp-next,
    .swiper-slide .sec-text p,
    .swiper-slide .text-stroke {
        -webkit-animation: 1s .4s forwards wcfadeUp;
        animation: 1s .4s forwards wcfadeUp
    }
    .swiper-slide .pf-social h3,
    .swiper-slide .ps-btn a {
        -webkit-animation: 1s .8s forwards wcfadeUp;
        animation: 1s .8s forwards wcfadeUp
    }
    .swiper-slide .pf-social ul li {
        -webkit-animation: 1s 1s forwards wcfadeUp;
        animation: 1s 1s forwards wcfadeUp
    }
    .swiper-slide .footer__copyright-2 p {
        -webkit-animation: 1s 1.2s forwards wcfadeUp;
        animation: 1s 1.2s forwards wcfadeUp
    }
    .swiper-slide .footer-menu,
    .swiper-slide .footer-menu-2 {
        -webkit-animation: 1s 1.3s forwards wcfadeUp;
        animation: 1s 1.3s forwards wcfadeUp
    }
}

.circle-pagination {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.circle-pagination.left {
    left: 50px !important
}

.circle-pagination.right {
    left: calc(100% - 135px) !important
}

.circle-pagination button.swiper-pagination-bullet {
    position: relative;
    width: auto;
    height: auto;
    margin: 10px 0 !important;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s;
    border: 1px solid rgba(0, 0, 0, .3)
}

.circle-pagination .swiper-pagination-bullet span {
    position: absolute;
    width: 6px;
    height: 6px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--black-2);
    border-radius: 100%
}

.circle-pagination .circle-progress {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 50px;
    height: 50px
}

.circle-pagination .circle-origin {
    fill: transparent;
    stroke: var(--black-2);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 156px;
    stroke-dashoffset: 156px
}

.circle-pagination .swiper-pagination-bullet-active .circle-origin {
    -webkit-animation: 5s backwards progress;
    animation: 5s backwards progress
}

@-webkit-keyframes progress {
    0% {
        stroke-dashoffset: 156px
    }
    90% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -156px
    }
}

@keyframes progress {
    0% {
        stroke-dashoffset: 156px
    }
    90% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -156px
    }
}

.circle-pagination-2 {
    top: 50%;
    left: 30px !important;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%)
}

.circle-pagination-2 .swiper-pagination-bullet {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: 1px solid var(--black-2);
    position: relative;
    margin: 10px 0 !important
}

.blog__area-3 .sec-sub-title,
.blog__area-3 .sec-title {
    background-color: var(--white);
    text-transform: uppercase
}

.circle-pagination-2 .swiper-pagination-bullet::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--black-2);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%
}

.blog__area-2 {
    overflow: hidden;
    background-color: var(--black-2)
}

.blog__area-2 #btn_wrapper,
.blog__area-2 .btn_wrapper {
    margin-left: auto;
    margin-right: -40px;
    margin-top: -60px
}

.blog__area-2 .sec-title {
    color: var(--white);
    padding-top: 10px;
    text-transform: uppercase
}

.blog__area-2 .sec-text,
.faq__list-4 {
    padding-top: 30px
}

.blog__area-2 .sec-text p {
    max-width: 440px;
    font-weight: 400;
    color: var(--gray-2)
}



.award__right span,
.blog__area-2 .sec-text p span,
.blog__meta-2 a:hover,
.blog__title-2,
.career__top .sec-title-2,
.content p,
.job__area .sec-title,
.showcase5_bottom span,
.team__member-work li a:hover {
    color: var(--white)
}

.blog__area-2 .sec-btn,
.footer__logo,
.footer__logo-3 img {
    margin-bottom: 30px
}

.blog__area-2 .sec-btn a {
    margin-left: auto
}

.blog__area-3 .sec-title-wrapper {
    position: relative;
    padding-left: 330px;
    margin-bottom: 60px
}

.blog__area-3 .sec-title-wrapper::after {
    position: absolute;
    content: "";
    left: 39%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--white-2)
}

.blog__area-3 .sec-title-wrapper p {
    padding-top: 70px;
    padding-bottom: 60px;
    max-width: 330px;
    font-size: 18px;
    line-height: 1.4;
    margin-left: 220px
}



.blog__area-6 .pb-110 {
    padding-bottom: 90px
}

.blog__area-6 .blog__item,
.blog__area-6 .blog__item-2 {
    padding-bottom: 55px;
    position: relative;
    z-index: 1
}

.blog__item,
.blog__item-2 {
    position: relative;
    z-index: 5
}

.blog__item-2:hover .blog__img,
.blog__item:hover .blog__img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}







.blog__img-wrapper {
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
    z-index: 9
}

.blog__meta,
.blog__meta-2 {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 10px
}

.blog__meta a,
.blog__meta-2 a {
    color: var(--black-3);
    -webkit-transition: .3s;
    transition: .3s
}

.blog__title,
.blog__title-2,
.blog__title-3 {
    display: block;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    border-bottom: 1px solid var(--gray-5);
    margin-bottom: 10px;
    padding-bottom: 20px
}



.blog__title-2 {
    border-bottom: 0
}

.blog__title-2:hover {
    color: var(--gray-2)
}













.hero10,
.img-box img {
    -webkit-transition: .5s;
    transition: .5s
}







































































.blog-v2 .sec-text p {
    padding-bottom: 70px;
    margin-left: auto
}

.blog-v2 .blog__item-2 {
    margin-bottom: 50px
}

.blog-v3 .line,
.footer__top-2 {
    padding-bottom: 70px
}



.img-box {
    position: relative;
    height: 500px;
    overflow: hidden
}

.img-box img {
    position: absolute;
    top: 0;
    left: -148px;
    width: auto;
    height: 100%;
    transition: .5s;
    background-size: cover
}

.img-box img:first-child {
    -webkit-transform: translatex(50%) scalex(2);
    transform: translatex(50%) scalex(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px)
}

.img-box:hover img:nth-child(2) {
    -webkit-transform: translatex(-50%) scalex(2);
    transform: translatex(-50%) scalex(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px)
}

.img-box:hover img:first-child {
    -webkit-transform: translatex(0) scalex(1);
    transform: translatex(0) scalex(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0)
}





@media only screen and (min-width:1400px) and (max-width:1919px) {
    .portfolio__slider-2-pagination .swiper-pagination-bullet {
        margin: 10px !important
    }
    .portfolio__pagination-6 {
        padding-top: 330px
    }
    .portfolio__hero .title {
        font-size: 180px
    }
    
    
    
    .circle-pagination-2 {
        left: 0 !important;
        width: 63px !important
    }
    
    
}

.cta__content {
    width: 50%;
    z-index: 1
}



.cta__content-2 #btn_wrapper,
.cta__content-2 .btn_wrapper,
.cta__content-3 #btn_wrapper,
.cta__content-3 .btn_wrapper {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 350px;
    margin-left: auto;
    margin-right: auto
}

.cta__content-2 #btn_wrapper .btn-item,
.cta__content-2 .btn_wrapper .btn-item,
.cta__content-3 #btn_wrapper .btn-item,
.cta__content-3 .btn_wrapper .btn-item {
    top: 25px
}



@media only screen and (min-width:1200px) and (max-width:1399px) {
    .portfolio__slider-2-pagination .swiper-pagination-bullet {
        margin: 10px !important
    }
    
    
    .portfolio__pagination-6 {
        padding-top: 130px
    }
    .portfolio-v5 .pb-100 {
        padding-bottom: 0
    }
    .portfolio__hero .title {
        font-size: 160px
    }
    .portfolio__hero .title.shape-circle::after {
        top: 60px
    }
    .portfolio__hero .pp-thumb {
        max-width: 780px;
        left: 17%
    }
    
    
    .portfolio__about .sec-text p {
        padding-bottom: 50px
    }
    
    
    
    
    
    
    
    .portfolio__service .sec-text {
        background-position: 0 20px
    }
    .portfolio__service .sec-text p {
        padding-top: 60px
    }
    
    
    
    .circle-pagination-2 {
        left: 0 !important
    }
    .blog__area .row,
    .blog__area-2 .row,
    .row.reset-grid {
        --bs-gutter-x: 40px
    }
    
    
    .img-box {
        height: 425px
    }
    .cta__area-3 .pt-150 {
        padding-top: 125px
    }
    .cta__content-2 #btn_wrapper,
    .cta__content-2 .btn_wrapper,
    .cta__content-3 #btn_wrapper,
    .cta__content-3 .btn_wrapper {
        width: 260px;
        height: 260px
    }
    
    .cta__title {
        padding-bottom: 40px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .portfolio__slider-2-pagination .swiper-pagination-bullets {
        left: calc(100% - 60px)
    }
    .portfolio__slider-2-pagination .swiper-pagination-bullet {
        width: 30px;
        height: 30px;
        margin: 10px !important
    }
    
    
    
    .portfolio__info {
        opacity: 1;
        visibility: visible;
        right: 45px
    }
    
    .portfolio__about .sec-title span,
    .portfolio__title-3 span {
        padding-left: 100px
    }
    .portfolio__pagination-6 {
        padding-top: 180px
    }
    .portfolio__detail-top .pt-110 {
        padding-top: 140px
    }
    .portfolio__detail-top .sec-title {
        font-size: 90px
    }
    
    
    
    
    
    .blog__area-2 .pt-150,
    .portfolio-v2.pt-150,
    .portfolio-v3 .pt-100,
    .portfolio-v4 .pt-100,
    .portfolio-v5 .pt-100 {
        padding-top: 150px
    }
    .portfolio-v5 .pb-100 {
        padding-bottom: 0
    }
    .portfolio-v5.portfolio__project .line {
        padding-top: 70px
    }
    .portfolio__hero .title {
        font-size: 140px
    }
    .portfolio__hero .title.shape-circle::after {
        right: -10px;
        top: 35px
    }
    .portfolio__hero .pp-thumb {
        max-width: 600px
    }
    
    
    
    
    
    
    .portfolio__service .sec-title {
        text-indent: 40px;
        max-width: 400px
    }
    .portfolio__service .sec-text {
        background-size: 100%;
        background-position: 0 40px
    }
    .portfolio__service .sec-text p {
        padding-top: 100px
    }
    
    
    
    .circle-pagination.right {
        left: calc(100% - 90px) !important
    }
    .circle-pagination-2 {
        left: 0 !important
    }
    .blog__area .row,
    .blog__area-2 .row,
    .row.reset-grid {
        --bs-gutter-x: 30px
    }
    .blog__area-2 .pb-110 {
        padding-bottom: 65px
    }
    .blog__area-2 #btn_wrapper,
    .blog__area-2 .btn_wrapper {
        margin-right: -10px
    }
    .blog__area-3 .sec-title-wrapper p {
        margin-left: 100px;
        padding-top: 0
    }
    
    .blog__info-3,
    .cta__content {
        width: 80%
    }
    .blog__title,
    .blog__title-2,
    .blog__title-3 {
        font-size: 22px
    }
    
    .blog__related .pb-130 {
        padding-bottom: 40px
    }
    .blog-v3 .line {
        padding-top: 50px;
        padding-bottom: 50px
    }
    .img-box {
        height: 340px
    }
    .cta__area-2 .pb-120 {
        padding-bottom: 126px
    }
    
    
    .cta__content-3 #btn_wrapper .btn-item,
    .cta__content-3 .btn_wrapper .btn-item {
        top: 0
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .portfolio__area-3 .swiper-pagination,
    .portfolio__project .pp-next {
        left: 0
    }
    .portfolio__area-6 .line,
    .portfolio__hero-area {
        padding-top: 160px
    }
    .portfolio__area-6 .sec-title-wrapper p {
        padding-left: 60px;
        padding-right: 30px
    }
    .portfolio__area-6 .sec-title-wrapper p::before {
        width: 50px
    }
    .portfolio__slider-2-pagination .swiper-pagination-bullets {
        left: calc(100% - 45px)
    }
    .portfolio__slider-2-pagination .swiper-pagination-bullet {
        width: 25px;
        height: 25px;
        margin: 5px !important
    }
    
    
    
    
    .blog-v2 .sec-text p,
    .portfolio__item-6 {
        padding-bottom: 50px
    }
    .portfolio__info {
        opacity: 1;
        visibility: visible;
        right: 45px
    }
    .portfolio__hero .title,
    .portfolio__title-3 {
        font-size: 100px
    }
    
    .portfolio__pagination-6 {
        padding-top: 180px;
        padding-left: 60px
    }
    .portfolio__detail-top .sec-title {
        font-size: 72px;
        padding-top: 90px
    }
    
    
    
    
    
    
    
    .blog-v2 .pt-150,
    .portfolio-v2.pt-150,
    .portfolio-v3 .pt-100,
    .portfolio-v4 .pt-100,
    .portfolio-v5 .pt-100 {
        padding-top: 130px
    }
    .portfolio-v5 .pb-100 {
        padding-bottom: 0
    }
    .portfolio-v5.portfolio__project .line {
        padding-top: 60px
    }
    .portfolio__hero .title.shape-circle::after {
        top: 12px;
        right: 0
    }
    .portfolio__hero .pp-thumb {
        max-width: 500px;
        left: 10%
    }
    .portfolio__hero .btn-wrapper {
        margin-top: 200px
    }
    
    
    
    .blog__area-3.pb-140,
    .blog__related .pb-130,
    .portfolio__about .sec-title {
        padding-bottom: 40px
    }
    .portfolio__about .sec-title span::before {
        top: 20px
    }
    
    
    
    
    
    
    
    .portfolio__service .sec-title {
        text-indent: 40px
    }
    .portfolio__service .sec-text {
        background-position: 0 30px;
        background-size: 100%
    }
    .portfolio__service .sec-text p {
        padding-top: 70px
    }
    
    
    
    
    
    
    
    .circle-pagination.right {
        left: calc(100% - 80px) !important
    }
    .circle-pagination button.swiper-pagination-bullet {
        margin: 5px 0 !important
    }
    .blog__area .row,
    .blog__area-2 .row,
    .row.reset-grid {
        --bs-gutter-x: 20px
    }
    .blog__area-2 .pb-110 {
        padding-bottom: 55px
    }
    .blog__area-2 #btn_wrapper,
    .blog__area-2 .btn_wrapper {
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 60px
    }
    .blog__area-2 .sec-title {
        padding-top: 45px
    }
    .blog__area-3 .sec-title-wrapper {
        padding-left: 200px
    }
    .blog__area-3 .sec-title-wrapper p {
        margin-left: 100px;
        padding-top: 0
    }
    
    .blog__area-6 .pb-110 {
        padding-bottom: 25px
    }
    .blog__area-6 .sec-title-wrapper,
    .blog__detail-top {
        padding-top: 90px
    }
    
    .blog__title,
    .blog__title-2,
    .blog__title-3 {
        font-size: 20px
    }
    
    
    .blog-v2 .blog__item-2 {
        margin-bottom: 20px
    }
    .blog-v3 .line {
        padding-top: 50px;
        padding-bottom: 50px
    }
    
    .img-box {
        height: auto
    }
    .cta__area-2 .pb-120 {
        padding-bottom: 115px
    }
    
    .cta__content,
    .cta__content-2,
    .cta__content-3 {
        width: 100%
    }
    
    .cta__content-3 #btn_wrapper .btn-item,
    .cta__content-3 .btn_wrapper .btn-item {
        top: 0
    }
}

@media only screen and (max-width:767px) {
    .portfolio__area-6 .sec-title-wrapper p,
    .portfolio__title-3 span {
        padding-left: 60px
    }
    
    .blog__item-3,
    .portfolio__detail-text .fonts,
    .portfolio__list-1,
    .portfolio__slide-2 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .blog__area-3 .sec-sub-title,
    .portfolio__area-6 .line {
        padding-top: 0
    }
    .portfolio__area-6 .sec-title-wrapper p::before {
        width: 50px
    }
    
    .circle-pagination,
    .portfolio__about-left img,
    .portfolio__slider-2-pagination {
        display: none
    }
    
    
    .blog-v3 .line,
    .blog__item-2,
    .portfolio__about-left,
    .portfolio__slide-2 p {
        padding-bottom: 30px
    }
    .cta__content,
    .cta__content-2,
    .cta__content-3,
    .portfolio__slide-3 img {
        width: 100%
    }
    
    .cta__content-2 #btn_wrapper .btn-item,
    .cta__content-2 .btn_wrapper .btn-item,
    .cta__content-3 #btn_wrapper .btn-item,
    .cta__content-3 .btn_wrapper .btn-item,
    .portfolio__item:nth-child(2n) {
        top: 0
    }
    .blog__item,
    .blog__item-2,
    .portfolio__about .sec-text p,
    .portfolio__item-6 {
        padding-bottom: 50px
    }
    .portfolio__info {
        opacity: 1;
        visibility: visible;
        right: 60px
    }
    
    .portfolio__list-1 {
        gap: 0
    }
    .portfolio__pagination-6 {
        padding-top: 80px;
        padding-left: 0
    }
    .portfolio__detail-top .sec-title {
        font-size: 60px;
        padding-bottom: 50px;
        padding-top: 90px
    }
    
    
    
    
    
    
    
    .blog__area-2 .sec-btn a,
    .blog__info-3 {
        margin-left: 0
    }
    
    
    .blog-v2 .pt-150,
    .portfolio-v2.pt-150,
    .portfolio-v4 .pt-100,
    .portfolio-v5 .pt-100 {
        padding-top: 130px
    }
    .portfolio-v3 .pt-100 {
        padding-top: 120px
    }
    .blog-v2,
    .blog__area-2 .pb-110,
    .blog__related .pb-130,
    .blog__related .pb-140,
    .portfolio-v5 .pb-100 {
        padding-bottom: 0
    }
    .blog__area-6 .sec-title-wrapper,
    .blog__detail-top,
    .portfolio-v5.portfolio__project .line {
        padding-top: 60px
    }
    .portfolio__service .ps-btn a,
    .row_bottom {
        margin-top: 30px
    }
    .blog-v2 .sec-text p,
    .blog__detail-thumb,
    .portfolio__hero {
        padding-bottom: 40px
    }
    .portfolio__hero .title {
        font-size: 52px
    }
    .portfolio__hero .title.shape-circle::after {
        top: -60px;
        right: 0
    }
    .portfolio__hero .pp-thumb {
        left: 0
    }
    .portfolio__hero .btn-wrapper {
        margin-top: 120px
    }
    
    
    
    .blog__area-3 .sec-title-wrapper,
    .portfolio__about .sec-title span {
        padding-left: 0
    }
    .portfolio__about .sec-title span::before {
        width: 0
    }
    
    
    
    
    
    
    
    
    
    
    .portfolio__service .sec-title {
        text-indent: 20px
    }
    .portfolio__service .sec-text {
        background-position: 0 30px;
        background-size: 100%
    }
    .portfolio__service .sec-text p {
        padding-top: 70px
    }
    
    
    
    
    
    
    
    
    .portfolio__footer .pf-btm .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .blog__area-2 #btn_wrapper,
    .blog__area-2 .btn_wrapper {
        margin: 30px 0 50px
    }
    .blog__area-3.pb-140 {
        padding-bottom: 20px
    }
    .blog__area-3 .sec-title-wrapper p {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0
    }
    .blog__area-6 .pb-110 {
        padding-bottom: 15px
    }
    
    
    
    .blog-v2 .blog__item-2 {
        margin-bottom: 0
    }
    .blog-v3 .line {
        padding-top: 50px
    }
    
    .img-box {
        height: auto
    }
    .cta__area-2 .pb-120 {
        padding-bottom: 70px
    }
    
    
}









.cta__title,
.cta__title-2 {
    line-height: 1;
    color: var(--black-2)
}

.cta__title {
    font-weight: 400;
    font-size: 50px
}

















.team__area-6 .sec-title {
    line-height: .9;
    font-size: 120px;
    padding-bottom: 30px
}

.team__area-6 .sec-title-wrapper {
    max-width: 520px;
    padding-bottom: 60px
}

.team__area-6 .sec-title-wrapper p {
    font-size: 18px;
    line-height: 1.4
}











.faq__list-3 .accordion-item,
.footer__social-3 li a,
.hero__area-15 .swiper-slide.swiper-slide-active .gallary__thumb {
    background-color: transparent
}





.team__join-btn #btn_wrapper,
.team__join-btn .btn_wrapper {
    width: 360px;
    height: 360px;
    margin: 0 auto
}





.team__btm .sec-title-wrapper {
    padding-left: 48%;
    background-repeat: no-repeat;
    background-position: 1px -150px
}



















.footer__social li,
.team__member-social li {
    display: inline-block;
    padding-right: 15px
}



.faq__title,
.hero__area-10 .swiper-button-next.hero_next:hover,
.hero__area-10 .swiper-button-prev.hero_prev:hover,
.team__member-social li a:hover {
    color: var(--black-2)
}























@media only screen and (min-width:1400px) and (max-width:1919px) {
    .team__area,
    .team__area-6 {
        padding-left: 62px
    }
    
    
    
    .team__detail .pb-140 {
        padding-bottom: 40px
    }
    
    
    
    
    
    
    
    
}









.solution__shape .shape-1 {
    left: 80%;
    top: 25%
}

.solution__shape .shape-2 {
    left: 10%;
    top: 75%
}

.solution__shape .shape-3 {
    left: 33%;
    top: 45%
}

.solution__shape .shape-4 {
    left: 72%;
    top: 70%
}

.solution__shape .shape-5 {
    top: 42%;
    left: 68%;
    z-index: -1
}





.award__text-8 .title,
.award__text-8 a {
    font-size: 20px;
    color: var(--white);
    font-weight: 400
}











.award__area .sec-title {
    max-width: 850px;
    color: var(--white)
}







@media only screen and (min-width:1200px) and (max-width:1399px) {
    .team__area,
    .team__area-6 {
        padding-left: 62px
    }
    
    
    
    
    .team__area-6 .sec-title {
        font-size: 90px
    }
    
    
    
    .team__btm .sec-title-wrapper {
        background-size: 42%
    }
    .team__detail .pb-140 {
        padding-bottom: 40px
    }
    .team__detail .pt-120 {
        padding-top: 60px
    }
    
    
    
    
    
    
    
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .cta__title,
    .cta__title-2 {
        padding-bottom: 40px
    }
    
    
    
    .team__area-6 .sec-title {
        font-size: 72px
    }
    
    
    
    
    
    .team__btm .sec-title-wrapper {
        background-size: 400px
    }
    
    .team__detail .pb-140 {
        padding-bottom: 10px
    }
    .team__detail .pt-120 {
        padding-top: 10px
    }
    
    
    
    
    
    
    
    
    
    
    .award__area.pb-140 {
        padding-bottom: 100px
    }
    .award__area .sec-title {
        max-width: 700px
    }
    
}

















.award__text-8 .title {
    line-height: 1.4
}









.award__item p:last-child,
.footer__top {
    text-align: right
}



.award__video-8 video,
.single__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

















.awards__items .title {
    color: var(--black-2);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5
}



.awards__items .date {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    text-align: right;
    color: var(--black-7)
}

.faq__area-6 .sec-title-wrapper p {
    padding-left: 60px;
    font-size: 18px;
    padding-top: 20px;
    line-height: 1.4
}







.faq__title {
    font-weight: 500;
    font-size: 36px;
    line-height: 1.1;
    max-width: 315px;
    margin-bottom: 25px
}



.faq__list .accordion-body,
.faq__list-3 .accordion-body,
.faq__list-6 .accordion-body {
    padding-left: 0;
    min-height: 160px
}

.faq__list .accordion-item,
.faq__list-3 .accordion-item,
.faq__list-6 .accordion-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0
}

.faq__list .accordion-button,
.faq__list-3 .accordion-button,
.faq__list-6 .accordion-button {
    background-color: transparent;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-2);
    padding-left: 0;
    padding-right: 10px;
    border-radius: 0
}

.faq__list .accordion-button.collapsed::after,
.faq__list-3 .accordion-button.collapsed::after,
.faq__list-6 .accordion-button.collapsed::after {
    background-image: none;
    content: "+";
    font-weight: 300;
    font-size: 30px;
    top: 6px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.faq__list .accordion-button:not(.collapsed),
.faq__list-3 .accordion-button:not(.collapsed),
.faq__list-6 .accordion-button:not(.collapsed) {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: 0 0
}

.faq__list .accordion-button:not(.collapsed)::after,
.faq__list-3 .accordion-button:not(.collapsed)::after,
.faq__list-6 .accordion-button:not(.collapsed)::after {
    background-image: none;
    content: "-";
    font-weight: 300;
    font-size: 30px;
    top: 6px;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.faq__list .accordion-button:focus,
.faq__list-3 .accordion-button:focus,
.faq__list-6 .accordion-button:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}



.faq__list-3 .accordion-item {
    border-bottom: 1px solid var(--white-4)
}

.faq__list-3 .accordion-item:first-child {
    border-top: 1px solid var(--white-4)
}



.faq__list-6 .accordion-button {
    font-size: 20px
}

.faq__list-6 .accordion-button.collapsed::after,
.faq__list-6 .accordion-button:not(.collapsed)::after {
    font-size: 50px;
    top: -10px
}

.faq__list-6 .accordion-body p {
    font-size: 18px;
    line-height: 1.4
}







.buttons,
.content {
    position: absolute;
    z-index: 99
}

.content {
    color: #fff;
    bottom: 120px;
    text-align: center;
    left: 50px;
    font-size: .8em
}







.content a {
    color: rgba(227, 227, 227, .78);
    border-bottom: 1px solid currentColor
}

.content a:hover {
    padding-bottom: 1px
}

.buttons {
    right: 25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.buttons button {
    border: none;
    background: url(../images/elements/down-arrow.png) center no-repeat;
    width: 10px;
    height: 30px;
    display: block;
    margin: 20px 0;
    padding: 0 15px;
    -webkit-transition-duration: .6s;
    transition-duration: .6s
}

.buttons button.next {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.buttons button.next:active {
    -webkit-transform: scaleY(-1) translateY(8px);
    transform: scaleY(-1) translateY(8px)
}

.buttons button.prev:active {
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

#main .part {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.hero__area-10 .swiper-button-next.hero_next,
.hero__area-10 .swiper-button-prev.hero_prev {
    top: unset;
    color: var(--black-3);
    -webkit-box-pack: justify;
    position: absolute;
    text-transform: uppercase
}

#main .part .section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden
}

#main .part .section img {
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: var(--x);
    pointer-events: none
}

.section {
    display: block;
    width: 100%;
    height: 100%
}

.part:first-child h2 {
    display: block;
    top: 45% !important;
    left: 49% !important;
    position: absolute;
    z-index: 9999999999999 !important;
    width: 500px;
    background: 0 0;
    height: 400px
}

#header_10 {
    background: 0 0
}

.hero__area-10 .swiper.hero10_activition {
    padding-bottom: 110px
}

.hero__area-10 .swiper-button-prev.hero_prev {
    bottom: 40px;
    width: 85px;
    left: 0;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: .3s;
    transition: .3s
}

.hero__area-10 .swiper-button-prev.hero_prev:hover img {
    margin-left: 10px
}

.hero__area-10 .swiper-button-prev.hero_prev img {
    -webkit-transition: .3s;
    transition: .3s;
    max-width: 100%
}

.hero__area-10 .swiper-button-next.hero_next {
    bottom: 40px;
    right: 0;
    width: 85px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: .3s;
    transition: .3s
}

.hero__area-10 .swiper-button-next.hero_next:hover img {
    margin-right: 10px
}

.hero__area-10 .swiper-button-next.hero_next img {
    -webkit-transition: .3s;
    transition: .3s;
    max-width: 100%
}

.hero__area-10 .increase-dash {
    font-size: 6px;
    width: 90px;
    background: var(--black);
    height: 1px;
    color: #131f33
}

.hero__area-10 .hero10_activition .swiper-pagination-current {
    position: relative;
    display: inline-block;
    width: 22px
}

.hero__area-10 .hero10_activition .swiper-pagination-current::before {
    content: "0";
    position: absolute;
    left: -5px
}

.hero__area-10 .hero10_activition .swiper-pagination-total {
    position: relative;
    display: inline-block;
    width: 48px
}

.hero__area-10 .hero10_activition .swiper-pagination-total::before {
    content: "0";
    position: absolute;
    left: 8px
}

.hero__area-10 .hero10_activition .swiper-pagination {
    color: var(--black);
    width: 190px;
    left: 50%;
    bottom: 50px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

























@media (max-width:1365px) {
    .portfolio__area-3 .swiper-btn div {
        opacity: 1;
        visibility: visible;
        top: calc(50% - 100px)
    }
    .portfolio__area-3 .swiper-btn div.pp-next {
        right: -24px
    }
    .hero__area-10 .swiper-button-prev.hero_prev img,
    .hero__area-10 .swiper-button-prev.hero_prev:hover img {
        margin-left: 0
    }
    .hero__area-10 .swiper-button-next.hero_next img,
    .hero__area-10 .swiper-button-next.hero_next:hover img {
        margin-right: 0
    }
    
    
    
}

























.feature__item p,
.feature__text p,
.feature__title,
.gallary12__content__name,
.logos_wrapper li a {
    color: var(--black-2)
}







.hero__area-12 .swiper-horizontal>.swiper-pagination-bullets,
.hero__area-12 .swiper-pagination-bullets.swiper-pagination-horizontal,
.hero__area-12 .swiper-pagination-custom,
.hero__area-12 .swiper-pagination-fraction {
    bottom: 81px;
    left: 0;
    width: 100%
}

.hero__area-12 .swiper-pagination-bullet-active {
    outline: #0b1626 solid 1px;
    outline-offset: 4px;
    background: #0b1626
}



.hero__area-12 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.hero__area-12 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 11px
}





.hero__area-12 .gallery-thumbs .swiper-slide-active {
    opacity: 1
}

.hero__area-12 .gallery-thumbs .swiper-slide img {
    width: 150px
}

.hero__area-12 .gallery-slider .swiper-slide {
    width: auto
}







@media only screen and (min-width:1400px) and (max-width:1919px) {
    .hero__area-10 .swiper-button-next.hero_next,
    .hero__area-10 .swiper-button-prev.hero_prev {
        bottom: 25px
    }
    .hero__area-10 .hero10_activition .swiper-pagination {
        bottom: 30px
    }
    
    
}









@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    
    
    .faq__area-6 .line {
        padding-top: 150px
    }
    
    
    
    .faq__title {
        font-size: 30px
    }
    
    .faq__list-6 .accordion-header {
        padding-right: 10px
    }
    .faq__btm .pb-130 {
        padding-bottom: 120px
    }
    
    
    
    
    
    
    
}

.title_right.w-300 {
    width: 300px
}



@media only screen and (min-width:768px) and (max-width:991px) {
    .cta__title,
    .cta__title-2 {
        padding-bottom: 40px
    }
    .cta__title-2,
    .team__area-6 .sec-title {
        font-size: 60px
    }
    
    
    
    
    .development__area .pt-130,
    .team__area-6 .line {
        padding-top: 150px
    }
    
    
    
    
    
    
    
    
    
    .team__btm .sec-title-wrapper {
        padding-left: 30%;
        background-size: 200px;
        background-position: 1px -50px
    }
    
    .team__detail .pb-140 {
        padding-bottom: 10px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .award__area.pb-140 {
        padding-bottom: 90px
    }
    .award__area .sec-title {
        max-width: 550px
    }
    
    
    
    
    
    
    
    .faq__area-6 .line {
        padding-top: 130px
    }
    
    
    
    .faq__btm .pb-130 {
        padding-bottom: 120px
    }
    
    
    
    
    
    
    
    
    
}



@media only screen and (max-width:767px) {
    
    
    
    .cta__title {
        font-size: 36px;
        padding-bottom: 40px
    }
    
    
    .faq__title,
    .hero10__content__title,
    .story__area .from-text span {
        font-size: 30px
    }
    
    .team__area-6 .sec-title {
        font-size: 48px;
        padding-top: 90px
    }
    .award__text-8 .title,
    .awards__items .date,
    .awards__items .title {
        font-size: 16px
    }
    
    
    
    
    
    
    
    
    
    .team__btm .sec-title-wrapper {
        background-size: 0;
        padding-left: 0;
        padding-bottom: 0
    }
    
    .team__detail .pb-140 {
        padding-bottom: 0
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .development__area .pt-130,
    .faq__area-6 .line {
        padding-top: 120px
    }
    .development__area .pb-150,
    .faq__area-6 .sec-title-wrapper {
        padding-bottom: 40px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .faq__area-6 .sec-title-wrapper p {
        padding-left: 30px
    }
    
    
    
    .faq__btm #btn_wrapper,
    .faq__btm .btn_wrapper {
        margin-top: 40px
    }
    .hero__area-10 .swiper-button-next.hero_next,
    .hero__area-10 .swiper-button-prev.hero_prev {
        width: 75px
    }
    .hero__area-10 .increase-dash {
        width: 50px
    }
    .hero__area-10 .hero10_activition .swiper-pagination-current {
        margin-left: 22px
    }
    .hero__area-10 .hero10_activition .swiper-pagination {
        width: 160px
    }
    
    
    
    
    
    
    
    
    
}

















.hero__area-15 .swiper-container {
    width: calc(100% - 160px);
    height: calc(100vh - 120px);
    float: left;
    -webkit-transition: opacity .6s, -webkit-transform .3s;
    transition: opacity .6s, transform .3s, -webkit-transform .3s
}



.hero__area-15 .main-slider .swiper-image {
    width: 100%;
    height: 100%
}

.hero__area-15 .main-slider .swiper-pagination {
    bottom: 60px
}

.hero__area-15 .main-slider .swiper-pagination-bullet {
    margin: 0 10px;
    width: 6px;
    height: 6px
}

.hero__area-15 .main-slider .swiper-pagination-bullet-active {
    outline: 1px solid var(--black-2);
    background: var(--black-2);
    outline-offset: 6px
}

.blog__area-4,
.career__benefits,
.career__gallery,
.contact__area-6,
.cta__area-4,
.hero__area-15 .swiper-slide,
.job__detail {
    overflow: hidden
}

.footer__area {
    overflow: visible;
    position: relative;
    z-index: 1;
    background-image: url("../images/backgrounds/footer-img.jpg");
    background-size: 120% auto;
    background-position: right top;
    background-repeat: no-repeat
}

main {
    overflow: visible;
    position: relative
}

.hero__area-15 .swiper-slide.swiper-slide-active .gallary12__content {
    opacity: 1
}



.hero__area-15 .swiper-container.thumb-slider {
    width: 160px;
    overflow: hidden;
    height: calc(100vh - 220px);
    margin-top: 120px
}

.hero__area-15 .swiper-container.thumb-slider .swiper-slide {
    cursor: pointer
}





.showcase__top-16 .title-right {
    max-width: 296px;
    margin-left: auto;
    padding-top: 50px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .hero__area-15 .main-slider .swiper-pagination {
        bottom: -40px
    }
    
    .showcase__top-16 .title-right {
        padding-top: 40px
    }
}

.showcase__top-16 .title-right p {
    font-size: 18px
}





@media only screen and (min-width:1200px) and (max-width:1399px) {
    .hero__area-15 .swiper-container {
        height: calc(100vh - 80px)
    }
    
    .hero__area-15 .main-slider .swiper-pagination {
        bottom: -40px
    }
    .hero__area-15 .swiper-container.thumb-slider {
        width: 130px;
        margin-top: 110px;
        height: calc(100vh - 180px)
    }
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    .hero__area-15 .swiper-container {
        width: calc(100% - 130px)
    }
    
    .hero__area-15 .main-slider .swiper-pagination {
        bottom: -40px
    }
    .hero__area-15 .swiper-container.thumb-slider {
        width: 130px;
        margin-top: 100px;
        height: calc(100vh - 180px)
    }
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    .hero__area-15 .swiper-container {
        height: calc(100vh - 60px);
        width: calc(100% - 90px)
    }
    
    .hero__area-15 .main-slider .swiper-pagination {
        bottom: -40px
    }
    .hero__area-15 .swiper-container.thumb-slider {
        width: 90px;
        margin-top: 110px;
        height: calc(100vh - 180px)
    }
    
    
    
    
}







@media only screen and (max-width:767px) {
    
    
    
    .hero__area-15 .swiper-container {
        width: 100%;
        height: calc(100vh - 60px)
    }
    
    .hero__area-15 .main-slider .swiper-pagination {
        bottom: -40px
    }
    .hero__area-15 .swiper-container.thumb-slider {
        width: 100%;
        margin-top: 30px;
        height: 200px;
        display: none
    }
    
    
    
    
    
    
    
    
    
}









































.single__thumb .video-frame {
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(25);
    filter: brightness(25)
}

.single__thumb .shape-2 {
    position: absolute;
    bottom: -30px;
    left: 60%
}

.single__thumb .svgstar {
    position: absolute;
    left: 25%;
    top: 18%
}



















.career__top .sec-title-wrapper {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}



.career__top-title .btn-item {
    width: 200px;
    height: 200px
}

















@media only screen and (min-width:1400px) and (max-width:1919px) {
    .single__thumb .svgstar {
        left: 24%;
        top: 15%
    }
    
    
    
    
}





.career__benefits .sec-title-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

.career__benefits .sec-title-wrapper p {
    font-size: 18px;
    line-height: 1.4;
    padding-right: 10px;
    padding-top: 40px
}

































@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    .single__thumb .svgstar {
        left: 23%;
        top: 15%
    }
    
    
    
    
    
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    
    .single__thumb .svgstar {
        max-width: 90px;
        left: 23%;
        top: 15%
    }
    
    
    
    
    
    
    
    
    
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    
    
    .single__thumb .svgstar {
        max-width: 70px;
        left: 24%;
        top: 16%
    }
    
    
    
    .career__top-title .btn-item {
        width: 170px;
        height: 170px
    }
    
    
    
    
    
    
    
    
    
    
}















































.feature__item {
    border-right: 1px solid var(--white-4);
    padding: 145px 30px
}

.feature__item:first-child {
    padding-left: 0
}

.feature__item:last-child {
    border-right: 0;
    padding-right: 0
}

.feature__item img {
    margin-bottom: 35px
}

.feature__title {
    font-weight: 500;
    font-size: 26px;
    line-height: 1.4;
    padding-bottom: 12px
}













.contact__info {
    padding-top: 15px
}

.contact__info-item {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    border: 2px solid transparent;
}

.contact__info-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #d6b9a8;
}

.contact__info-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d6b9a8, #e7d3c5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 32px;
    color: #ffffff;
}

.contact__info h3,
.contact__info-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--black-2);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.contact__info-text {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.contact__info-text a {
    color: #d6b9a8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact__info-text a:hover {
    color: #b08d6b;
}

.contact__info ul li a,
.contact__info ul li span {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-2);
    display: block;
    margin-bottom: 10px
}

.contact__form {
    position: relative;
    z-index: 9;
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 2px solid #f4f5f7;
}





.contact__form input,
.contact__form textarea {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black-2);
    border: 2px solid #e2e6ec;
    border-radius: 12px;
    padding: 18px 20px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    outline: 0;
    position: relative;
    z-index: 1;
    background: #f4f5f7;
    margin-bottom: 25px;
}

.contact__form input:hover,
.contact__form textarea:hover {
    border-color: #d6b9a8;
    background: #ffffff;
}

.contact__form input:focus,
.contact__form textarea:focus {
    border-color: #d6b9a8;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(214, 185, 168, 0.1);
    transform: translateY(-2px);
}

.contact__form input::-webkit-input-placeholder,
.contact__form textarea::-webkit-input-placeholder {
    color: var(--black-2);
    opacity: 1
}

.contact__form input::-moz-placeholder,
.contact__form textarea::-moz-placeholder {
    color: var(--black-2);
    opacity: 1
}

.contact__form input:-ms-input-placeholder,
.contact__form textarea:-ms-input-placeholder {
    color: var(--black-2);
    opacity: 1
}

.contact__form input::-ms-input-placeholder,
.contact__form textarea::-ms-input-placeholder {
    color: var(--black-2);
    opacity: 1
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: var(--black-2);
    opacity: 1
}

.contact__form textarea {
    height: 120px;
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
}

.contact__form #btn_wrapper,
.contact__form .btn_wrapper,
.service__inner-4 {
    margin-top: -20px
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    
    .feature__item {
        padding: 90px 20px
    }
    .contact__form #btn_wrapper,
    .contact__form .btn_wrapper {
        margin-top: -10px
    }
}











.contact_wrap .link {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 18px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    background: var(--black-2);
    border-radius: 100%;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--white);
    text-transform: capitalize;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

.btn-together,
.cat_links li a,
.feature__title-6,
.footer__contact-3 a,
.footer__menu-5 li a,
.footer__social-3 li a,
.hero__title-5,
.loading,
.menu-text-5,
.menu-text-pp,
.portfolio__title-wrap-6 h1,
.price__area .sec-sub-title,
.price__area .sec-title,
.price__item .best-value,
.price__title,
.price__type {
    text-transform: uppercase
}





@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    .feature__item {
        padding: 90px 10px
    }
    .contact__form input,
    .contact__form textarea {
        padding: 10px 0;
        margin-bottom: 25px
    }
    
}





















.btn-together,
.price__amount p {
    line-height: 1.3;
    color: var(--white)
}

















@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    
    
    
    
    
    
    .feature__item {
        padding: 50px 30px;
        border-right: none
    }
    .feature__item:nth-child(odd) {
        border-right: 1px solid var(--white-4)
    }
    .contact__area-6 .line {
        padding-top: 150px
    }
    .contact__form input,
    .contact__form textarea {
        padding: 10px 0;
        margin-bottom: 25px
    }
    
    .price__area.pb-140 {
        padding-bottom: 100px
    }
    
    
    
}



.error__content #btn_wrapper,
.error__content .btn_wrapper {
    margin-left: 0;
    margin-top: -40px
}

@media (max-width:1400px) {
    
    .error__content #btn_wrapper,
    .error__content .btn_wrapper,
    .job__apply {
        margin-top: 0
    }
}

.btn-together {
    font-weight: 400;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 18px
}

.btn-together::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white);
    content: "";
    -webkit-transition: .5s;
    transition: .5s
}

.blog__btn-4:hover::after,
.btn-together:hover::after,
.btn-view:hover::after {
    left: 0;
    width: 1%
}



.header__area-5 {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99
}

.footer__inner,
.portfolio__content-5 {
    background-color: var(--black-2);
    z-index: 9
}

.header__area-5.sticky-5 {
    background-color: var(--white);
    border-bottom: 1px solid var(--white-2)
}

.header__area-5.sticky-5 .header__inner-5 {
    padding: 20px 50px
}





@media only screen and (max-width:767px) {
    
    
    
    
    
    
    .single__thumb .shape-2 {
        bottom: -20px;
        max-width: 40px
    }
    .single__thumb .svgstar {
        max-width: 40px;
        left: 23%;
        top: 15%
    }
    
    
    
    
    
    
    
    .career__top-title .btn-item {
        width: 170px;
        height: 170px
    }
    
    
    
    
    
    
    
    .career__benefits .sec-title-wrapper p {
        padding-right: 0;
        padding-top: 30px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .feature__item {
        border-right: none;
        padding: 0 0 50px
    }
    .contact__area-6 .line {
        padding-top: 130px
    }
    
    
    .contact__info {
        padding-bottom: 50px
    }
    .contact__form input,
    .contact__form textarea {
        margin-bottom: 20px
    }
    .price__area .sec-title {
        padding-bottom: 40px
    }
    
    
    
    
    
    
    .btn-together {
        font-size: 14px
    }
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .btn-together {
        font-size: 15px
    }
    
    
}

















.portfolio__area-5 .sec-line,
.portfolio__area-5::after {
    position: absolute;
    -webkit-filter: invert(1);
    filter: invert(1);
    background-color: var(--secondary);
    content: ""
}



.portfolio__area-5 .sec-line {
    left: 0;
    opacity: 0;
    width: 100%;
    height: 1px;
    filter: invert(1)
}







.portfolio__item-5 {
    width: 29%;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

@media only screen and (max-width:767px) {
    .portfolio__item-5 {
        width: 100%
    }
}

.portfolio__item-5:hover .portfolio__content-5 {
    opacity: 1;
    right: -50px
}

.portfolio__item-5 img {
    width: 100%;
    max-width: 100%
}

.footer__logo-3 p,
.footer__widget p {
    max-width: 310px;
    color: var(--gray-2)
}







.cta__title-5,
.portfolio__title-5,
.privacy-policy b,
.privacy-policy table th {
    font-weight: 500
}













@media only screen and (min-width:768px) and (max-width:991px) {
    .portfolio__item-5 {
        width: 48.5%
    }
    
    
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    
    
    .portfolio__item-5 {
        width: 48%
    }
    
    
    
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    
    
    
    .portfolio__item-5 {
        width: 28%
    }
}













.footer__contact li,
.footer__link li {
    padding-bottom: 15px
}











.footer__menu-5 li a .menu-text {
    display: flex;
    overflow: hidden
}

.cat_links li a .menu-text span,
.footer__menu-5 li a .menu-text span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    -webkit-transform: translateY(var(--m)) translateZ(0);
    transform: translateY(var(--m)) translateZ(0)
}

.cat_links li a .menu-text span:first-child,
.footer__menu-5 li a .menu-text span:first-child {
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.cat_links li a .menu-text span:nth-child(2),
.footer__menu-5 li a .menu-text span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.cat_links li a .menu-text span:nth-child(3),
.footer__menu-5 li a .menu-text span:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.cat_links li a .menu-text span:nth-child(4),
.footer__menu-5 li a .menu-text span:nth-child(4) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.cat_links li a .menu-text span:nth-child(5),
.footer__menu-5 li a .menu-text span:nth-child(5) {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s
}

.cat_links li a .menu-text span:nth-child(6),
.footer__menu-5 li a .menu-text span:nth-child(6) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

.cat_links li a .menu-text span:nth-child(7),
.footer__menu-5 li a .menu-text span:nth-child(7) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s
}

.cat_links li a .menu-text span:nth-child(8),
.footer__menu-5 li a .menu-text span:nth-child(8) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.cat_links li a .menu-text span:nth-child(9),
.footer__menu-5 li a .menu-text span:nth-child(9) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s
}

.cat_links li a .menu-text span:nth-child(10),
.footer__menu-5 li a .menu-text span:nth-child(10) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

.cat_links li a .menu-text span:nth-child(11),
.footer__menu-5 li a .menu-text span:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s
}

.cat_links li a .menu-text span:nth-child(12),
.footer__menu-5 li a .menu-text span:nth-child(12) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.cat_links li a .menu-text span:nth-child(13),
.footer__menu-5 li a .menu-text span:nth-child(13) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s
}

.cat_links li a .menu-text span:nth-child(14),
.footer__menu-5 li a .menu-text span:nth-child(14) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}

.cat_links li a .menu-text span:nth-child(15),
.footer__menu-5 li a .menu-text span:nth-child(15) {
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s
}

.cat_links li a .menu-text span:nth-child(16),
.footer__menu-5 li a .menu-text span:nth-child(16) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s
}

.cat_links li a .menu-text span:nth-child(17),
.footer__menu-5 li a .menu-text span:nth-child(17) {
    -webkit-transition-delay: 0.85s;
    transition-delay: 0.85s
}

.cat_links li a .menu-text span:nth-child(18),
.footer__menu-5 li a .menu-text span:nth-child(18) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s
}

.cat_links li a .menu-text span:nth-child(19),
.footer__menu-5 li a .menu-text span:nth-child(19) {
    -webkit-transition-delay: 0.95s;
    transition-delay: 0.95s
}

.cat_links li a .menu-text span:nth-child(20),
.footer__menu-5 li a .menu-text span:nth-child(20) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.cat_links li a .menu-text span:nth-child(21),
.footer__menu-5 li a .menu-text span:nth-child(21) {
    -webkit-transition-delay: 1.05s;
    transition-delay: 1.05s
}

.cat_links li a .menu-text span:nth-child(22),
.footer__menu-5 li a .menu-text span:nth-child(22) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

.cat_links li a .menu-text span:nth-child(23),
.footer__menu-5 li a .menu-text span:nth-child(23) {
    -webkit-transition-delay: 1.15s;
    transition-delay: 1.15s
}

.cat_links li a .menu-text span:nth-child(24),
.footer__menu-5 li a .menu-text span:nth-child(24) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.cat_links li a .menu-text span:nth-child(25),
.footer__menu-5 li a .menu-text span:nth-child(25) {
    -webkit-transition-delay: 1.25s;
    transition-delay: 1.25s
}

.cat_links li a .menu-text span:nth-child(26),
.footer__menu-5 li a .menu-text span:nth-child(26) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s
}

.cat_links li a .menu-text span:nth-child(27),
.footer__menu-5 li a .menu-text span:nth-child(27) {
    -webkit-transition-delay: 1.35s;
    transition-delay: 1.35s
}

.cat_links li a .menu-text span:nth-child(28),
.footer__menu-5 li a .menu-text span:nth-child(28) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s
}

.cat_links li a .menu-text span:nth-child(29),
.footer__menu-5 li a .menu-text span:nth-child(29) {
    -webkit-transition-delay: 1.45s;
    transition-delay: 1.45s
}

.cat_links li a .menu-text span:nth-child(30),
.footer__menu-5 li a .menu-text span:nth-child(30) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s
}

.cat_links li a .menu-text span:nth-child(31),
.footer__menu-5 li a .menu-text span:nth-child(31) {
    -webkit-transition-delay: 1.55s;
    transition-delay: 1.55s
}

.cat_links li a .menu-text span:nth-child(32),
.footer__menu-5 li a .menu-text span:nth-child(32) {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s
}

.cat_links li a .menu-text span:nth-child(33),
.footer__menu-5 li a .menu-text span:nth-child(33) {
    -webkit-transition-delay: 1.65s;
    transition-delay: 1.65s
}

.cat_links li a .menu-text span:nth-child(34),
.footer__menu-5 li a .menu-text span:nth-child(34) {
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s
}

.cat_links li a .menu-text span:nth-child(35),
.footer__menu-5 li a .menu-text span:nth-child(35) {
    -webkit-transition-delay: 1.75s;
    transition-delay: 1.75s
}

.cat_links li a .menu-text span:nth-child(36),
.footer__menu-5 li a .menu-text span:nth-child(36) {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s
}

.cat_links li a .menu-text span:nth-child(37),
.footer__menu-5 li a .menu-text span:nth-child(37) {
    -webkit-transition-delay: 1.85s;
    transition-delay: 1.85s
}

.cat_links li a .menu-text span:nth-child(38),
.footer__menu-5 li a .menu-text span:nth-child(38) {
    -webkit-transition-delay: 1.9s;
    transition-delay: 1.9s
}

.cat_links li a .menu-text span:nth-child(39),
.footer__menu-5 li a .menu-text span:nth-child(39) {
    -webkit-transition-delay: 1.95s;
    transition-delay: 1.95s
}

.cat_links li a .menu-text span:nth-child(40),
.footer__menu-5 li a .menu-text span:nth-child(40) {
    -webkit-transition-delay: 2s;
    transition-delay: 2s
}

.cat_links li a .menu-text span:nth-child(41),
.footer__menu-5 li a .menu-text span:nth-child(41) {
    -webkit-transition-delay: 2.05s;
    transition-delay: 2.05s
}

.cat_links li a .menu-text span:nth-child(42),
.footer__menu-5 li a .menu-text span:nth-child(42) {
    -webkit-transition-delay: 2.1s;
    transition-delay: 2.1s
}

.cat_links li a .menu-text span:nth-child(43),
.footer__menu-5 li a .menu-text span:nth-child(43) {
    -webkit-transition-delay: 2.15s;
    transition-delay: 2.15s
}

.cat_links li a .menu-text span:nth-child(44),
.footer__menu-5 li a .menu-text span:nth-child(44) {
    -webkit-transition-delay: 2.2s;
    transition-delay: 2.2s
}

.cat_links li a .menu-text span:nth-child(45),
.footer__menu-5 li a .menu-text span:nth-child(45) {
    -webkit-transition-delay: 2.25s;
    transition-delay: 2.25s
}

.cat_links li a .menu-text span:nth-child(46),
.footer__menu-5 li a .menu-text span:nth-child(46) {
    -webkit-transition-delay: 2.3s;
    transition-delay: 2.3s
}

.cat_links li a .menu-text span:nth-child(47),
.footer__menu-5 li a .menu-text span:nth-child(47) {
    -webkit-transition-delay: 2.35s;
    transition-delay: 2.35s
}

.cat_links li a .menu-text span:nth-child(48),
.footer__menu-5 li a .menu-text span:nth-child(48) {
    -webkit-transition-delay: 2.4s;
    transition-delay: 2.4s
}

.cat_links li a .menu-text span:nth-child(49),
.footer__menu-5 li a .menu-text span:nth-child(49) {
    -webkit-transition-delay: 2.45s;
    transition-delay: 2.45s
}









.footer__row {
    margin-left: -500px
}

.footer__top img {
    display: none
}















.footer__inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(12, 1fr);
    padding-left: 350px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    
    
    
    
    .portfolio__item-5 {
        width: 28%
    }
    .footer__inner {
        padding-left: 512px
    }
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    .footer__btm {
        padding-left: 55px
    }
    .footer__inner {
        padding-left: 450px
    }
}



.footer__widget {
    -ms-grid-column-span: 4;
    grid-column: span 4;
    padding: 140px 0 130px
}

.footer__widget p {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px
}

.footer__widget-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--white);
    padding-bottom: 20px
}

.footer__widget-2 {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    padding: 140px 0 130px
}







@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    .footer__top img {
        margin-bottom: -300px;
        width: 90%
    }
    
    
    .footer__btm {
        padding-left: 100px
    }
    
    .footer__inner {
        padding-top: 100px;
        padding-left: 410px
    }
    .footer__widget {
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
        grid-column: 1/5;
        padding: 0 0 50px
    }
    .footer__widget-2 {
        -ms-grid-column: 6;
        -ms-grid-column-span: 3;
        grid-column: 6/9;
        padding: 0 0 50px
    }
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    
    
    
    
    .footer__top img {
        margin-bottom: -250px;
        width: 100%
    }
    
    
    
    
    .footer__btm-3 .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .footer__inner {
        padding-left: 470px;
        padding-top: 80px
    }
    
    .footer__widget {
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
        grid-column: 1/6;
        padding: 0 0 50px
    }
    .footer__widget-2 {
        grid-column: 7/-1;
        padding: 0 0 50px
    }
    
    
}





.footer__widget-3 {
    -ms-grid-column-span: 2;
    grid-column: span 2;
    padding: 140px 0 130px;
    margin-right: -30px
}

.footer__widget-4 {
    -ms-grid-column-span: 4;
    grid-column: span 4;
    -ms-grid-row-span: 2;
    grid-row: span 2;
    background-color: var(--black-4);
    padding: 135px 70px 30px;
    text-align: center;
    margin-left: 60px
}

.footer__widget-4 .project-title {
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    color: var(--white);
    padding-bottom: 25px
}

.footer__widget-4 a {
    color: var(--gray-2);
    border-color: var(--secondary);
    margin: 0 auto 20px
}

.footer__copyright,
.footer__subscribe,
.privacy {
    -ms-grid-column-span: 4;
    grid-column: span 4;
    border-top: 1px solid var(--gray-6)
}

.footer__widget-4 .contact-time {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--white);
    padding-bottom: 3px
}

.footer__widget-4 .contact-day {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--gray-2)
}

.footer__social li a {
    display: inline-block;
    color: var(--gray-2);
    font-size: 20px
}

.footer__social li a:hover {
    color: var(--white)
}











.footer__link li {
    display: block
}

.footer__link li a {
    font-weight: 400;
    font-size: 16px;
    color: var(--gray-2);
    line-height: 18px;
    text-transform: capitalize
}

.footer__contact,
.footer__contact li a {
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-2);
    font-weight: 400
}

.footer__contact li a:hover,
.footer__contact-3 a,
.footer__copyright p,
.footer__copyright p a,
.footer__link li a:hover {
    color: var(--white)
}

.footer__contact {
    display: block;
    padding-bottom: 10px
}

.footer__contact li a.phone {
    color: var(--white);
    position: relative
}

.footer__contact li a.phone::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: var(--white);
    -webkit-transition: .3s;
    transition: .3s
}





.footer__copyright {
    margin-left: -66px;
    padding: 35px 0 35px 66px
}

.footer__copyright p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    max-width: 233px
}



.footer__copyright p a:hover {
    color: var(--gray)
}



.btn-started,
.btn-started:hover,
.faq__area-4 .sec-subtile-6,
.faq__area-4 .sec-title-6,
.faq__list-4 .accordion-body p span,
.faq__sec-title .btn-view,
.feature__content-right p span,
.feature__title-6,
.footer__copyright-3 p,
.footer__copyright-3 p a,
.solution__content .sec-subtile-6,
.solution__content .sec-title-6 {
    color: var(--white)
}











.footer__subscribe,
.privacy {
    padding: 35px 0;
    margin-right: -60px
}

.footer__subscribe form {
    max-width: 450px;
    width: 100%;
    margin-left: auto
}

.footer__subscribe input {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: var(--gray-2);
    background-color: var(--black-4);
    width: 100%;
    border: none;
    border-radius: 0;
    outline: 0;
    padding: 21px 50px 21px 15px
}

.footer__subscribe input::-webkit-input-placeholder {
    opacity: 1;
    color: var(--gray-2)
}

.footer__subscribe input::-moz-placeholder {
    opacity: 1;
    color: var(--gray-2)
}

.footer__subscribe input:-ms-input-placeholder {
    opacity: 1;
    color: var(--gray-2)
}

.footer__subscribe input::-ms-input-placeholder {
    opacity: 1;
    color: var(--gray-2)
}

.footer__subscribe input::placeholder {
    opacity: 1;
    color: var(--gray-2)
}

.footer__subscribe .subs-btn {
    position: absolute;
    right: 20px;
    top: 16px;
    background-color: transparent;
    border: none;
    color: var(--white)
}

















.footer__subscribe-2 .submit {
    position: absolute;
    right: 0;
    top: 10px;
    background: 0 0;
    border: none
}





#preloader,
.loading,
.pace {
    position: fixed
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .footer__widget-4 {
        padding: 130px 30px 30px
    }
    
    .footer__copyright {
        margin-left: -35px;
        padding: 35px 0 35px 35px
    }
    
    
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .footer__widget-4 {
        padding: 130px 40px
    }
    .footer__widget-4 .project-title {
        font-size: 30px
    }
    
    
    .footer__copyright {
        margin-left: -54px;
        padding: 35px 0 35px 54px
    }
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .footer__widget-3 {
        grid-column: 9/-1;
        padding: 0 50px 50px 0
    }
    .footer__widget-4 {
        grid-column: 7/-1;
        padding: 50px;
        margin-left: 0
    }
    
    
    
    .footer__copyright {
        border-top: 0;
        margin-left: 0;
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
        grid-column: 1/5;
        padding: 0
    }
    
    .footer__subscribe,
    .privacy {
        -ms-grid-column: 1;
        -ms-grid-column-span: 6;
        grid-column: 1/7;
        -ms-grid-row: 2;
        grid-row: 2;
        padding: 0 40px 0 0;
        border-top: 0;
        margin-right: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
    
}

















.cat_links li a .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-shadow: 0 16px 0 var(--black-3)
}



.pace {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99999999999999;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    border: 0;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}

.btn-extra,
.btn-started {
    border-radius: 5px;
    font-weight: 500
}

.pace .pace-progress {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 300px;
    z-index: 99999999999999;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: #d6b9a8;
    background: -webkit-gradient(linear, left top, right top, from(#d6b9a8), color-stop(#e7d3c5), to(#d6b9a8));
    background: -webkit-linear-gradient(left, #d6b9a8, #e7d3c5, #d6b9a8);
    background: -o-linear-gradient(left, #d6b9a8, #e7d3c5, #d6b9a8);
    background: linear-gradient(to right, #d6b9a8, #e7d3c5, #d6b9a8)
}

.pace.pace-inactive {
    width: 100%;
    opacity: 0
}

.pace.pace-inactive .pace-progress {
    max-width: 100%
}

#preloader {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 9999999
}

#preloader:after,
#preloader:before {
    content: "";
    position: fixed;
    left: 0;
    height: 50%;
    width: 100%;
    background: #000;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

#preloader:before {
    top: 0
}

#preloader:after {
    bottom: 0
}

#preloader.isdone {
    visibility: hidden;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s
}

#preloader.isdone:after,
#preloader.isdone:before {
    height: 0;
    -webkit-transition: 50ms cubic-bezier(1, 0, .55, 1);
    -o-transition: 50ms cubic-bezier(1, 0, .55, 1);
    transition: 50ms cubic-bezier(1, 0, .55, 1);
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.loading {
    left: 50%;
    top: calc(50% - 40px);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 10px;
    z-index: 9999999999
}

.btn-extra,
.btn-started,
.sec-subtile-6 {
    font-size: 16px;
    line-height: 1.3
}

.loading.isdone {
    top: 50%;
    opacity: 0;
    -webkit-transition: .2s .2s;
    -o-transition: .2s .2s;
    transition: .2s .2s
}

.loading span {
    -webkit-animation: .2s infinite alternate loading;
    animation: .2s infinite alternate loading;
    color: #fff
}

@-webkit-keyframes loading {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes loading {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}











.btn-started {
    padding: 17px 36px 16px;
    background: var(--lime);
    display: inline-block
}



.btn-started:hover {
    background-color: #b8946f
}

.blog__btn-4,
.btn-view {
    font-weight: 500;
    line-height: 1.3;
    color: var(--black-2);
    position: relative;
    -webkit-transition: .5s;
    transition: .5s
}

.btn-view::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    -webkit-transition: .5s;
    transition: .5s
}

.blog__btn-4:hover,
.blog__title-4:hover,
.btn-view:hover {
    color: var(--lime-2)
}

.btn-extra {
    color: var(--white);
    padding: 9px 14px 11px;
    border: 1px solid var(--black-2)
}

.btn-extra:hover {
    color: var(--black);
    background-color: transparent
}







@media only screen and (min-width:768px) and (max-width:991px) {
    .footer__widget-3,
    .footer__widget-4 {
        grid-column: span 6;
        -ms-grid-column-span: 6
    }
    .footer__widget-3 {
        padding: 50px 60px 0 0
    }
    .footer__widget-4 {
        padding: 50px 30px;
        margin-left: 0
    }
    
    
    
    .footer__copyright {
        grid-column: 1/-1;
        text-align: center;
        border-top: 0
    }
    .footer__copyright p,
    .footer__subscribe form,
    .privacy {
        max-width: 100%
    }
    
    
    
    .footer__subscribe,
    .privacy {
        -ms-grid-column-span: 6;
        grid-column: span 6;
        -ms-grid-row: 3;
        grid-row: 3;
        border-top: 0;
        padding: 0 20px 0 0;
        margin-right: 0
    }
    
    
    
    
    
    
    
    
    
    
}

.hero__area-6 .shape-4 {
    position: absolute;
    bottom: -60px;
    left: 180px;
    z-index: 0
}

.hero__title-6 {
    font-size: 100px;
    line-height: 1;
    font-weight: 600;
    color: var(--black-2);
    padding-bottom: 24px
}

@media only screen and (max-width:767px) {
    .footer__btm-2 .row,
    .footer__btm-3 .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse
    }
    .footer__inner,
    .footer__top-wrapper-3 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    
    
    
    
    
    .footer__row {
        margin-left: 0;
        margin-right: 0
    }
    .footer__top img {
        margin-bottom: 0;
        width: 100%
    }
    
    
    
    
    .footer__btm,
    .footer__btm .container {
        background-color: var(--black-2)
    }
    .footer__btm .container {
        padding: 0
    }
    .footer__btm-2 .row {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    
    .footer__btm-3 .row {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .footer__inner {
        background-color: transparent;
        padding-left: 0;
        padding-top: 60px
    }
    
    .footer__widget,
    .footer__widget-2 {
        padding: 0 0 50px;
        -ms-grid-column-span: 4;
        grid-column: span 4
    }
    .footer__widget-3 {
        padding: 0 0 50px
    }
    .footer__widget-4 {
        padding: 30px;
        margin-left: 0
    }
    
    
    
    .footer__copyright {
        grid-column: 1/-1;
        -ms-grid-row: 7;
        grid-row: 7;
        text-align: center;
        border-top: 0;
        padding-top: 0
    }
    .footer__copyright p,
    .footer__subscribe form,
    .privacy {
        max-width: 100%
    }
    
    
    
    .footer__subscribe,
    .privacy {
        margin: 0 auto;
        border-top: 0
    }
    
    
    .footer__subscribe-2 .submit {
        top: 18px
    }
    .footer__subscribe-2 .submit img {
        width: 45px
    }
    
    
    
    
    
    
    
    
    
    .hero__area-6 .shape-4 {
        max-width: 260px;
        left: 0
    }
    .hero__title-6 {
        font-size: 40px;
        padding-bottom: 15px
    }
}









.hero__right-6 img {
    margin-left: 3px;
    max-width: inherit
}





@media only screen and (min-width:768px) and (max-width:991px) {
    .hero__title-6 {
        font-size: 45px;
        padding-bottom: 15px
    }
    
    
    
    
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    .hero__title-6 {
        font-size: 60px
    }
    
    
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    .hero__title-6 {
        font-size: 80px
    }
    
    
}





















@media only screen and (max-width:767px) {
    
    
    .hero__right-6 {
        padding-top: 40px
    }
    
    .workflow__area-4 .pb-1230 {
        padding-bottom: 60px
    }
    
    
    
    
    
    
}



























.cta__area-7 .wc-btn-black:hover,
.cta__area-7 .wc-btn-light:hover,
.cta__area-7 .wc-btn-pink:hover,
.cta__area-7 .wc-btn-primary:hover,
.cta__area-7 .wc-btn-secondary:hover,
.footer__copyright-6 p a,
.footer__info-6 li a:hover,
.footer__item-6-social a:hover,
.footer__item-title,
.footer__link-6 li a:hover,
.footer__social-6 li a:hover,
.hero__text-7 .about,
.hero__title-7,
.service__right-4 p span {
    color: var(--black-2)
}

























.faq__list-4 .accordion-body p,
.faq__sec-title p {
    font-size: 18px;
    color: var(--gray-2)
}





.faq__list-4 .accordion-body {
    padding-left: 0;
    min-height: 100px
}

@media (max-width:1023px) {
    .footer-line::after {
        height: 0
    }
    .img-box img:first-child,
    .testimonial__area .cursor {
        display: none
    }
    .portfolio__area-3 .swiper-btn div {
        opacity: 1;
        visibility: visible;
        top: calc(50% - 25px)
    }
    .img-box img {
        position: unset;
        width: 100%;
        height: auto
    }
    .img-box:hover img:nth-child(2) {
        opacity: 1
    }
    .faq__list-4 .accordion-body p {
        font-size: 16px
    }
}

.faq__list-4 .accordion-item {
    border: none;
    border-radius: 0;
    background-color: transparent
}

.faq__list-4 .accordion-button {
    background-color: transparent;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white);
    border-radius: 0;
    padding-top: 10px;
    padding-bottom: 10px
}

.faq__list-4 .accordion-button.collapsed::after {
    background-image: none;
    content: "+";
    font-weight: 300;
    font-size: 30px;
    top: 1px;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.faq__list-4 .accordion-button:not(.collapsed) {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: 0 0
}

.faq__list-4 .accordion-button:not(.collapsed)::after {
    background-image: none;
    content: "-";
    font-weight: 300;
    font-size: 30px;
    top: 1px;
    position: absolute;
    left: 0;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.faq__list-4 .accordion-button:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

























.blog__area-4 .sec-title-wrapper p {
    font-size: 18px;
    color: var(--black-13);
    padding-right: 80px;
    display: inline-block;
    margin-bottom: 55px
}











@media only screen and (max-width:767px) {
    
    
    .blog__area-4 .sec-title-wrapper p {
        font-size: 16px;
        margin-bottom: 20px;
        padding-right: 0
    }
    
    
}

@media only screen and (min-width:768px) and (max-width:991px) {
    
    .blog__area-4 .sec-title-wrapper p {
        font-size: 16px;
        margin-bottom: 20px;
        padding-right: 0
    }
    
}

.cta__area-4 .btn-started {
    padding: 16px 28px
}



@media only screen and (min-width:992px) and (max-width:1199px) {
    
    .blog__area-4 .sec-title-wrapper p {
        padding-right: 30px
    }
    
    
}



























.portfolio__area-4 .cursor {
    position: absolute
}

.portfolio__area-4 .cursor.large {
    width: 120px;
    height: 120px;
    font-size: 14px
}



















































.testimonial__pagination-4 {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px;
    bottom: 1px;
    z-index: -1
}













.footer__info-6 li a.phone {
    color: var(--black-2);
    position: relative
}

.footer__info-6 li a.phone::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: var(--white);
    -webkit-transition: .3s;
    transition: .3s;
    background-color: var(--black-2)
}































.footer__top {
    background-color: transparent
}

.footer__btm,
.footer__btm .container {
    background-color: transparent
}

.footer__inner {
    background-color: var(--black-2)
}

.footer__top {
    min-height: 140px
}

.footer__row,
.footer__btm,
.footer__inner {
    margin-left: 0;
    padding-left: 0
}

.footer__btm .container {
    margin-left: 0;
    margin-right: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0
}

.footer__row {
    margin-right: 0
}

.footer__btm .row,
.footer__btm .col-xxl-12 {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0
}

.footer__inner {
    padding-left: 90px;
    padding-right: 40px;
    margin-right: 140px
}

.footer__widget,
.footer__widget-2,
.footer__widget-3 {
    padding: 80px 0 50px
}

.footer__widget-4 {
    padding: 80px 50px 20px;
    margin-left: 0
}

.footer__widget-4 .project-title {
    padding-bottom: 15px
}

.footer__copyright {
    margin-left: 0;
    padding: 10px 0 0
}













@-webkit-keyframes leftmove {
    0%,
    100% {
        margin-left: 0
    }
    50% {
        margin-left: -20px
    }
}

@keyframes leftmove {
    0%,
    100% {
        margin-left: 0
    }
    50% {
        margin-left: -20px
    }
}

@-webkit-keyframes rightmove {
    0%,
    100% {
        margin-right: 0
    }
    50% {
        margin-right: 30px
    }
}

@keyframes rightmove {
    0%,
    100% {
        margin-right: 0
    }
    50% {
        margin-right: 30px
    }
}

@-webkit-keyframes move {
    0%,
    100% {
        margin-bottom: 0
    }
    50% {
        margin-bottom: -20px
    }
}

@keyframes move {
    0%,
    100% {
        margin-bottom: 0;
        margin-top: 0
    }
    50% {
        margin-bottom: -20px;
        margin-top: -20px
    }
}

@-webkit-keyframes rotate-icon {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-icon {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}







.header__area-7.sticky-7 {
    background: var(--white);
    border-bottom: 1px solid var(--white-2)
}



.hero__area-7 .shape-1 {
    position: absolute;
    right: 100px;
    bottom: 200px
}















.about__area-7 .sec-title-wrapper {
    text-align: center;
    padding-bottom: 70px
}

.about__area-7 .sec-title,
.cta__area-7 .cta__title,
.part.showed h2,
.part.showed p,
.portfolio__sub-title-11 {
    color: var(--white)
}

.about__area-7 .shape-1 {
    position: absolute;
    left: 100px;
    top: 280px
}













.about__mid-7 .image-1 {
    margin-left: auto;
    margin-top: 35px;
    -webkit-transform: translateX(25px);
    transform: translateX(25px)
}

.award__area-7 .inherit_row,
.award__area-7 .row.inherit_row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0
}









.award__area-7 .col-xxl-12,
.award__area-7 .container-fluid {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0
}







.hover_8_img,
.hover_8_img_2,
.hover_img,
.portfolio__hover-12,
.showcase_16_hover,
.team__hover-7 {
    background-repeat: no-repeat;
    pointer-events: none
}



.award__counter .counter__number {
    font-weight: 500;
    font-size: 100px;
    line-height: 1;
    color: var(--white)
}

















.award__item-7 .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black-2)
}

.team__item-7 .tm-name,
.team__title-7 {
    font-weight: 500;
    color: var(--black-2);
    position: relative
}

.team__area-7 .sec-text {
    padding-left: 60%
}

.team__area-7 .sec-text p {
    max-width: 300px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-3)
}







.team__item-7 {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 0.9fr 1fr 0.1fr;
    grid-template-columns: 0.9fr 1fr 0.1fr;
    padding: 18px 0
}

.team__item-7:hover .team__hover-7,
.team__item-7:hover .tm-serial {
    opacity: 1
}

.team__item-7:hover .tm-name {
    padding-left: 90px
}

.team__item-7:hover .tm-name::after {
    width: 50px
}

.team__item-7:hover .tm-link i {
    color: var(--black-2);
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.team__item-7 .tm-name {
    font-size: 24px;
    line-height: 1.3;
    text-transform: capitalize;
    -webkit-transition: .5s;
    transition: .5s;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.team__item-7 .tm-name::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    left: 25px;
    top: 18px;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: var(--black-2)
}

.team__item-7 .tm-serial {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 24px;
    -webkit-transition: .3s;
    transition: .3s
}

.team__item-7 .tm-role {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.7;
    color: var(--black-3);
    text-transform: uppercase
}

.team__item-7 .tm-link {
    color: var(--gray-2);
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.team__item-7 .tm-link i {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

































.portfolio__area-7 .sec-title {
    padding-bottom: 50px;
    text-transform: capitalize
}









.portfolio__slide-7 .title {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--black-2);
    padding-bottom: 5px
}

.portfolio__slide-7 .date {
    font-size: 14px;
    color: var(--black-3);
    font-weight: 400;
    line-height: 1.5
}

.cta__area-7 .wc-btn-black,
.cta__area-7 .wc-btn-light,
.cta__area-7 .wc-btn-pink,
.cta__area-7 .wc-btn-primary,
.cta__area-7 .wc-btn-secondary {
    border-color: var(--secondary);
    color: var(--gray-2)
}





.portfolio__area-12 .sec-title-wrapper .sub-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--black-2);
    position: relative
}

.portfolio__area-12 .sec-title-wrapper .sub-title::after {
    position: absolute;
    content: "";
    width: 150px;
    height: 1px;
    background-color: var(--black-2);
    top: 13px;
    margin-left: 10px
}

.portfolio__area-12 .sec-title-wrapper .title {
    font-weight: 500;
    font-size: 350px;
    line-height: .7;
    text-transform: uppercase;
    color: var(--black-2);
    padding-bottom: 60px
}

.portfolio__area-12 .sec-title-wrapper .title span {
    color: transparent;
    -webkit-text-stroke: 2px var(--black-2)
}

.portfolio__area-12 .sec-title-wrapper p {
    max-width: 320px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    text-indent: 60px;
    color: var(--black-2);
    margin-left: 500px
}





.portfolio__slider-11-title .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
    font-size: 150px
}









.part.showed h2,
.part.showed p {
    font-weight: 500;
    text-transform: uppercase
}

.portfolio__item-12 p,
.portfolio__sub-title-11 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase
}



.portfolio__item-12 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 160px auto 200px;
    grid-template-columns: 160px auto 200px;
    padding: 55px 0 50px;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .3s;
    transition: .3s;
    border-top: 1px solid var(--gray-11)
}

.portfolio__item-12:hover .portfolio__title-12 {
    letter-spacing: 1px;
    -webkit-transition: .3s;
    transition: .3s
}



.active.hover_8_img_2,
.hover_8_img.active,
.hover_wrap:hover .hover_img,
.portfolio__item-12:hover .portfolio__hover-12,
.showcase_16_hover.active {
    opacity: 1
}

.portfolio__item-12 p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    color: var(--black-3)
}







.hover_8_img,
.hover_8_img_2,
.hover_img {
    height: 400px;
    top: 0;
    z-index: -1;
    position: absolute;
    left: 0;
    background-size: cover;
    opacity: 0
}



.portfolio__nitem.active .portfolio__title-11 {
    font-size: 150px
}







.hover_8_img,
.hover_8_img_2 {
    width: 300px;
    background-position: center;
    -webkit-transition: opacity .3s, -webkit-transform .7s cubic-bezier(.23, 1, .32, 1);
    transition: opacity .3s, transform .7s cubic-bezier(.23, 1, .32, 1), -webkit-transform .7s cubic-bezier(.23, 1, .32, 1);
    overflow: hidden;
    margin-left: -250px
}

@media (max-width:1200px) {
    #client_cursor,
    .cursor-testi,
    .cursor1,
    .cursor2 {
        display: none
    }
    .hover_8_img,
    .hover_8_img_2,
    .hover_img,
    .portfolio__hover-12,
    .service__hover-3,
    .team__hover-7 {
        width: 0;
        display: none
    }
    
    .cta__content-2 #btn_wrapper,
    .cta__content-2 .btn_wrapper,
    .cta__content-3 #btn_wrapper,
    .cta__content-3 .btn_wrapper {
        width: 200px;
        height: 200px
    }
    
    .contact__form #btn_wrapper,
    .contact__form .btn_wrapper {
        margin-top: 10px
    }
    .header__area-5.sticky-5 .header__inner-5 {
        padding: 20px 15px
    }
}

.hover_8_img_2 {
    top: 100px
}









.part.showed h2 {
    opacity: 1;
    padding-left: 30px;
    padding-bottom: 30px;
    font-size: 36px;
    line-height: 1.3
}

.part.showed h2 span {
    display: block;
    position: relative;
    padding-left: 90px;
    font-family: newYork
}

.part.showed h2 span::before {
    position: absolute;
    content: "";
    width: 70px;
    height: 2px;
    left: 0;
    top: 22px;
    background-color: var(--white)
}

.part.showed p {
    opacity: 1;
    padding-left: 120px;
    padding-bottom: 60px;
    font-size: 14px;
    line-height: 1.5
}



.showcase__area-4 .row {
    --bs-gutter-x: 120px
}



















.mixtup_btn .wc-btn {
    display: inline-block;
    width: 170px;
    height: 170px;
    border: 1px solid #c2c2c2;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #555;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    -webkit-transition: .5s;
    transition: .5s;
    text-align: center;
    -ms-flex-direction: column;
    flex-direction: column
}

.mixtup_btn .wc-btn span {
    display: block;
    font-size: 18px;
    margin-bottom: -15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

@media (max-width:1365px) {
    .contact_wrap .link,
    .mixtup_btn {
        opacity: 1;
        visibility: visible
    }
    .contact_wrap .link {
        width: 130px;
        height: 130px
    }
    .hero__right-6 img {
        max-width: 100%
    }
    
    .mixtup_btn .wc-btn {
        width: 150px;
        height: 150px
    }
}









.portfolio__area-11 .swiper-container {
    width: 100%;
    height: 100vh;
    float: left;
    -webkit-transition: opacity .6s, -webkit-transform .3s;
    transition: opacity .6s, transform .3s, -webkit-transform .3s
}

.portfolio__area-11 .main-slider11 .swiper-image {
    width: 100%;
    height: 100%
}

.portfolio__area-11 .swiper-slide {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
    font-size: 150px;
    line-height: .9
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .hero__title-6 {
        font-size: 80px
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .portfolio__item-12 {
        -ms-grid-columns: 130px auto 120px;
        grid-template-columns: 130px auto 120px
    }
    .portfolio__nitem.active .portfolio__title-11 {
        font-size: 120px
    }
    
    
    .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
        font-size: 100px
    }
}

.portfolio__area-11 .swiper-container.thumb-slider11 {
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 100vh;
    pointer-events: none
}

.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide {
    cursor: pointer
}

.portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
    height: 175px !important
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    
    
    
    
    
    .hero__area-7 .shape-1 {
        right: 60px;
        max-width: 260px
    }
    
    
    
    
    
    
    
    
    .portfolio__area-12 .sec-title-wrapper .title {
        font-size: 260px;
        padding-bottom: 45px
    }
    .portfolio__area-12 .sec-title-wrapper p {
        margin-left: 300px
    }
    .portfolio__nitem.active .portfolio__title-11,
    .portfolio__title-12 {
        font-size: 100px
    }
    
    .portfolio__item-12 {
        padding: 40px 0;
        -ms-grid-columns: 100px auto 100px;
        grid-template-columns: 100px auto 100px
    }
    
    
    
    .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
        font-size: 90px
    }
    .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
        height: 160px !important
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    
    
    
    .hero__area-7 .shape-1 {
        max-width: 240px
    }
    .hero__title-7,
    .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
        font-size: 100px
    }
    
    .award__btm-7,
    .part.showed h2 span {
        padding-left: 60px
    }
    
    .award__item-7 .title {
        font-size: 14px
    }
    
    
    
    
    
    .part.showed h2,
    .service__title-7 {
        font-size: 30px
    }
    
    
    .portfolio__area-12 .sec-title-wrapper .title {
        font-size: 220px;
        padding-bottom: 45px
    }
    .portfolio__area-12 .sec-title-wrapper p {
        margin-left: 300px
    }
    
    
    
    .portfolio__item-12 {
        -ms-grid-columns: 90px auto 90px;
        grid-template-columns: 90px auto 90px;
        padding: 30px 0
    }
    .portfolio__nitem.active .portfolio__title-11 {
        font-size: 50px
    }
    
    .part.showed h2 span::before {
        width: 40px
    }
    .part.showed p {
        padding-left: 90px
    }
    
    .showcase__area-4 .row {
        --bs-gutter-x: 60px
    }
    .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
        font-size: 60px
    }
    .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
        height: 150px !important
    }
}



@media only screen and (min-width:768px) and (max-width:991px) {
    .hero__area-7,
    .portfolio__area-7 .pb-140 {
        padding-bottom: 60px
    }
    .about__mid-7 p,
    .part.showed h2 {
        padding-bottom: 20px
    }
    
    .hero__area-7 .shape-1 {
        max-width: 200px;
        right: 20px
    }
    
    
    
    
    .award__btm-7,
    .portfolio__area-7 .sec-title {
        padding-bottom: 40px
    }
    
    
    
    
    .team__area-7 .sec-text {
        padding-left: 45%
    }
    
    
    .team__item-7 {
        -ms-grid-columns: 1.5fr 1fr 0.1fr;
        grid-template-columns: 1.5fr 1fr 0.1fr
    }
    
    
    
    
    
    
    .portfolio__area-12 .sec-title-wrapper .title {
        font-size: 150px;
        line-height: .9;
        padding-bottom: 20px
    }
    .portfolio__area-12 .sec-title-wrapper p {
        margin-left: 200px
    }
    .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11 {
        font-size: 72px
    }
    
    
    .portfolio__item-12 {
        -ms-grid-columns: 40px 20px auto 20px 80px;
        grid-template-columns: 40px auto 80px;
        gap: 20px;
        padding: 30px 0
    }
    .portfolio__nitem.active .portfolio__title-11 {
        font-size: 36px
    }
    
    .part.showed h2 {
        font-size: 30px;
        padding-left: 20px
    }
    .part.showed h2 span {
        padding-left: 50px
    }
    .part.showed h2 span::before {
        width: 35px
    }
    .part.showed p {
        padding-left: 70px
    }
    
    .showcase__area-4 .row {
        --bs-gutter-x: 40px
    }
    
    .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11 {
        font-size: 48px
    }
    .portfolio__area-11 .swiper-container.thumb-slider11 {
        margin-top: 80px
    }
    .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
        height: 125px !important
    }
    
}

@media only screen and (max-width:767px) {
    .about__mid-7 .image-1,
    .hero__text-7 {
        margin-left: 0
    }
    .about__mid-7,
    .team__item-7:hover .tm-name {
        padding-left: 0
    }
    .about__mid-7 p,
    .award__counter p,
    .portfolio__area-7 p,
    .service__item-7 p,
    .service__item-7 ul li,
    .team__area-7 .sec-text p {
        font-size: 16px
    }
    
    .hero__area-7 .shape-1 {
        max-width: 120px;
        bottom: unset;
        top: 330px;
        right: 0
    }
    
    
    .hero__text-7,
    .portfolio__item-12,
    .service__items-7 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    
    .award__btm-7,
    .part.showed h2 span {
        padding-left: 30px
    }
    
    
    .award__counter .counter__number {
        font-size: 50px
    }
    
    
    .team__area-7 .sec-text {
        padding-left: 60px;
        padding-top: 20px
    }
    
    .team__item-7 {
        padding: 12px 0;
        -ms-grid-columns: 1.5fr 1fr 0.1fr;
        grid-template-columns: 1.5fr 1fr 0.1fr
    }
    .team__item-7:hover .team__hover-7,
    .team__item-7:hover .tm-serial {
        opacity: 0
    }
    .team__item-7:hover .tm-name::after {
        width: 0
    }
    .team__item-7 .tm-name {
        font-size: 20px
    }
    .team__item-7 .tm-role br {
        display: block
    }
    
    
    
    
    
    
    
    
    .portfolio__area-7 .sec-title {
        padding-bottom: 30px
    }
    
    .blog__area-7 .sec-title-wrapper {
        padding-bottom: 40px
    }
    .blog__area-7 .pb-140,
    .part.showed h2 {
        padding-bottom: 20px
    }
    
    .portfolio__area-12 .sec-title-wrapper .sub-title::after {
        width: 70px
    }
    .portfolio__area-12 .sec-title-wrapper .title {
        font-size: 60px;
        line-height: 1;
        padding-bottom: 20px
    }
    .portfolio__area-12 .sec-title-wrapper p {
        text-indent: 30px;
        margin-left: 30px
    }
    .portfolio__slider-11-title .swiper-slide-thumb-active .portfolio__title-11,
    .portfolio__title-12 {
        font-size: 36px
    }
    
    
    .portfolio__item-12 {
        padding: 20px 0;
        grid-gap: 15px
    }
    .portfolio__area-11 .swiper-slide.swiper-slide-active .gallary__thumb .portfolio__title-11,
    .portfolio__nitem.active .portfolio__title-11 {
        font-size: 30px
    }
    
    
    
    
    .part.showed h2 {
        font-size: 24px;
        padding-left: 15px
    }
    .part.showed h2 span::before {
        width: 25px
    }
    .part.showed p {
        padding-left: 20px
    }
    
    .showcase__area-4 .row {
        --bs-gutter-x: 30px
    }
    
    
    
    .mixtup_btn .wc-btn span {
        margin-bottom: -5px
    }
    
    .portfolio__area-11 .swiper-container.thumb-slider11 {
        margin-top: 80px
    }
    .portfolio__area-11 .swiper-container.thumb-slider11 .swiper-slide-active {
        height: 100px !important
    }
    
}

.border-radius {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.privacy-policy {
    padding-top: 20px;
    padding-bottom: 30px
}

.privacy-policy h3,
h4,
h5,
ul {
    margin-bottom: 20px;
    margin-top: 20px
}

.privacy-policy ul {
    padding-left: 1.5rem;
    list-style-type: disc;
    list-style-position: outside
}

.privacy-policy ul li {
    margin-bottom: 5px;
    padding-left: .5rem;
    color: var(--black-3)
}
/* Base table styling */
.table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    color: var(--black-2);
}

/* Header and cell spacing */
.table-custom th,
.table-custom td {
    padding: 12px 16px;
    border: 1px solid var(--gray-4);
    text-align: left;
}

/* Header styling */
.table-custom th {
    background-color: var(--gray-17);
    font-weight: 500;
}

/* Striped rows */


/* Responsive wrapper */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gray-4); /* Optional: visual boundary */
}

/* Optional: Make sure tables inside respond */
.table-responsive-custom table {
    min-width: 600px; /* Or whatever base width you prefer */
}

/* Video section styling */
.single__image-8 {
    height: 600px;
    overflow: hidden;
    position: relative;
}

.single__image-8 .single__thumb {
    height: 100%;
}

/* Process Text Styles - Similar to Award Text */
.workflow__area {
    position: relative;
}

.process__text {
    font-size: 160px;
    font-weight: 700;
    color: #162032;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-43deg);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    font-family: var(--font-primary);
}

.process__text-2 {
    font-size: 160px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 2px rgba(22, 32, 50, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-43deg);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    font-family: var(--font-primary);
}

.workflow__area .container {
    position: relative;
    z-index: 2;
}

/* Responsive styles for process text */
@media (max-width: 1199px) {
    .process__text,
    .process__text-2 {
        font-size: 120px;
    }
}

@media (max-width: 991px) {
    .process__text,
    .process__text-2 {
        font-size: 100px;
    }
}

@media (max-width: 767px) {
    .process__text,
    .process__text-2 {
        font-size: 80px;
    }
}

@media (max-width: 575px) {
    .process__text,
    .process__text-2 {
        font-size: 60px;
    }
}

/* Services Stack Styles */
.stack-wrapper {
    position: relative;
    width: 100%;
}

.stack-wrapper.in-content-stack {
    margin-top: -7.6rem;
}

@media only screen and (min-width:1600px) {
    .stack-wrapper.in-content-stack {
        margin-top: -4.6rem;
    }
}

.stack-offset {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 10.6rem;
    background-color: transparent;
}

@media only screen and (min-width:768px) {
    .stack-offset {
        height: 13.6rem;
    }
}

.services-stack {
    width: 100%;
    position: relative;
    height: 75vh;
    min-height: 600px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.services-stack .mxd-services-stack__title,
.services-stack .mxd-services-stack__title h3,
.services-stack .mxd-services-stack__info,
.services-stack .mxd-services-stack__info p,
.services-stack .mxd-services-cards__tags .tag,
.services-stack .mxd-services-stack__controls a {
    color: var(--white);
    text-align: left;
}

@media only screen and (min-width:992px) {
    .services-stack {
        height: 600px;
        min-height: 0;
    }
}

@media only screen and (min-width:1600px) {
    .services-stack {
        height: 760px;
    }
}

.stack-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-bottom: 3rem;
}

@media only screen and (min-width:1600px) {
    .stack-item {
        padding-bottom: 6rem;
    }
}

.mxd-services-stack__inner {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2.6rem 3rem 0 3rem;
    z-index: 0;
    -moz-border-radius: var(--_radius-l);
    border-radius: 30px;
}

.mxd-services-stack__inner.radius-dark {
    -moz-border-radius: 3.6rem;
    border-radius: 3.6rem;
}

@media only screen and (min-width:768px) {
    .mxd-services-stack__inner {
        padding: 4.2rem 5rem 0 5rem;
    }
    .mxd-services-stack__inner.radius-dark {
        -moz-border-radius: 4.6rem;
        border-radius: 4.6rem;
    }
}

@media only screen and (min-width:992px) {
    .mxd-services-stack__inner {
        padding: 4.2rem 5rem 4.6rem 5rem;
    }
    .mxd-services-stack__inner.justify-end {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .mxd-services-stack__inner.justify-between {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

.mxd-services-stack__controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.mxd-services-stack__title {
    margin-bottom: 3.4rem;
    padding-right: 2.6rem;
}

@media only screen and (min-width:992px) {
    .mxd-services-stack__title {
        z-index: 1;
    }
    .mxd-services-stack__title.width-60 {
        width: 60%;
        max-width: 580px;
    }
    .mxd-services-stack__title.width-70 {
        width: 70%;
    }
}

@media only screen and (min-width:1200px) {
    .mxd-services-stack__title h3 {
        font-size: 7rem;
    }
}

@media only screen and (min-width:1600px) {
    .mxd-services-stack__title {
        margin-bottom: 4rem;
    }
    .mxd-services-stack__title.width-60 {
        max-width: 800px;
    }
}

.mxd-services-stack__info {
    z-index: 1;
    margin-bottom: 3.3rem;
}

@media only screen and (min-width:768px) {
    .mxd-services-stack__info {
        width: 80%;
        margin-bottom: 3.3rem;
    }
}

@media only screen and (min-width:992px) {
    .mxd-services-stack__info.width-60 {
        width: 60%;
        max-width: 470px;
        margin-bottom: 0;
    }
    .mxd-services-stack__info.width-70 {
        width: 70%;
        max-width: 300px;
    }
}

@media only screen and (min-width:1600px) {
    .mxd-services-stack__info.width-60 {
        max-width: 610px;
    }
    .mxd-services-stack__info.width-70 {
        max-width: 490px;
    }
}

.mxd-services-stack__number {
    font: normal 500 3.6rem/1.2 var(--font-accent, 'Kanit', sans-serif);
}

.mxd-services-stack__number.t-muted {
    color: var(--t-muted, #666);
}

.mxd-services-stack__number.t-muted-extra {
    color: var(--t-muted-extra, #999);
}

.mxd-services-stack__number.t-opp-brigth {
    color: var(--t-opp-bright, #fff);
}

.mxd-services-stack__number.t-opp-muted {
    color: var(--t-opp-muted, #ccc);
}

@media only screen and (min-width:768px) {
    .mxd-services-stack__number {
        font-size: 5rem;
    }
}

@media only screen and (min-width:1200px) {
    .mxd-services-stack__number {
        font-size: 7rem;
    }
}

.mxd-services-stack__works {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
}











.mxd-services-cards__tags {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media only screen and (min-width:1600px) {
    .mxd-services-cards__tags {
        gap: 1.4rem;
    }
}

.services-stack__image {
    position: relative;
    overflow: hidden;
}

.services-stack__image .service-img-m {
    display: none;
}

@media only screen and (min-width:992px) {
    .services-stack__image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        padding-left: 0;
    }
    .services-stack__image .service-img {
        position: absolute;
        right: -15%;
        bottom: 0;
        height: 100%;
        width: auto;
    }
    .services-stack__image .service-img-s {
        display: none;
    }
    .services-stack__image .service-img-m {
        display: block;
    }
}

@media only screen and (min-width:1200px) {
    .services-stack__image .service-img {
        position: absolute;
        right: 0;
        bottom: -5%;
        max-height: none;
        height: 110%;
        width: auto;
    }
}

/* Background colors for services stack */
.bg-base-opp {
    background-color: #162032;
    color: #ffffff;
}

.bg-accent {
    background-color: #1e2d42;
    color: #ffffff;
}

.bg-base-tint {
    background-color: #f4f5f7;
    color: #162032;
}

.bg-base-shade {
    background-color: #e2e6ec;
    color: #162032;
}

.opposite {
    color: #ffffff;
}

.t-opposite {
    color: #ffffff;
}

.t-small-mobile {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Padding and margin utilities */
.mxd-section.padding-stacked-section {
    padding-bottom: 10.1rem;
    background-color: #0d1b2e;
}

@media only screen and (min-width:768px) {
    .mxd-section.padding-stacked-section {
        padding-bottom: 11.3rem;
    }
}

.mxd-section {
    position: relative;
}

/* Marquee Section Specific Styles */
.mxd-section.padding-pre-title {
    background-color: #0d1b2e;
    padding: 4rem 0;
    /* margin: 2rem 0; */
    overflow: hidden;
}

@media only screen and (min-width:768px) {
    .mxd-section.padding-pre-title {
        padding: 6rem 0;
        /* margin: 3rem 0; */
    }
}

.fullwidth-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    padding: 0;
    max-width: none;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

.mxd-block {
    position: relative;
}

.mxd-grid-item {
    grid-column: 1;
}

.no-margin {
    margin: 0;
}

.content__block {
    position: relative;
}

.pin-spacer {
    position: relative;
}

.width-60 {
    width: 60%;
}

/* CSS Variables for buttons */
:root {
    --_font-accent: "Funnel Display", sans-serif;
    --_animspeed-medium: 0.3s;
    --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
    --fw-regular: 400;
    --base: #FAF7F6;
    --base-opp: #0d1b2e;
    --accent: #d6b9a8;
    --additional: rgba(255, 255, 255, 0.1);
    --t-bright: #0d1b2e;
    --t-opp-bright: #FFFFFF;
    --st-bright: #0d1b2e;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-round {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border-width: 2px;
    font: normal var(--fw-regular) 2.2rem/1.5 var(--_font-accent);
    transform: scale(1);
    transition: transform var(--_animspeed-medium) var(--_animbezier);
    padding: 0;
}

.btn-round i {
    display: inline-flex;
    position: relative;
    font-size: 2.5rem;
    overflow: hidden;
}

.btn-round:hover {
    transform: scale(1.04);
}

.btn-round-large {
    width: 5.6rem;
    height: 5.6rem;
    border-width: 2px;
}

.btn-round-large i {
    font-size: 2.6rem;
}

@media only screen and (min-width: 768px) {
    .btn-round-large {
        width: 8.2rem;
        height: 8.2rem;
    }
    .btn-round-large i {
        font-size: 3rem;
    }
}

.btn-additional {
    background-color: var(--additional);
    border-style: solid;
    border-color: var(--additional);
    color: var(--t-bright);
}

.btn-base {
    background-color: var(--base);
    border-style: solid;
    border-color: var(--base);
    color: var(--t-bright);
}

.btn-accent {
    background-color: var(--accent);
    border-style: solid;
    border-color: var(--accent);
    color: var(--t-opp-bright);
}

.btn-opposite {
    background-color: var(--base-opp);
    border-style: solid;
    border-color: var(--base-opp);
    color: var(--t-opp-bright);
}

.slide-right-up:hover i::before {
    animation: 0.6s var(--_animbezier) 0.3s 1 both slideRightUp;
}

.anim-no-delay {
    animation-delay: 0s;
}

.anim-no-delay:hover i::before {
    animation-delay: 0s;
}

@keyframes slideRightUp {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(100%) translateY(-100%);
    }
    51% {
        opacity: 0;
    }
    52% {
        transform: translateX(-100%) translateY(100%);
        opacity: 0;
    }
    53% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

/* Tag styles */
.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.tag-default {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tag-outline {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #162032;
}

.tag-outline-opposite {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Icon styles */
.ph {
    font-family: "Phosphor";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.ph-arrow-up-right:before {
    content: "\f0b7";
}

/* CSS Variables for Marquee */
:root {
    --_radius-m: 1.6rem;
    --_font-accent: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Marquee Styles */
.marquee {
    max-width: 100%;
    overflow: hidden;
}

.marquee.bright .marquee__text,
.marquee.bright .marquee__image {
    color: var(--t-bright);
}

.marquee.medium .marquee__text,
.marquee.medium .marquee__image {
    color: var(--t-medium);
}

.marquee.muted .marquee__text,
.marquee.muted .marquee__image {
    color: var(--t-muted);
}

.marquee.muted-extra .marquee__text,
.marquee.muted-extra .marquee__image {
    color: var(--t-muted-extra);
}

.marquee.permanent-desktop .marquee__text,
.marquee.permanent-desktop .marquee__image {
    color: var(--t-bright);
}

@media only screen and (min-width:1200px) {
    .marquee.permanent-desktop .marquee__text,
    .marquee.permanent-desktop .marquee__image {
        color: var(--pt-t-light-bright);
    }
    .marquee.permanent-desktop .marquee__text {
        font-weight: var(--fw-regular);
    }
}

.marquee--gsap .marquee__top,
.marquee--gsap .marquee__bottom {
    will-change: transform;
    transform: translateX(0%);
}

.marquee-right--gsap .marquee__toright,
.marquee-left--gsap .marquee__toleft {
    will-change: transform;
    transform: translateX(0%);
}

.marquee__top,
.marquee__bottom,
.marquee__toleft,
.marquee__toright,
.items__container {
    position: relative;
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee__item {
    margin-top: 1rem;
    margin-right: 1rem;
}

.marquee__item.one-line {
    margin-top: 0;
}

.marquee__item.item-regular-xl {
    margin-right: 2rem;
}

@media only screen and (min-width:768px) {
    .marquee__item {
        /* margin-top: 1.5rem; */
        margin-right: 1.5rem;
    }
    .marquee__item.one-line {
        margin-top: 0;
    }
    .marquee__item.item-regular-xl {
        margin-right: 3rem;
    }
}

@media only screen and (min-width:1200px) {
    .marquee__item {
        /* margin-top: 2rem; */
        margin-right: 2rem;
    }
    .marquee__item.item-regular-xl {
        margin-right: 4rem;
    }
}

.marquee__item {
    position: relative;
    width: 430px;
    height: 320px;
    border-radius: var(--_radius-m);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: animateZ 1s infinite;
}

.marquee__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marquee__item.overflow-visible {
    overflow: visible;
}

.marquee__item.has-caption {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: #000000;
    padding: 2rem;
    border: 1px solid #e7d3c5;
    box-shadow: 0 0 18px rgba(231, 211, 197, 0.35), 0 0 38px rgba(214, 185, 168, 0.25);
}

.marquee__item.has-caption p {
    font: normal var(--fw-medium) 2.2rem/1.2 var(--_font-accent);
    color: #e7d3c5;
    text-shadow: 0 0 10px rgba(231, 211, 197, 0.55), 0 0 22px rgba(214, 185, 168, 0.35);
    margin: 0;
    padding: 0;
}

.marquee__item.item-vertical {
    width: 400px;
    height: 460px;
}

.marquee__item.item-regular {
    width: auto;
    height: auto;
    border-radius: 0;
    gap: 0;
    background-color: transparent;
    animation: animateZ 1s infinite;
}

.marquee__item.item-regular-xl {
    gap: 3rem;
}

.marquee__item.item-partners {
    justify-content: center;
    width: 380px;
    height: 250px;
}

.marquee__item.item-partners::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--base-tint);
    border-radius: var(--_radius-m);
    z-index: -1;
    transform: scale(1);
    transition: transform var(--_animspeed-slow) var(--_animbezier);
}

.marquee__item.item-partners img {
    width: 170px;
    height: auto;
}

.marquee__item.item-large {
    width: 830px;
    height: 630px;
}

@media only screen and (min-width:768px) {
    .marquee__item {
        width: 490px;
        height: 360px;
    }
    .marquee__item.has-caption p {
        font-size: 3rem;
    }
    .marquee__item.item-vertical {
        width: 525px;
        height: 600px;
    }
    .marquee__item.item-regular-xl {
        gap: 6rem;
    }
}

@media only screen and (min-width:1200px) {
    .marquee__item {
        width: 540px;
        height: 400px;
    }
    .marquee__item.item-vertical {
        width: 470px;
        height: 540px;
    }
}

@media only screen and (min-width:1400px) {
    .marquee__item.item-large {
        width: 880px;
        height: 670px;
    }
}

@media only screen and (min-width:1600px) {
    .marquee__item {
        width: 730px;
        height: 540px;
    }
    .marquee__item.has-caption p {
        font-size: 5rem;
    }
    .marquee__item.item-vertical {
        width: 525px;
        height: 600px;
    }
    .marquee__item.item-large {
        width: 1000px;
        height: 760px;
    }
}

.marquee__link {
    display: block;
    width: 100%;
    height: 100%;
}

.marquee__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.marquee__text.text-with-gliph {
    margin-right: 0;
}

.marquee__text.text-with-gliph::after {
    content: "*";
    display: inline;
    padding-left: 1.6rem;
}

@media only screen and (min-width:1200px) {
    
    .marquee__text.text-with-gliph::after {
        padding-left: 3.6rem;
    }
}













.marquee__text.text-xl {
    font-weight: var(--fw-medium);
    font-size: 20rem;
    line-height: 0.8;
}

@media only screen and (min-width:768px) {
    
    .marquee__text.text-xl {
        font-size: 30rem;
    }
}



@media only screen and (min-width:1400px) {
    .marquee__text.text-xl {
        font-size: 40rem;
    }
}









/* mxd-stats-cards styles */
.mxd-stats-cards {
    display: block;
}

.mxd-stats-cards__item {
    height: 400px;
}

.mxd-stats-cards__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mxd-stats-cards__btngroup {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mxd-stats-cards__image {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.mxd-stats-cards__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mxd-counter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mxd-counter.align-end {
    align-items: flex-end;
    text-align: right;
}

.mxd-counter__number {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #ffffff;
}

.mxd-counter__descr {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
    color: #ffffff;
}

.mxd-avatars {
    display: flex;
    gap: -10px;
}

.mxd-avatars__item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    margin-left: -10px;
}

.mxd-avatars__item:first-child {
    margin-left: 0;
}

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

.mxd-avatars__icon {
    width: 100%;
    height: 100%;
    padding: 8px;
}

.bg-accent {
    background-color: #1e2d42;
    color: #ffffff;
}

.bg-base-tint {
    background-color: #162032;
}

.bg-base-opp {
    background-color: #ffffff;
}

.radius-m {
    border-radius: 16px;
}

.padding-4 {
    padding: 2rem;
}

.opposite {
    color: white;
}

.t-140 {
    font-size: 1.1rem;
}

.t-bright {
    opacity: 0.9;
}

.mxd-section {
    padding: 80px 0;
    background-color: #000000;
}

.padding-grid-pre-mtext {
    padding-top: 60px;
    padding-bottom: 60px;
}

.overflow-hidden {
    overflow: hidden;
}

.mxd-container {
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 15px;
}

.grid-container {
    width: 100%;
}

.mxd-block {
    width: 100%;
}

.mxd-grid-item {
    padding: 10px;
}

.anim-uni-scale-in-right,
.anim-uni-scale-in-left {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.anim-uni-scale-in-right.animate,
.anim-uni-scale-in-left.animate {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 1199px) {
    .mxd-stats-cards__item {
        height: 350px;
    }
    
    .mxd-counter__number {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .mxd-stats-cards__item {
        height: 300px;
        margin-bottom: 20px;
    }
    
    .mxd-counter__number {
        font-size: 2.5rem;
    }
    
    .mxd-stats-cards__image {
        width: 60px;
        height: 60px;
        right: 15px;
        bottom: 15px;
    }
    
    .padding-4 {
        padding: 1.5rem;
    }
}