/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em){
    .blog-section {
        padding: 50px 20px;
       
    } 
}

@media (max-width: 75em) {
    html {
      /* 9px / 16px  */
      font-size: 56.25%;
    }
    .slide .content h1{
        font-size: 60px;
    }
}  
@media (max-width: 59em) {
    html {
      /* 8px / 16px = 0.5 = 50% */
      font-size: 50%;
    }
    .slide .content h1{
        font-size: 50px;
    }
    .about-vision, .about-mission, .about-history{
        padding: 15px 15px;
    }
    .ms-content {
       
        padding: 190px 0 120px 0;
    }
    .product-list {
       
        justify-content: space-around;
     
    }
    .card__data {
      
        margin-top: 18rem;
    }
    .wpcf7-form .contact-form {
       
        padding: 20px 20px;
       
    }
    .wpcf7-form .contact-cover {
     
        margin: 0px 10px;
    }
}
@media (max-width: 48em){
    .slide img {
        width:120%;

       
    }
    .slide .content {
       
        top: 60%;
        left: 5%;
        transform: translateY(-50%);
    }
    .responsive-br {
        display: none;
      }
      .slide .content h1{
        white-space: wrap;
      }
      .wpcf7-form .contact-form {
        display: block;
      }
      .blog-card{
        max-width: 100%;
      }
}
@media (max-width: 40em){
    .slide img {
        width:180%;

       
    }
    .brand-imgs {
        justify-content: center;
        gap: 3rem;
    }

  
}
@media (max-width: 27em){
    .wpcf7-form .contact-cover {
        width: 105%;
    }
    .header-buttons .book-btn {
        font-size: 13px;
        margin-left: 20px;
        padding: 12.5px 15px;
    }  
    .slide img {
        width: 265%;
    }
    .slide .content {
        top: 52%;
    }
    .footer-content {
        display: block;
        align-items: center;
        text-align: center;
    }
    .contact-info{
        align-items: center;
        text-align: center;   
    }
    .footer-section {
        width: 100%;
        margin-bottom: 5rem;
    }
    .service-category {
        padding: 6px
    }
    .service-category h3 {
        font-size: 15px;
        gap: 10px;
    }
    .slide .content h1 {
        font-size: 40px;
        line-height: 57px;
    }
}
@media (max-width: 23.5em){
    .slide img {
        width: 360%;
    }
    .wpcf7-form .contact-form {
        padding: 10px 10px;
    }
}
@media (max-width: 20em){
    .slide img {
        width: 410%;
    }
}