

@media (max-width: 84em) {
  
  .box .heading h2{
    font-size: 3.6rem;
  }

  .banner .box .search a{
    font-size: 1.5rem;
  }

  .part1{
    
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4rem 5rem;
    margin: 2rem 2rem;
  }
  .part2{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4rem 5rem;
    margin: 2rem 2rem;
  }
  .part3{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4rem 5rem;
    margin: 2rem 2rem;
  }

  footer {
    font-size: 1.8rem;
  }
  footer h6{
    font-size: 2rem;
  }

}

@media (max-width: 75em) {

  html{
    font-size: 52.25%;
  }

  .header nav a{
    font-size: 1.5rem;;

  }

  .header .btn-reg a{
    font-size: 1.5rem;

  }
  
  .cards p{
    font-size: 1.9rem;
  }

  .svg{
  width: 7.5rem;
  height: 7.5rem;
  margin-left: 11rem;
  margin-bottom: 3.5rem;

  }

  .service-watch p{
    font-size: 2.2rem;
  }

  footer {
    font-size: 1.8rem;
  }
  footer h6{
    font-size: 2rem;
  }
  
}

@media (max-width: 62.5em) {

  html{
    font-size: 52.25%;
  }

  .service-card{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
  }

  .service-card .cards{
    width: 50%;
  }

  img{
    vertical-align: middle;
    border-style: none;
    width: 75rem;
    height: 55rem;
  }

  .table .features li{
    justify-content:space-around ;
    padding-left: 2rem;
  }

  .ultimate .head_tab h2{
    font-size: 2.5rem;
  }
  .aj_p p{
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
  }

  .premium .head_tab h2 {
    font-size: 2.5rem;
  }
  
  .aj_des p{
    font-size: 1.9rem;
  }

  .ml-auto, .mx-auto{
    padding-top: 2rem;
  }
}

@media (max-width: 52.5em) {

  html{
    font-size: 52.25%;
  }

  .header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }

  .box .heading h2{
    font-size: 4rem;
  }
  .box .heading p{
    font-size: 2rem;
  }

  .part1{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
  }
  .part1 .talk{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
  }
  .part1 .talk h1{
    font-size: 4rem;
  }
  .part1 .talk p{
    font-size: 2.6rem;
  }

  .part2{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
    flex-direction: column-reverse;
  }
  .part2 .talk{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 9rem;
    flex-direction: column;
  }
  .part2 .talk h1{
    font-size: 4rem;
  }
  .part2 .talk p{
    font-size: 2.6rem;
  }

  .part3{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5rem;
  }
  .part3 .talk{
    
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
  .part3 .talk h1{
    font-size: 3rem;
  }
  .part3 .talk p{
    font-size: 2.2rem;
  }
  .fa-brands, .fab{
    font-size: 2rem;
  }
  .ml-auto, .mx-auto h6{
    font-size: 2.2rem;
  }
  .ml-auto, .mx-auto{
    font-size: 2.2rem;
  }

  
}

@media (max-width: 32.5em) {

  html{
    font-size: 52.25%;
  }

  .header nav {
    display: none;
  }

  #hamburger-icon {
    display: block;
  }

  .box .heading h2{
    font-size: 4rem;
  }
  .box .heading p{
    font-size: 2rem;
  }

  .box .heading .search {
    font-size: 5rem;
    
  }

  .part1{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
  }

  .fa-brands, .fab{
    font-size: 3rem;
  }
  .ml-auto, .mx-auto h6{
    font-size: 2rem;
  }
  .ml-auto, .mx-auto{
    font-size: 2rem;
  }
  .banner img{
    height: 750px;
  }
  .search{
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column-reverse;
  }
  .banner .box .search a{
    font-size: 2.6rem;
  }

  .box .heading h2{
    font-size: 5rem;
  }
  .box .heading h4{
    font-size: 3.5rem;
  }
  .box .heading p{
    font-size: 2.5rem;
  }
  .part1 img{
    width: 380px;
    height: 220px;
    padding-right: 2rem;
  }
  .part2 img{
    width: 380px;
    height: 220px;
  }

  .part3 img{
    width: 380px;
    height: 220px;
    padding-left: 3rem;
  }
  .fa-brands, .fab{
    font-size: 2rem;
  }
  .ml-auto, .mx-auto h6{
    font-size: 2rem;
  }
  .ml-auto, .mx-auto{
    font-size: 2rem;
  }
  .service-card{
    padding: 0;
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
 
  .service-watch img{
    width: 380px;
    height: 220px;
  }
  .service-pic img{
    width: 380px;
    height: 220px;
  }

  
}
