@media (max-width:1200px)
{
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }
}
@media (max-width:1110px)
{
  .text-title 
  {
    font-size: 3.8rem;
  }
  .text-detail{
    font-size: 1.6rem;
    padding: 1rem;
    width: 85%;
  } 
}

@media (max-width:944px)
{
  .header-text{
    width: 70%;
  }
    .btn-mobile-nav {
        border: none;
        background: none;
        cursor: pointer;
      
        display: block;
      }
      .mobile-display{
        display: block;
      }
      .right
      {
        display: none;
      }
      .left {
        display: none;
      }
      .section-hero
      {
        padding: 
        13rem 0 13rem 0;;
      }
      .hero{
        display: grid;
       grid-template-columns:1fr ;
       grid-template-rows: 2fr;
      }
      .hero .space 
      {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 4.8rem;
      }
      .section-hero img{
        display: none;
      }
      .section-hero .header-text
      {
        position: static;
        margin-bottom: 3rem ;
      }
      .about{
        display: none;
      }
      .about-header-mobile
      {
        font-size: 4.8rem;
      }
      .mobile-about .text-detail-mobile
      {
        top: 19%;
        left: 7%;
        width: 80%;
        font-size: 2.4rem;
        line-height: 1.5;
      }
      .card
      {
        min-height: 40vh;
      }
}

/* ipad */
@media (max-width:835px) {
  .mobile-nav a
  {
    margin: 15px 0;
    /* font-size: 4rem; */
  }
.hero-btn .btn-link:link,
.hero-btn .btn-link:visited
{
  padding: 2rem 8rem;
}
  .hero .pragraph
  {
    font-size: 1.8rem;
  }
 
  .about-header-mobile
  {
    font-size: 4.8rem;
  }
  .mobile-about .text-detail-mobile
  {
    top: 19%;
    left: 7%;
    width: 80%;
    font-size: 2.4rem;
  }
  .card
  {
    min-height: 25vh;
  }
  /* service */
  .item {
    transform: translateX(-4.2rem);
    transition: transform 0.4s ease;
    position: relative;
    cursor: pointer; 
}
.item:nth-child(1)
{
  transform: translateX(0);
  justify-content: center;
}
.item:nth-child(2)
{
  
  
}
.item:nth-child(3)
{
  transform: translateX(-8.4rem);
  justify-content: center;
}
.item:nth-child(4)
{
  transform: translateX(0);
  justify-content: center;
}
.item:nth-child(5)
{

    
}
/* HOVER */
.item:hover
{
  transform: translate(-4.2rem, 0);
}
.item:nth-child(1):hover {
  transform: translate(0, 0);
}
.item:nth-child(3):hover {
  transform: translate(-8.4rem, 0);
}
.item:nth-child(4):hover {
  transform: translate(0, 0);
}
.text-service
{
  font-size: 2rem;
}
.contact-us {
  clip-path: polygon(50% 0%, 100% 0, 100% 91%, 94% 100%, 0 100%, 0 10%, 6% 0);
}
.social-list-mobile
{
  display: none;
}
.social-list 
{
  column-gap: 3rem;
}
}

/* mobile  */
@media (max-width:500px)
{
  .hero-btn .btn-link:link,
  .hero-btn .btn-link:visited
  {
    padding: 1.5rem 3.5rem;
  }
  .about-section
  {
    padding:   13rem 0 13rem 0;
  }
 .header-text
 {
  letter-spacing: -2px;
  padding: 0;
  font-size: 4.8rem;
  font-weight: 500;

 }
 .header
 {
  padding: 0 3.4rem 0 3.4rem ;
 }
.about
{
  display: none;
}
.news-title
{
  margin-bottom: 2rem;
  padding-bottom:1rem;
}
.card 
{
  min-height: 45vh;
}
.footer-news
{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 4.8rem;
}
.news-pragraph p
 {
  width: 100%;
  font-size: 1.4rem;
 
 }
 .slide-container
{
  margin:0 5rem ;
  overflow: hidden;


 
}
.mobile-about .text-detail-mobile
{
  left: 10%;
  top: 30%;
  width: 70%;
  font-size: 1.4rem;
}
  .service-title
  {
    font-size: 3.2rem;
    margin-bottom: 3.8rem;
  }
  .items{
    grid-template-columns: repeat(2,22rem);
  }
  .item{

  }
.item:nth-child(2)
{
  transform: translateX(-3.6rem);
  
}
  .item:nth-child(3)
{
  transform: translateX(0);
  justify-content: center;
}
.item:nth-child(4)
{
  transform: translateX(-3.6rem);
  justify-content: center;
}
.item:nth-child(5)
{
  transform: translateX(0);
  justify-content: center;
}
.item:hover
{
  transform: translate(-3.6rem, 0);
}
.item:nth-child(1):hover {
  transform: translate(0, 0);
}
.item:nth-child(3):hover {
  transform: translate(0, 0);
}
.item:nth-child(4):hover {
  transform: translate(-3.6rem, 0);
}
.item:nth-child(5):hover {
  transform: translate(0, 0);
}

.text-service
{
  font-size: 1.4rem;
}
.Clients
{
 grid-template-columns: repeat(3,1fr);
 row-gap: 3rem;
 column-gap: 3rem;
}
.title-client
{
  font-size: 3.2rem;
  margin-bottom: 3.2rem;

}
.contact-us
{
  clip-path: polygon(6% 0, 100% 0, 100% 96%, 94% 100%, 0 100%, 0 4%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 3rem 2rem;
  height: 100%;
}
.contact-title
{
  font-size: 3.2rem;

}
.contact-deatil
{
  margin-bottom: 4.8rem;
}
.contact-footer
{
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  row-gap: 3rem;
}
.contact-location
{
  width: 80%;
}
.page-footer
{
  flex-direction: column;
  align-items: start;
  justify-content: start;

}
.copyright{
  margin-bottom: 1.4rem;
  font-size: 1.4rem;
}
.social-list
{
  display: none;
}
.social-list-mobile
{
  display: flex;
  gap: 2.4rem;

}
.social-list-mobile
{
  list-style: none;
}
.icon-mobile-footer
{
  font-size: 2.4rem;
}

}
@media (max-width:400px)
{
  .mobile-about .text-detail-mobile
  {
    font-size: 1.4rem;
    top: 32%;
    left: 11%;
    line-height: 1.4;
  }
  .card 
  {
    min-height: 35vh;
  }
  .title 
  {
    font-size: 1.4rem
  }
  .items{
    grid-template-columns: repeat(2,18rem);
  }

}
@media (max-width:375px)
{
  .mobile-about .text-detail-mobile
  {
    font-size: 1.3rem;
    line-height: 1.4;
  
  }

}