@media (max-width: 768px) {
    #left-h h1 {
        font-size: 28px;
        width: 100%;
    }

    #left-h p {
        font-size: 18px;
        width: 100%;
    }

    .hero-buttons a {
        padding: 5px 10px;
        font-size: 16px;
    }

    .herostats {
        gap: 30px;
        padding: 30px 0px;
    }

    #right-h {
        height: auto;
    }

    header {
        height: auto;
    }

    .project {
        flex-direction: column;
        height: auto;
        gap: 30px;
    }

    .left-p {
        width: 100%;
    }

    .left-p img {
        height: auto;
        width: 100%;
    }

    .right-p {
        width: 100%;
    }

    .right-p h1 {
        font-size: 25px;
    }

    .p-button {
        width: 100%;
        gap: 20px;
    }

    .tools {
        flex-direction: column;
    }

    .cards {
        width: 72%;

    }

    .container {
        flex-direction: column;
        height: auto;
        gap: 30px;
    }

    .image-section {
        width: 100%;
    }

    .image-section img {
        width: 100%;
        height: auto;

    }

    .text-section {
        width: 100%;
    }

    .title {
        font-size: 32px;
    }

    .description {
        width: 98%;
    }

    .button {
        width: 73%;
        padding: 5px 10px;
    }

    #faq {
        flex-direction: column;
        width: 100%;
    }

    #right-f {
        padding-right: 0px;
    }

    .ques {
        width: 320px;
        font-size: 16px;
    }

    .ans {
        width: 320px;
    }

    .contact .main-c {
        width: 90%;
        flex-direction: column;
        gap: 20px;
    }

    .contact .left-c {
        width: 100%;
    }

    .contact .right-c {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
    }

    .contact .left-c input,
    .contact .left-c input[type="submit"] {
        font-size: 16px;
        padding: 10px;
    }



    #tech {
        height: auto;
        padding-bottom: 20px;
        font-size: 18px;
    }

    .tech {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .footer-container {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
}