:root {
    --theme-color: #f58345;
    --body-bg: #ffffff;
    --body-color: #696969;
    --title-color: #16171A;
    --secondary-color: #F2EDEB;
    --smoke-color: #ECF0F8;
    --light-color: #f8f9fa;
    --black-color: #000000;
    --white-color: #ffffff;
    --yellow-color: #FFB303;
    --success-color: #28a745;
    --error-color: #dc3545;
    --border-color: #D8DDE1;
    --title-font: "Raleway", serif;
    --body-font: "DM Sans", serif;
    --icon-font: "Font Awesome 5 Pro";
    --main-container: 1320px;
    --container-gutters: 30px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 60px;
    --ripple-ani-duration: 5s
}

@media(min-width: 1922px) {
    .breadcumb-wrapper {
        background-size: cover;
        background-position: center top
    }
}

@media(min-width: 1921px) {
    .d-hd-none {
        display: none !important
    }
}

@media(min-width: 1700px) {
    .container-style1 {
        overflow: hidden;
        width: calc(var(--main-container) + 18rem)
    }

    .container-style1 .slick-list {
        padding-left: 0 !important
    }

    .d-hd-block {
        display: block !important
    }

    .d-hd-flex {
        display: block !important
    }

    .hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper {
        left: 40px !important
    }
}

@media(min-width: 1500px) {
    .gx-100 {
        --bs-gutter-x: 100px
    }

    .gx-60 {
        --bs-gutter-x: 60px
    }

    .gx-25 {
        --bs-gutter-x: 25px
    }

    .gx-45 {
        --bs-gutter-x: 45px
    }

    .gx-40 {
        --bs-gutter-x: 40px
    }

    .gx-80 {
        --bs-gutter-x: 80px
    }

    .gx-85 {
        --bs-gutter-x: 85px
    }

    .accordion-shape1 {
        display: none
    }

    .cta-box1 {
        padding: var(--section-space) 45px;
        margin-bottom: 0
    }

    .cta-box2 {
        margin-top: -1px;
        padding-top: var(--section-space);
        padding-bottom: var(--section-space)
    }

    .cta-box3 .cta-img {
        margin-left: 0;
        margin-right: 0;
        max-width: 40%
    }

    .cta-box3 .cta-img::after,
    .cta-box3 .cta-img::before {
        display: none
    }

    .cta-box3 .cta-right-img {
        max-width: 20%
    }

    .feature-style1 {
        padding: 15px 20px 20px 15px;
        position: relative
    }

    .feature-style1:first-child {
        padding-left: 15px
    }

    .feature-style1 .feature-icon {
        margin-bottom: 15px;
        max-width: 50px
    }

    .feature-style2 .feature-item {
        padding: 35px 25px 30px 25px
    }

    .slick-arrow {
        --arrow-horizontal: -20px
    }

    .main-menu a {
        font-size: 16px
    }

    .header-layout1 .header-logo {
        width: 270px;
        padding-right: 15px;
        padding-left: 15px
    }

    .header-layout1 .main-menu>ul>li {
        margin: 0 10px
    }

    .header-layout1 .main-menu>ul>li:last-child {
        margin-right: 0
    }

    .header-layout1 .main-menu>ul>li:first-child {
        margin-left: 0
    }

    .header-layout1 .menu-area,
    .header-layout1 .header-top {
        padding-left: 15px;
        padding-right: 15px
    }

    .header-icons button,
    .header-icons a {
        margin-left: 10px;
        width: 40px;
        height: 40px;
        line-height: 36px;
        font-size: 14px
    }

    .header-logo2 {
        padding-left: 0
    }

    .header-layout3 {
        position: relative;
        background-color: var(--title-color)
    }

    .header-layout3 .header-top {
        border-bottom: 1px solid hsla(0, 0%, 100%, .25)
    }

    .header-layout3 .menu-area {
        background-color: rgba(0, 0, 0, 0)
    }

    .header-layout3 .main-menu>ul>li {
        margin: 0 13px
    }

    .breadcumb-wrapper {
        padding: 100px 0 100px 0
    }

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

    .body-bg1 .bg-2 {
        max-width: 1050px
    }

    .bg1-home3 {
        background-size: cover
    }

    .service-style2 {
        padding: 20px 20px
    }

    .service-style2 .service-img {
        margin-right: 20px
    }

    .service-style2 .service-icon {
        width: 50px;
        height: 50px;
        line-height: 39px;
        padding: 5px
    }

    .service-style2 .service-icon img {
        max-width: 80%
    }

    .service-style2 .service-top {
        margin-bottom: 10px
    }

    .service-style2 .service-title {
        font-size: 24px;
        margin-bottom: 10px
    }

    .service-style2 .service-list li {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 10px
    }

    .service-style2 .service-list li img {
        top: 2px
    }

    .thumb-style1 .thumb-title {
        font-size: 18px
    }

    .thumb-style1 .thumb-img {
        margin-right: 15px
    }

    .avater-style1 {
        transform: rotate(0);
        padding: 80px;
        gap: 40px;
        margin: 0;
        width: 90%;
        height: auto;
        justify-content: stretch
    }

    .avater-style1 .avater img {
        transform: rotate(0)
    }

    .form-style1 {
        max-width: 100%;
        margin-bottom: 0
    }

    .form-style2 {
        padding: 40px 40px 15px 40px;
        margin-top: var(--section-space)
    }

    .gallery-style3 .gallery-content,
    .gallery-style1 .gallery-content {
        left: 25px;
        bottom: 15px
    }

    .gallery-style3 .gallery-title,
    .gallery-style1 .gallery-title {
        padding: 9px 15px;
        font-size: 18px
    }

    .gallery-style3 .gallery-label,
    .gallery-style1 .gallery-label {
        font-size: 12px;
        padding: 10px 13px
    }

    .gallery-style1.layout2:hover .gallery-content {
        left: 20px;
        bottom: 20px
    }

    .gallery-style2 .gallery-content {
        padding: 20px
    }

    .gallery-style2 .gallery-title {
        font-size: 20px
    }

    .gallery-style3 .gallery-content {
        left: 0;
        bottom: 0;
        padding: 30px
    }

    .gallery-style3 .gallery-title {
        padding: 7px 15px;
        font-size: 16px
    }

    .gallery-style3 .icon-btn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        --shape-width: -5px
    }

    .counter-style1 {
        width: 100%
    }

    .counter-style1 .counter-icon {
        margin-bottom: 13px
    }

    .counter-style1 .counter-number {
        font-size: 30px
    }

    .counter-style1 .counter-text {
        font-size: 16px
    }
}

@media(max-width: 1399px) {
    .slick-arrow {
        --arrow-horizontal: 40px
    }

    .sec-title2,
    .sec-title {
        font-size: 40px
    }

    .blog-style1 .blog-content {
        padding: 30px 20px 30px 20px
    }

    .blog-style1 .blog-meta {
        margin-bottom: 6px
    }

    .blog-style1 .blog-title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 10px
    }

    .blog-style2 .blog-body {
        padding: 20px
    }

    .blog-style2 .blog-meta span,
    .blog-style2 .blog-meta a {
        padding-right: 10px;
        padding-left: 10px;
        margin-right: 0;
        font-size: 14px
    }

    .blog-style2 .blog-meta span:before,
    .blog-style2 .blog-meta a:before {
        display: none
    }

    .blog-style2 .blog-meta .blog-date {
        font-size: 14px;
        margin: 0 10px 0 0
    }

    .blog-style2 .author-content {
        font-size: 16px
    }

    .comment-section {
        padding: 40px 40px 0px 40px
    }

    .vs-comments-wrap .vs-post-comment {
        padding: 30px 30px 30px 30px;
        margin: 30px 0 30px 0
    }

    .vs-comments-wrap .comment-avater {
        width: 100px;
        height: 100px;
        margin-right: 20px
    }

    .vs-comments-wrap .name {
        margin: -0.1em 15px 0 0;
        font-size: 20px
    }

    .comment-respond {
        padding: 30px
    }

    .comment-respond .form-control {
        height: 60px;
        font-size: 14px
    }

    .about-box1 .title-rotate {
        font-size: 20px;
        line-height: 30px;
        width: 120px;
        height: 270px
    }

    .about-box1 .title-rotate .text {
        transform: rotate(-90deg);
        display: block;
        width: 145px
    }

    .about-box1 .about-title {
        margin-bottom: 10px
    }

    .about-box1 .about-body {
        background-color: var(--smoke-color);
        padding: 30px 20px 10px 20px;
        margin-right: -170px
    }

    .counter-style2 .counter-item {
        padding: 25px 20px
    }

    .about-wrap1 {
        padding-top: var(--section-space);
        margin-top: 0
    }

    .avater-style1 {
        padding: 60px;
        gap: 20px;
        width: 100%
    }

    .testi-style3 .testi-text {
        font-size: 20px;
        margin-bottom: 20px
    }
}

@media(max-width: 1200px) {
    .hero-layout1 .ls-gui-element.ls-bottom-nav-wrapper {
        display: none !important
    }
}

@media(max-width: 1199px) {

    .h1,
    h1 {
        font-size: 40px
    }

    .h2,
    h2 {
        font-size: 36px
    }

    .h3,
    h3 {
        font-size: 30px
    }

    .h4,
    h4 {
        font-size: 24px
    }

    .h5,
    h5 {
        font-size: 20px
    }

    .h6,
    h6 {
        font-size: 16px
    }

    .container-style2 {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%
    }

    .accordion-inner1 {
        width: 100%;
        margin: 0;
        padding: var(--section-space) 40px
    }

    .cta-box1 .title-area {
        margin-bottom: 40px
    }

    .cta-box3 .cta-content {
        padding: var(--section-space-mobile) 0
    }

    .cta-box3 .cta-img {
        display: none
    }

    .cta-box3 .cta-right-img {
        max-width: 40%
    }

    .progress-style1 {
        max-width: 100%
    }

    .sec-title,
    .sec-title2 {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 15px
    }

    .title-area,
    .sec-btns {
        margin-bottom: 40px
    }

    .title-area.has-sec-btns {
        margin-bottom: 20px
    }

    .widget {
        --widget-padding-y: 30px;
        --widget-padding-x: 30px
    }

    .recent-post .post-title {
        font-size: 16px;
        line-height: 24px
    }

    .footer-widget {
        margin-bottom: 50px
    }

    .footer-widget .widget_title {
        font-size: 20px;
        margin-bottom: 30px;
        margin-top: 0
    }


    .header-links li {
        font-size: 14px;
        margin: 0 10px 0 0;
        padding: 0 15px 0 0
    }

    .widget-area {
        padding-top: 50px;
        padding-bottom: 10px
    }

    .footer-top {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .copyright-menu2 a {
        padding: 20px 30px
    }

    blockquote.vs-quote {
        padding: 25px 30px .1px 50px;
        margin: 35px 0 40px 0
    }

    blockquote.vs-quote cite {
        margin: 20px 0 -16px 0;
        padding: 8px 15px
    }

    .blog-style1 .blog-content {
        padding: 30px 30px 30px 30px
    }

    .blog-style1 .blog-meta a {
        padding-right: 10px
    }

    .blog-style1.layout2 {
        display: block
    }

    .blog-single {
        --blog-space-y: 40px;
        --blog-space-x: 30px
    }

    .blog-single .blog-title {
        font-size: 30px
    }

    .blog-style2 .blog-meta i {
        display: block;
        margin-right: 0;
        margin-bottom: 3px
    }

    .blog-style2 .blog-meta a,
    .blog-style2 .blog-meta span {
        text-align: center;
        line-height: 1.4
    }

    .blog-style2 .blog-meta .blog-date {
        line-height: .5;
        padding-bottom: 15px
    }

    .blog-style2 .author-content {
        font-size: 14px
    }

    .blog-style2 .blog-author {
        margin-bottom: 15px
    }

    .blog-style2 .blog-img {
        margin-bottom: 15px
    }

    .blog-style2 .inside-meta {
        flex: 1;
        line-height: 0;
        display: flex;
        justify-content: space-around
    }

    .vs-comments-wrap {
        padding: 40px 30px 10px 30px
    }

    .vs-comments-wrap .vs-post-comment {
        display: block;
        padding: 30px 20px 20px 20px
    }

    .vs-comments-wrap .star-rating {
        position: relative;
        top: 0;
        right: 0
    }

    .vs-comments-wrap .comment-top {
        display: block
    }

    .vs-comments-wrap .comment-avater {
        margin-right: 0;
        margin-bottom: 20px
    }

    .vs-comments-wrap .children {
        margin-left: 40px
    }

    .vs-comments-wrap .review .vs-post-comment {
        padding: 30px
    }

    .comment-respond .form-text {
        font-size: 14px
    }

    .media-style2 .media-icon {
        margin-right: 15px
    }

    .media-style2 .media-title {
        font-size: 18px;
        margin-bottom: 11px
    }

    .media-style3 {
        display: block;
        text-align: center;
        padding: 20px 25px 30px 25px
    }

    .media-style3:before {
        bottom: auto;
        top: 0;
        right: 0;
        width: auto;
        height: 60px
    }

    .media-style3 .media-label {
        margin-bottom: 10px
    }

    .media-style3 .media-icon {
        margin: 0 auto 20px auto
    }

    .media-style3 .media-title {
        line-height: 1.4;
        font-size: 20px
    }

    .media-style3:hover:before {
        height: 100%
    }

    .exp-box {
        padding: 15px 25px;
        max-width: 100%;
        margin-bottom: 20px
    }

    .exp-box .exp-year {
        font-size: 40px
    }

    .list-style2 ul {
        margin-bottom: 30px
    }

    .img-box3 .img-1 {
        height: 600px;
        clip-path: none;
        background-size: cover
    }

    .social-style2 .social-title {
        margin-right: 10px;
        font-size: 14px
    }

    .social-style2 a {
        font-size: 14px;
        margin-right: 10px
    }

    .about-box1 .about-body {
        margin-right: -80px;
        padding-bottom: 25px
    }

    .about-box1 .title-rotate {
        height: 100%
    }

    .counter-style2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    .counter-style2 .counter-item {
        border-right-width: 1px;
        border-bottom-width: 0px
    }

    .counter-style2 .counter-text {
        font-size: 14px
    }

    .brand-style1 .brand-container {
        max-width: var(--main-container);
        margin-left: auto;
        margin-right: auto;
        padding-left: calc(var(--container-gutters)/2);
        padding-right: calc(var(--container-gutters)/2)
    }

    .popup-search-box form {
        max-width: 600px
    }

    .thumb-style1 .slick-next i::before {
        content: ""
    }

    .thumb-style1 .slick-prev i::before {
        content: ""
    }

    .service-style2 .service-img {
        max-width: 300px
    }

    .service-details {
        padding: 40px 20px 10px 20px
    }

    .thumb-style1 {
        overflow: hidden;
        text-align: right
    }

    .thumb-style1 .slick-list {
        margin-left: -5px;
        margin-right: -5px;
        text-align: left
    }

    .thumb-style1::before {
        display: none
    }

    .thumb-style1 .thumb-item {
        margin: 0 5px;
        margin-bottom: 0;
        padding: 10px 10px
    }

    .thumb-style1 .slick-arrow {
        width: calc(50% - 5px);
        margin-top: 10px
    }

    .thumb-style1 .slick-arrow.slick-prev {
        top: auto;
        right: auto;
        left: 0;
        bottom: 0;
        position: absolute;
        margin: 0
    }

    .testi-style1 {
        max-width: 100%;
        margin-bottom: 30px
    }

    .testi-style1 .testi-author {
        max-width: 230px;
        padding: 0 30px 0 0;
        margin: 0 auto
    }

    .testi-style1 .testi-inner {
        padding: 20px 20px 0 20px
    }

    .testi-style1 .testi-rating {
        left: 0;
        text-align: center;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        bottom: 30px
    }

    .testi-style1 .testi-name {
        font-size: 16px
    }

    .avater-style1 {
        padding: 20px;
        gap: 10px
    }

    .package-style1 {
        padding: 0px 20px 50px 20px
    }

    .package-style1 .package-list li {
        margin-bottom: 5px;
        font-size: 14px
    }

    .package-style1 .package-price {
        margin: 0 20px 0 -20px;
        padding: 15px 10px 20px 10px
    }

    .package-style1 .package-price:after {
        right: -10px;
        left: 0
    }

    .package-style1 .package-price .price {
        font-size: 24px
    }

    .package-style1 .package-price .duration {
        font-size: 16px
    }

    .package-style1 .package-name {
        font-size: 20px
    }

    .package-style1 .package-list {
        margin: 0 0 31px 0
    }

    .package-style1 .vs-btn {
        font-size: 14px;
        padding: 17px 10px
    }

    .process-style1 {
        margin: 15px 0 50px 15px;
        padding: 30px 15px 28px 15px
    }

    .process-style1:before {
        left: -15px;
        top: 15px;
        right: 20px;
        bottom: -15px
    }
}

@media(max-width: 1024px) {
    .ls-layer .play-btn.style2 i {
        --icon-size: 60px
    }

    .ls-icon-btn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 17px
    }

    .ls-hero-btn .vs-btn {
        width: 160px;
        height: 45px;
        line-height: 45px;
        font-size: 12px
    }

    .ls-hero-btn .vs-btn.style4 {
        line-height: 41px
    }
}

@media(min-width: 992px) {

    .blog-style2:nth-child(odd) .blog-content,
    .blog-style2:nth-child(odd) .blog-body {
        flex-direction: column-reverse
    }

    .blog-style2:nth-child(odd) .blog-title {
        margin-top: 22px
    }

    .blog-style2:nth-child(odd) .blog-img {
        margin-bottom: 0;
        margin-top: 28px
    }

    .blog-style2:nth-child(odd) .blog-author {
        margin-bottom: 0
    }

    .brand-slider .main-logo img {
        width: 100px;
        height: 70px;
    }
}

@media(max-width: 767px) {

    .h1,
    h1 {
        font-size: 36px
    }

    .h2,
    h2 {
        font-size: 30px
    }

    .h3,
    h3 {
        font-size: 26px
    }

    .h4,
    h4 {
        font-size: 22px
    }

    .h5,
    h5 {
        font-size: 18px
    }

    .h6,
    h6 {
        font-size: 16px
    }

    .row:not([class*=gx-]) {
        --bs-gutter-x: 30px
    }

    .counter-inner1 {
        padding: var(--section-space-mobile) 15px calc(var(--section-space-mobile) - 30px) 15px
    }

    .scroll-btn {
        --btn-size: 40px;
        --extra-shape: -4px;
        right: 15px;
        bottom: 50px
    }

    .scroll-btn.show {
        bottom: 15px
    }

    .play-btn {
        --icon-size: 60px
    }

    .play-btn.style2 i {
        --icon-size: 60px
    }

    .scrollToTop {
        right: 20px
    }

    .scrollToTop.show {
        bottom: 20px
    }

    .sec-title,
    .sec-title2 {
        font-size: 26px;
    }

    .fs-20,
    .fs-md {
        font-size: 16px
    }

    .progress-style2 .progress-item {
        margin-bottom: 25px
    }

    .progress-style2 .progress-item:last-child {
        margin-bottom: 30px
    }

    .feature-style1::before {
        display: none
    }

    .feature-style2 {
        display: block
    }

    .feature-style2::before,
    .feature-style2::after,
    .feature-style2 .dot-shape {
        display: none
    }

    .feature-style2 .feature-item {
        display: block;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
        padding: 30px 20px
    }

    .feature-style2 .feature-icon {
        margin-right: 0;
        margin-bottom: 20px
    }

    .team-details .team-contact td {
        font-size: 14px
    }

    .team-details .team-contact th {
        width: 38%;
        font-size: 16px
    }

    .accordion-style1 .accordion-button {
        font-size: 16px;
        line-height: 1.3
    }

    .accordion-style1 .accordion-button:before {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 11px;
        right: 10px
    }

    .accordion-inner1 {
        padding: var(--section-space-mobile) 15px
    }

    .widget_title {
        font-size: 22px
    }

    .sidebar-area .comment-list .comment-author {
        font-size: 18px
    }

    .sidebar-area .comment-list .comment-text {
        font-size: 14px
    }

    .header-layout1 .header-logo {
        width: 190px
    }

    .header-links {
        text-align: center
    }

    .header-links li {
        font-size: 12px
    }

    .copyright-menu2 ul {
        border-bottom: none
    }

    .copyright-menu2 li:first-child a,
    .copyright-menu2 a {
        padding: 14px 20px 12px 20px;
        font-size: 12px;
        display: block;
        margin: 0;
        border-width: 0 1px 1px 1px
    }

    .copyright-menu2 li:last-child a {
        border-width: 0 1px 1px 1px
    }

    .breadcumb-wrapper {
        padding: 60px 0 60px 0;
        background-position: left center;
        text-align: center
    }

    .breadcumb-title {
        font-size: 30px
    }

    .breadcumb-menu {
        margin-top: 15px
    }

    .breadcumb-menu li,
    .breadcumb-menu a {
        font-size: 12px
    }

    .vs-pagination span,
    .vs-pagination a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 12px
    }

    .vs-pagination li:first-child a,
    .vs-pagination li:last-child a {
        padding: 0 10px
    }

    .post-pagi-box {
        display: block
    }

    .post-pagi-box .pagi-icon {
        margin-bottom: 15px
    }

    blockquote.vs-quote {
        padding: 20px 15px .1px 30px;
        margin: 35px 0 40px 0
    }

    blockquote.vs-quote cite {
        margin: 20px 0 -16px 0;
        padding: 7px 12px;
        font-size: 14px
    }

    blockquote.vs-quote::before {
        font-size: 1.8rem
    }

    .blog-single {
        --blog-space-y: 40px;
        --blog-space-x: 20px
    }

    .blog-single .blog-img .play-btn {
        --icon-size: 50px
    }

    .blog-single .blog-title {
        font-size: 24px;
        line-height: 1.3
    }

    .blog-single .blog-date {
        font-size: 14px;
        padding: 7px 14px;
        border-radius: 6px
    }

    .blog-style1 .blog-content {
        padding: 25px 20px 30px 20px
    }

    .blog-style1 .blog-title {
        margin-bottom: 5px;
        line-height: 1.6
    }

    .blog-style1 .blog-text {
        margin-bottom: 15px
    }

    .vs-comments-wrap {
        padding: 40px 20px 10px 20px
    }

    .vs-comments-wrap .children {
        margin-left: 20px
    }

    .vs-comments-wrap .name {
        margin: -0.1em 0 7px 0;
        font-size: 20px;
        display: block
    }

    .vs-comments-wrap .review-rating {
        position: relative;
        right: 0;
        top: 0;
        margin: 10px 0 10px 0;
        width: -moz-max-content;
        width: max-content
    }

    .vs-comments-wrap .review .vs-post-comment {
        padding: 30px 20px
    }

    .comment-respond {
        padding: 40px 20px 40px 20px
    }

    .comment-respond textarea,
    .comment-respond input {
        height: 50px;
        padding-left: 20px;
        padding-right: 20px
    }

    .comment-respond label {
        font-size: 14px
    }

    .comment-section {
        padding: 40px 20px 0px 20px
    }

    .ls-layer .play-btn.style2 i {
        --icon-size: 40px;
        --icon-font-size: 14px
    }

    .ls-icon-btn {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 15px
    }

    .ls-hero-btn .vs-btn {
        width: 145px;
        height: 40px;
        line-height: 40px;
        font-size: 12px
    }

    .ls-hero-btn .vs-btn.style4 {
        line-height: 38px
    }

    .error-img {
        margin-bottom: 30px
    }

    .img-box1 .img1 {
        width: 49%
    }

    .img-box1 .img2 {
        max-width: 49%
    }

    .img-box1 .img3 {
        padding: 0;
        width: 37%
    }

    .img-box1 .img4 {
        max-width: 100px
    }

    .img-box1 .img5 {
        max-width: 210px
    }

    .img-box2 .img-2 {
        position: absolute;
        width: 45%;
        margin-top: 30px
    }

    .img-box2 .img-2 img {
        width: 100%
    }

    .img-box2 .img-2::after,
    .img-box2 .img-2::before {
        display: none
    }

    .img-box2 .img-1 {
        max-width: 80%;
        padding-left: 20px
    }

    .img-box2 .img-3 {
        right: 0
    }

    .about-wrap1 {
        padding-top: var(--section-space-mobile)
    }

    .img-box3 .img-1 {
        height: 300px
    }

    .about-box1 {
        display: block
    }

    .about-box1 .title-rotate {
        height: auto;
        padding: 15px;
        width: 100%;
        margin-bottom: 20px
    }

    .about-box1 .title-rotate .text {
        width: auto;
        transform: rotate(0)
    }

    .about-box1 .about-body {
        text-align: center
    }

    .brand-style1 .brand-inner {
        padding: 40px 15px
    }

    .service-style1 .service-body {
        margin-top: -20px
    }

    .service-style2 {
        display: block;
        padding: 20px 15px 30px 15px
    }

    .service-style2 .service-img {
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px
    }

    .service-style2 .service-img img {
        width: 100%
    }

    .service-style2 .service-icon {
        width: 60px;
        height: 60px;
        line-height: 49px
    }

    .service-style2 .service-title {
        font-size: 20px
    }

    .service-style2 .service-list {
        display: block;
        margin-bottom: 30px
    }

    .service-style2 .service-list li {
        margin-bottom: 15px
    }

    .thumb-style1 .thumb-item {
        display: block;
        text-align: center
    }

    .thumb-style1 .thumb-img {
        margin-bottom: 10px;
        margin-right: 0;
        max-width: 100%
    }

    .thumb-style1 .thumb-title {
        font-size: 16px
    }

    .service-style4,
    .service-style3 {
        padding: 40px 20px 40px 20px
    }

    .service-style4 .service-icon,
    .service-style3 .service-icon {
        width: 70px;
        height: 70px;
        line-height: 70px
    }

    .service-style4 .service-icon img,
    .service-style3 .service-icon img {
        max-width: 40px
    }

    .service-style4 {
        min-height: 200px
    }

    .service-style4 .service-number {
        margin-bottom: 0
    }

    .service-bottom-text1 {
        margin-top: 30px
    }

    .testi-style1 .testi-author {
        padding: 0
    }

    .testi-style1 .testi-body {
        padding-top: 0
    }

    .testi-style1 .testi-inner {
        flex-direction: column-reverse;
        text-align: center;
        padding: 35px 15px 0 15px
    }

    .testi-style1 .testi-top {
        margin-bottom: 10px;
        display: block
    }

    .testi-style1 .testi-title {
        margin-bottom: 8px
    }

    .testi-style1 .testi-icon {
        margin-bottom: 20px
    }

    .testi-style1 .testi-rating {
        bottom: 20px;
        left: 50%;
        transform: translateX(-60%)
    }

    .testi-style2 {
        padding: .1px 15px 30px 15px
    }

    .testi-style2 .testi-degi {
        margin-bottom: 15px
    }

    .testi-style2 .avater {
        width: 70px;
        height: 70px
    }

    .testi-style2 .avater-area {
        margin-bottom: 20px
    }

    .testi-style2 .avater-area {
        width: 285px;
        margin: -45px auto 26px auto
    }

    .form-style1 {
        padding: 20px 15px 20px 15px
    }

    .form-style2 {
        padding: 40px 15px 40px 15px;
        margin-top: var(--section-space-mobile)
    }

    .form-style4 {
        padding: 40px 15px
    }

    .gallery-style3 .gallery-title,
    .gallery-style1 .gallery-title {
        padding: 6px 12px;
        font-size: 16px
    }

    .gallery-style3 .gallery-label,
    .gallery-style1 .gallery-label {
        font-size: 11px;
        padding: 7px 10px
    }

    .gallery-style1 .gallery-content {
        left: 15px;
        bottom: 5px
    }

    .gallery-style3 {
        grid-template-columns: repeat(1, 1fr)
    }

    .project-meta-box {
        padding: 30px 20px
    }
}



@media only screen and (max-width: 1600px) {
    .container-fluid.px-0 {
        padding-left: 15px !important;
        padding-right: 15px !important
    }

    .container-fluid.px-0 .row {
        margin-left: -15px !important;
        margin-right: -15px !important
    }
}

@media(max-width: 991px) {

    .space,
    .space-top {
        padding-top: var(--section-space-mobile)
    }

    .space,
    .space-bottom {
        padding-bottom: var(--section-space-mobile)
    }

    .space-extra,
    .space-extra-top {
        padding-top: calc(var(--section-space-mobile) - 30px)
    }

    .space-extra,
    .space-extra-bottom {
        padding-bottom: calc(var(--section-space-mobile) - 30px)
    }

    .space-top-md-none {
        padding-top: 0
    }

    .slick-arrow {
        --icon-size: 40px;
        margin-right: 40px
    }

    .slick-arrow.slick-next {
        margin-right: 0;
        margin-left: 40px
    }

    .slick-dots {
        margin: 8px 0 38px 0
    }

    .cta-box2 {
        padding-bottom: var(--section-space-mobile);
        padding-top: var(--section-space-mobile)
    }

    .cta-box3 {
        display: block;
        text-align: center
    }

    .cta-box3 .cta-content {
        padding-bottom: 40px
    }

    .cta-box3 .cta-right-img {
        max-width: 100%
    }

    .cta-box1 {
        padding: var(--section-space-mobile) 15px
    }

    .team-details-img {
        margin-bottom: 40px;
        padding: 20px
    }

    .team-details .team-degi {
        margin-bottom: 25px
    }

    .team-details .team-desc p {
        margin-top: 23px
    }

    .sidebar-area {
        padding-top: 30px
    }

    .wp-block-tag-cloud a,
    .tagcloud a {
        padding: 10.5px 18px
    }

    .footer-widget .widget_title {
        font-size: 22px
    }

    .header-layout2 .menu-area {
        margin: 0
    }

    .header-layout2 .menu-area:before {
        display: none
    }

    .copyright-text {
        font-size: 14px
    }

    .copyright-menu li {
        padding-right: 0;
        margin-right: 10px
    }

    .copyright-menu li::after {
        display: none
    }

    .copyright-menu a {
        font-size: 14px
    }

    .copyright-wrap {
        padding: 20px 0
    }

    .copyright-menu2 a {
        padding: 15px 20px;
        font-size: 14px
    }

    .footer-layout2 .widget {
        margin-bottom: 30px
    }

    .breadcumb-wrapper {
        padding: 80px 0 80px 0
    }

    .breadcumb-title {
        font-size: 40px
    }

    .post-pagi-box .pagi-title {
        font-size: 16px;
        margin: 0 0 10px 0px
    }

    .post-pagi-box .pagi-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px
    }

    .post-pagi-box .post-pagination {
        padding: 25px 0
    }

    .media-style2 .media-icon {
        margin-right: 10px;
        max-width: 30px
    }

    .media-style2 .media-title {
        font-size: 16px
    }

    .social-style1 a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-right: 2px
    }

    .media-style3 .media-title {
        line-height: 1.4;
        font-size: 18px
    }

    .social-style2 .social-title {
        display: none
    }

    .about-box1 .about-body {
        margin-right: 0
    }

    .counter-style2 {
        display: block
    }

    .counter-style2 .counter-item {
        border-width: 0 0 1px 0;
        padding: 25px 20px
    }

    .contact-map iframe {
        height: 400px
    }

    .avater-style1 {
        margin-bottom: 40px;
        grid-template-columns: repeat(4, auto)
    }

    .testi-style3 .testi-text {
        font-size: 16px
    }

    .form-style3 {
        max-width: 100%
    }

    .form-style2 {
        padding: 40px 40px 15px 40px;
        margin-top: var(--section-space-mobile)
    }

    .form-style6 {
        padding: 40px 20px;
        margin-top: 25px
    }

    .gallery-style2 .gallery-content {
        padding: 20px
    }

    .gallery-style2 .gallery-title {
        font-size: 20px
    }

    .gallery-style3 {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr)
    }

    .gallery-style3 .gallery-item {
        width: 100%;
        height: 300px
    }

    .gallery-style3 .gallery-item.active {
        width: 100%
    }

    .gallery-style3 .gallery-content {
        padding: 15px
    }

    .project-meta-box {
        width: 100%
    }
}

@media(max-width: 575px) {
    .widget {
        padding: 30px 20px
    }

    .header-links ul {
        line-height: 0
    }

    .header-links li {
        display: inline-block;
        padding-right: 0;
        margin: 0 10px 0 0;
        line-height: 1;
        font-size: 10px
    }

    .header-links li i {
        margin-right: 4px
    }

    .header-links li::after {
        display: none
    }

    .header-logo {
        max-width: 200px
    }

    .header-logo2 {
        padding-right: 0;
        border: none
    }

    .footer-social a {
        height: 40px;
        width: 40px;
        font-size: 16px;
    }

    .brand-slider .main-logo img {
        width: 90px;
        height: 60px;
    }

    .counter-style1 {
        text-align: center;
        position: relative;
        padding: 24px 15px 24px 15px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .footer_wrapper .footer-main a {
        color: #fff;
        text-decoration: none;
        font-family: var(--font-text);
        font-size: 11px;
        line-height: 1.6;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .about-main-img img {
        width: 100%;
        height: auto;
    }

    .vs-btn {
        color: var(--white-color);
        background-color: var(--theme-color);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding: 12.5px 20px;
    }

    .header-top{
        display: none;
    }
}

@media(max-width: 400px) {
    .vs-menu-wrapper .vs-menu-area {
        width: 100%;
        max-width: 270px
    }

    .vs-mobile-menu>ul {
        padding: 0 20px
    }

    .sec-title,
    .sec-title2 {
        font-size: 21px;
    }

    .vs-btn {
        color: var(--white-color);
        background-color: var(--theme-color);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding: 12.5px 12px;
    }
}

@media (max-width:330px) {
    .vs-btn {
        color: var(--white-color);
        background-color: var(--theme-color);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        padding: 12.5px 10px;
    }
}