@media screen and (max-width: 40rem) {
    body {
        margin: 0px auto;
    }
    /* <!-- navber --> */
    .navson1-parent{
        display: none;
    }
    nav{
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 26px;
    }
    /* <!-- banner 1--> */
    .banner1-continer{
        flex-direction: column-reverse;
        margin-bottom: 55px;
    }
    .banner1-son h1 {
        font-size: 24px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .banner1-son p {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }
    /* <!-- card part--> */
    .card-parent {
        
        margin-bottom: 40px;
    }
    .card-parent h1{
        margin-top: -30px;
        margin-bottom: 10px;
    }
    .card-parent > p{
        margin: 10px auto;
        padding: 0px 28px;
    }
    .card{
        grid-template-columns: repeat(2, 1fr);
    }
    .card-container{
        width: 176px;
        margin: 0px auto;
    }
    .cardimg {
        width: 92%;
        margin: 0px auto;
    }
    .cardimg img{
        width: 100%;
    }
    .btn-card{
        padding: 16px 22px;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    .card-container h4{
        margin-bottom: -15px;
        margin-top: 10px;
        font-size: 18px;
    }
    .card-container h3{
        font-size: 20px;
        margin-bottom: 10px;
    }

    /* <!-- About part--> */

    .badge{
        display: none;
    }
    .about-container{
        flex-direction: column;
        margin-bottom: 130px;
    }
    .about-container h1{
        font-size: 24px;
        margin: 0px auto;
        padding: 0px 10px;
        margin-bottom: 16px;
    }
    .aboutimg{
        width: 355px;
        margin: 0px auto;
    }
    .aboutimg img{
        width: 100%;
    }
    .about-container li{
        font-size: 14px;
        margin-bottom: 16px;
        padding: 0px 10px;
    }

    /* <!-- Deals part--> */

    .deals{
        margin-bottom: 44px;
    }
    .deals-parent{
        flex-direction: column;
        gap: 0px;
    }
    .deals-card3img {
        width: 90%;
        margin: 0px auto;
    }
    .dealsson-1 img{
        width: 90%;
    }
    .deals h1{
        font-size: 24px;
    }
    .deals p {
        font-size: 14px;
        padding: 0px 26px;
        margin-bottom: 45px;
    }
    .deals-card {
        top: 0px;
        left: 21px;
        padding: 37px 74px;
    }
    .deals-card2{
        top: 224px;
        left: 21px;
        padding: 37px 87px;
    }
    .deals-card3 h3{
        font-size: 20px;
    }
    .deals-card3 p{
        font-size: 16px;
    }
    .deals-card3{
        top: 0px;
        left: 20px;
        padding: 37px 82px;
    }

    /* <!-- Subscribe part--> */

    .subs h1 {
        padding: 100px 0px 14px 0px;
        font-size: 20px;
    }
    #email{
        padding: 8px 20px;
        width: 160px;
        height: 40px;
    }
    .subs-btn{
        padding: 19px 32px;
    }
    .email-container{
    padding-bottom: 65px;
    }
    /* footer */
    footer{
        flex-direction: column;
        padding: 10px;
    }
    .footerson2 , .footerson3 {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .footerson4 {
        margin-top: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid gray ;
    }
}

































@media screen and (max-width: 360px) {
    .cardimg {
        width: 87%;
    }
    .card-container{
        width: 170px;
        margin: 0px auto;
    }
    .deals-card {
        top: 0px;
        left: 21px;
        padding: 24px 48px;
    }
    .deals-card2{
        top: 200px;
        left: 20px;
        padding: 24px 63px;
    }
    .deals-card3{
        top: 0px;
        left: 20px;
        padding: 25px 58px;
    }
}