﻿
@media (min-width:1400px) {
    .road-img-section {
        padding-right: 100px;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .road-img-section img {
        width: 82%
    }

    .road-img-section-1 img {
        width: 82%
    }
    .roadmap-content{
        padding-top:15px;
    }

    .roadmap-content p {
        font-size: 14px;
        line-height: 17px;
    }
}
    @media (min-width:992px) {
        .w-lg-75 {
            width: 75% !important;
        }

        .w-lg-50 {
            width: 50% !important;
        }
        .mobile-road-map {
            display:none !important;
        }
    }

    @media (max-width:1280px) {
        .logo-marquee {
            max-width: calc(100vw - 140px);
        }

        .phase1 {
            left: 1%;
        }

        .phase2 {
            top: 130px;
            left: 17%;
        }

        .phase3 {
            bottom: 50px;
            left: 28%;
        }

        .phase4 {
            top: 20px;
            left: 43%;
        }

        .phase5 {
            right: 5%;
        }

        .phase6 {
            top: 120px;
            right: 1%;
        }
    }

    @media (max-width:1180px) {
        .custom-marqee-bar::after {
            bottom: -20px;
        }
    }


    @media (max-width:992px) {
        .hero-inner h1 {
            font-size: 44px;
            line-height: 58px;
        }
        .road-img-section, .road-img-section-1 {
            display: none !important;
        }
        .custom-marqee-bar::after {
            bottom: -45px;
        }

        .services-section h2 br {
            display: none;
        }
        .blockchain-banner.hero-slider {
            height: auto !important;
        }
        .web-track {
            display: none;
        }

        .mobile-track {
            display: block;
        }

        .track-heading h2 {
            margin-bottom: 0px;
        }

        .services-section-shape-1 {
            position: absolute;
            bottom: 3%;
            left: -80px;
            opacity: .5;
        }

        .track-heading h2, .testimonials h2 {
            font-size: 40px;
        }

        .timeline {
            overflow: hidden;
            padding: 86px 30px;
        }

        .services-section-shape-6 {
            display: none;
        }

        .start-track {
            top: -50px;
            left: auto;
            width: 115px;
            height: 115px;
            right: -10px;
        }

        .end-track {
            width: 115px;
            height: 115px;
            bottom: -49px;
            right: auto;
            left: -13px;
        }

        .timeline-container li:first-child::after {
            bottom: -50px;
            left: 124px;
        }

        .timeline-container li:nth-child(3)::after {
            bottom: -30px;
        }

        .hero-slider-1 .hero-inner h1 br {
            display: none;
        }

        .hero-inner p br {
            display: none;
        }

        .col-md-6:nth-child(1) .service-content1, .col-md-6:nth-child(2) .service-content1, .service-content1 {
            padding: 35px 35px 55px 20px;
        }

        .hero-slider.service-page-banner {
            height: auto !important;
        }

        .curve-line {
            transform: rotate(90deg);
            position: relative;
            top: 315px;
        }

        .timeline-wrapper {
            height: 980px;
        }

        .phase1 {
            left: 35%;
            top: 30px;
        }

        .phase2 {
            top: 110px;
            left: 65%;
        }

        .phase3 {
            bottom: 51%;
            left: 15%;
        }

        .phase4 {
            top: auto;
            left: 52%;
            bottom: 31%;
        }

        .phase5 {
            right: 53%;
        }

        .phase6 {
            top: auto;
            right: 13%;
            bottom: -2%;
        }
        .mobile-road-map{
            display:flex;
            justify-content:center;
        }
        .roadmap-icon {
            max-width: 67px;
            height: 67px;
            width: 100%;
            min-width: 67px;
        }
        .roadmap-icon img{
            max-width:35px;
        }
        .roadmap-container {
            padding: 80px 0px 100px 0px;
            position:relative;
        }
        .roadmap-row{
            position:static;
        }
        .roadmap-item{
            flex-direction:row;
        }
        .top-row .roadmap-item:nth-child(2) .roadmap-content p, .top-row .roadmap-item:nth-child(4) .roadmap-content p,
        .middle-row .roadmap-item:nth-child(3) .roadmap-content p, .bottom-row .roadmap-item:nth-child(3) .roadmap-content p,
        .bottom-row .roadmap-item:nth-child(1) .roadmap-content p {
            text-align: left;
        }
        .top-row .roadmap-item:nth-child(3) .roadmap-content p,
        .middle-row .roadmap-item:nth-child(2) .roadmap-content p, .middle-row .roadmap-item:nth-child(4) .roadmap-content p,
        .bottom-row .roadmap-item:nth-child(2) .roadmap-content p {
            text-align: right;
        }
        .top-row .roadmap-item:nth-child(2) {
            left: 29%;
            top: 0px;
        }
        .top-row .roadmap-item:nth-child(3) {
            left: 26%;
            top: 14%;
            flex-direction: row-reverse;
        }
        .top-row .roadmap-item:nth-child(4) {
            left: 26%;
            top: 24%;
        }
        .middle-row .roadmap-item:nth-child(2) {
            left: 25%;
            top: 35%;
            flex-direction: row-reverse;
        }
        .middle-row .roadmap-item:nth-child(3) {
            left: 26%;
            top: 47%;
        }
        .middle-row .roadmap-item:nth-child(4) {
            left: 25%;
            top: 56%;
            flex-direction: row-reverse;
        }
        .bottom-row .roadmap-item:nth-child(1) {
            left: 26%;
            top: 68%;
        }
        .bottom-row .roadmap-item:nth-child(2) {
            left: 25%;
            top: 78%;
            flex-direction: row-reverse;
        }
        .bottom-row .roadmap-item:nth-child(3) {
            left: 27%;
            top: 88%;
        }
        .roadmap-content {
            max-width: 270px;
            padding: 15px;
        }
        .roadmap-content p{
            font-size: 12px;
            font-weight: 500;
            line-height: 15px;
        }
    }

    @media (max-width:768px) {
        :root {
            --main-heading-fs: 36px;
            --sub-heading-fs: 19px;
            --heading-fs: 19px;
            --paragraph-fs: 15px;
        }
        .about-us {
            overflow: hidden;
        }
        .over-view h2{
            font-size:76px;
        }
        .over-view p{
            font-size:16px;
        }
        .logo-track .row {
            gap: 22px;
        }

        .logo-marquee {
            max-width: calc(100vw - 70px);
        }

        .custom-marqee-bar::after {
            bottom: -55px;
        }

        .cta-section {
            padding: 0 20px;
        }

        .hero-inner p {
            font-size: 16px !important;
        }

        .timeline::after {
            left: 20px;
        }

        .timeline-container {
            width: 100%;
            padding-left: 40px;
            padding-right: 25px;
        }

            .timeline-container.right {
                left: 0%;
            }

                .timeline-container.left::after,
                .timeline-container.right::after {
                    left: 10px;
                }

        .curve-line img {
            display: none;
        }

        .timeline-wrapper:before {
            content: '';
            position: absolute;
            width: 2px;
            height: 95%;
            background: #1AC68F;
            top: 20px;
            border: 0;
            left: 30px;
            z-index: 0;
        }

        .timeline-wrapper {
            height: auto;
            padding-left: 65px;
            margin-right: 15px;
        }

        .phase-box {
            position: static;
            margin-bottom: 25px;
        }

        .phase1:before, .phase2:before, .phase3:before, .phase4:before, .phase5:before, .phase6:before {
            content: '';
            position: relative;
            width: 18px;
            height: 18px;
            background: #1AC68F;
            top: -1px;
            border: 0;
            left: -63px;
            z-index: 0;
            display: inline-block;
            border-radius: 50%;
        }
        .big-card {
            padding: 20px 20px 20px 20px;
            background-position-x:center;
        }
        .offer-card.big-card h3{
            font-size:32px;
            line-height:38px;
        }
        .roadmap-title{
            font-size:24px;
            line-height:28px;
        }
        .top-row .roadmap-item:nth-child(2) {
            left: 21%;
            top: 5px;
        }

        .top-row .roadmap-item:nth-child(3) {
            left: 16%;
        }

        .top-row .roadmap-item:nth-child(4) {
            left: 18%;
        }

        .middle-row .roadmap-item:nth-child(2) {
            left: 16%;
            top: 35%;
            flex-direction: row-reverse;
        }

        .middle-row .roadmap-item:nth-child(3) {
            left: 18%;
            top: 47%;
        }

        .middle-row .roadmap-item:nth-child(4) {
            left: 16%;
            top: 56%;
            flex-direction: row-reverse;
        }

        .bottom-row .roadmap-item:nth-child(1) {
            left: 17%;
            top: 68%;
        }

        .bottom-row .roadmap-item:nth-child(2) {
            left: 16%;
            top: 78%;
            flex-direction: row-reverse;
        }

        .bottom-row .roadmap-item:nth-child(3) {
            left: 21%;
            top: 88%;
        }
    }

    @media (max-width:576px) {
        :root {
            --main-heading-fs: 32px;
            --sub-heading-fs: 18px;
            --heading-fs: 18px;
            --paragraph-fs: 14px;
        }
        .hero-inner h1 {
            font-size: 32px;
            line-height: 38px;
            margin-top: 35px;
        }

        .hero-slider-1 .hero-inner h1 {
            font-size: 32px;
            line-height: 38px;
            margin-top: 65px;
        }

        .contact-page h2 {
            font-size: 24px;
            line-height:1;
        }

        .hero-inner h1 br {
            display: none;
        }

        .custom-marqee-bar {
            margin-top: -20px;
            position: relative;
        }

            .custom-marqee-bar::after {
                bottom: -60px;
            }

        h2.heading {
            font-size: 32px;
            line-height: 36px;
        }

        .services-section {
            padding: 40px 15px
        }

        .service-content h5 {
            font-size: 16px;
        }

        .featured-products .card-featured .card-body {
            padding: 40px 30px 40px 30px;
        }
        .services-section {
            margin: auto 15px;
        }
        .service-list .service-item {
            padding: 15px 15px
        }
        .services-offer {
            padding-bottom: 0px !important;
        }

        .logo-track img {
            max-height: 24px;
        }

        .logo-track .row {
            gap: 0px;
        }

        .hero-slider-1 .hero-inner .d-flex.align-items-center.gap-1 p {
            font-size: 10px !important;
        }

        .navbar-brand img {
            max-width: 120px
        }

        .hero-bg-squre .square {
            width: 70px;
            height: 70px;
        }

        .hero-bg-squre {
            display: grid;
            grid-template-columns: repeat(20, 70px);
            grid-auto-rows: 70px;
            top: -25px;
            left: -25px;
        }

        .contact-page p {
            font-size: 14px !important;
        }

        .col-md-6:nth-child(4) .service-image img {
            left: -30px;
        }

        .col-md-6:nth-child(3) .service-image img {
            left: -40px;
        }

        .fs-24 {
            font-size: 20px !important;
        }

        .client-box {
            left: 40px;
        }

            .client-box h6 {
                font-size: 22px;
            }

            .client-box p {
                font-size: 15px;
            }
        .fs-16 {
            font-size: 14px !important
        }
        .cta-section .btn-light{
            font-size:14px;
        }
        .fs-18 {
            font-size: 16px !important
        }
        .service-desc{
            font-size:14px;
        }
        .service-title{
            font-size:18px;
        }
        .testimonial-text{
            font-size:16px;
        }
        .service-d-main-heading.hero-inner h1{
            margin-top:40px;
        }
        .offer-card.big-card h3 {
            font-size: 26px;
            line-height: 32px;
        }
        .offer-card.big-card p{
            font-size:14px;
        }
        .heading-color-strip span{
            width:50px;
            height:4px;
        }
        .hero-slider.hero-slider-1.slider-flag div {
            height: 100%;
            background-image: url('../images/slider-img.svg');
            background-position-x:-40px;
        }
            .hero-slider.hero-slider-1.slider-flag div img {
                display:none
            }

        .hero-slider.hero-slider-1.slider-flag {
            height: 620px !important;
        }
    }

@media (max-width:540px) {
    .top-row .roadmap-item:nth-child(2) {
        left: 12%;
        top: 15px;
    }

    .top-row .roadmap-item:nth-child(3) {
        left: 7%;
    }

    .top-row .roadmap-item:nth-child(4) {
        left: 8%;
        top: 25%;
    }

    .middle-row .roadmap-item:nth-child(2) {
        left: 6%;
        top: 36.5%;
        flex-direction: row-reverse;
    }

    .middle-row .roadmap-item:nth-child(3) {
        left: 8%;
        top: 47%;
    }

    .middle-row .roadmap-item:nth-child(4) {
        left: 6%;
        top: 58%;
        flex-direction: row-reverse;
    }

    .bottom-row .roadmap-item:nth-child(1) {
        left: 7%;
        top: 68%;
    }

    .bottom-row .roadmap-item:nth-child(2) {
        left: 6%;
        top: 78%;
        flex-direction: row-reverse;
    }

    .bottom-row .roadmap-item:nth-child(3) {
        left: 10%;
        top: 88%;
    }
    .roadmap-content p{
        font-size:10px;
        line-height:13px;
    }
    .hero-slider {
        height: 675px !important;
    }
}
    @media (max-width:450px) {
        .hero-btn a:last-child, .hero-btn a:first-child {
            padding: 24px 20px;
            font-size: 15px;
        }
    .hero-slider{
        height:620px !important;
        }
        .client-box {
            max-width: 340px;
        }
        .top-row .roadmap-item:nth-child(2) {
            left: 10%;
            top: 15px;
        }

        .top-row .roadmap-item:nth-child(3) {
            left: 5%;
        }

        .top-row .roadmap-item:nth-child(4) {
            left: 6%;
            top: 25%;
        }

        .middle-row .roadmap-item:nth-child(2) {
            left: 4%;
            top: 36.5%;
            flex-direction: row-reverse;
        }

        .middle-row .roadmap-item:nth-child(3) {
            left: 6%;
            top: 47%;
        }

        .middle-row .roadmap-item:nth-child(4) {
            left: 4%;
            top: 58%;
            flex-direction: row-reverse;
        }

        .bottom-row .roadmap-item:nth-child(1) {
            left: 5%;
            top: 68%;
        }

        .bottom-row .roadmap-item:nth-child(2) {
            left: 4%;
            top: 78%;
            flex-direction: row-reverse;
        }

        .bottom-row .roadmap-item:nth-child(3) {
            left: 8%;
            top: 88%;
        }
    }
