.work{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: center;
  transform: translateY(10em);
  justify-content:center;
  
  
  
  @media screen and (min-width: 442px) and (max-width: 767px) {
    transform: translateY(2em);
    
  }
  @media screen and (min-width: 200px) and (max-width: 441px) {
    transform: translateY(2em);
    
  }
  
  
}

.work h2{
  font-size:25px;
  font-weight: bolder;
}

 .sosial-media{
   display: flex;
   flex-direction:row;
   margin-top:-1em;
   gap:1em;
   
   @media screen and (min-width: 992px) and (max-width: 1500px) {
     justify-content:left;
     text-align:left;
     
    }
    @media screen and (min-width: 767px) and (max-width: 992px) {
    justify-content:center;
    text-align:center;
     
   }
   @media screen and (min-width: 200px) and (max-width: 767px) {
    justify-content:center;
    text-align:center;
     
   }
}

.footer-widget{
   @media screen and (min-width: 992px) and (max-width: 1500px) {
    margin-top: 5em;
    justify-content:left;
    text-align:left;
  }
  @media screen and (min-width: 200px) and (max-width: 992px) {
    margin-top: 2em;
    justify-content:center;
    text-align:center;

     
   }
}

   .kenapa h4{
  @media screen and (min-width: 387px) and (max-width: 767px) {
    font-size: 18px;

     
   }
  }
   .kenapa h4{
  @media screen and (min-width: 100px) and (max-width: 387px) {
    font-size: 15px;

     
   }
}

.list ul{
  display: flex;
  flex-direction: column;
}

.list,.list li,.list a{
  display: flex;
  flex-direction: row;
  gap: 1em;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  width: 100%; 

  @media screen and (min-width: 992px) and (max-width: 1500px) {
    justify-content: center;
    text-align: center;
    align-items: center;
     
   }
   @media screen and (min-width: 200px) and (max-width: 992px) {
    justify-content: center;
    text-align: center;
    align-items: center;
     
   }
}

footer .copyright-text p {
  margin-top: 50px;
  margin-bottom: 0px;
  color: #fff;
  @media screen and (min-width: 992px) and (max-width: 1500px) {
    text-align: left;
   }
   @media screen and (min-width: 200px) and (max-width: 992px) {
    text-align: center;
   }
}

.service-line{
  text-align: center;
}

.service-line h4{
  font-weight: bold;
  color: #fff;
}

@media screen and (min-width: 992px) and (max-width: 1500px) {
  .service-line {
    font-size: 40px;
    text-align: center;
    padding: 0;
    margin: 0;
    width: auto;
  }

  .service-line h4 {
    padding: 0;
    margin: 0 auto; /* Tengah secara horizontal */
    text-align: center;
    
  }
}


 @media screen and (min-width: 441px) and (max-width: 992px) {
  .service-line{
    font-size: 35px;
    text-align: center;
  }
  
  .service-line h4{
    width:100%;
  }
 }
 @media screen and (min-width: 200px) and (max-width: 441px) {
  .service-line{
    font-size: 15px;
    text-align: center;
  }
  
  .service-line h4{
    width:100%;
  }
 }


.service-item {
    position: relative;
    z-index: 1;
    padding: 30px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 10px;
    border-top-right-radius: 40px;
    transition: all .3s;
    height: 280px;

    @media screen and (min-width: 992px) and (max-width: 1439px) {
        max-width: 1279px !important;
        width: auto !important;
        height: 330px;
    }
    
    @media screen and (max-width: 991px) {
        max-width: 959px !important;
        width: auto !important;
        height:auto !important;
      }
  }
  
  .service-item .icon {
    margin-left: 0px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    transition: all .3s;
  }
  
  .service-item h4 {
    transition: all .3s;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  .service-item p {
    transition: all .3s;
    font-size: 15px;
    color: rgb(33, 33, 33);
    margin-bottom: 20px;
  }
  
  .service-item:hover h4,
  .service-item:hover p,
  .service-item:hover .text-button a {
    color: #fff;
  }
  
  
  .service-item:hover {
    background-image: url(../images/service-bg.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
  }