.intro-area {
    background-color: var(--section-bg);
    padding-top: 180px;
    padding-bottom: 180px
}

@media only screen and (max-width: 1199px) {
    .intro-area {
        padding-top:140px;
        padding-bottom: 60px
    }
}

.dark .intro-area {
    background-color: #171717
}

.intro-area .intro-grid {
    display: grid;
    grid-template-columns: 355px 532px 1fr
}

@media only screen and (max-width: 1919px) {
    .intro-area .intro-grid {
        grid-template-columns:355px 472px 1fr
    }
}

@media only screen and (max-width: 1399px) {
    .intro-area .intro-grid {
        grid-template-columns:355px 402px 1fr
    }
}

@media only screen and (max-width: 991px) {
    .intro-area .intro-grid {
        grid-template-columns:355px 1fr
    }
}

@media only screen and (max-width: 767px) {
    .intro-area .intro-grid {
        grid-template-columns:1fr
    }
}

.intro-area .intro-info .text {
    padding-bottom: 13px;
    color: var(--secondary)
}

.intro-area .highlight-text {
    font-size: 18px;
    font-weight: 400;
    max-width: 131px;
    line-height: 1.8;
    padding-bottom: 78px
}

@media only screen and (max-width: 1919px) {
    .intro-area .highlight-text {
        padding-bottom:28px
    }
}

@media only screen and (max-width: 1399px) {
    .intro-area .highlight-text {
        max-width:201px
    }
}

.intro-area .arrow-button {
    padding-bottom: 156px
}

.dir-rtl .intro-area .arrow-button {
    transform: rotateY(180deg)
}

@media only screen and (max-width: 1919px) {
    .intro-area .arrow-button {
        max-width:40px;
        padding-bottom: 46px
    }
}

@media only screen and (max-width: 1399px) {
    .intro-area .arrow-button {
        display:none
    }
}

.intro-area .counter-box {
    background-color: var(--white);
    padding: 35px;
    border-radius: 30px;
    max-width: 230px;
    position: relative
}

.dark .intro-area .counter-box {
    background-color: #222
}

@media only screen and (max-width: 1399px) {
    .intro-area .counter-box {
        padding:25px;
        border-radius: 15px
    }
}

.intro-area .counter-box::before {
    position: absolute;
    content: "";
    inset-inline-end: -68px;
    top: 50%;
    transform: translateY(-50%);
    width: 82px;
    height: 2px;
    background-color: var(--primary)
}

@media only screen and (max-width: 767px) {
    .intro-area .counter-box::before {
        display:none
    }
}

.intro-area .counter-title {
    font-size: 50px;
    font-weight: 700;
    padding-bottom: 10px
}

@media only screen and (max-width: 1919px) {
    .intro-area .counter-title {
        font-size:40px
    }
}

@media only screen and (max-width: 767px) {
    .intro-area .intro-content {
        order:2;
        margin-bottom: 30px
    }
}

.intro-area .intro-content .text {
    font-size: 24px;
    padding-bottom: 50px;
    font-weight: 300
}

@media only screen and (max-width: 1399px) {
    .intro-area .intro-content .text {
        font-size:20px
    }
}

.intro-area .intro-title {
    font-size:60px;
    padding-bottom: 18px;
    font-weight: 700;
    line-height: .92
}

@media only screen and (max-width: 1919px) {
    .intro-area .intro-title {
        font-size:47px
    }
}

@media only screen and (max-width: 1399px) {
    .intro-area .intro-title {
        font-size:40px
    }
}

@media only screen and (max-width: 991px) {
    .intro-area .intro-title {
        font-size:34px
    }
}

@media(max-width: 575px) {
    .intro-area .intro-title {
        font-size:46px
    }
}

.intro-area .intro-title .small-hypen {
    display: inline-block;
    height: 15px;
    width: 30px;
    background-color: #121212;
    border-radius: 3px;
    position: relative;
    top: -20px
}

@media only screen and (max-width: 1199px) {
    .intro-area .intro-title .small-hypen {
        height:10px;
        top: -15px
    }
}

@media only screen and (max-width: 991px) {
    .intro-area .intro-title .small-hypen {
        height:5px;
        top: -10px
    }
}

.intro-area .main-thumb {
    position: relative
}

@media only screen and (max-width: 1199px) {
    .intro-thumb{ order:1 ;}
    .intro-content{ order: 2;}
    .intro-info { order: 3;}
    .intro-area .main-thumb {
       /* display:none*/
       margin-bottom: 40px;
    }
}

.dir-rtl .intro-area .main-thumb img {
    transform: rotateY(180deg)
}

.intro-area .shape-1 {
    position: absolute;
    inset-inline-end: 0;
    bottom: 27%
}

.dir-rtl .intro-area .shape-1 {
    transform: rotateY(180deg)
}

@media only screen and (max-width: 1919px) {
    .intro-area .shape-1 {
        width:100px
    }
}

@media only screen and (max-width: 1399px) {
    .intro-area .shape-1 {
        bottom:17%
    }
}



.counter-area .section-header {
    display: grid;
    gap: 20px 70px;
    grid-template-columns: auto auto;
    justify-content: flex-end;
    margin-inline-end:80px;margin-bottom: 89px
}

@media only screen and (max-width: 1919px) {
    .counter-area .section-header {
        margin-inline-end:50px;
        margin-bottom: 59px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area .section-header {
        grid-template-columns:auto 690px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area .section-header {
        grid-template-columns:auto
    }
}

@media only screen and (max-width: 767px) {
    .counter-area .section-header {
        margin-inline-end:0;
        margin-bottom: 39px
    }
}

@media(max-width: 575px) {
    .counter-area .section-header {
        justify-content:center
    }
}

.counter-area .section-header .text {
    max-width: 251px
}

.counter-area .content-last {
    display: flex;
    align-items: center;
    gap: 20px 110px
}

@media(max-width: 575px) {
    .counter-area .content-last {
        flex-direction:column;
        align-items: flex-start
    }
}

.counter-area .section-title {
    font-size: 120px;
    max-width: max-content;
}

@media only screen and (max-width: 1919px) {
    .counter-area .section-title {
        font-size:100px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-area .section-title {
        font-size:46px
    }
}

@media only screen and (max-width: 991px) {
    .counter-area .section-title {
        font-size:40px
    }
}

@media only screen and (max-width: 767px) {
    .counter-area .section-title {
        font-size:35px
    }
}

.counter-area .section-subtitle {
    font-size: 18px;
    font-family: var(--font_plusjakartasans);
    color: var(--primary)
}

.counter-area .section-subtitle span {
    font-weight: 700
}

.counter-area .subtitle-wrapper {
    margin-top: 20px
}

.counter-area .text-wrapper {
    margin-top: 20px
}

.counter-item {
    width: 380px;
    height: 380px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center
}

@media only screen and (max-width: 1399px) {
    .counter-item {
        width:340px;
        height: 340px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-item {
        width:260px;
        height: 260px
    }
}

.counter-item .number {
    font-size: 100px
}

@media only screen and (max-width: 1399px) {
    .counter-item .number {
        font-size:80px
    }
}

@media only screen and (max-width: 1199px) {
    .counter-item .number {
        font-size:60px
    }
}

.counter-item .text {
    font-size: 20px;
    font-family: var(--font_plusjakartasans);
    color: var(--primary);
    margin-top: 15px
}

.counter-item .text span {
    font-weight: 700
}

.counter-wrapper {
    display: flex
}

@media only screen and (max-width: 767px) {
    .counter-wrapper {
        display:grid;
        grid-template-columns: auto auto
    }
}

@media(max-width: 575px) {
    .counter-wrapper {
        grid-template-columns:auto;
        justify-content: center
    }
}

.counter-wrapper>*:not(:first-child) {
    margin-inline-start:-70px}

@media only screen and (max-width: 1199px) {
    .counter-wrapper>*:not(:first-child) {
        margin-inline-start:-30px
    }
}

@media only screen and (max-width: 767px) {
    .counter-wrapper>*:not(:first-child) {
        margin-inline-start:0px
    }
}

.service-area .section-title {
    max-width: 800px;
    margin: 0 auto
}

.service-area .section-header {
    text-align: center
}

.service-area .services-wrapper-box {
    margin-top: 57px
}

@media only screen and (max-width: 1399px) {
    .service-area .services-wrapper-box {
        margin-top:47px
    }
}

@media only screen and (max-width: 1199px) {
    .service-area .services-wrapper-box {
        margin-top:37px
    }
}

.service-area .services-wrapper {
    display: grid;
    gap: 40px 45px;
    grid-template-columns: repeat(3, 1fr)
}

@media only screen and (max-width: 1199px) {
    .service-area .services-wrapper {
        gap:40px 30px
    }
}

@media only screen and (max-width: 991px) {
    .service-area .services-wrapper {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media(max-width: 575px) {
    .service-area .services-wrapper {
        grid-template-columns:repeat(1, 1fr)
    }
}

.service-box:hover .icon {
    transform: none;
    opacity: 1
}

.service-box .thumb img {
    width: 100%
}

.service-box .content {
    padding-top: 25px;
    padding-bottom: 23px;
   /* border-bottom: 1px solid var(--primary);*/
    display: grid;
    gap: 10px;
    grid-template-columns: 55px 1fr auto
}

@media only screen and (max-width: 1199px) {
    .service-box .content {
        grid-template-columns:38px 1fr auto;
        padding-top: 20px;
        padding-bottom: 13px
    }
}

.service-box .number {
    font-size: 18px;
    line-height: 1
}

.service-box .title {
    font-size: 24px;
    line-height: 1.25
}

@media only screen and (max-width: 1199px) {
    .service-box .title {
        font-size:20px
    }
}

.service-box .icon {
    transform: translate(-10px, 10px);
    opacity: 0;
    transition: all .5s
}

@media only screen and (max-width: 767px) {
    .service-box .icon {
        display:none
    }
}


.service-box .icon i {
    font-size: 20px;
    color: var(--primary);
    transform: rotate(-45deg)
}


.footer-area {
    background-color: var(--theme)
}

.dark .footer-area {
    background-color: #1b1b1b
}

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

@media only screen and (max-width: 1399px) {
    .footer-area .footer-area-inner {
        padding-top:80px;
        padding-bottom: 74px;
        grid-template-columns: 215px 190px 190px 315px
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-area-inner {
        padding-top:60px;
        padding-bottom: 54px;
        gap: 50px 60px;
        grid-template-columns: auto auto auto
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .footer-area-inner {
        grid-template-columns:auto auto
    }
}

@media(max-width: 575px) {
    .footer-area .footer-area-inner {
        grid-template-columns:auto
    }
}

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

.footer-area .footer-area-inner>*:first-child {
    grid-row: span 2;
    position: relative
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-area-inner>*:first-child {
        grid-row:auto
    }
}

.footer-area .footer-area-inner>*:first-child:after {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% + 400px);
    background-color: #202020;
    top: -200px;
    inset-inline-end: 0
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-area-inner>*:first-child:after {
        display:none
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-area-inner>*.newsletter {
        grid-column:span 2
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .footer-area-inner>*.newsletter {
        order:1
    }
}

@media(max-width: 575px) {
    .footer-area .footer-area-inner>*.newsletter {
        grid-column:auto
    }
}

.footer-area .footer-logo img {
    max-height: 42px
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-logo img {
        max-height:34px
    }
}

.footer-area .footer-widget-wrapper .title {
    color: var(--white);
    font-size: 30px;
    line-height: .73
}

@media only screen and (max-width: 1399px) {
    .footer-area .footer-widget-wrapper .title {
        font-size:24px
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-widget-wrapper .title {
        font-size:22px
    }
}

.footer-area .footer-nav-list {
    margin-top: 27px
}

.footer-area .footer-nav-list li {
    font-size: 18px;
    line-height: 30px;
    color: var(--white-2)
}

.footer-area .footer-nav-list li a:hover {
    color: var(--white)
}

.footer-area .footer-nav-list li .location {
    margin-bottom: 22px;
    display: inline-block
}

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

.footer-area .social-links li {
    line-height: 1
}

.footer-area .social-links li a {
    color: var(--white-2)
}

.footer-area .social-links li a:hover {
    color: var(--white)
}

.footer-area .newsletter-text {
    margin-top: 29px
}

.footer-area .newsletter-text .text {
    color: var(--white-2)
}

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

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

@media only screen and (max-width: 1399px) {
    .subscribe-form .input-field {
        padding:18px 25px
    }
}

.subscribe-form .input-field input {
    border: 0;
    background-color: #202020;
    color: var(--primary);
    width: 100%
}

.subscribe-form .input-field input::-moz-placeholder {
    color: var(--white-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1
}

.subscribe-form .input-field input::placeholder {
    color: var(--white-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1
}

.subscribe-form .input-field input:focus {
    outline: 0
}

.subscribe-form .input-field .subscribe-btn img,.subscribe-form .input-field .subscribe-btn i {
    color: var(--theme)
}

.dir-rtl .subscribe-form .input-field .subscribe-btn img,.dir-rtl .subscribe-form .input-field .subscribe-btn i {
    transform: rotateY(180deg)
}

.subscribe-form .input-field .icon {
    color: var(--white-2)
}

.subscribe-form .policy-field {
    margin-top: 20px
}

.subscribe-form .policy-field label {
    font-size: 14px;
    margin-inline-start:6px}

.subscribe-form .policy-field label span {
    color: var(--primary);
    font-weight: 500
}

.copyright-area {
    border-top: 1px solid #202020
}

.copyright-area-inner {
    padding: 32px 0;
    position: relative
}

.copyright-area-inner .shape-1 {
    position: absolute;
    bottom: 0;
    inset-inline-end: calc(100% - 300px)
}

@media only screen and (max-width: 991px) {
    .copyright-area-inner .shape-1 {
        display:none
    }
}

.dir-rtl .copyright-area-inner .shape-1 img {
    transform: rotateY(180deg)
}

.copyright-area .copyright-text .text {
    text-align: center;
    font-weight: 500;
    color: var(--white-2)
}

.copyright-area .copyright-text .text a {
    color: var(--white)
}




.header__logo img{ height: 40px;}

.offcanvas-3__menu .dropdown-menu {
    position: relative !important;
    z-index: 0;
    margin-bottom: 10px !important;
    background: #0000;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border: none;
}

.offcanvas-3__menu .dropdown-menu li a{ font-size: 16px;}