@media (max-width: 600px) {  
    .hero{
        height: 50vh;
        justify-content: space-around;
    }
    .header{
        h1{
            font-size: 1.2rem;
            line-height: 1;
            margin-bottom: 10px;
        }
        p{
            font-size: 0.6rem;
        }
        button{
            padding: 7px 17px;
            font-size: 1rem;
            margin-bottom: 13px;
            border-radius: 5px;
        }
    }
    .logo{

        img{
            width: 100px;
            margin-bottom: 2px;
        }
        h1{
            font-size: 1.2rem;
        }
    }

    .features {
        .que{
            padding: 3rem;
            h1 {
                font-size: 1.5rem;
            }
        }
        .card {
            margin-bottom: 4rem;
            .card-data {
                h1{
                    font-size: 1rem;
                }
                p{
                    font-size: .7rem;
                }
            }
            .image-box {
                img{
                    width: 160px;
                }
            }
        }
    }

    .faq {
        padding: 3rem;
        padding-bottom: 4rem;
        h1{
            font-size: 1.5rem;
        }
    }

    .faq-card {
        margin-bottom: 4.5rem;
    }
    .faq-data {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    .faq-section {
        width: 100%;
    }
    .image-section{
        img{
            width: 250px;
            /* display: none; */
        }
    }
    .faq-itrm{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .faq-item .faq-question {
        font-size: .8rem;
    }
    .faq-item .faq-answer {
        width: 100%;
        font-size: .8rem;
        padding: 10px;
    }

    .contact-text {
        padding: 3rem;
        padding-bottom: 4rem;
        h1{
            font-size: 1.5rem;
        }
    }
    .contact-us {
        flex-direction: column;
        padding: 3rem;
        margin-bottom: 5rem;

        .image-container{
            width: 100%;
            img {
                width: 15rem;
            }
        }
        .form-container{
            width: 130%;
            margin-top: 20px;
            form{
                padding: 1.3rem;
            }
        }
    }
    #contactForm label{
        font-size: 1rem;
    }
    #contactForm input,
    #contactForm textarea{
        font-size: .8rem;
    }
    #contactForm .buttons{
        margin-top: .5rem;
        gap: 1rem;
    }
    #submit, #reset{
        font-size: 1rem;
    }

    .footer-top{
        flex-direction: column;

        .about-app{
            width: 100%;
            padding: 2rem;

            p{
                font-size: .75rem;
            }
            h3{
                font-size: 1rem;
            }
            .logo-2{
                h2{
                    font-size: 1rem;
                }
            }
        }
        .quick-links{
            width: 100%;
            padding: 2rem;
            h3{
                font-size: 1.2rem;
                margin-bottom: 10px;
            }
            .quick-links-list{
                justify-content: space-around;
                a{
                    font-size: 1rem;
                }
            }
            .social-media-handles{
                place-self: center;
                width: 60%;
            }
        }
    }
}