@media only screen and (max-width: 768px) {
    .container-xl {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .wrapper .navbar {
        display: none;
    }
    .menu .navbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding-top: 30px;
        gap: 15px;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        -o-transition-property: transform, opacity;
        transition-property: transform, opacity;
        transition-property: transform, opacity, -webkit-transform;
        -webkit-transition-duration: 0.25s;
        -o-transition-duration: 0.25s;
        transition-duration: 0.25s;
        opacity: 0;
        transform: translateX(100vw);
    }
    .menuActive .menu .navbar {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 1s;
        row-gap: 20px;
    }

    .menu .navbar .btn {
        font-size: 16px;
    }

    .navbar .btn.login {
        border-width: 1px;
    }

    .header .wrapper .btnWrapper {
        display: none;
    }

    .menu .btnWrapper {
        padding-top: 20px;
    }

    .menu .navbar a {
        color: #000;
        font-size: 18px;
    }

    .menu .navbar .btn.signUp {
        border-color: #000;
    }

    .navbar a.active {
        color: var(--primary);
        font-weight: 700;
    }

    .menuBtn {
        display: block;
    }

    .hero .heading {
        font-size: 45px;
    }

    .hero .desc {
        font-size: 18px;
    }

    .aboutApp .heading {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .aboutApp .desc {
        font-size: 16px;
        line-height: 25px;
        max-width: 100%;
    }

    .themeBtn {
        font-size: 16px;
    }

    .counter {
        font-size: 30px;
    }

    .counterSection .desc {
        font-size: 14px;
    }

    .indicatorRight {
        margin-left: 0;
    }

    .indicator .heading {
        font-size: 25px;
    }

    .tradeStats .box .number {
        font-size: 30px;
    }

    .tradeStats .box .desc {
        font-size: 14px;
    }

    .trade {
        padding-bottom: 100px;
    }

    .whyChoose .box .heading {
        font-size: 30px;
    }

    .whyChoose .box .desc {
        font-size: 18px;
        padding-bottom: 30px;
    }

    .tools .box .name {
        font-size: 16px;
    }

    .faqs.section_pad,
    .indicator,
    .aboutApp {
        padding-top: 60px;
    }

    .trade .heading,
    .sectionHeading {
        font-size: 30px;
    }
}

@media only screen and (max-width: 576px) {
    .counterWrapper {
        padding-bottom: 25px;
    }

    .faq-body {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .tabs .box {
        padding: 20px;
    }

    .tradeStats .box {
        margin-bottom: 20px;
    }

    .tradeStats .box .desc {
        max-width: 90%;
        margin-inline: auto;
    }

    .trade {
        padding: 50px 0px;
    }

    .whyChoose .box {
        padding: 30px 15px;
    }

    .tools {
        padding-top: 50px;
    }

    .whyChoose .box .heading {
        max-width: 100%;
        font-size: 25px;
    }

    .tools .box .imgWrapper {
        width: 65px;
        height: 65px;
    }

    .whyChoose .box .desc {
        font-size: 16px;
        max-width: 100%;
    }

    .aboutApp .appImg {
        padding-top: 50px;
        max-height: 350px;
    }

    .indicator .btnWrapper {
        justify-content: flex-start;
    }

    .tools .row {
        padding-inline: 12px;
    }

    .tools .row .col-md-4 {
        border: 1px solid #9f9e9e;
    }

    .tools .row .col-md-4:first-child,
    .tools .row .col-md-4:nth-child(4) {
        border-left: 1px solid #9f9e9e;
    }

    .tools .row .col-md-4:nth-child(1),
    .tools .row .col-md-4:nth-child(2),
    .tools .row .col-md-4:nth-child(3) {
        border-bottom: 0;
    }

    .trade .heading,
    .sectionHeading {
        padding-bottom: 30px;
    }

    .react-tabs__tab {
        font-size: 12px;
    }

    .react-tabs__tab-panel {
        font-size: 14px;
    }

    .hero .heading {
        text-align: left;
        font-size: 35px;
    }

    .hero .desc {
        max-width: 100%;
        text-align: left;
        font-size: 16px;
    }

    .tools .box {
        padding: 28px 0px;
    }

    .tools .row .col-md-4:nth-child(5) {
        border-bottom: 0;
    }

    .tools .row .col-md-4:nth-child(6) {
        border-bottom: 1px solid #9f9e9e;
    }

    .signalApp .heading {
        font-size: 22px;
    }

    .signalApp .wrapper {
        padding-bottom: 40px;
    }

    .signalApp {
        margin-bottom: -50px;
    }

    .trading .subHeading {
        font-size: 16px;
    }

    .trading {
        padding: 100px 0px 50px 0px;
    }

    .trading .heading {
        font-size: 25px;
    }

    .signalApp .heroImg {
        height: 350px;
        object-fit: contain;
        top: 10px;
    }

    .AppInfo {
        padding-top: 50px;
    }

    .AppInfo .box .imgWrapper {
        height: 300px;
    }

    .AppInfo .box .heading {
        font-size: 22px;
    }

    .signalApp .first {
        order: 1;
    }

    .signalApp .second {
        order: 2;
    }
    .signalApp .third {
        order: 3;
    }

    .info .boxWrapper {
        padding: 15px;
    }

    .info .boxWrapper .upperBox {
        padding: 20px;
    }

    .reviewDetail .imgWrapper {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }

    .reviewDetail .btnWrapper {
        padding-top: 20px;
        align-items: flex-start;
    }

    .pageTitle {
        font-size: 25px;
        padding-bottom: 15px;
    }

    .prosBox {
        padding: 15px;
        margin-bottom: 20px;
    }

    .tabs {
        padding-top: 30px;
    }

    .upperBox .br-1 {
        border-right: 0;
    }

    .postsWrapper {
        padding: 40px 12px;
    }

    .clearBtn {
        right: 20px;
    }

    .searchBox {
        padding: 60px 20px 30px;
    }

    .listingBox .innerBox {
        text-align: left;
        padding-bottom: 15px;
    }

    .rating {
        margin-left: 0;
    }

    .listingWrapper {
        padding: 20px 15px;
    }

    .listingBox .innerBox::after {
        display: none;
    }

    .listingBox {
        padding: 20px 15px;
    }

    .pageHeading {
        padding: 30px 0 30px;
    }

    .css-b62m3t-container {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mergeBox {
        padding-bottom: 50px;
    }

    .pb-200 {
        padding-bottom: 150px;
    }

    .whoWeAre h3 {
        text-align: left;
    }

    .about h2 {
        font-size: 30px;
    }

    .whoWeAre p {
        text-align: left;
    }

    .video iframe {
        height: 200px;
    }
}