@media(max-width:1246px){
    htlml{
        font-size: 95%;
    }
    .hero{
        flex-direction: column;
        text-align: center;
    }
    .question{
        flex-direction: column;
        text-align: center;
        gap: 4rem;
    }
}

@media(max-width:1100px){
    html{
        font-size: 90%
    }

    footer .logo{
        text-align: center;
    }
    footer .footer-links{
        flex-direction: column;
        gap: 3rem;
    }

    .review .container{
        padding: 3rem;
    }
    .review .br{
        display: none;
    }

    .review .rew{
        justify-content: center;       
    }
}

@media(max-width:990px){
    html{
        font-size: 85%;
    }
    .features .features-cards{
        flex-direction: column;
        gap: 2rem;
    }
      .hero .img  {
   
       max-width:100% ;
    }

    .hero img{
        width: 100%;
        object-fit: cover;
    }

   .question .img  {
       
       max-width:100% ;
    }

    .question img{
        width: 100%;
        object-fit: cover;
    }
}


@media(max-width:768px){
    html{
        font-size: 80%;
    }
     .hero{
        margin-top: 2rem;
        padding: 1rem;
    }
    .product .container{
        margin: 1.5rem auto
    }

    .features{
        margin-top: 1.5rem;
        margin-bottom: 1.5em;
    }
    .question{
        margin-top: 2rem;
        padding: 1rem;
    }

  
}
@media (max-width:560px) {
    .hero .content h1{
        font-size: 2.5rem;
    }
    .question .content h1{
        font-size: 2.5rem;
    }

    footer input[type="button"]{
        display: block;
        width: 100%;
        margin-top: 2rem;
    }
}
@media(max-width:480px){
    html{
        font-size: 75%;
    }
     .hero .content h1{
        font-size: 2rem;
    }
    
     .question .content h1{
        font-size: 2rem;
    }

    footer .footer-links .links{
       text-align: center;
       display: flex; flex-direction: column;
    }

    .product .container{
        padding-top: 2rem ;
    }
}

@media(max-width:360px){
    html{
        font-size: 70%;
    }
}

@media (max-width:260px) {
    html{
        font-size: 40%;
    }
}