.h1-wrapper
{
    width: 100%;
    padding-bottom: 40px;
}
/*---- ABOUT -----*/
.about-wrap
{
    width: 100%;
    padding: 150px 0;
}
.about-desc-wrap
{
    width: 100%;
    margin-bottom: 50px;
}
/*----END ABOUT -----*/

/*---- CLIENT LIST -----*/

.carousel-wrapper-client {
 width: 100%;
    overflow: hidden;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}

.carousel {
   display: flex;
   position: relative;
   z-index: 3;
  overflow-x: hidden; /* penting */
  white-space: nowrap;
}

/* Optional: sembunyikan scrollbar */
.carousel::-webkit-scrollbar {
  display: none;
}

.item-client {
  width: 212px;
  height: 88px;
  background: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.left-tansition
{
    width: 150px;
    height: 88px;
    position: absolute;
    left: 0;
    z-index: 5;
    background: linear-gradient(
    to right,
    #111113 0%,
    rgba(17, 17, 19, 0) 100%
  );
    display: block;

}
.right-tansition
{
    width: 150px;
    height: 88px;
    position: absolute;
    right: 0;
    z-index: 5;
    background: linear-gradient(
    to left,
    #111113 0%,
    rgba(17, 17, 19, 0) 100%
  );
    display: block;
    
}
/*---- CLIENT LIST END -----*/

/*---- SERVICES -----*/

.services-wrap
{
    width: 100%;
    padding: 150px 0 130px 0;
}
.services-title-wrap-stick
{
    width: 100%;
    position: sticky;
    top: 100px;
    height: 350px;
}

.services-box-1
{
    width: 100%;
    padding: 40px 30px 100px 30px;
    position: sticky;
    top: 100px;
    border-radius: 20px;
    background: linear-gradient(
      to bottom,
      #191919 0%,
      #111113 100%
    );
    z-index: -3;
}
.services-box-2
{
    width: 100%;
    padding: 40px 30px 100px 30px;
    position: sticky;
    top: 130px;
    border-radius: 20px;
    background: linear-gradient(
      to bottom,
      #212121 0%,
      #111113 100%
    );
    z-index: -2;
}
.services-box-3
{
    width: 100%;
    padding: 40px 30px 100px 30px;
    position: sticky;
    top: 160px;
    border-radius: 20px;
    background: linear-gradient(
      to bottom,
      #252525 0%,
      #111113 100%
    );
    z-index: -1;
}
.services-box-4
{
    width: 100%;
    padding: 40px 30px 100px 30px;
    position: sticky;
    top: 190px;
    border-radius: 20px;
    background: linear-gradient(
      to bottom,
      #313131 0%,
      #111113 100%
    );
    z-index: -1;
}
.services-box-5
{
    width: 100%;
    padding: 40px 30px 100px 30px;
    position: sticky;
    top: 260px;
    border-radius: 20px;
    background: linear-gradient(
      to bottom,
      #333333 0%,
      #111113 100%
    );
    z-index: -1;
}
/*---- END SERVICES -----*/

/*---- PROCESS -----*/
.process-wrap
{
    width: 100%;
    padding: 50px 0 120px 0;
}
.process-title-wrap
{
    width: 100%;
    margin-bottom: 30px;
}
.process-vrtl-line
{
    width: 1px;
    height: 100%;
    background-color:#444444;
    display: block;
    position: relative;
     z-index: 1;
}
.process-vrtl-line-top
{
    width: 1px;
    height: 100%;
    background-color:#444444;
    display: block;
    position: relative;
     z-index: 1;
     background: linear-gradient(
      to bottom,
      #111113 0%,
      #444444 30%
    );
}
.process-vrtl-line-bottom
{
    width: 1px;
    height: 100%;
    background-color:#444444;
    display: block;
    position: relative;
    z-index: 1;
     background: linear-gradient(
      to bottom,
      #444444 70%,
      #111113 100%
    );
}
.dot-timeline
{
    width: 12px;
    height: 12px;
    background-color: #9FEC4C;
    border-radius: 100px;
    position: absolute;
    top: 80px;
    left: 5px;
    z-index: 2;
}
.process-box-desc-wrapper
{
    width: 100%;
    padding: 20px 0;
}
.process-box-desc
{
    width: 100%;
    background-color: #1B1B1B;
    padding: 40px 30px;
    border-radius: 10px;
}
.process-pills-wrap
{
    width: 100%;
    margin-top: 30px;
}
/*---- END PROCESS -----*/

/*---- PROJECT -----*/
.selected-project-wrap
{
    width: 100%;
    padding: 50px 0 50px 0;
}

.selected-project-title-wrap
{
    width: 100%;
    margin-bottom: 30px;
}
.work-left-box
{
    width: 95%;
    height: auto;
    margin-bottom: 100px;
}
.work-right-box
{
    width: 95%;
    height: auto;
    float: right;
}
.work-left-box:hover .work-img, .work-right-box:hover .work-img, .work-right-box:hover .work-caption, .work-left-box:hover .work-caption
{
    cursor: url('../image/cursor-link.svg'), auto;

}

.work-left-box:hover .work-img, .work-right-box:hover .work-img
{
   -webkit-clip-path: polygon(5% 3%, 95% 0, 95% 90%, 5% 95%);
    clip-path: polygon(5% 3%, 95% 0, 95% 90%, 5% 95%);
}

.work-img
{
    width: 100%;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: all 0.5s cubic-bezier(0.67, 0, 0.285, 1);
}
.work-img img
{
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-transform: none;
    transform: none;
    transition: all 1s cubic-bezier(0.67, 0, 0.285, 1);
}

.work-left-box:hover .work-img img, .work-right-box:hover .work-img img{
    -webkit-transform: translateZ(0) scale(1.1);
    transform: translateZ(0) scale(1.1);
}


.work-caption
{
    width: 100%;
    margin-top: 30px;
}

.work-category
{
    font-size: 18px;
    color: #6F6F6F;
}
/*---- END PROJECT -----*/



@media (max-width: 767px)
{   

   .h1-wrapper
    {
        width: 100%;
        padding-bottom: 20px;
    }
    .about-wrap
    {
        width: 100%;
        padding: 100px 0;
    }

   .left-tansition
    {
        width: 100px;
        height: 88px;
        position: absolute;
        left: 0;
        z-index: 5;
        background: linear-gradient(
        to right,
        #111113 0%,
        rgba(17, 17, 19, 0) 100%
      );
        display: block;

    }
    .right-tansition
    {
        width: 100px;
        height: 88px;
        position: absolute;
        right: 0;
        z-index: 5;
        background: linear-gradient(
        to left,
        #111113 0%,
        rgba(17, 17, 19, 0) 100%
      );
        display: block;
        
    }

    .services-wrap
    {
        width: 100%;
        padding: 100px 0 50px 0;
    }
    
    .services-title-wrap-stick
    {
        height: 150px;
        position: sticky;
    }
    .process-wrap
    {
        width: 100%;
        padding: 50px 0 50px 0;
    }
    .process-title-wrap
    {
        width: 100%;
        margin-bottom: 20px;
    }
    .process-box-desc
    {
        width: 100%;
        background-color: #1B1B1B;
        padding: 30px 20px;
        border-radius: 10px;
    }


    .process-vrtl-line
    {
        width: 1px;
        height: 100%;
        background-color:#444444;
        display: block;
        position: relative;
         z-index: 1;
         left: 10px;
    }
    .process-vrtl-line-top
    {
        width: 1px;
        height: 100%;
        background-color:#444444;
        display: block;
        position: relative;
         z-index: 1;
         left: 10px;
         background: linear-gradient(
          to bottom,
          #111113 0%,
          #444444 100%
        );
    }
    .process-vrtl-line-bottom
    {
        width: 1px;
        height: 100%;
        background-color:#444444;
        display: block;
        position: relative;
        z-index: 1;
        left: 10px;
         background: linear-gradient(
          to bottom,
          #444444 0%,
          #111113 100%
        );
    }

    .timeline-col 
    {
      position: relative;
    }

    .process-vrtl-line,
    .process-vrtl-line-top,
    .process-vrtl-line-bottom 
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background-color: #444;
      z-index: 1;
    }
    .dot-timeline
    {
        width: 12px;
        height: 12px;
        background-color: #9FEC4C;
        border-radius: 100px;
        position: absolute;
        top: 80px;
        left: 10px;
        z-index: 2;
    }
    .selected-project-wrap
    {
        width: 100%;
        padding: 50px 0 100px 0;
    }
    .work-left-box
    {
        width: 100%;
        height: auto;
        margin-bottom: 50px;
    }
    .work-right-box
    {
        width: 100%;
        height: auto;
        float: none;
    }
  
}
@media (min-width: 768px) and (max-width: 1219px)
{
    
}
@media (min-width: 990px) and (max-width: 1221px)
{
    
}