@media (min-width: 1400px) {
    .canvasChartM {
        width: 100%;
        height: 70vh;
    }

    .chart-section {
        width: 50%;
        height: 90%;
        padding: 30px 0;
    }
    
}
@media (min-width: 1280px) {

    .canvasChartM {
        width: 100%;
        height: 70vh;
    }

    .chart-section {
        width: 50%;
        height: 90%;
        padding: 30px 0;
    }
    .canvasChartM span {
        font-size: 35px;
        font-weight: 500;
    }
    
}

@media (max-width: 1080px) {
    /* .main-content {
        top: 120px;
    } */
}

@media (max-width: 1024px) {
    /* .main-content {
        top: 120px;
    } */

    .contentV {
        font-size: 26px;
    }

    .canvasChartM {
        width: 100%;
        height: 80vh;
    }

    .chart-section {
        width: 60%;
        height: 85%;
        padding: 30px 0;
    }
    .canvasChartM span {
        font-size: 33px;
        font-weight: 500;
    }
}

@media (max-width: 992px) {
    .main-content {
        /* top: 22rem; */
    }

    .canvasChartM {
        height: 60vh;
    }

    .chart-section {
        width: 80%;
        height: 80%;
    }
    #contactForm {
        padding: 2rem;
    }
    
}

@media (max-width: 768px) {

    .canvasChartM {
        width: 100%;
        height: 60vh;
    }

    .chart-section {
        width: 80%;
        height: 80%;
    }

    canvas {
        width: 95%;

        height: auto;

    }

    .highlight-text {
        font-size: 2rem;
    }

    .main-content {
        /* top: 280px; */
    }

    .main-content h1.contentV span:first-child {
        font-weight: 600;
        color: rgb(249, 109, 48);
        font-size: 2rem;
    }


    .main-content h1.contentV {
        font-size: 1rem;
    }

    .main-content h1.contentV span {
        display: block;

        font-size: 1.2rem;

    }

    .footer-col {
        width: 50%;
        margin-bottom: 30px;
    }
    .canvasChartM span {
        font-size: 30px;
        font-weight: 500;
    }
    #contactForm {
        padding: 2rem;
    }
    .banner h2 {
        font-size: 1rem;
        letter-spacing: 0.05rem;
    }
}


@media (max-width: 574px) {
    canvas {
        width: 90%;
        height: auto;

    }

    .footer-col {
        width: 100%;
    }

    /* .banner h2 {
        margin: 20px;
        font-size: 1rem;
    } */
    .banner h2 {
        font-size: 0.9rem;
        line-height: 1.2rem;
        letter-spacing: 0.02rem;
    }


    .main-content {
        /* top: 180px; */
    }

    .string-x {
        width: 100%;
        height: 105vh;
    }

    #particles-js {
        height: 105vh;
    }
    .canvasChartM span {
        font-size: 24px;
        font-weight: 500;
    }
    #contactForm {
        padding: 2rem;
    }
}


@media (max-width: 476px) {
    .main-content {
        /* top: 250px; */
        padding: 0 10px;

    }

    .canvasChartM {
        height: 50vh;
    }

    .chart-section {
        width: 100%;
        height: 90%;
    }

    .canvasChartM span {
        font-size: 17px;
        font-weight: 500;
    }
    #contactForm {
        padding: 1rem;
    }

}

@media (max-width: 390px) {
    .chart-section {
        width: 95%;
        height: 90%;
    }
    #contactForm {
        padding: 1rem;
    }
}

@media (max-width: 375px) {
    .main-content {
        /* top: 140px; */
        padding: 0 10px;
    }

    .chart-section {
        width: 89%;
        height: 90%;
    }
    #contactForm {
        padding: 1rem;
    }

    .main-content h1.contentV span:first-child {
        font-size: 30px;
    }

    .string-x {
        width: 100%;
        height: 115vh;
    }

    #particles-js {
        height: 115vh;
    }
    .banner h2 {
        font-size: 0.8rem;
        line-height: 1rem;
    }

}

@media (max-width: 350px) {
    .main-content {
        /* top: 180px; */
        padding: 0 10px;

    }
    #contactForm {
        padding: 1rem;
    }
}