@charset "UTF-8";

@-webkit-keyframes wcRotate {

    0%,
    to {
        -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%,
    to {
        -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%,
    to {
        scale: 1
    }

    50% {
        scale: 1.5
    }
}

@keyframes wcBubble {

    0%,
    to {
        scale: 1
    }

    50% {
        scale: 1.5
    }
}

@-webkit-keyframes wcZoom {

    0%,
    to {
        scale: 1
    }

    50% {
        scale: .5
    }
}

@keyframes wcZoom {

    0%,
    to {
        scale: 1
    }

    50% {
        scale: .5
    }
}

@-webkit-keyframes wcSlideBottom {

    0%,
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

@keyframes wcSlideBottom {

    0%,
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px)
    }
}

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

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

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

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

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

    to {
        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)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes wcSpinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

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

a,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
img,
li,
p,
video {
    z-index: 1
}

.footer-line,
.line,
a,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
img,
li,
p,
video {
    position: relative
}

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

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

.main-menu-3,
.wc-btn-dark {
    text-align: center
}

.header__inner,
.service__area .sec-title-wrapper,
.service__item-6 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.about8__title a,
.rollslide_title span,
.rollslide_title-1 span,
.sec-title-16 span,
.sec-title-4 span,
.sec-title-8 a,
.work8__content__title span {
    font-family: newYork
}

.section_title_wrapper .title_right__inner__right ul li,
h3#abt_title {
    margin-bottom: 10px
}

:root {
    --primary: #f48120;
    --secondary: #2c2c2c;
    --black: #000;
    --black-2: #121212;
    --black-3: #555;
    --black-4: #1d1d1d;
    --black-5: #343434;
    --black-6: #262626;
    --black-7: #555555;
    --black-13: #666;
    --white: #fff;
    --white-2: #efefef;
    --white-3: #e9e9e9;
    --white-4: #f0f0f0;
    --white-5: #fbfbfb;
    --white-6: #d7d7d7;
    --white-7: #F5F5F5;
    --gray: #c2c2c2;
    --gray-2: #999;
    --gray-3: #a8a8a8;
    --gray-4: #f6f6f6;
    --gray-5: #bbb;
    --gray-6: #2b2b2b;
    --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;
    --gray-16: #939393;
    --pink: #FAEDE9;
    --pink-2: #FF9776;
    --pink-3: #F3ECEC;
    --pink-4: #FFFAF0;
    --pink-5: #E0E3CC;
    --bg-line: #1e1e1e;
    --d-gray: #6A6A6A;
    --d-black: #1A1A1A;
    --d-black-2: #171717;
    --d-black-3: #1A1A1A
}

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

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

.dark .story__area .line,
.pb-120 {
    padding-bottom: 120px
}

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

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

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

.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 {
    padding-top: 40px
}

.dark .cta__area .line.no-p,
.pt-100 {
    padding-top: 100px
}

@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 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-100 {
        padding-top: 80px
    }
}

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

@media only screen and (max-width:767px) {
    .pt-110 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-110 {
        padding-top: 80px
    }
}

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

@media only screen and (max-width:767px) {
    .pt-120 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-120 {
        padding-top: 80px
    }
}

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

@media only screen and (max-width:767px) {
    .pt-130 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-130 {
        padding-top: 80px
    }
}

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

@media only screen and (max-width:767px) {
    .pt-140 {
        padding-top: 30px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-140 {
        padding-top: 80px
    }
}

.pt-150 {
    padding-top: 50px
}

@media only screen and (max-width:767px) {
    .pt-150 {
        padding-top: 60px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pt-150 {
        padding-top: 80px
    }
}

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

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

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

body {
    font-family: Poppins, sans-serif
}

html {
    scroll-behavior: smooth
}

li {
    list-style: none
}

a {
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s
}

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

p {
    font-size: 16px;
    color: #000;
    letter-spacing: .4px
}

.shape {
    position: absolute;
    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
}

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

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

.dark .hero__area-3 .sec-sub-title::after,
.dark .main-dropdown,
.dark .main-dropdown .sub-dropdown,
.dark .mega-menu,
.dark .mega-menu-2,
.dark .portfolio__area-6 .sec-title-wrapper p::before,
.dark .portfolio__page .wc-btn-dark:hover,
.dark .wc-btn-black:hover span {
    background-color: var(--white)
}

@media (max-width:1023px) {
    .footer-line::after {
        height: 0
    }
}

.scroll-top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 102px;
    z-index: 9991;
    border-radius: 100px;
    color: var(--white);
    background: #f48120;
    -webkit-transition: .3s;
    transition: .3s
}

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

.dark .about__content p,
.dark .hero__inner-3 .video-intro-title,
.dark .service__content-3 ul li,
.dark .service__item-2 p,
.dark .service__item-2 ul li,
.dark p,
.scroll-top:hover {
    color: var(--gray-2)
}

#switcher_close,
.dark .logo-dark,
.logo-light,
.logo-secondary,
.scroll-top {
    display: none
}

.dark .logo-light,
.logo-dark {
    display: block
}

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

.dark .portfolio__page section {
    margin-top: 0
}

.dark .wc-btn-black,
.dark .wc-btn-light,
.dark .wc-btn-pink,
.dark .wc-btn-primary,
.dark .wc-btn-secondary {
    border-color: var(--secondary);
    color: var(--gray-2)
}

.dark .line-3,
.dark .line::after,
.dark .line::before,
.dark .workflow__slide::before {
    background-color: var(--bg-line)
}

.dark .about__area .sec-title,
.dark .counter__area-3 .counter__number,
.dark .counter__number,
.dark .hero-title,
.dark .hero__area-3 .intro-title .video-title,
.dark .hero__area-3 .sec-sub-title,
.dark .hero__area-3 .sec-title,
.dark .hero__content-5 p,
.dark .hero__inner-3 .video-intro-title span,
.dark .hero__title-5,
.dark .sec-sub-title,
.dark .sec-title,
.dark .sec-title-2,
.dark .sec-title-3,
.dark .workflow__area .sec-title,
.dark .workflow__step,
.dark .workflow__title,
.dark .workflow__title-6 {
    color: var(--white)
}

.dark .main-dropdown li a,
.dark .mega-menu a:not([href]),
.dark .mega-menu a:not([href]):hover,
.dark .mega-menu li a,
.dark .mega-menu-2 a:not([href]),
.dark .mega-menu-2 li a {
    color: var(--black-2) !important
}

.dark .main-dropdown li a .menu-text,
.dark .mega-menu li a .menu-text,
.dark .mega-menu-2 li a .menu-text {
    text-shadow: 0 16px 0 var(--black-2) !important
}

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

.dark .header__area-3.sticky-3,
.dark .header__area-5.sticky-5 {
    background-color: var(--black-2);
    border-color: var(--secondary)
}

.dark .hero__area-3 {
    background-color: var(--d-black-2)
}

.dark .hero__area-3::before {
    -webkit-filter: invert(.9);
    filter: invert(.9)
}

.dark .hero__area-3 .scroll-down img {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .counter__area,
.dark .hero__area-5,
.dark .workflow__area {
    background-color: var(--black-2)
}

.dark .hero__area-5 img {
    -webkit-filter: invert(0);
    filter: invert(0)
}

.dark .hero__about {
    background-color: var(--d-black-2);
    background-blend-mode: color-burn
}

.dark .hero__about-award::before {
    background-color: var(--secondary)
}

.dark .hero__about-award img,
.dark .portfolio__detail-text .fonts img {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .about__area {
    background: var(--black-2)
}

.dark .portfolio__footer-area,
.dark .portfolio__service {
    background-blend-mode: overlay
}

.dark .about__area-2,
.dark .counter__about {
    background-color: var(--d-black-2)
}

.dark .counter__item,
.dark .portfolio__footer,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet,
.dark .service__item-3,
.dark .service__item-3:first-child,
.dark .workflow__wrapper-6 {
    border-color: var(--secondary)
}

.dark .counter__item::after,
.dark .counter__item::before,
.dark .faq__list .accordion-item,
.dark .faq__list-3 .accordion-item,
.dark .faq__list-6 .accordion-item {
    background-color: transparent
}

.dark .counter__img-3 img {
    -webkit-filter: contrast(.5);
    filter: contrast(.5)
}

.dark .brand__area,
.dark .workflow__area-3 {
    background-color: var(--black-2)
}

.dark .brand__about,
.dark .service__area,
.dark .workflow__area-6 {
    background-color: var(--d-black-2)
}

.dark .workflow__slide::after {
    border-color: var(--black-2)
}

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

.dark .brand__area .sec-title,
.dark .brand__title-3,
.dark .portfolio__slide-2 .btn-common:hover,
.dark .portfolio__slide-2 .sec-title a,
.dark .service__area-2 .sec-text p,
.dark .service__content-3 p {
    color: var(--white)
}

.dark .brand__list,
.dark .brand__list-2,
.dark .brand__list-3 {
    background-color: transparent;
    border-color: var(--bg-line)
}

.dark .brand__item,
.dark .faq__list-3 .accordion-item,
.dark .faq__list-3 .accordion-item:first-child {
    border-color: var(--bg-line)
}

.dark .service__area-2 {
    background-color: var(--black-2)
}

.dark .portfolio-v4,
.dark .portfolio__about,
.dark .portfolio__area,
.dark .service__area-2.service-v3,
.dark .service__area-3,
.dark .service__area-3 .sec-sub-title,
.dark .service__area-3 .sec-title,
.dark .service__area-6,
.dark .service__detail {
    background-color: var(--d-black-2)
}

.dark .portfolio__slider-2-pagination .swiper-pagination-bullet::after,
.dark .service__area-3 .sec-title-wrapper::after,
.dark .service__item-2::before {
    background-color: var(--secondary)
}

.dark .blog__area,
.dark .cta__area,
.dark .portfolio__area-2,
.dark .portfolio__area-5,
.dark .portfolio__area-6,
.dark .portfolio__detail,
.dark .portfolio__footer-area,
.dark .portfolio__hero-area,
.dark .portfolio__project,
.dark .portfolio__slide-2,
.dark .team__about,
.dark .team__btm,
.dark .team__detail,
.dark .testimonial__area {
    background-color: var(--black-2)
}

.dark .service__title-2,
.dark .service__title-3,
.dark .service__title-3:hover {
    color: #f48120
}

.dark .service-v4.pb-150 {
    padding-bottom: 150px
}

.dark .portfolio__area-2::after,
.dark .portfolio__slider-2::after {
    background: var(--secondary)
}

.dark .portfolio__area-5 {
    border-color: var(--secondary)
}

.dark .portfolio__area-5 .sec-line-1,
.dark .portfolio__area-5 .sec-line-2,
.dark .portfolio__area-5::after,
.dark .portfolio__area-5::before,
.dark .sticky-2 .header__nav-icon-5 {
    -webkit-filter: invert(0);
    filter: invert(0)
}

.dark .portfolio__area-6 .pb-140,
.service-v4.pb-150 {
    padding-bottom: 0
}

.dark .career__gallery ul li::after,
.dark .portfolio__about .sec-title span::before,
.dark .portfolio__project .pp-next::after,
.dark .portfolio__project .pp-prev::after,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active::after,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover::after,
.dark .team__member-role-7::after {
    background-color: var(--white)
}

.dark .contact__form input:focus,
.dark .contact__form textarea:focus,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet-active,
.dark .portfolio__slider-2-pagination .swiper-pagination-bullet:hover,
.dark .testimonial__pagination .next-button:hover,
.dark .testimonial__pagination .prev-button:hover {
    border-color: var(--white)
}

.dark .portfolio__date,
.dark .portfolio__detail-info ul li,
.dark .portfolio__detail-info ul li a,
.dark .portfolio__detail-info ul li span,
.dark .portfolio__detail-text .fonts ul .medium,
.dark .portfolio__detail-text .fonts ul .semibold,
.dark .portfolio__detail-text li,
.dark .portfolio__detail-text p,
.dark .portfolio__pagination-6,
.dark .portfolio__project .pp-slide-thumb p {
    color: var(--gray-2)
}

.dark .portfolio__slide-2 .btn-common {
    color: var(--gray)
}

.dark .portfolio__current,
.dark .portfolio__detail-title,
.dark .portfolio__footer-area .pf-contact h3,
.dark .portfolio__footer-area .pf-contact ul li a,
.dark .portfolio__footer-area .pf-social ul li a,
.dark .portfolio__footer-area .pf-title,
.dark .portfolio__hero .title,
.dark .portfolio__project .pp-slide-title,
.dark .portfolio__project .pp-title,
.dark .portfolio__project .swipper-btn,
.dark .portfolio__title-6 {
    color: var(--white)
}

.dark .portfolio__project::after {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .portfolio__footer-area::before {
    -webkit-filter: invert(.8);
    filter: invert(.8)
}

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

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

.dark .portfolio__about::after,
.dark .portfolio__footer-area::after,
.dark .portfolio__hero .title.shape-circle::after,
.dark .portfolio__hero-area::after,
.dark .portfolio__service .sec-text,
.dark .portfolio__service-item {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .portfolio__service .ps-btn a,
.dark .research__tools li a,
.dark .wc-btn-dark {
    color: var(--white);
    border-color: var(--white)
}

.dark .portfolio__hero .title.text-stroke {
    -webkit-text-stroke: 1px var(--white)
}

.dark .blog__btn,
.dark .blog__meta,
.dark .blog__meta a,
.dark .blog__meta-2,
.dark .blog__meta-2 a,
.dark .blog__title-2:hover,
.dark .blog__title-3:hover,
.dark .blog__title:hover,
.dark .client__role-3,
.dark .portfolio__about .brand-title,
.dark .portfolio__about .sec-text p,
.dark .testimonial__role {
    color: var(--gray-2)
}

.dark .blog__area-2,
.dark .blog__area-3,
.dark .blog__area-3 .sec-sub-title,
.dark .blog__area-3 .sec-title,
.dark .blog__area-6,
.dark .blog__detail,
.dark .blog__info-3,
.dark .blog__related,
.dark .team__area,
.dark .team__join-btn,
.dark .testimonial__area-2,
.dark .testimonial__area-3,
.dark .testimonial__inner-2 {
    background-color: var(--d-black-2)
}

.dark .portfolio__about-left img {
    -webkit-filter: invert(.5);
    filter: invert(.5)
}

.dark .development__content,
.dark .feature__item,
.dark .feature__item:nth-child(odd),
.dark .feature__top,
.dark .footer__middle-2,
.dark .portfolio__about .about-row,
.dark .portfolio__about .brand-title-wrap,
.dark .testimonial__pagination .next-button,
.dark .testimonial__pagination .prev-button {
    border-color: var(--secondary)
}

.dark .client__name-3,
.dark .testimonial__area .sec-title,
.dark .testimonial__author,
.dark .testimonial__pagination .next-button:hover i,
.dark .testimonial__pagination .prev-button:hover i,
.dark .testimonial__slide-3 p,
.dark .testimonial__title,
.dark .testimonial__title-2 {
    color: var(--white)
}

.dark .testimonial__area-3 {
    background-image: none
}

.dark .error__content img,
.dark .feature__item img,
.dark .footer__subscribe-2 img,
.dark .header__nav-icon-3 img,
.dark .solution__shape .shape-2,
.dark .testimonial__area-3 p::before {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .testimonial__pagination .next-button i,
.dark .testimonial__pagination .prev-button i {
    color: var(--secondary)
}

.dark .blog__area .sec-title,
.dark .blog__btn:hover,
.dark .blog__detail-content h1,
.dark .blog__detail-content h2,
.dark .blog__detail-content h3,
.dark .blog__detail-content h4,
.dark .blog__detail-content h5,
.dark .blog__detail-content h6,
.dark .blog__detail-date,
.dark .blog__detail-tags p,
.dark .blog__detail-title,
.dark .blog__meta a:hover,
.dark .blog__meta-2 a:hover,
.dark .team__member-name-6,
.dark .team__member-name-7,
.dark .team__member-role-7 span,
.dark .team__member-social li a:hover,
.dark .team__member-work li a {
    color: var(--white)
}

.dark .solution__img-1::after,
.dark .solution__img-2::after,
.dark .solution__img-3::after,
.dark .testimonial__img.b-right::after {
    border-color: var(--secondary);
    z-index: 0
}

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

.dark .testimonial__img.b-left::before {
    border-color: var(--bg-line);
    z-index: 1
}

.dark .testimonial__slider-3 .swipper-btn:hover {
    -webkit-transition: .3s;
    transition: .3s;
    border-color: var(--white)
}

.dark .blog__area.no-pb {
    margin-bottom: -150px
}

.dark .cta__area-2,
.dark .footer__area,
.dark .team__area-6 {
    background-color: var(--black-2)
}

.dark .blog__area-3 .sec-title-wrapper::after,
.dark .footer__subscribe-2::before {
    background-color: var(--secondary)
}

.dark .contact_wrap:hover .link,
.dark .research__tools li a:hover,
.dark .team__member-work li a:hover {
    background-color: var(--white);
    color: var(--black-2)
}

.dark .blog__title,
.dark .blog__title-2,
.dark .blog__title-3 {
    color: var(--white);
    border-color: var(--secondary)
}

.dark .blog__detail ul li,
.dark .blog__detail-date span,
.dark .blog__detail-meta p span,
.dark .blog__detail-tags p a,
.dark .team__member-role-6,
.dark .team__member-role-7 {
    color: var(--gray-2)
}

.dark .team__area-6 {
    background-blend-mode: color-burn
}

.dark .team__detail.pb-140 {
    padding-bottom: 60px
}

.dark .footer-line::after,
.dark .team__detail-page .line-1,
.dark .team__detail-page .line-2,
.dark .team__detail-page .line-3 {
    background: var(--bg-line)
}

.dark .cta__sub-title,
.dark .cta__title,
.dark .cta__title-2,
.dark .team__detail .work-title {
    color: var(--white)
}

.dark .cta__area .dark-p,
.dark .cta__area .line,
.section_title_wrapper .title_right {
    padding-top: 150px
}

.dark .career__gallery p,
.dark .cta__area-2 .wc-btn-pink,
.dark .feature__item p,
.dark .story__text p {
    color: var(--gray-2)
}

.dark .career__benefits-list li,
.dark .career__gallery ul li,
.dark .choose-title,
.dark .contact__info h3,
.dark .contact__info ul li a,
.dark .contact__info ul li span,
.dark .error__content h2,
.dark .faq__list .accordion-button,
.dark .faq__list-3 .accordion-button,
.dark .faq__list-6 .accordion-button,
.dark .faq__title,
.dark .feature__text p,
.dark .feature__title,
.dark .footer-menu li a,
.dark .footer-menu-2 li a,
.dark .footer__copyright-2 p a,
.dark .footer__copyright-4 a,
.dark .footer__location-2 .location h3,
.dark .header__nav-icon-3 button,
.dark .main-menu-3 li a,
.dark .research__area .sec-sub-title,
.dark .research__area .sec-title-wrapper p,
.dark .research__item p,
.dark .research__number span,
.dark .research__title {
    color: var(--white)
}

.dark .award__area,
.dark .cta__area-3,
.dark .error__page,
.dark .faq__area,
.dark .feature__area-2,
.dark .footer__inner,
.dark .price__item:first-child,
.dark .service__faq .accordion-item,
.dark .story__area {
    background-color: var(--d-black-2)
}

.dark .career__benefits,
.dark .career__gallery,
.dark .career__top,
.dark .contact__area-6,
.dark .cta__area-5,
.dark .footer__area-2,
.dark .footer__area-5,
.dark .price__area {
    background-color: var(--black-2)
}

.dark .cta__area-5 {
    -webkit-filter: invert(0);
    filter: invert(0);
    margin: 0
}

.dark .footer__area-2 {
    background-blend-mode: multiply;
    background-position: 100% 1px
}

.dark .footer__subscribe-2 input {
    color: var(--white);
    border-color: var(--white);
    background-color: transparent
}

.dark .accordion-item,
.dark .career__benefits-list li,
.dark .job__detail-content {
    border-color: var(--bg-line)
}

.dark .footer__subscribe-2 input::-webkit-input-placeholder {
    color: var(--white)
}

.dark .footer__subscribe-2 input::-moz-placeholder {
    color: var(--white)
}

.dark .footer__subscribe-2 input:-ms-input-placeholder {
    color: var(--white)
}

.dark .footer__subscribe-2 input::-ms-input-placeholder {
    color: var(--white)
}

.dark .footer__subscribe-2 input::placeholder {
    color: var(--white)
}

.dark .footer-menu li a .menu-text,
.dark .footer-menu-2 li a .menu-text,
.dark .footer__menu-5 li a .menu-text,
.dark .main-menu-3 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)
}

.dark .main-menu .mega-menu li a,
.dark .main-menu .mega-menu-2 li a,
.dark .main-menu-4 .mega-menu li a,
.dark .main-menu-4 .mega-menu-2 li a,
.main-menu-4>li>a {
    color: var(--black-2)
}

.dark .research__area {
    background-color: var(--d-black-2);
    background-blend-mode: exclusion
}

.award__area,
.dark .accordion-item,
.dark .faq__area-6,
.dark .faq__btm,
.dark .job__detail,
.dark .solution__area {
    background-color: var(--black-2)
}

.dark .contact__form input::-webkit-input-placeholder,
.dark .contact__form textarea::-webkit-input-placeholder {
    color: var(--white);
    border-color: var(--bg-line)
}

.dark .contact__form input::-moz-placeholder,
.dark .contact__form textarea::-moz-placeholder {
    color: var(--white);
    border-color: var(--bg-line)
}

.dark .contact__form input:-ms-input-placeholder,
.dark .contact__form textarea:-ms-input-placeholder {
    color: var(--white);
    border-color: var(--bg-line)
}

.dark .contact__form input::-ms-input-placeholder,
.dark .contact__form textarea::-ms-input-placeholder {
    color: var(--white);
    border-color: var(--bg-line)
}

.dark .contact__form input,
.dark .contact__form input::placeholder,
.dark .contact__form textarea,
.dark .contact__form textarea::placeholder {
    color: var(--white);
    border-color: var(--bg-line)
}

.dark .development__area,
.dark .job__area,
.dark .job__detail-sidebar,
.dark .job__detail-top,
.dark .modal__apply {
    background-color: var(--d-black-2)
}

.dark .development__wrapper ul li,
.dark .job__detail-content ul li,
.dark .job__detail-meta li,
.dark .job__detail-sidebar ul li,
.dark .solution__mid p {
    color: var(--gray-2)
}

.dark .job__detail-content h1,
.dark .job__detail-content h2,
.dark .job__detail-content h3,
.dark .job__detail-content h4,
.dark .job__detail-content h5,
.dark .job__detail-content h6,
.dark .solution__btm li,
.dark .solution__title {
    color: var(--white)
}

.dark .circle-pagination button.swiper-pagination-bullet span,
.dark .circle-pagination-2 .swiper-pagination-bullet::after,
.dark .sec-title-16 span::after,
.dark .solution__mid p::before,
.header__area-2 .main-dropdown {
    background-color: var(--white)
}

.dark .solution__shape .shape-5 {
    z-index: 0
}

.dark .menu-text-5,
.dark .menu-text-pp,
.dark .modal .close_btn-2:hover,
.dark .modal__apply .form-top p,
.dark .modal__apply .input-apply p,
.dark .modal__apply .input-apply-2 input[type=file],
.dark .modal__apply .input-apply-2 p,
.dark .modal__close-2:hover,
.dark .sec-title-16,
.dark .sec-title-16 span,
.dark .sec-title-4,
.dark .sec-title-8,
.dark .service__hero-right-2 .title {
    color: var(--white)
}

.dark .error__content::before,
.dark .header__nav-icon-5 img,
.dark .hero__area-3::after,
.dark .modal__apply .form-top img {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.dark .circle-pagination button.swiper-pagination-bullet,
.dark .circle-pagination-2 .swiper-pagination-bullet,
.dark .modal__apply .input-apply textarea:focus,
.dark .modal__apply .input-apply-2 input:focus,
.wc-btn-light:hover {
    border-color: var(--white)
}

.dark .circle-pagination .circle-origin {
    stroke: var(--white)
}

.dark .bg-white {
    background-color: var(--black-2) !important
}

.dark .portfolio__area-5 .sec-line {
    background-color: #d3d3d3
}

.dark .modal__apply .input-apply textarea,
.dark .modal__apply .input-apply-2 input {
    color: var(--white);
    background-color: var(--d-black-2);
    border-color: var(--black-3)
}

.dark .service__hero-2 {
    background-color: var(--black-2);
    background-image: none
}

.dark .hero__content-8 .scroll-down img,
.dark .menu-icon img,
.dark .sec-title-4 img,
.dark .service__hero-2 .shape-1,
.dark .service__hero-right-2 .scroll {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.wc-btn-black {
    color: var(--black-3);
    border: 1px solid var(--gray)
}

.wc-btn-black,
.wc-btn-light,
.wc-btn-pink {
    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;
    height: 40px;
    padding: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    width: 25%;
    margin-top: 15px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s
}

.wc-btn-primary {
    color: var(--black-3);
    border: 1px solid var(--gray)
}

.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;
    height: 40px;
    padding: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    width: 25%;
    margin-top: 15px;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s
}

.sec-title-4,
.sec-title-8,
.wc-btn-dark {
    text-transform: uppercase
}

.wc-btn-black:hover {
    border: 1px solid var(--primary)
}

.wc-btn-light:hover,
.wc-btn-pink:hover,
.wc-btn-primary:hover,
.wc-btn-secondary:hover {
    color: var(--black-2);
    border: 1px solid var(--primary)
}

.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 {
    background-color: var(--primary)
}

.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;
    z-index: -1;
    border-radius: 100%;
    -webkit-transition: .7s;
    transition: .7s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

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

.wc-btn-light,
.wc-btn-pink,
.wc-btn-secondary {
    border: 1px solid var(--secondary);
    color: var(--gray-2)
}

.wc-btn-pink:hover {
    border-color: var(--pink-2)
}

.wc-btn-pink span {
    background-color: var(--pink-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;
    color: var(--black-2);
    border: 1.3px solid var(--black-2);
    border-radius: 33px;
    padding: 20px 54px;
    -webkit-transition: .3s;
    transition: .3s
}

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

.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 {
    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
}

.about_btn::before,
.sec-title-16 span::after {
    position: absolute;
    width: 100%;
    left: 0;
    content: ""
}

.about_btn {
    font-size: 20px !important;
    position: relative
}

.about_btn::before {
    height: 1px;
    bottom: -10px;
    background-color: var(--black-7)
}

.sec-title {
    font-weight: 500;
    font-size: 60px;
    line-height: 1;
    color: #000
}

.sec-title-2 {
    font-weight: 500;
    font-size: 120px;
    line-height: .9;
    color: var(--black-2)
}

.sec-title-3,
.sec-title-4 {
    line-height: 1;
    color: var(--black-2)
}

.sec-title-3 {
    font-weight: 500;
    font-size: 130px
}

.sec-title-4 {
    font-size: 150px
}

.sec-title-4 span {
    padding-left: 298px;
    display: block
}

.sec-title-4 img {
    margin-top: -30px;
    -webkit-animation: 3s linear infinite wcSpinner;
    animation: 3s linear infinite wcSpinner
}

.sec-title-5 {
    padding-left: 98px
}

.sec-title-7 {
    padding-left: 185px
}

.sec-title-8 {
    font-size: 130px;
    line-height: 1;
    font-weight: 500;
    color: var(--black-2)
}

.main-dropdown li a,
.main-menu-3>li>a,
.main-menu-4>li>a,
.main-menu>li>a,
.sec-sub-title,
.sec-title-8 a {
    text-transform: capitalize
}

.sec-title-16 {
    font-weight: 500;
    font-size: 120px;
    line-height: .9;
    color: var(--black-2);
    text-indent: 120px
}

.sec-title-16 span {
    color: var(--black-2);
    position: relative
}

.sec-title-16 span::after {
    height: 2px;
    bottom: 10px;
    background-color: var(--black-2)
}

.sec-sub-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: var(--black-3);
    padding-bottom: 15px
}

.hero-title {
    font-weight: 500;
    font-size: 80px;
    line-height: 1;
    color: var(--black)
}

.title-line {
    overflow: hidden
}

@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
    }
}

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

.dis_port_4 {
    max-width: 300px;
    text-indent: 90px;
    margin-left: 100px;
    margin-top: 40px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-3)
}

.section_title_wrapper {
    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;
    padding: 130px 50px 0
}

.main-dropdown,
.main-dropdown .sub-dropdown {
    position: absolute;
    z-index: 9;
    background-color: var(--black-2);
    padding: 5px 0;
    opacity: 0;
    visibility: hidden
}

.section_title_wrapper .title_right__inner {
    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
}

.section_title_wrapper .title_right__inner__left {
    margin-right: 60px
}

.section_title_wrapper .title_right__inner__left span {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.7;
    text-align: right;
    color: var(--black-3);
    display: inline-block;
    position: relative
}

.section_title_wrapper .title_right__inner__left span::before {
    content: "";
    position: absolute;
    right: 80px;
    top: 50%;
    background-color: #d9d9d9;
    width: 1090px;
    height: 1px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {

    .sec-title-2,
    .sec-title-3 {
        font-size: 100px
    }

    .section_title_wrapper .title_right__inner__left span::before {
        width: 600px
    }
}

.section_title_wrapper .title_right__inner__right ul li a {
    font-size: 18px;
    color: var(--black-13);
    text-transform: capitalize
}

.section_title_wrapper .title_right__inner__right ul li a:hover {
    letter-spacing: 1px;
    color: var(--black-2)
}

.dark .section_title_wrapper .title_right__inner__left span,
.dark .section_title_wrapper .title_right__inner__right ul li a {
    color: var(--gray-2)
}

.dark .section_title_wrapper .title_right__inner__left span::before {
    background-color: var(--gray-2)
}

.dark .section_title_wrapper .title_right__inner__right ul li a:hover,
.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]) {
    color: var(--white)
}

.main-menu-4>li,
.main-menu>li {
    display: inline-block;
    margin: 0 10px
}

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

.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,
.main-menu>li>a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #000;
    padding: 29px 0;
    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
}

.main-menu-4>li>a .menu-text,
.main-menu>li>a .menu-text {
    text-shadow: 0 16px 0 var(--white)
}

.main-menu>li>a .menu-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden
}

.footer-menu li a .menu-text span,
.footer-menu-2 li a .menu-text span,
.main-menu-3>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)
}

.main-menu-4>li>a .menu-text span {
    transition: transform .4s
}

.main-menu>li>a .menu-text span,
.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)
}

.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: .1s;
    transition-delay: .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: .15s;
    transition-delay: .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: .2s;
    transition-delay: .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: .25s;
    transition-delay: .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: .3s;
    transition-delay: .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: .35s;
    transition-delay: .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: .4s;
    transition-delay: .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: .45s;
    transition-delay: .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: .5s;
    transition-delay: .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: .55s;
    transition-delay: .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: .6s;
    transition-delay: .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: .65s;
    transition-delay: .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: .7s;
    transition-delay: .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: .75s;
    transition-delay: .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: .8s;
    transition-delay: .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: .85s;
    transition-delay: .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: .9s;
    transition-delay: .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: .95s;
    transition-delay: .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
}

.footer-menu li a:hover,
.footer-menu-2 li a:hover,
.main-menu-3>li>a:hover,
.main-menu-4>li>a:hover,
.main-menu>li>a:hover {
    --y: -4px
}

.footer-menu li a:hover span,
.footer-menu-2 li a:hover span,
.main-menu-3>li>a:hover span,
.main-menu-4>li>a:hover span,
.main-menu>li>a:hover span {
    --m: calc(16px * -1)
}

.main-dropdown,
.mega-menu li ul,
.mega-menu-2 li ul {
    text-align: left
}

.main-menu-3>li {
    display: inline-block;
    padding: 0 40px;
    margin: 0
}

.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-menu-3>li>a {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: var(--black-2);
    padding: 27px 0;
    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
}

.footer-menu li a .menu-text,
.footer-menu-2 li a .menu-text,
.main-menu-3>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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-shadow: 0 16px 0#f48120 !important;
    letter-spacing: .5px
}

.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
}

.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,
.main-dropdown .sub-dropdown {
    width: 260px;
    left: -75px;
    top: 85px;
    -webkit-transition: .3s;
    transition: .3s
}

.main-dropdown .sub-dropdown {
    width: 300px;
    left: 100%;
    top: -6px;
    text-align: left
}

.main-dropdown li {
    display: block;
    margin: 0;
    padding: 5px;
    border: 1px solid rgba(206, 193, 193, .151)
}

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

.main-dropdown li a:hover {
    color: #f48120;
    letter-spacing: 1px
}

.main-dropdown li a {
    color: var(--white);
    display: block;
    line-height: 14px;
    letter-spacing: .6px;
    font-size: 14px;
    padding: 10px
}

.mega-menu li a,
.mega-menu-2 li a,
.menu-heading {
    font-size: 20px;
    color: var(--white);
    text-transform: capitalize;
    font-weight: 500
}

.mega-menu li a,
.mega-menu-2 li a {
    padding: 10px;
    margin-bottom: 10px
}

.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
}

.mega-menu li ul li,
.mega-menu-2 li ul li {
    display: block;
    margin: 0
}

.mega-menu li ul li a,
.mega-menu-2 li ul li a {
    font-weight: 400;
    font-size: 16px;
    padding: 10px 12px;
    display: block;
    margin-bottom: 0;
    text-transform: capitalize
}

@media only screen and (min-width:1200px) and (max-width:1399px) {

    #btn_wrapper,
    .btn_wrapper {
        width: 220px;
        height: 220px;
        margin-left: -25px
    }

    .sec-title {
        font-size: 50px;
        font-weight: 600;
        color: #000;
        margin-bottom: 0
    }

    .sec-title-2 {
        font-size: 90px
    }

    .sec-title-3 {
        font-size: 100px
    }

    .sec-title-4 {
        font-size: 120px
    }

    .sec-title-16 {
        font-size: 100px;
        text-indent: 90px
    }

    .hero-title {
        font-size: 60px
    }

    .section_title_wrapper .title_right__inner__left span::before {
        width: 500px
    }

    .mega-menu,
    .mega-menu-2 {
        padding: 40px 100px
    }

    .mega-menu li ul li a,
    .mega-menu-2 li ul li a {
        padding: 6px 12px
    }
}

.mega-menu-2 {
    width: 1160px;
    padding: 40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    grid-template-columns: repeat(4, 1fr)
}

.menu-heading {
    padding-bottom: 10px
}

.footer-menu,
.footer-menu-2,
.header__nav-2,
.solution__btm ul {
    text-align: right
}

.cursor.large,
.hero__title::after,
.portfolio__big,
.react_border,
.roll__slide,
.rollslide_wrap,
.work8__btn {
    text-align: center
}

.footer-menu li,
.footer-menu-2 li {
    display: inline-block;
    padding-left: 80px
}

.footer-menu li a,
.footer-menu-2 li a {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--black-2);
    text-transform: capitalize
}

.footer-menu-2 li a {
    color: var(--white);
    text-transform: uppercase
}

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

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

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding: 15px 0 15px 100px;
    font-weight: 400;
    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:first-child {
    -webkit-transition-delay: 33.3333333ms;
    transition-delay: 33.3333333ms
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a .menu-text span:nth-child(29) {
    -webkit-transition-delay: .9666666667s;
    transition-delay: .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: 0 !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: capitalize;
    border-top: none !important;
    padding: 20px 0 20px 150px;
    -webkit-transition: .3s;
    transition: .3s
}

.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
}

.dark .menu-heading,
.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]) {
    color: var(--black-2)
}

.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)
}

.header__area-2 .main-dropdown .sub-dropdown,
.header__area-2 .mega-menu,
.header__area-2 .mega-menu-2 {
    background-color: var(--white)
}

.modal__testimonial {
    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);
    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
}

.modal__testimonial-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -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;
    border: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.modal__close {
    background: var(--secondary);
    color: var(--white);
    border-radius: 100%;
    font-size: 18px;
    right: -15px;
    top: -15px;
    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);
    font-size: 24px;
    right: 30px;
    top: 30px
}

.offcanvas__logo,
.offcanvas__social {
    border-bottom: 1px solid var(--black-4)
}

.modal__application {
    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);
    -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)
}

.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,
.modal__apply .input-apply-2 {
    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 {
    -ms-grid-columns: 1fr 50px 4fr;
    grid-template-columns: 1fr 4fr;
    grid-gap: 50px
}

.cursor,
.cursor-testi.play::after,
.modal__apply .form-btn-2 {
    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 textarea,
.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 {
    height: 125px
}

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

.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-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-testi.hide,
.cursor1.hide,
.cursor2.hide,
.offcanvas__area {
    opacity: 0;
    visibility: hidden
}

.cursor,
.cursor2 {
    -webkit-transform: translate(-50%, -50%)
}

.cursor,
.cursor-testi.play::after {
    color: var(--white);
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.cursor,
.cursor-testi,
.cursor2 {
    position: fixed;
    z-index: 999;
    left: 0;
    pointer-events: none;
    transform: translate(-50%, -50%)
}

.cursor {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    background: var(--black-2);
    text-transform: capitalize;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    opacity: 0;
    mix-blend-mode: hard-light;
    -webkit-transition: .3s;
    transition: .3s
}

.cursor-testi,
.cursor2 {
    border-radius: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    -webkit-transition: .1s;
    transition: .1s
}

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

.cursor2.circle {
    width: 60px;
    height: 60px
}

.cursor-testi {
    width: 80px;
    height: 80px;
    background-color: var(--black-2);
    -webkit-transform: translate(-50%, -50%);
    -webkit-transition: .2s;
    transition: .2s
}

.cursor-testi.play {
    width: 100px;
    height: 100px;
    mix-blend-mode: unset;
    background-color: var(--black-2)
}

.header__area-3.sticky-3,
.hero__area-3.start-video .sec-sub-title::after {
    background-color: var(--white)
}

.cursor-testi.play::after {
    position: absolute;
    content: "Play";
    width: 100%;
    height: 100%
}

#featured_cursor {
    background: var(--white)
}

.switcher__area {
    position: relative;
    direction: ltr
}

.header__inner,
.header__nav-icon-2,
.switcher__icon button {
    display: -webkit-box;
    display: -ms-flexbox
}

.switcher__icon {
    position: fixed;
    width: 50px;
    height: 50px;
    background: var(--white);
    right: 0;
    top: 40%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999;
    -webkit-transition: .3s;
    transition: .3s;
    mix-blend-mode: exclusion
}

.switcher__icon button {
    font-size: 24px;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.switcher__btn button,
.switcher__btn select {
    font-size: 14px;
    background: #2b2b2f;
    text-transform: capitalize;
    line-height: 1.5
}

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

.offcanvas__contact li a,
.switcher__btn button.active,
.switcher__btn button:hover,
.switcher__title {
    color: var(--white)
}

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

.switcher__items {
    width: 280px;
    padding: 50px 30px;
    background: var(--black-2);
    position: fixed;
    right: -280px;
    top: 40%;
    z-index: 99;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: Kanit, sans-serif;
    -webkit-transition: .3s;
    transition: .3s
}

.switcher__items .wc-col-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px
}

.switcher__item {
    margin-bottom: 30px
}

.switcher__item:nth-child(2) {
    margin-bottom: 0
}

.switcher__item:last-child {
    margin-bottom: 0;
    display: none
}

.switcher__title {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    text-transform: capitalize;
    padding-bottom: 10px
}

.switcher__btn button {
    display: inline-block;
    font-weight: 500;
    color: var(--gray-2);
    border-radius: 4px;
    padding: 10px 15px
}

.offcanvas__close button:hover,
.offcanvas__contact li a:hover,
.offcanvas__links ul li a:hover,
.offcanvas__social ul li a:hover {
    color: var(--gray-2)
}

.switcher__btn select {
    font-weight: 400;
    color: var(--gray-2);
    width: 100%;
    border: 0;
    padding: 9px 10px;
    border-radius: 4px;
    outline: 0;
    cursor: pointer
}

.header__area {
    position: fixed;
    width: 100px;
    height: 100%;
    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
}

@media only screen and (min-width:1400px) and (max-width:1919px) {

    .footer-menu li,
    .footer-menu-2 li {
        padding-left: 60px
    }

    .offcanvas__menu-wrapper.mean-container {
        padding-top: 142px
    }

    .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: 76px
    }

    .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 {
    width: 100%;
    top: 0;
    z-index: 9999
}

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

.header__inner {
    padding: 50px 0 20px;
    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: 100%;
    position: relative;
    z-index: 9
}

.header__inner-2 {
    padding: 0 30px
}

.header__inner-2,
.header__inner-3 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 150px auto 150px;
    grid-template-columns: 150px auto 0;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
    position: relative;
    z-index: 9999
}

@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
    }

    .dark .service-v4.pb-150,
    .dark .story__area .line {
        padding-bottom: 100px
    }

    .dark .blog__area.no-pb {
        margin-bottom: -90px
    }

    .dark .blog__area .pb-140 {
        padding-bottom: 80px
    }

    .dark .cta__area .dark-p,
    .dark .cta__area .line {
        padding-top: 100px
    }

    #btn_wrapper,
    .btn_wrapper {
        width: 190px;
        height: 190px;
        margin-left: -10px
    }

    .sec-title {
        font-size: 45px
    }

    .sec-title-2 {
        font-size: 72px
    }

    .sec-title-3 {
        font-size: 80px
    }

    .sec-title-4,
    .sec-title-8 {
        font-size: 100px
    }

    .sec-title-5 {
        font-size: 120px;
        line-height: 8.3rem
    }

    .sec-title-16 {
        font-size: 90px;
        text-indent: 60px
    }

    .hero-title {
        font-size: 60px
    }

    .dis_port_4 {
        text-indent: 50px;
        margin-left: 60px;
        margin-top: 20px
    }

    .section_title_wrapper {
        padding: 110px 30px 0
    }

    .section_title_wrapper .title_right__inner__left span::before {
        width: 300px
    }

    .main-menu-4>li,
    .main-menu>li {
        margin: 0 19px
    }

    .main-menu-3>li {
        padding: 25px 0
    }

    .footer-menu li,
    .footer-menu-2 li {
        padding-left: 20px
    }

    .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
    }

    .header__area button {
        margin-top: 0
    }

    .header__inner-2,
    .header__inner-3 {
        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;
        padding: 20px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .sp-x {
        padding-left: 30px;
        padding-right: 30px
    }

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

    .shape {
        left: 200%;
        bottom: 0
    }

    .scroll-top {
        right: 10px;
        bottom: 60px
    }

    .dark .service-v4.pb-150,
    .dark .story__area .line {
        padding-bottom: 90px
    }

    .dark .blog__area.no-pb {
        margin-bottom: 0
    }

    .dark .blog__area .pb-140 {
        padding-bottom: 0
    }

    .dark .cta__area .dark-p,
    .dark .cta__area .line,
    .dark .cta__area .line.no-p {
        padding-top: 90px
    }

    .dark .solution__shape .shape-4 {
        top: 55%
    }

    #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
    }

    .sec-title {
        font-size: 36px
    }

    .sec-title-2,
    .sec-title-3 {
        font-size: 60px
    }

    .sec-title-4 {
        font-size: 80px
    }

    .sec-title-4 img {
        max-width: 90px
    }

    .sec-title-16,
    .sec-title-8 {
        font-size: 72px
    }

    .sec-title-16 {
        text-indent: 60px
    }

    .hero-title {
        font-size: 48px
    }

    .dis_port_4 {
        text-indent: 30px;
        margin-left: 20px;
        margin-top: 20px
    }

    .section_title_wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .section_title_wrapper .title_right {
        padding-top: 100px
    }

    .section_title_wrapper .title_right__inner__left span::before {
        width: 90px
    }

    .footer-menu li,
    .footer-menu-2 li {
        padding-left: 20px
    }

    .footer-menu-2 {
        margin-bottom: 30px
    }

    .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
    }

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

    .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
    }

    .header__area button {
        margin-top: 0
    }

    .header__inner-2,
    .header__inner-3 {
        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;
        padding: 20px
    }
}

@media only screen and (max-width:767px) {
    .sp-x {
        padding-left: 10px;
        padding-right: 10px
    }

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

    .shape {
        left: 70%;
        bottom: 0
    }

    .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;
        display: none !important
    }

    .dark .service-v4.pb-150 {
        padding-bottom: 60px
    }

    .dark .blog__area.no-pb {
        margin-bottom: 0
    }

    .dark .blog__area .pb-140,
    .dark .research__list {
        padding-bottom: 0
    }

    .dark .cta__area .dark-p,
    .dark .cta__area .line,
    .dark .cta__area .line.no-p {
        padding-top: 60px
    }

    .dark .cta__content {
        padding-top: 0
    }

    .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
    }

    .about_btn {
        font-size: 18px !important
    }

    .sec-title {
        font-size: 32px
    }

    .sec-title-2 {
        font-size: 45px
    }

    .sec-title-3,
    .sec-title-4 {
        font-size: 48px
    }

    .sec-title-4 span,
    .sec-title-5 {
        padding-left: 0
    }

    .sec-title-8 {
        font-size: 60px
    }

    .sec-title-16 {
        text-indent: 20px;
        font-size: 48px
    }

    .sec-title-16 span::after {
        bottom: 0
    }

    .hero-title {
        font-size: 36px
    }

    .dis_port_4 {
        margin-left: 20px;
        text-indent: 30px;
        margin-top: 20px
    }

    .section_title_wrapper {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 120px 15px 0
    }

    .section_title_wrapper .title_right {
        padding-top: 50px
    }

    .footer-menu,
    .footer-menu-2 {
        text-align: center
    }

    .footer-menu li,
    .footer-menu-2 li {
        padding-left: 8px;
        padding-right: 8px
    }

    .footer-menu-2 {
        margin-bottom: 30px
    }

    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 16px;
        padding-left: 0;
        float: right
    }

    .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__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
    }

    .header__area button {
        margin-top: 0
    }

    .header__inner-2,
    .header__inner-3 {
        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;
        padding: 10px;
        background: #fff;
        height: 55px !important
    }

    img.logo {
        width: 100px
    }

    .award__video-8 video {
        margin-top: 49px
    }
}

.header__inner-3 {
    padding: 10px 50px
}

.header__nav-icon-2 {
    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;
    height: 100%
}

.header__logo-2,
.hero__area-2 .sec-title-wrapper,
.offcanvas__close button {
    display: -webkit-box;
    display: -ms-flexbox
}

.header__nav-icon-2 .menu-icon-2::after {
    position: absolute;
    content: "";
    width: 180px;
    height: 180px;
    right: -60px;
    top: -60px;
    border: 1px solid var(--black-4);
    border-radius: 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.header__logo-2 {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 70px
}

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

@media only screen and (min-width:500px) and (max-width:991px) {
    .logo-primary {
        display: none
    }

    .header__logo-2 {
        margin-right: 10px
    }
}

.offcanvas__area {
    background-color: #fffaf0;
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    z-index: 9999;
    -webkit-transition: .3s;
    transition: .3s;
    width: 260px
}

.offcanvas__left {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: .5fr 2.1fr 1fr;
    grid-template-rows: .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
}

.hero__about,
.hero__area-2,
.hero__area-3::after,
.hero__area-3::before,
.hero__text-2 {
    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 h3,
.offcanvas__social .social-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 1.5;
    color: var(--white);
    padding-bottom: 20px
}

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

.offcanvas__links ul li a,
.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__close {
    position: absolute;
    right: 40px;
    top: 30px
}

#hero_texture,
.contact_wrap,
.hero__area,
.hero__area-2,
.hero__area-3,
.hero__inner-3,
.offcanvas__search form {
    position: relative
}

.offcanvas__close button {
    font-size: 30px;
    width: 60px;
    height: 60px;
    color: var(--white);
    background: #232323;
    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
}

.hero__area-3 .intro-title .video-title.close-video-title,
.hero__plane img {
    display: none
}

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

.offcanvas__search input {
    color: #585858;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    padding: 20px 45px 20px 20px;
    border-radius: 30px;
    border: 1px solid #3c3c3c;
    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
}

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

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

.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 {
    background-image: url(../imgs/bg/lines.png);
    background-size: cover;
    background-color: var(--black-2)
}

.hero__area-2 .hero2-shape {
    position: absolute;
    left: 30%;
    top: 41%;
    max-width: 41%;
    overflow: hidden
}

.hero__area-2 .hero2-shape img,
.work8 img {
    max-width: 100%
}

.hero__area-2 .sec-title-3 {
    color: var(--white);
    padding-right: 30px
}

.hero__area-2 .sec-title-3:last-child {
    text-align: right;
    padding-top: 110px;
    padding-right: 0;
    margin-top: 30px
}

.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-image: url(../imgs/shape/10.png);
    background-repeat: no-repeat;
    background-position: right top
}

.hero__area-3 {
    padding-top: 190px;
    padding-bottom: 125px;
    overflow: hidden
}

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

.hero__area-3 .sec-sub-title,
.hero__area-3 .sec-title {
    z-index: 2;
    color: var(--black-2);
    font-weight: 600;
    text-transform: uppercase
}

.hero__area-3::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    right: 50px;
    top: 140px;
    background-image: url(../imgs/shape/6.png);
    background-position: right top
}

.hero__area-3 .hero3-img {
    position: absolute;
    bottom: 0;
    right: 0
}

.hero__area-3 .hero3-img-anim {
    overflow: hidden;
    position: relative;
    width: 350px;
    height: 100%
}

.hero__area-3 .hero3-img-anim img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 150%;
    margin-left: auto;
    margin-right: auto
}

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

.hero__area-3 .sec-sub-title {
    font-size: 24px;
    position: relative;
    display: inline-block;
    padding-right: 30px;
    padding-bottom: 0
}

.hero__area-3 .sec-sub-title::after {
    position: absolute;
    content: "";
    width: 90px;
    height: 1px;
    left: 100%;
    top: 12px;
    background-color: var(--black-2)
}

.hero__area-3 .sec-title {
    font-size: 306px;
    line-height: .82
}

.hero__area-3 .title-right {
    position: absolute;
    right: 0
}

.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: .4s;
    --timing-function: ease;
    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
}

.hero__about-text,
.hero__area-3 .video,
.hero__area-3 .wrapper,
.hero__content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox
}

.hero__area-3 .video-info {
    width: 300px;
    position: relative;
    left: 500px;
    top: -115px;
    height: 200px
}

.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: 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(../imgs/icon/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__content a span::after,
.hero__link span::after {
    content: "";
    font-family: "Font Awesome 6 Free";
    left: -20px;
    bottom: -20px;
    opacity: 0;
    visibility: hidden
}

.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~.text::after,
.hero__area-3 #video_check:checked~.text>span::after,
.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.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__area-4 {
    padding-top: 110px;
    height: 100%
}

@media only screen and (min-width:1920px) {
    .hero__area-4 {
        height: 100vh
    }
}

.hero__area-10 {
    height: 100vh;
    padding: 90px 30px 0
}

.hero__content-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    z-index: 1
}

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

.hero__plane {
    width: 100%;
    height: 100vh
}

.hero__inner-2 {
    padding: 220px 100px 0
}

.hero__inner-3 .scroll-down,
.work8:nth-child(5) {
    margin-top: 100px
}

.hero__inner-3 .scroll-down button {
    border: 1px solid var(--gray-3);
    padding: 25px 10px;
    border-radius: 30px;
    -webkit-animation: 7s linear infinite wcSlideBottom;
    animation: 7s linear infinite wcSlideBottom
}

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

.hero__text-2 {
    background-image: url(../imgs/icon/7.png);
    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__text-3 {
    max-width: 320px;
    padding-top: 90px;
    position: relative;
    z-index: 9
}

.hero__content {
    padding-top: 200px;
    padding-bottom: 80px;
    position: relative;
    z-index: 1
}

.hero__content a {
    display: inline-block;
    max-width: 300px;
    font-size: 20px;
    line-height: 1.5;
    padding-bottom: 15px;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s
}

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

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

.hero__content a:hover span::after {
    opacity: 1;
    visibility: visible
}

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

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

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

.hero__content a span::after {
    position: absolute;
    font-weight: 900
}

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

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

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

.hero__title {
    font-weight: 500;
    font-size: 150px;
    line-height: 1;
    margin-top: 55px;
    position: relative
}

.hero__title::after {
    position: absolute;
    content: "Pro";
    width: 70px;
    height: 45px;
    right: -80px;
    top: 70px;
    border: 2px solid var(--white);
    border-radius: 15px;
    font-weight: 600;
    font-size: 24px;
    padding-top: 4px
}

.hero__title-wrapper {
    max-width: 990px;
    position: relative;
    margin-bottom: 105px
}

.hero__sub-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-3);
    max-width: 410px;
    position: absolute;
    right: 60px;
    bottom: 15px
}

.dark .hero__content-8 .scroll-down span,
.dark .rollslide_title-1,
.hero__link,
.hero__sub-title span,
.roll__area-2 .roll__slide h2 {
    color: var(--white)
}

.hero__about {
    background-image: url(../imgs/about/about-bg.png);
    background-position: top right;
    overflow: hidden
}

.hero__about-content .hero-title {
    padding-bottom: 20px;
    margin-top: 130px;
    font-size: 55px
}

.hero__about-info {
    -ms-grid-columns: 1fr 30px 2.5fr 30px 2.5fr;
    grid-template-columns: 1fr 2.5fr 2.5fr;
    grid-gap: 30px
}

.hero__about-text {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.contact_wrap .link,
.hero__about-award {
    display: -webkit-box;
    display: -ms-flexbox
}

.hero__about-award {
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.hero__about-award::before {
    position: absolute;
    content: "";
    left: 75px;
    top: 50%;
    width: 250px;
    height: 1px;
    background-color: var(--white-4)
}

.hero__about-video {
    height: 800px
}

.hero__about-video iframe,
.hero__about-video video {
    width: 100%;
    height: auto
}

.hero__about-row {
    position: inherit;
    margin-right: -310px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .offcanvas__right {
        padding: 0 30px
    }

    .offcanvas__right .shape-1 {
        left: 20px
    }

    .hero__area-2 .sec-title-3:last-child {
        padding-top: 90px
    }

    .hero__area-3 {
        padding-top: 160px;
        padding-bottom: 110px
    }

    .hero__area-3 .hero3-img {
        max-width: 1000px
    }

    .hero__area-3 .sec-title {
        font-size: 260px
    }

    .hero__area-10 {
        padding: 120px 30px 0
    }

    .hero__text-2 {
        padding-left: 30%
    }

    .hero__text-2,
    .hero__text-3 {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%)
    }

    .hero__content {
        padding-top: 80px;
        padding-bottom: 50px
    }

    .hero__about-video {
        height: 700px
    }

    .hero__about-row {
        margin-right: -50px
    }
}

.hero__link,
.hero__link span i {
    -webkit-transition: .3s;
    transition: .3s
}

.hero__link {
    display: inline-block;
    max-width: 300px;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    padding-bottom: 15px;
    position: absolute;
    top: 190px
}

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

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

#hero_canvas,
.hero__link span {
    position: absolute;
    top: 0;
    right: 0
}

.hero__link span i {
    transform: translate(0, 0) rotate(-45deg)
}

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

.hero__link span::after {
    position: absolute;
    font-weight: 900;
    transform: translate(0, 0) rotate(-45deg);
    -webkit-transition: .3s;
    transition: .3s
}

#hero_canvas {
    bottom: 0;
    left: 0
}

.hero__content-8 {
    padding-top: 80px
}

.hero__content-8 .discription {
    padding-top: 40px;
    font-size: 18px;
    max-width: 330px
}

.hero__content-8 .scroll-wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px auto;
    grid-template-columns: 300px auto
}

.hero__content-8 .scroll-down {
    position: relative;
    padding-left: 100px;
    margin-top: 30px
}

.hero__content-8 .scroll-down span {
    position: absolute;
    left: 105px;
    top: -45px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 14px;
    text-transform: uppercase
}

.hero__content-8 .scroll-down img {
    -webkit-animation: 3s infinite wcSlideBottom;
    animation: 3s infinite wcSlideBottom
}

.portfolio__big {
    padding-bottom: 395px
}

.portfolio__big img {
    margin-top: -90px
}

.portfolio__big-inner {
    background-position: center center;
    background-size: cover;
    height: calc(100vh - 80px);
    width: 600px;
    overflow: hidden;
    margin: -100px auto 0
}

.portfolio__big-inner img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.bodypadding {
    padding: 110px 100px
}

.bodypadding-2 {
    padding: 120px 50px
}

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

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

.roll__area-3 .roll__slide h2,
.rollslide_title,
.rollslide_title-1 {
    color: var(--black-2)
}

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

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

.roll__slide h2 {
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--black)
}

.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
}

.about__content p,
.rollslide_title:hover {
    color: var(--black-3)
}

.rollslide_wrap {
    overflow: hidden;
    margin-bottom: -10px
}

.rollslide_title {
    font-size: 250px;
    line-height: 1;
    -webkit-transition: .3s;
    transition: .3s;
    text-transform: uppercase
}

.rollslide_title-1 {
    font-size: 245px;
    line-height: .75;
    text-transform: uppercase
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .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-2 .hero2-shape {
        top: 37%;
        left: 33%;
        max-width: 36%
    }

    .hero__area-2 .sec-title-3:last-child {
        padding-top: 90px
    }

    .hero__area-3 {
        padding-top: 140px;
        padding-bottom: 110px
    }

    .hero__area-3 .hero3-img {
        max-width: 1000px
    }

    .hero__area-3 .sec-title {
        font-size: 260px
    }

    .hero__area-10 {
        padding: 100px 30px 0
    }

    .hero__inner-2 {
        padding: 140px 100px 0
    }

    .hero__text-2 {
        padding-left: 20%
    }

    .hero__text-2 p {
        max-width: 380px
    }

    .hero__text-3 {
        padding-top: 50px
    }

    .hero__content {
        padding-top: 80px;
        padding-bottom: 50px
    }

    .hero__content img {
        max-width: 120px
    }

    .hero__title {
        font-size: 100px;
        line-height: .9
    }

    .hero__title::after {
        right: -30px;
        top: 35px
    }

    .hero__title-wrapper {
        max-width: 700px
    }

    .hero__sub-title {
        bottom: -10px;
        right: -30px
    }

    .hero__about-award::before {
        left: 30px
    }

    .hero__about-video {
        height: 650px
    }

    .hero__about-row {
        margin-right: -150px
    }

    .portfolio__big {
        padding-bottom: 200px
    }

    .rollslide_title-1 {
        font-size: 160px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .header__inner-3 {
        padding: 20px
    }

    .header__nav-2,
    .logo-primary {
        display: none
    }

    .header__nav-icon {
        grid-column: -1
    }

    .logo-secondary {
        display: block
    }

    .offcanvas__right {
        padding: 0 30px
    }

    .offcanvas__right .shape-1 {
        left: 0
    }

    .offcanvas__logo {
        padding: 30px 0 30px 15px
    }

    .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-2 .hero2-shape {
        top: 32%;
        left: 31%;
        max-width: 40%
    }

    .hero__area-2 .sec-title-3:last-child {
        padding-top: 50px
    }

    .hero__area-3 {
        padding-bottom: 100px
    }

    .hero__area-3 .hero3-img {
        max-width: 800px
    }

    .hero__area-3 .sec-title {
        font-size: 180px
    }

    .hero__area-3 .video-info {
        left: 200px;
        top: -50px
    }

    .hero__area-10 {
        padding: 100px 20px 0
    }

    .hero__inner-2 {
        padding: 120px 50px 60px
    }

    .hero__inner-3 .scroll-down {
        margin-top: 40px
    }

    .hero__text-2 {
        padding-left: 15%;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    .hero__text-2 p {
        padding-bottom: 30px
    }

    .hero__text-3 {
        padding-top: 20px
    }

    .hero__content {
        padding-top: 120px
    }

    .hero__title {
        font-size: 100px;
        line-height: .9
    }

    .hero__title::after {
        right: 60px;
        top: 35px
    }

    .hero__title-wrapper {
        max-width: 800px;
        margin-bottom: 20px
    }

    .hero__sub-title {
        bottom: -10px
    }

    .hero__about-info {
        -ms-grid-columns: 1fr 30px 2.5fr 30px 2fr;
        grid-template-columns: 1fr 2.5fr 2fr
    }

    .hero__about-text p {
        padding-left: 20px
    }

    .hero__about-award::before {
        width: 150px;
        left: 0
    }

    .hero__about-video {
        height: 600px
    }

    .hero__about-row {
        margin-right: -150px
    }

    .hero__content-8 {
        padding-top: 50px
    }

    .hero__content-8 .scroll-down {
        padding-left: 120px
    }

    .hero__content-8 .scroll-down img {
        max-height: 100px
    }

    .portfolio__big {
        padding-bottom: 120px
    }

    .portfolio__big img {
        margin-top: 90px
    }

    .portfolio__big-inner {
        margin-top: 50px
    }

    .rollslide_title-1 {
        font-size: 120px
    }
}

@media only screen and (min-width:1200px) and (max-width:1600px) {
    .rollslide_title-1 {
        font-size: 150px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .header__inner-3 {
        padding: 20px
    }

    .header__nav-2 {
        display: none
    }

    .header__nav-icon {
        grid-column: -1
    }

    .logo-secondary {
        display: block
    }

    .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 h3,
    .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-2 .hero2-shape {
        left: 30%;
        top: 34%;
        max-width: 40%
    }

    .hero__area-2 .sec-title-3 {
        padding-top: 7px
    }

    .hero__area-2 .sec-title-3:last-child {
        padding-top: 40px
    }

    .hero__area-3 {
        padding-top: 140px
    }

    .hero__area-3 .hero3-img {
        max-width: 760px
    }

    .hero__area-3 .sec-title {
        font-size: 130px
    }

    .hero__area-3 .wrapper {
        display: none
    }

    .hero__area-3 .video-info {
        left: 280px;
        top: -235px
    }

    .hero__area-10 {
        padding: 100px 20px 0
    }

    .hero__inner-2 {
        padding: 160px 30px 60px
    }

    .hero__inner-3 .scroll-down {
        margin-top: 0
    }

    .hero__inner-3 .scroll-down button {
        border-color: var(--white)
    }

    .hero__inner-3 .scroll-down button img {
        -webkit-filter: invert(1);
        filter: invert(1)
    }

    .hero__text-2 {
        padding-left: 5%;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    .hero__text-2 p {
        padding-bottom: 40px
    }

    .hero__text-3 {
        padding-bottom: 80px;
        padding-top: 20px
    }

    .hero__content {
        padding-top: 125px
    }

    .hero__content img {
        max-width: 120px
    }

    .hero__content .experience {
        bottom: 60px
    }

    .hero__title {
        font-size: 80px
    }

    .hero__title::after {
        right: 95px;
        top: 30px
    }

    .hero__title-wrapper {
        margin-bottom: 50px
    }

    .hero__sub-title {
        font-size: 16px;
        bottom: -10px;
        right: 30px
    }

    .hero__about-info {
        -ms-grid-columns: 1fr 20px 2.5fr 20px 1fr;
        grid-template-columns: 1fr 2.5fr 1fr;
        grid-gap: 20px;
        padding-bottom: 70px
    }

    .hero__about-text p {
        padding-left: 0
    }

    .hero__about-video {
        height: 470px
    }

    .hero__about-row {
        margin-right: -120px
    }

    .hero__content-8 {
        padding-top: 50px
    }

    .hero__content-8 .discription {
        padding-top: 20px
    }

    .hero__content-8 .scroll-down {
        padding-left: 120px
    }

    .hero__content-8 .scroll-down img {
        max-height: 100px
    }

    .portfolio__big {
        padding-bottom: 120px
    }

    .contact_wrap,
    .portfolio__big img {
        margin-top: 60px
    }

    .portfolio__big-inner {
        margin-top: 50px
    }

    .bodypadding {
        padding: 70px 20px
    }

    .rollslide_title-1 {
        font-size: 90px
    }
}

.rollslide_title span {
    font-weight: 400
}

@media only screen and (max-width:767px) {
    .header__inner-3 {
        padding: 20px 15px
    }

    .header__nav-2,
    .logo-primary,
    .offcanvas__left,
    .offcanvas__right {
        display: none
    }

    .header__nav-icon {
        grid-column: -1
    }

    .logo-secondary {
        display: block
    }

    .offcanvas__mid {
        margin-top: 50px
    }

    .offcanvas__close {
        right: 15px;
        top: 15px
    }

    .offcanvas__close button {
        font-size: 16px;
        width: 30px;
        height: 30px
    }

    .hero__area-2 .hero2-shape {
        left: 5%;
        top: 30%;
        max-width: 90%
    }

    .hero__area-2 .sec-title-3 {
        padding-bottom: 40px;
        padding-right: 75px
    }

    .hero__area-2 .sec-title-3:last-child {
        padding-top: 0
    }

    .hero__area-2 .sec-title-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .hero__area-3 {
        padding-top: 130px;
        padding-bottom: 0
    }

    .hero__area-3 .hero3-img {
        position: unset
    }

    .hero__area-3 .sec-sub-title {
        padding-bottom: 15px
    }

    .hero__area-3 .sec-title {
        font-size: 90px
    }

    .hero__area-3 .wrapper,
    .hero__inner-3 .scroll-down {
        display: none
    }

    .hero__area-4 {
        padding-top: 60px
    }

    .hero__area-10 {
        padding: 100px 15px 0
    }

    .hero__inner-2 {
        padding: 120px 15px 60px
    }

    .hero__text-2 {
        padding-left: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .hero__text-2 p {
        padding-bottom: 40px
    }

    .hero__text-3 {
        padding-bottom: 30px
    }

    .hero__content {
        padding-top: 150px
    }

    .hero__content img {
        max-width: 60px
    }

    .hero__content .experience {
        position: unset
    }

    .hero__title,
    .rollslide_title,
    .rollslide_title-1 {
        font-size: 48px
    }

    .hero__title::after {
        right: 0;
        top: -40px
    }

    .hero__title-wrapper {
        margin-bottom: 0
    }

    .hero__sub-title {
        position: unset;
        padding-top: 15px
    }

    .hero__about-content .hero-title {
        padding-bottom: 10px;
        margin-top: 83px;
        text-align: justify;
        font-size: 18px;
        line-height: 25px
    }

    .hero__about-text {
        grid-column: 1/-1;
        -ms-grid-row: 1;
        grid-row: 1;
        margin-bottom: 20px
    }

    .hero__about-text p {
        padding-left: 0;
        font-size: 14px;
        margin-bottom: 0;
        line-height: 25px
    }

    .hero__about-award {
        position: absolute;
        top: 150px
    }

    .hero__about-video {
        height: auto
    }

    .hero__about-row {
        margin-right: calc(-.5*var(--bs-gutter-x))
    }

    .hero__content-8 {
        padding-top: 80px;
        text-align: center
    }

    .hero__content-8 .discription {
        padding-top: 30px;
        padding-bottom: 30px;
        max-width: 100%
    }

    .hero__content-8 .scroll-wrapper {
        display: block
    }

    .hero__content-8 .scroll-down {
        display: none
    }

    .portfolio__big {
        padding-bottom: 60px
    }

    .portfolio__big img {
        margin-top: 0
    }

    .portfolio__big-inner {
        margin-top: 10px
    }

    .bodypadding,
    .bodypadding-2 {
        padding: 30px 15px
    }

    footer .contact_wrap {
        margin-top: 40px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .rollslide_title {
        font-size: 100px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .rollslide_title {
        font-size: 120px
    }
}

@media only screen and (min-width:1200px) and (max-width:1600px) {
    .rollslide_title {
        font-size: 180px
    }
}

@media (max-width:1365px) {
    .contact_wrap .link {
        width: 130px;
        height: 130px;
        opacity: 1;
        visibility: visible
    }

    .dark .contact_wrap .link {
        color: var(--black-2);
        background-color: var(--white)
    }
}

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

.about__area-2,
.about__area-3 {
    background-color: var(--black-2);
    background-repeat: no-repeat
}

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

.about__area-2 {
    overflow: hidden;
    background-image: url(../imgs/shape/2.png);
    background-position: 0 31%
}

.about__area-2 .sec-title {
    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,
.about__area-3 .sec-text p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-2)
}

.about__area-2 .sec-text-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    gap: 215px
}

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

.about__area-3 {
    background-image: url(../imgs/shape/7.png);
    background-position: 100% 30%;
    position: relative
}

.about__area-3::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    left: 60%;
    bottom: 0;
    background-color: var(--black-5)
}

.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 {
    padding-bottom: 40px
}

.about__area-3 .sec-sub-title {
    padding-top: 45px
}

.about__area-3 .sec-text p {
    max-width: 410px;
    padding-bottom: 22px
}

.about__area-3 .sec-text-wrapper {
    padding-left: 210px;
    padding-top: 45px
}

.about__area-8 .about-sub-right {
    color: var(--black-7);
    padding-bottom: 10px
}

.dark .about8__title,
.dark .about8__title a,
.dark .about__area-8 .about-sub-right,
.dark .react_border span,
.dark .work8__content__title,
.dark .work8__title p,
.service__top-text p span {
    color: var(--white)
}

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

.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;
    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
}

.section_wrapper,
.work8:nth-child(2),
.work8:nth-child(3) {
    display: -webkit-box;
    display: -ms-flexbox
}

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

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

.about__img-right img {
    width: auto
}

.about__img-2 {
    max-width: 1720px;
    margin: 0 auto 140px;
    overflow: hidden;
    max-height: 800px
}

.about__img-2 img {
    width: 100%
}

.about__img-3 {
    overflow: hidden;
    position: relative;
    width: calc(100% - 85px);
    height: 770px
}

.about__img-3 img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
    object-fit: cover;
    height: 110%;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

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

.section_wrapper {
    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;
    text-transform: capitalize;
    position: relative;
    margin-top: -25px;
    margin-bottom: 60px
}

.section_wrapper::before {
    content: "";
    position: absolute;
    bottom: 48%;
    left: 60px;
    height: 1px;
    width: calc(100% - 60px);
    background-color: var(--gray-11)
}

.dark .awards__content__title a::after,
.service__area-3 .sec-title {
    background-color: var(--white)
}

.react_border {
    position: relative;
    height: 50px;
    width: 50px;
    line-height: 50px;
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--gray-11);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.react_border span {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-2);
    display: inline-block;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.about8__title {
    text-indent: 105px;
    font-weight: 500;
    font-size: 80px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--black-2)
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .about__area-2 {
        background-position: 0 40%
    }

    .about__area-3 .sec-text-wrapper {
        padding-left: 160px
    }

    .about8__title {
        font-size: 72px
    }
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .about__area-2 {
        background-position: 0 37%
    }

    .about__area-3 .sec-text-wrapper {
        padding-left: 160px
    }

    .about__img-3 {
        overflow: hidden;
        position: relative;
        width: calc(100% - 40px);
        height: 660px
    }

    .about__img-3 img {
        position: absolute;
        bottom: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 120%;
        margin-left: auto;
        margin-right: auto
    }

    .about8__title {
        font-size: 60px
    }
}

.about8__title a {
    color: var(--black-2);
    position: relative
}

.about8__title a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 10px;
    background-color: var(--black-2)
}

.award__text-8 a span::after,
.service__link p::after {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    bottom: -20px;
    opacity: 0;
    visibility: hidden
}

.about8__content {
    float: right
}

.about8__content p {
    line-height: 1.3;
    max-width: 515px;
    text-indent: 65px;
    font-size: 24px;
    margin-bottom: 60px
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .about__area-2 {
        background-position: 0 39%
    }

    .about__area-2 .sec-title-wrapper {
        max-width: 600px
    }

    .about__area-2 .sec-text-wrapper {
        gap: 50px
    }

    .about__area-3::after {
        left: 55%
    }

    .about__area-3 .pt-140 {
        padding-top: 100px
    }

    .about__area-3 .sec-text-wrapper {
        padding-left: 65px;
        padding-top: 0
    }

    .about__content p {
        max-width: 90%
    }

    .about__content-wrapper {
        grid-gap: 30px
    }

    .about__img-right img {
        display: none
    }

    .about__img-2 {
        margin-bottom: 35px
    }

    .about__img-3 {
        width: 100%;
        height: unset
    }

    .about__img-3 img {
        position: unset;
        height: auto
    }

    .about8__title {
        font-size: 48px
    }

    .about8__content p {
        font-size: 20px
    }
}

.workitems {
    display: -ms-grid;
    display: grid;
    grid-gap: 50px;
    -ms-grid-columns: 1fr 50px 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .about__area .sec-title {
        max-width: 660px
    }

    .about__area-2 {
        background-position: -15% 47%
    }

    .about__area-2 .sec-text-wrapper {
        gap: 50px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .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__area-3 .sec-sub-title {
        padding-top: 0
    }

    .about__area-3 .sec-text-wrapper {
        padding-left: 0;
        padding-top: 0
    }

    .about__title-wrapper {
        padding-left: 0
    }

    .about__content {
        padding-top: 5px
    }

    .about__content p {
        margin-bottom: 30px
    }

    .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
    }

    .about__img-2 {
        margin-bottom: 22px
    }

    .about__img-3 {
        width: 100%;
        height: unset
    }

    .about__img-3 img {
        position: unset;
        height: auto
    }

    .about8__title {
        font-size: 40px
    }

    .about8__title a::after {
        bottom: 3px
    }

    .about8__content p {
        font-size: 18px;
        margin-bottom: 30px
    }

    .workitems {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .work8 {
        margin-bottom: 50px
    }
}

.work8:nth-child(2) {
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 100px
}

.work8:nth-child(3) {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.work8:nth-child(4) {
    margin-left: 50px;
    margin-bottom: 100px
}

.work8:nth-child(6) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.work8__title {
    width: 320px;
    margin-bottom: 120px;
    padding-top: 90px;
    margin-left: 440px
}

.work8__title p {
    font-size: 18px;
    text-indent: 65px;
    font-weight: 400;
    color: var(--black-2)
}

.work8__content p,
.work8__content__title {
    font-weight: 500;
    text-transform: uppercase
}

.work8__content {
    padding-top: 30px
}

.work8__content p {
    font-size: 14px;
    line-height: 22px;
    color: var(--black-3)
}

.work8__content__title {
    font-size: 24px;
    line-height: 1;
    color: var(--black-2);
    padding-bottom: 5px
}

.work8__btn {
    margin-top: 115px;
    margin-bottom: 160px
}

.about__area-8 {
    padding-bottom: 170px
}

.dark .work8__content p {
    color: var(--gray-2)
}

.service__area {
    background-color: #fff
}

.service__area a:first-child .service__item {
    border-top: 1px solid #d3d3d3
}

.service__area .sec-sub-title,
.service__area .sec-title {
    color: #000
}

.service__item:hover .service a,
.service__item:hover .service__link p,
.service__item:hover .service__number span,
.service__item:hover .service__title,
.service__title:hover {
    color: #f48120
}

.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-2 {
    background-color: var(--pink)
}

.service__area-2 .sec-text p {
    font-size: 18px;
    line-height: 1.4;
    color: var(--black-2);
    max-width: 410px
}

.development__area,
.service__area-3,
.service__detail {
    overflow: hidden
}

.service__area-3 .sec-title {
    padding-bottom: 40px;
    text-transform: uppercase
}

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

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

.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
}

.service__area-3 .sec-sub-title {
    padding-top: 50px;
    text-transform: uppercase;
    background-color: var(--white)
}

.service__area-6 {
    padding-left: 100px;
    background-color: var(--black-2)
}

.service__area-6 .inherit-row {
    margin-left: -180px
}

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

.service__area-6 .left-content {
    width: 20%
}

.service__area-6 .right-content {
    width: 40%;
    padding-left: 80px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .service__area-6 {
        padding-left: 70px
    }

    .service__area-6 .inherit-row {
        margin-left: calc(-.5*var(--bs-gutter-x))
    }

    .service__area-6 .right-content {
        padding-left: 40px
    }
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .work8__title {
        margin-bottom: 90px;
        padding-top: 70px
    }

    .service__area-6 .inherit-row {
        margin-left: calc(-.5*var(--bs-gutter-x))
    }

    .service__area-6 .right-content {
        padding-left: 0
    }
}

.service__area-6 .mid-content {
    width: 40%;
    height: 100vh;
    position: relative
}

.service__area-6 .mid-content .service__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.service__area-6 .mid-content .service__image img {
    width: auto;
    height: 100vh
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .workitems {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .work8 {
        margin-bottom: 50px
    }

    .work8__title {
        margin-left: 165px;
        margin-bottom: 90px;
        padding-top: 60px
    }

    .work8__btn {
        margin-top: 60px;
        margin-bottom: 120px
    }

    .about__area-8 {
        padding-bottom: 90px
    }

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

    .service__area-3 .sec-title-wrapper {
        padding-left: 200px
    }

    .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
    }

    .service__area-3 .sec-sub-title {
        padding-top: 5px
    }

    .service__area-6 {
        padding-top: 100px;
        padding-left: 88px;
        padding-bottom: 40px
    }

    .service__area-6 .inherit-row {
        margin-left: calc(-.5*var(--bs-gutter-x))
    }

    .service__area-6 .left-content {
        width: 35%;
        padding-left: 50px;
        display: none
    }

    .service__area-6 .right-content {
        width: 100%;
        padding-left: 0
    }

    .service__area-6 .mid-content {
        display: none
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .work8__title {
        margin-left: 40px;
        margin-bottom: 90px;
        padding-top: 60px
    }

    .work8__btn {
        margin-top: 60px;
        margin-bottom: 120px
    }

    .about__area-8,
    .service__area.pb-150 {
        padding-bottom: 90px
    }

    .service__area-3 .sec-title {
        padding-bottom: 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
    }

    .service__area-3 .sec-sub-title {
        padding-top: 0
    }

    .service__area-6 {
        padding-top: 90px;
        padding-left: 0
    }

    .service__area-6 .inherit-row {
        margin-left: calc(-.5*var(--bs-gutter-x))
    }

    .service__area-6 .left-content {
        width: 30%;
        display: none
    }

    .service__area-6 .right-content {
        width: 100%;
        padding-left: 20px
    }

    .service__area-6 .mid-content {
        display: none
    }
}

.service__area-6 .mid-content #img1 {
    opacity: 1;
    visibility: visible
}

@media screen and (max-width:767px) {
    .service__area-6 .mid-content {
        display: none
    }

    .service__area-6 .right-content {
        padding-left: 0
    }
}

.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;
    color: var(--gray-2);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.4
}

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

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

.service__img,
.service__img-3 img {
    position: absolute;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s
}

.service__img {
    -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;
    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__img-3 img {
    top: -95px;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.service__img-6 img {
    max-width: 100%
}

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

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

.service__item-2::before {
    left: -90px;
    background-color: var(--black-2)
}

.service__item-2:nth-child(3n+1)::before,
.solution__btm li:first-child::after {
    position: unset
}

.service__item-2 img {
    margin-bottom: 40px
}

.service__item-2 p {
    color: var(--black-2);
    padding-bottom: 25px
}

.service__item-2 ul li {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black-2)
}

.service__item-3 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 30% 45% 25%;
    grid-template-columns: 30% 45% 25%;
    border-bottom: 1px solid var(--white-2);
    padding: 55px 0 50px
}

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

    .service__img {
        max-width: 260px
    }

    .service__item-3 {
        -ms-grid-columns: 30% 50% 20%;
        grid-template-columns: 30% 50% 20%
    }
}

.service__item-3:first-child {
    border-top: 1px solid var(--white-2)
}

.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
}

.service__item-6 {
    height: 100vh;
    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
}

.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-2::before {
        left: -40px
    }

    .service__item-3 {
        -ms-grid-columns: 30% 50% 20%;
        grid-template-columns: 30% 50% 20%;
        padding: 30px 0
    }

    .service__item-6 {
        height: auto;
        -webkit-box-orient: unset;
        -webkit-box-direction: unset;
        -ms-flex-direction: unset;
        flex-direction: unset;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 2fr 30px 3fr;
        grid-template-columns: 2fr 3fr;
        grid-column-gap: 30px;
        margin-bottom: 60px
    }

    .service__item-6 .image-tab {
        display: block
    }

    .service__item-6 .image-tab img {
        width: 100%
    }
}

.service__btn-3,
.story__img-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.service__item-6 p {
    max-width: 550px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-2);
    padding-bottom: 30px
}

.service__number span,
.service__title {
    font-size: 28px;
    color: var(--gray-2);
    font-weight: 400
}

.service__item-6 ul {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 240px auto;
    grid-template-columns: 240px auto;
    padding-bottom: 80px
}

@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__items-6 {
        padding-top: 0
    }

    .service__item-2::before {
        left: -20px
    }

    .service__item-3 {
        -ms-grid-columns: 30% 2% 40% 2% 24%;
        grid-template-columns: 30% 40% 24%;
        gap: 2%;
        padding: 50px 0
    }

    .service__item-6 {
        height: auto;
        padding-bottom: 80px
    }

    .service__item-6 ul {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
}

@media only screen and (max-width:767px) {
    .about__area-2 {
        background-size: 0
    }

    .about__area-2 .sec-title-wrapper,
    .about__area-3 .sec-text p {
        padding-bottom: 50px
    }

    .about__area-2 .sec-text {
        padding-bottom: 40px
    }

    .about__area-2 .sec-text-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 50px
    }

    .about__area-3::after,
    .service__area-3 .sec-title-wrapper::after {
        width: 0
    }

    .about__area-3 .sec-text-wrapper {
        padding-left: 0;
        padding-top: 15px
    }

    .about__title-wrapper,
    .service__area-3 .sec-title-wrapper {
        padding-left: 0
    }

    .about__content {
        padding-top: 50px
    }

    .about__content p,
    .section_wrapper {
        margin-bottom: 30px
    }

    .about__content-wrapper {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 0
    }

    .about__img-right {
        position: relative;
        top: 30px;
        right: unset
    }

    .about__img-2 {
        margin-bottom: 0
    }

    .about__img-3 {
        width: 100%;
        height: unset
    }

    .about__img-3 img {
        position: unset;
        height: auto
    }

    .section_wrapper::before {
        left: 48px;
        width: calc(100% - 48px)
    }

    .react_border {
        height: 40px;
        width: 40px;
        line-height: 36px
    }

    .about8__title {
        font-size: 36px;
        text-indent: 50px
    }

    .about8__title a::after {
        bottom: 3px
    }

    .about8__content p {
        font-size: 18px;
        margin-bottom: 30px;
        line-height: 1.5
    }

    .workitems {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }

    .work8:nth-child(2) {
        margin-top: 0
    }

    .work8:nth-child(4),
    .work8:nth-child(5) {
        margin: 0
    }

    .work8__title {
        margin-bottom: 40px;
        margin-left: 20px;
        padding-top: 40px
    }

    .work8__content {
        padding-top: 20px
    }

    .work8__btn {
        margin-top: 50px
    }

    .work8__btn,
    .work__area-8 {
        margin-bottom: 50px
    }

    .about__area-8 {
        padding-bottom: 80px
    }

    .service__area-2 {
        padding-bottom: 70px
    }

    .service__area-2 .sec-text {
        padding-bottom: 30px
    }

    .service__area-3 .sec-title-wrapper p {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0
    }

    .service__area-3 .sec-sub-title {
        padding-top: 0
    }

    .service__area-6 {
        padding-bottom: 0;
        padding-left: 0
    }

    .service__area-6 .inherit-row {
        margin-left: calc(-.5*var(--bs-gutter-x))
    }

    .service__area-6 .content-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .service__area-6 .left-content,
    .service__title br {
        display: none
    }

    .service__area-6 .right-content {
        width: 100%;
        padding-left: 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__items-6 {
        padding-top: 60px
    }

    .service__item {
        padding: 10px 0
    }

    .service__item-2 img {
        margin-bottom: 20px
    }

    .service__item,
    .service__item-3,
    .service__item-6 ul {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }

    .service__item-3 {
        padding: 40px 0
    }

    .service__item-6 {
        height: auto;
        padding-bottom: 50px
    }

    .service__item-6 ul {
        padding-bottom: 20px
    }
}

.service__item-6 ul li {
    display: inline-block;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--white)
}

.service__hover-3 {
    width: 300px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 75%;
    opacity: 0;
    -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);
    margin: -200px 0 0-150px;
    overflow: hidden;
    pointer-events: none
}

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

.service__list .active .service__link p,
.service__list .active .service__number span,
.service__list .active .service__title,
.service__text p {
    color: #000
}

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

.service__title-2,
.service__title-3 {
    font-weight: 500;
    font-size: 36px;
    line-height: 1.3;
    color: var(--black-2);
    padding-bottom: 25px
}

.service__list-6 li.active a,
.service__title-6 {
    color: var(--white)
}

.service__title-3 {
    text-transform: uppercase
}

.service__title-3:hover {
    color: var(--black-2)
}

.service__title-6 {
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    padding-bottom: 20px
}

.service__text {
    max-width: 400px;
    text-align: justify
}

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

.service__link {
    overflow: hidden
}

.service__link p {
    display: inline-block;
    font-size: 48px;
    color: var(--gray-2)
}

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

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

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

.service__btn-2 a {
    border-color: var(--black-2)
}

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

.service__btn-3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

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

.service__list-2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 120px 1fr 120px 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 120px
}

.service__list-3 {
    padding-top: 70px;
    position: relative
}

.service__list-6 {
    padding-top: 160px
}

.service__list-6 li {
    padding-bottom: 40px
}

.service__list-6 li a {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-2)
}

.service__content-3 {
    max-width: 340px;
    position: relative;
    z-index: 1
}

.service__btn-2 a,
.service__content-3 p {
    color: var(--black-2)
}

.service__content-3 ul {
    padding-top: 20px;
    position: relative;
    z-index: 1
}

.service__content-3 ul li {
    font-size: 18px;
    color: var(--black-2)
}

.service3__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

.service3__img-wrap {
    width: 20vw;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    padding-bottom: 25vw
}

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

.service__detail-circle {
    position: relative;
    z-index: 1
}

.service__detail-circle span {
    position: relative;
    display: block;
    width: 136px;
    height: 136px;
    background-color: var(--primary);
    border-radius: 100%
}

.service__detail-circle span::after,
.service__detail-circle span::before {
    position: absolute;
    content: "";
    background-color: var(--black-2);
    border-radius: 100%
}

.service__detail-circle span::before {
    width: 6px;
    height: 6px;
    left: calc(50% - 3px);
    top: calc(50% - 3px)
}

.service__detail-circle span::after {
    width: 170px;
    height: 2px;
    left: 50%;
    top: calc(50% - 1px)
}

.service__detail-img {
    padding-right: 1px;
    position: relative;
    margin-bottom: 60px;
    z-index: 9
}

.service__detail-img img {
    width: 100%
}

.service__detail-img img.sd-shape {
    width: auto;
    position: absolute;
    bottom: -15px;
    right: 20px
}

.service__detail-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 80px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px
}

.service__content-3 p,
.service__detail-content p {
    font-size: 18px;
    line-height: 1.4
}

.service-v5 .portfolio__service-item {
    margin-bottom: 25px
}

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

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

.service__area-6 .mid-content .service__image:first-child {
    z-index: 9
}

.service__image:nth-child(2) {
    z-index: 8
}

.service__image:nth-child(3) {
    z-index: 7
}

.service__image:nth-child(4) {
    z-index: 6
}

.service__image:nth-child(5) {
    z-index: 5
}

.service__image:nth-child(6) {
    z-index: 4
}

.service__image:nth-child(7) {
    z-index: 3
}

.service__image:nth-child(8) {
    z-index: 2
}

.service__image:nth-child(9) {
    z-index: 1
}

.service__hero-2 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-image: url(../imgs/home-7/sh-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    position: relative
}

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

.solution__img-1::after,
.solution__img-2::after {
    width: 100%;
    top: 0;
    border: 1px solid var(--white-6)
}

.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-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: 130px;
    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
}

.story__area .from-text span {
    display: block;
    font-size: 36px;
    font-weight: 500
}

.story__img-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: 700px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .service__item-6 ul {
        padding-bottom: 30px
    }

    .service__list-6 {
        padding-top: 80px
    }

    .story__img-wrapper {
        height: 650px
    }
}

@media only screen and (min-width:1200px) and (max-width:1399px) {

    .service__item-6 p,
    .service__item-6 ul {
        padding-bottom: 20px
    }

    .service__item-6 ul li {
        font-size: 16px;
        padding-bottom: 5px
    }

    .service__title-6 {
        font-size: 32px
    }

    .service__list-6 {
        padding-top: 80px
    }

    .service__list-6 li {
        padding-bottom: 30px
    }

    .service__list-6 li a {
        line-height: 1.4
    }

    .service__detail-content {
        grid-gap: 40px
    }

    .service__hero-2 .shape-1 {
        right: 100px;
        top: 180px
    }

    .story__img-wrapper {
        height: 580px
    }
}

@media (max-width:1200px) {

    .dark .counter__area-3,
    .dark .research__area {
        background-color: var(--black-2)
    }

    .dark .research__area {
        padding-bottom: 0
    }

    #client_cursor,
    .cursor-testi,
    .cursor1,
    .cursor2 {
        display: none
    }

    .service__hover-3 {
        width: 0;
        display: none
    }

    .story__img-wrapper {
        height: 100%
    }
}

.story__img-wrapper img {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 30px;
    max-width: 100%
}

.solution__mid {
    padding-left: 80px
}

.solution__btm li,
.solution__mid p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    position: relative
}

.solution__mid p {
    max-width: 580px;
    color: var(--black-3);
    padding-left: 190px
}

.solution__mid p::before {
    position: absolute;
    content: "";
    width: 140px;
    height: 1px;
    left: 0;
    top: 10px;
    background-color: var(--black-2)
}

.solution__right {
    padding-top: 260px
}

.solution__title {
    font-weight: 600;
    font-size: 150px;
    line-height: 1;
    color: var(--black-2);
    padding-top: 280px;
    padding-bottom: 20px
}

.solution__img-1 {
    display: inline-block;
    position: relative
}

.solution__img-1::after {
    position: absolute;
    content: "";
    height: calc(100% + 10px);
    left: 40px;
    border-radius: 0 0 290px 230px;
    z-index: -1
}

.solution__img-2::after,
.solution__img-3::after {
    position: absolute;
    height: 100%;
    z-index: -1;
    content: ""
}

.solution__img-2,
.solution__img-3 {
    position: relative;
    float: right;
    margin-top: 60px
}

.solution__img-2::after {
    right: 30px;
    border-radius: 200px
}

@media only screen and (min-width:1400px) and (max-width:1919px) {
    .solution__mid {
        padding-left: 50px
    }

    .solution__mid p {
        padding-left: 110px;
        max-width: 480px
    }

    .solution__mid p::before {
        width: 100px
    }

    .solution__title {
        font-size: 120px;
        padding-top: 200px
    }

    .solution__img-1 img {
        max-width: 400px
    }

    .solution__img-3 img {
        max-width: 360px
    }
}

.solution__img-3::after {
    width: calc(100% + 20px);
    right: 0;
    top: -30px;
    border: 1px solid var(--white-6);
    border-radius: 280px 0 0 200px
}

.solution__btm li {
    display: inline;
    color: var(--black-2);
    padding-right: 40px
}

.solution__btm li:last-child {
    padding-right: 0
}

.solution__btm li::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    left: -20px;
    top: 12px;
    background-color: var(--black-2)
}

.solution__shape img {
    position: absolute
}

.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
}

.development__content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 80px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
    padding-bottom: 35px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--black-3);
    position: relative;
    z-index: 1
}

.development__content p {
    font-size: 18px;
    line-height: 1.4
}

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

.development__wrapper {
    padding-bottom: 55px
}

.development__wrapper ul {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 310px auto;
    grid-template-columns: 310px auto
}

.development__wrapper ul li {
    display: inline-block;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black-2)
}

.development__img {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
    z-index: 9
}

.development__img img {
    position: absolute;
    bottom: 0;
    -o-object-fit: cover;
    object-fit: cover;
    height: 150%;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

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

.award__area-8,
.award__left,
.award__text-8 a {
    position: relative
}

.award__left {
    height: 100%;
    margin-top: 100px
}

.award__left img {
    position: absolute;
    bottom: 40%;
    right: 30%
}

.award__text {
    top: 130px;
    left: 0
}

.award__text,
.award__text-2 {
    font-size: 160px;
    color: var(--white);
    font-weight: 600;
    -webkit-transform: rotate(-43deg);
    transform: rotate(-43deg);
    text-transform: uppercase;
    letter-spacing: -3px;
    position: absolute
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .solution__mid p {
        padding-left: 80px
    }

    .solution__mid p::before {
        width: 70px
    }

    .solution__title {
        padding-top: 80px;
        font-size: 100px
    }

    .solution__img-1 img,
    .solution__img-3 img {
        max-width: 300px
    }

    .development__content {
        grid-gap: 40px
    }

    .development__wrapper ul li {
        font-size: 16px;
        padding-bottom: 5px
    }

    .award__text,
    .award__text-2 {
        font-size: 130px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .service__item-6 ul {
        padding-bottom: 40px
    }

    .service__title-6 {
        font-size: 32px;
        padding-top: 15px
    }

    .service__btn-2#btn_wrapper,
    .service__btn-2.btn_wrapper {
        margin-top: 80px
    }

    .service__list-2 {
        gap: 100px 60px
    }

    .service__list-6 {
        padding-top: 60px;
        position: sticky;
        top: 40px
    }

    .service__content-3 {
        padding-left: 30px
    }

    .development__content,
    .service__detail-content {
        grid-gap: 30px
    }

    .service-v2.pt-110,
    .service-v3.pt-130,
    .service-v4 .pt-130,
    .service-v5.pt-140 {
        padding-top: 150px
    }

    .award__area.pb-140,
    .service__hero-2 {
        padding-bottom: 100px
    }

    .service__hero-2 .shape-1 {
        right: 30px;
        top: 200px;
        width: 100px
    }

    .service__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)
    }

    .service__hero-right-2 .title {
        font-size: 110px;
        padding-top: 30px
    }

    .service__hero-right-2 .title span {
        padding-left: 120px
    }

    .solution__mid {
        padding-left: 20px
    }

    .solution__mid p {
        padding-left: 50px
    }

    .solution__mid p::before {
        width: 40px
    }

    .solution__title {
        padding-top: 80px;
        font-size: 72px
    }

    .solution__img-1 {
        margin-left: 30px
    }

    .solution__img-1 img {
        max-width: 240px
    }

    .solution__img-3 img {
        max-width: 220px
    }

    .award__area .sec-title {
        max-width: 700px
    }

    .award__text,
    .award__text-2 {
        font-size: 120px;
        top: 120px
    }
}

.award__text-2 {
    -webkit-text-stroke: 1px #3a3a3a;
    color: transparent;
    top: 0;
    left: 30px
}

.award__text-8 a {
    display: block;
    max-width: 100%;
    line-height: 1.5;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--white);
    -webkit-transition: .3s;
    transition: .3s;
    overflow: hidden
}

.award__text-8 a span {
    position: absolute;
    top: 0;
    right: 0
}

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

.award__text-8 a span::after {
    position: absolute;
    left: -20px;
    -webkit-transform: translate(0, 0) rotate(-45deg)
}

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

.award__right>p {
    max-width: 390px;
    margin-left: 100px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-2);
    margin-bottom: 90px
}

.award__item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr .5fr .5fr;
    grid-template-columns: 1fr .5fr .5fr;
    border-bottom: 1px solid var(--gray-12);
    padding: 20px 0
}

.award__item:first-child {
    border-top: 1px solid var(--gray-12)
}

.award__item p {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--white)
}

.award__video-8 video {
    width: 100%;
    background-size: cover;
    position: relative;
    top: 75px
}

.awards__area-8 .about-sub-right {
    font-weight: 400;
    color: var(--black-3);
    padding-bottom: 10px;
    text-transform: capitalize
}

.awards__wrapper {
    padding-top: 15px;
    padding-left: 50px
}

.awards__content__title {
    color: var(--black-2);
    font-size: 80px;
    text-transform: uppercase;
    margin-bottom: 55px;
    line-height: 1
}

.awards__content__title a {
    color: var(--black-2);
    font-family: newYork;
    position: relative
}

.awards__content__title a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 10px;
    background-color: var(--black-2)
}

.awards__content p {
    font-size: 18px;
    width: 240px;
    margin-left: 170px;
    color: var(--black-2)
}

@media only screen and (min-width:1200px) and (max-width:1399px) {
    .awards__content__title {
        font-size: 60px
    }

    .awards__content p {
        margin-left: 130px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {

    .award__right>p,
    .awards__content p {
        margin-left: 60px
    }

    .awards__content__title {
        font-size: 48px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .service__item-6 ul {
        padding-bottom: 50px;
        -ms-grid-columns: 240px auto;
        grid-template-columns: 240px auto
    }

    .service__title-2,
    .service__title-3 {
        font-size: 24px;
        padding-bottom: 20px
    }

    .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__list-2 {
        gap: 90px 30px
    }

    .service__list-6 {
        padding-top: 60px;
        position: sticky;
        top: 60px
    }

    .service__list-6 li {
        padding-bottom: 20px
    }

    .service__list-6 li a {
        font-size: 20px
    }

    .service__detail-content {
        grid-gap: 30px
    }

    .service-v2.pt-110,
    .service-v3.pt-130,
    .service-v4 .pt-130,
    .service-v5.pt-140 {
        padding-top: 130px
    }

    .award__area.pb-140,
    .service__hero-2 {
        padding-bottom: 90px
    }

    .service__hero-2 .shape-1 {
        max-width: 80px;
        right: 10px;
        top: 200px
    }

    .service__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)
    }

    .service__hero-right-2 .title {
        font-size: 90px;
        padding-bottom: 30px;
        padding-top: 30px;
        padding-left: 0
    }

    .service__hero-right-2 .title span {
        padding-left: 90px
    }

    .solution__left {
        -ms-grid-column: 1;
        -ms-grid-column-span: 6;
        grid-column: 1/7
    }

    .solution__mid {
        padding-left: 0;
        grid-column: 7/-1;
        -ms-grid-row: 1;
        grid-row: 1
    }

    .solution__mid p {
        padding-left: 50px
    }

    .solution__mid p::before {
        width: 40px
    }

    .solution__right {
        padding-top: 0;
        grid-column: 1/-1;
        -ms-grid-row: 2;
        grid-row: 2;
        padding-bottom: 30px
    }

    .solution__title {
        padding-top: 60px;
        font-size: 60px
    }

    .solution__img-1 img,
    .solution__img-3 img {
        max-width: 260px
    }

    .development__area .pt-130 {
        padding-top: 150px
    }

    .development__img {
        padding-bottom: 15px;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: auto
    }

    .development__img img {
        bottom: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        position: unset
    }

    .award__area .sec-title {
        max-width: 550px
    }

    .award__text,
    .award__text-2 {
        font-size: 90px
    }

    .award__text-8 {
        width: 260px
    }

    .award__right>p {
        margin-left: 0;
        margin-bottom: 70px
    }

    .awards__wrapper {
        padding-left: 0
    }

    .awards__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .awards__content__title {
        font-size: 40px
    }
}

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

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

.awards__items img {
    max-width: 100px
}

.awards__items .date {
    font-weight: 400;
    text-align: right;
    color: var(--black-7)
}

@media only screen and (max-width:767px) {

    .development__wrapper,
    .service__title-2 {
        padding-bottom: 15px
    }

    .service__title-3 {
        display: block;
        font-size: 30px;
        padding-bottom: 20px
    }

    .service__title-6,
    .story__area .from-text span {
        font-size: 30px
    }

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

    .service__btn-3 {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 30px
    }

    .service__btn-3 #btn_wrapper,
    .service__btn-3 .btn_wrapper {
        margin-left: -15px
    }

    .service__list-3,
    .solution__btm {
        padding-top: 40px
    }

    .service__list-6,
    .solution__right {
        padding-top: 60px
    }

    .service__list-6 li {
        padding-bottom: 20px
    }

    .service__list-6 li a {
        font-size: 20px
    }

    .service3__img-wrap {
        display: none;
        position: unset
    }

    .service__detail .sec-title {
        font-size: 30px;
        padding-bottom: 30px
    }

    .service__detail-circle {
        display: none
    }

    .service__detail-img {
        margin-top: 30px
    }

    .service__detail-img img.sd-shape {
        right: 5px;
        bottom: -30px
    }

    .development__area .pt-130,
    .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
    }

    .service__hero-2 .shape-1 {
        width: 75px;
        right: 6px;
        top: 130px
    }

    .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
    }

    .service__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)
    }

    .service__hero-right-2 .title {
        font-size: 60px;
        padding-bottom: 20px;
        padding-top: 0;
        padding-left: 0
    }

    .service__hero-right-2 .title span {
        padding-left: 60px
    }

    .story__img-wrapper img {
        margin-bottom: 20px
    }

    .solution__mid {
        padding-left: 0;
        -ms-grid-row: 1;
        grid-row: 1
    }

    .solution__mid p {
        padding-left: 80px;
        padding-bottom: 50px
    }

    .solution__mid p::before {
        width: 70px
    }

    .solution__title {
        padding-top: 30px;
        font-size: 36px
    }

    .solution__img-1 img,
    .solution__img-3 img {
        max-width: 300px
    }

    .solution__img-1::after {
        left: 20px
    }

    .solution__btm li {
        padding-right: 30px
    }

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

    .development__img img {
        bottom: 0;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        position: unset
    }

    .award__left {
        margin-top: 50px;
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }

    .award__left img {
        bottom: -40px
    }

    .award__text,
    .award__text-2 {
        position: unset;
        font-size: 100px;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        line-height: .5
    }

    .award__text-8 {
        width: 220px;
        right: 10px;
        bottom: 10px
    }

    .award__text-8 a {
        padding-bottom: 5px
    }

    .award__text-8 .title,
    .awards__items .date,
    .awards__items .title {
        font-size: 16px
    }

    .award__right>p {
        margin-left: 0;
        -webkit-transform: translateY(-160%);
        transform: translateY(-160%)
    }

    .awards__wrapper {
        padding-left: 0
    }

    .awards__content__title {
        font-size: 36px;
        margin-bottom: 30px
    }

    .awards__content__title a::after {
        bottom: 3px
    }

    .awards__content p {
        margin-left: 60px;
        padding-bottom: 30px
    }

    .awards__items img {
        max-width: 60px
    }

    .dark .awards__area-8 .about-sub-right,
    .dark .awards__content p,
    .dark .awards__content__title,
    .dark .awards__content__title a,
    .dark .awards__items .title {
        color: var(--white)
    }

    .dark .awards__items .date,
    .dark .awards__items .number {
        color: var(--gray-2)
    }

    h3#abt_title {
        font-weight: 600
    }
}