﻿@media (max-width: 768px) {

    .swap-column-2 {
        order: 2;
    }

    .swap-column-1 {
        order: 1;
    }
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
/*    height: 207px;*/
    background: #fff;
    margin-bottom: 39px;
}
@media (min-width: 768px) {
    .carousel-inner {
        height: 215px!important;
    }
    }
.intro-section {
    background-image: url('../images/defaultscreenimage.jpg')!important;
    background-size: cover;
    padding: 2rem 0 0 0;
    width: 100%;
    height: 100%;
}
.display-2--intro {
    text-shadow: 1px -3px 1px #0000004f;
}
.display-2--description {
    color: #000000;
    text-shadow: 1px 1px 1px #ffffff4f;
    background: #ffffff4d;
    padding: 14px 13px;
    border-radius: 23px;
}
.owl-theme .owl-nav {
    margin-top: 65px!important;
}
    li a.nav-link {
        color: #000 !important;
    }

    dark .navbar-nav .nav-link.active {
        color: #000000;
    }

    img.vert-move {
        -webkit-animation: mover 1s infinite alternate;
        animation: mover 1s infinite alternate;
    }

    a.nav-link.text-white:hover {
        color: #0196be !important;
    }

    @-webkit-keyframes mover {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-10px);
        }
    }

    @keyframes mover {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-10px);
        }
    }

    .get-started {
        background: linear-gradient(0deg, rgb(133 140 153 / 10%), rgb(43 43 43 / 7%)), url('../images/bg get-started.in.png');
        background-size: cover;
    }

    p {
        margin: 0;
        font-weight: normal;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .popup_header {
        background: linear-gradient(45deg,#2BA2D0,#b992f0);
        color: white;
    }

    body {
        overflow-x: hidden;
    }

    .modal-body p {
        font-weight: 600;
        line-height: 1.5;
    }

    .modal-content {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    .firstbox-kyc {
        border-left: 17px solid #2ba2d6 !important;
        border-radius: 68px;
        border: 2px dashed #2ba2d6;
        border-right: none !important;
    }

        .firstbox-kyc::before {
            position: absolute;
            content: "";
            background: #2ba2d6;
            height: 22px !important;
            width: 22px !important;
            display: block;
            transform: rotate(45deg);
            left: -11px;
            top: 50%;
        }

    .firstbox-kyc1 {
        border-left: none !important;
        border-radius: 68px;
        border: 2px dashed #2ba2d6;
        border-right: 17px solid #2ba2d6;
    }

        .firstbox-kyc1::after {
            position: absolute;
            content: "";
            background: #2ba2d6;
            height: 22px !important;
            width: 22px !important;
            display: block;
            transform: rotate(45deg);
            right: -11px;
            top: 40%;
        }

    .circle-pop::before {
        content: "01";
        background: #2ba2d6;
        width: 42px;
        display: block;
        height: 43px;
        border-radius: 100%;
        color: white !important;
        position: absolute;
        top: 75px;
        text-align: center;
        padding-top: 3px;
        font-weight: 600;
        font-size: 24px;
    }

    .circle-pop1::before {
        content: "03";
        background: #2ba2d6;
        width: 42px;
        display: block;
        height: 43px;
        border-radius: 100%;
        color: white !important;
        position: absolute;
        top: 75px;
        text-align: center;
        padding-top: 3px;
        font-weight: 600;
        font-size: 24px;
    }

    .circle-pop2::before {
        content: "02";
        background: #2ba2d6;
        width: 42px;
        display: block;
        height: 43px;
        border-radius: 100%;
        color: white !important;
        position: absolute;
        top: 75px;
        text-align: center;
        padding-top: 3px;
        font-weight: 600;
        font-size: 24px;
        right: 21px;
    }

    .circle-pop3::before {
        content: "04";
        background: #2ba2d6;
        width: 42px;
        display: block;
        height: 43px;
        border-radius: 100%;
        color: white !important;
        position: absolute;
        top: 75px;
        text-align: center;
        padding-top: 3px;
        font-weight: 600;
        font-size: 24px;
        right: 21px;
    }

    @media (max-width: 576px) {
        .firstbox-kyc1::after {
            position: absolute;
            content: "";
            background: #2ba2d6;
            height: 22px !important;
            width: 22px !important;
            display: none !important;
            transform: rotate(45deg);
            right: -11px;
            top: 40%;
        }

        .firstbox-kyc::before {
            position: absolute;
            content: "";
            background: #2ba2d6;
            height: 22px !important;
            width: 22px !important;
            display: none !important;
            transform: rotate(45deg);
            left: -11px;
            top: 50%;
        }
    }

    @media (max-width: 991px) {
        .circle-pop::before {
            content: "01";
            background: #2ba2d6;
            width: 42px;
            display: block;
            height: 43px;
            border-radius: 100%;
            color: white !important;
            position: absolute;
            top: -5px;
            text-align: center;
            padding-top: 3px;
            font-weight: 600;
            font-size: 24px;
        }

        .circle-pop2::before {
            content: "02";
            background: #2ba2d6;
            width: 42px;
            display: block;
            height: 43px;
            border-radius: 100%;
            color: white !important;
            position: absolute;
            top: 0px;
            text-align: center;
            padding-top: 3px;
            font-weight: 600;
            font-size: 24px;
            right: 21px;
        }

        .circle-pop1::before {
            content: "03";
            background: #2ba2d6;
            width: 42px;
            display: block;
            height: 43px;
            border-radius: 100%;
            color: white !important;
            position: absolute;
            top: -5px;
            text-align: center;
            padding-top: 3px;
            font-weight: 600;
            font-size: 24px;
        }

        .circle-pop3::before {
            content: "04";
            background: #2ba2d6;
            width: 42px;
            display: block;
            height: 43px;
            border-radius: 100%;
            color: white !important;
            position: absolute;
            top: 0px;
            text-align: center;
            padding-top: 3px;
            font-weight: 600;
            font-size: 24px;
            right: 21px;
        }
    }




    .waves {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-bottom: -7px;
        min-height: 100px;
        max-height: 150px;
    }

    .wave-parallax > use {
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

        .wave-parallax > use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .wave-parallax > use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .wave-parallax > use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .wave-parallax > use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }

    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @media (max-width: 768px) {
        .waves {
            height: 40px;
            min-height: 40px;
        }

        .content {
            height: 30vh;
        }

        h1 {
            font-size: 24px;
        }
    }
    /*slider-header..............*/
    .gtco-testimonials {
        position: relative;
        margin-top: -18%;
    }

        .gtco-testimonials a {
            margin-bottom: 20px;
            border-radius: 50px;
        }

        .gtco-testimonials h2 {
            font-size: 30px;
            text-align: center;
            color: #333333;
            margin-bottom: 50px;
        }

    .owl-carousel {
        padding: 30px 0;
    }

    .owl-nav {
        display: none;
    }

    .owl-dots {
        text-align: center;
    }

        .owl-dots span {
            position: relative;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            display: block;
            background: #fff;
            border: 2px solid #01b0f8;
            margin: 0 5px;
        }

        .owl-dots .active span {
            background: #01b0f8;
            height: 12px;
            width: 12px;
            margin-bottom: -1px;
        }
    /*@media (max-width: 992px) {
    .card {
        height: 350px !important;
    }
}*/
    /*@media (max-width: 1200px) {
    .card {
        height: 370px !important;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1335px) {
    .card {
        height: 400px !important;
    }
}*/
    .card {
        background: #fff;
        background-image: url('../images/n12.png') !important;
        background-size: cover;
        box-shadow: 0 8px 30px -7px #c9dff0;
        margin: 12px 20px;
        padding: 0 10px;
        border-radius: 20px;
        border: 0;
        /*     height: 365px;*/
    }

        .card:hover {
            background: #fff;
            background-image: url('../images/n11.png') !important;
            background-size: cover;
            color: #fff !important;
        }

    .card-img-top {
        max-width: 100px;
        border-radius: 50%;
        margin: 15px auto 0;
        box-shadow: 0 8px 20px -4px #95abbb;
        width: 100px;
        height: 100px;
        background: #03A9F4;
    }

    .card h5 {
        color: #01b0f8;
        font-size: 21px;
        line-height: 1.3;
    }

        .card h5 span {
            font-size: 18px;
            color: #666666;
        }

    .card p {
        font-size: 18px;
        color: #000000;
        padding-bottom: 15px;
    }

    .active {
        opacity: 1;
        transition: all 0.3s;
    }

    .center {
        opacity: 1;
    }

        .center h5 {
            font-size: 24px;
        }

            .center h5 span {
                font-size: 20px;
            }

        .center .card-img-top {
            max-width: 120px !important;
            height: 120px !important;
        }

    a.nav-link.text-white {
        color: #000 !important;
    }

    @media (max-width: 767px) {
        .gtco-testimonials {
            margin-top: 20px;
        }

        .card-img-top {
            width: 80px;
            height: 80px;
        }

        .card h5 {
            font-size: 18px;
        }

        .card p {
            font-size: 16px;
        }
    }

    @media (max-width: 992px) {
        .owl-carousel .item {
            padding: 0 10px;
        }
    }

    .my-btn-n {
        padding: 14px 8px;
        background: #fff;
        box-shadow: 1px 2px 2px 2px #2ba2d64a;
        color: #2ba2d6 !important;
    }

    /*slider-header..............*/
