@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
		
:root{
  --main-color: #FFF8F8;
  --secondary-color: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
}

html{
  scroll-behavior: smooth !important;
  background-color: #000000;
  z-index: -9999;
}

body {
  text-align: left;
  overflow-x: hidden;
  background-color: #000000;
}

.new-container{
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
    }
.thin {
  /* Montserrat Thin = 100 */
  font-weight: 100;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}

.extralight {
  /* Montserrat Extra Light = 200 */
  font-weight: 200;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.light {
  /* Montserrat Light = 300 */
  font-weight: 300;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.regular {
  /* Montserrat Regular = 400 */
  font-weight: 400;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.medium {
  /* Montserrat Medium = 500 */
  font-weight: 500;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.semibold {
  /* Montserrat Semi-bold = 600 */
  font-weight: 600;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.bold {
  /* Montserrat Bold = 700 */
  font-weight: 700;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.extrabold {
  /* Montserrat Extra Bold = 800 */
  font-weight: 800;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}


.black {
  /* Montserrat Black = 900 */
  font-weight: 900;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
    

/* All the snapping stuff */

@media (min-width: 280px) {
  .new-container {
    width: 260px;
  }
}
@media (min-width: 320px) {
  .new-container {
    width: 305px;
  }
}
@media (min-width: 375px) {
  .new-container {
    width: 360px;
  }
}
@media (min-width: 600px) {
  .new-container {
    width: 588px;
  }
}
@media (min-width: 768px) {
  .new-container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .new-container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .new-container {
    width: 1170px;
  }
}
@media (min-width: 1900px) {
  .new-container {
    width: 1270px;
  }
}
@media (min-width: 2048px) {
  .new-container {
    width: 1440px;
  }
}
@media (min-width: 3840px) {
  .new-container {
    width: 2048px;
  }
}




    @media only screen and (min-width: 280px){
        
        .input-image{
            width: 20%;
        }

      

      /*.animsition, .animsition-overlay {

    animation-fill-mode: both;

    opacity: 1;

    position: relative;

  }*/

  #showreelId{
    margin-bottom: 5%;
  }

  ol 
  {
      margin:0px;
      padding-left:15px;
  }

  ol li 
  {
      margin: 0px;
      padding: 0px;
      text-indent: -1em;
      margin-left: 1em;
  }

      .fixed-footer{
        z-index: 99;
      }
      
      /*tes select2*/

      .select2-selection__choice{
        color: black!important;
        font-size: 18px!important;
        padding-left: 4%!important;
        padding-right: 4%!important;
      /*background-color: transparent!important;*/
      border:none!important;
      border-radius: 25px!important;
      background-color: rgba(255, 255, 255, 1) !important;
      letter-spacing: 0.06em!important;
  }

  .select2-selection__choice__remove{
      border: none!important;
      border-radius: 0!important;
      padding: 0 2px!important;
  }

  .select2-selection__choice__remove:hover{
      background-color: transparent!important;
      color: #ef5454 !important;
  }

  .select2-container {
      width: 100% !important;
  }

  .select2-hidden-accessible { 
    position: fixed !important; 
  }


      .select2-container--default{
        

      }

      .select2-selection--single{
        background-color: black!important;
        color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      outline: none;
      border-radius: 0!important;
      padding-bottom: 30px!important;

      
      }

      .select2-search__field{
        background-color: black!important;
        border: none!important;
        outline: none!important;
        color: #fff!important;
      }

      .select2-selection__rendered{
        color: #fff!important;
        font-size: 18px;
        padding-left: 0!important;
        border: none;
        outline: none;
      }

      .select2-container--default .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-container--open .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-selection__arrow {
      height: 90% !important;
      background-color: black!important;
  }

      .select2-container--default .select2-selection--multiple{
      background-color: black!important;
      color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      border-radius: 0!important;
  }

      .select2-dropdown.select2-dropdown--below{
      background-color: black!important;
      color: white!important;
      text-align: left!important;
      font-size: 18px!important;
      letter-spacing: 0.06em!important;
      overflow-x: hidden!important;
  }

  .mul-select{
    /*width: 100%!important;*/
    overflow: hidden;
  }

      /*end teselect2*/
  .gradien-sebelah-kanan{
    height: 30%;
    width: 8%;
    margin: 9em 58px 0px 88%;
    text-align-last: right;
    position: absolute;
    z-index: 3;
    /* background: linear-gradient(90deg, rgb(0 0 0) 4%, rgba(106,105,128,0) 40%, rgba(252,252,252,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 99%); */
    background: linear-gradient(88deg, rgba(0,0,0,0) 0%, rgba(0,0,0,12) 100%);
  }
  .gradien-sebelah-kiri{
    
    height: 30%;
    width: 13%;
    margin: 9em 62px 0px 4%;
    position: absolute;
    z-index: 3;
    /* background: linear-gradient(90deg, rgb(0 0 0) 4%, rgba(106,105,128,0) 40%, rgba(252,252,252,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 99%); */
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,12) 100%);
  }

      



      .text-garis-hello-clients{
      margin-right: 0%;
      display: flex;
      width: 40%;
      
  }

  .text-garis-hello-clients span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* identical to box height, or 25px */

    letter-spacing: 0.06em;
  }

  .garis-hello-clients{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:60%;
      height: 0.5px;
  }


      /*subbrands*/

      .parent-header-subbrands{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-content: center;
    position: relative;
    
  }

  .sub-parent-header-subbrands{
    width: 80%;

  }

  .header-subbrands{
    z-index: 1;
  }

  .header-looping-logo{
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 1;
    padding-bottom: 1%;
    position: absolute;
    top: 5%;
    left: 0;
  }

  /*.logo{
      transition: all;
      z-index: 9;
      opacity: 1;
    }*/

    .isi-header{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 15%;
  }

  .isi-header-kiri{
      width: 100%;
  }

  .parent-header-looping{
    width: 100%;
  }

  .parent-header-looping video{
    width: 100%;
  }

  .isi-header-kanan{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: space-between;
  }

  .tanda-bintang{
    text-align: left;
  }


  .through-various h2{
      text-align: left;
      margin-top: 5%;
  }

  .button-business-units{
      margin-top: 5%;
  }

  .tanda-bintang h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .maika-motion-picture h1{
    font-family: 'Degular Display';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: 0.05em;

  }

  .maika-motion-picture h1{
    text-align: left;
    margin-top: 5%;
  }

  .through-various h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .short-film-class{
    text-decoration: none;
    color: white;
  }

  .short-film-class:hover{
    text-decoration: none;
    color: grey;
  }

  .commercial-class{
    text-decoration: none;
    color: white;
  }

  .commercial-class:hover{
    text-decoration: none;
    color: grey;
  }

  .documentaries-class{
    text-decoration: none;
    color: white;
  }

  .documentaries-class:hover{
    text-decoration: none;
    color: grey;
  }

  .button-business-units p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 115%;
    /* or 18px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
  }

  .button-business-units{
    margin-top: 5%;
  }

  .button-1{
  /* Button 1 */
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 100%;
    /* identical to box height, or 16px */
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .button-1 a{
    text-decoration: none;
    color: white;
  }

  .button-1 a:hover{
    text-decoration: none;
    color: grey;
  }

  .about-mmp{
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2;
  }

  .about-mmp-desc{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .parent-embed-youtube{
      
      width: 100%;
    }

    .parent-showreel{
        margin-top: 10%;
        display: flex;
        justify-content: center;
      }

      .child-embed-youtube{
        width: 80%;
        margin-top: 5%;
      }

      .parent-iframe-video-subbrands{
        display: flex;
        width: 100%;
        justify-content: center;

      }

      .ukuran-video-subbrands{
        display: flex;
        width: 100%;
        height: auto;
        
      }

      .content-filtering-subbrands{
    width: 100%;
  }

  /*.parent-logo-business-units{
    display: flex;
    justify-content: center;
    margin-top: 3%;
    
    width: 100%;
  }

  .logo-business-units{
    display: flex;
    width: 60%;
    flex-direction: row;
    margin-bottom: 25%;
    justify-content: space-between;
    
  }*/

  .parent-logo-business-units{
      display: flex;
      justify-content: center;
      margin-top: 3%;
      width: 100%;
  }

  .logo-business-units{
      display: flex;
      width: 80%;
      flex-direction: row;
      margin-bottom: 45%;
      
      
  }

  .child-logo-business-units{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    
    justify-content: flex-start;
    align-items: center;
      }

  .logo-business-units-img{
      width: calc(100%/3);
      display: flex;
      justify-content: flex-start;
      margin-top: 5%;
      

  }

  

  .logo-business-units-img img{
      /*width: 80%;*/
      transition: all .2s ease-in-out;
  }

  .logo-business-units-img img:hover{

      transform: scale(1.2);
  }

  .all-parent-content-filtering{
    margin-bottom: 23%;
  }

  .parent-content-filtering{
    width: 100%;
    height: 56px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
    margin-top: 15%;
    padding-top: 20%;
  }

  .content-filtering{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .tittle-projects-filter{
    width: 20%;
    
    display: flex;
    align-items: center;
  }

  .tittle-projects-filter span{
    text-align: left;
    font-size: 21px;
    line-height: 120%;
    letter-spacing: 0.06em;
    padding-top: 5%;
  }

  .parent-radio-filter{
    width: 100%;
    display: flex;
  }

  .sub-parent-radio-filter{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    
    align-items: center;
    margin-top: 4%;
  }

  .radio-filter{
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-right: 5%;
    padding-top: 2%;
  }

  .radio-filter input{
    padding-right: 5%;

  }

  .radio-filter label{
    font-size: 12px;
    line-height: 120%;
    letter-spacing: 0.06em;

  }

  /*radio button css*/

      [type="radio"]:checked,
  [type="radio"]:not(:checked) {
      position: absolute;
      left: -9999px;
  }
  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label
  {
      position: relative;
      padding-left: 21px;
      cursor: pointer;
      line-height: 12px;
      display: inline-block;
      color: #fff;
  }
  [type="radio"]:checked + label:before,
  [type="radio"]:not(:checked) + label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 14px;
      height: 14px;
      border: 1px solid #fff;
      border-radius: 100%;
      background: #000;
  }
  [type="radio"]:checked + label:after,
  [type="radio"]:not(:checked) + label:after {
      content: '';
      width: 6px;
      height: 6px;
      background: #fff;
      position: absolute;
      top: 4px;
      left: 4px;
      border-radius: 100%;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  [type="radio"]:not(:checked) + label:after {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  [type="radio"]:checked + label:after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
  }


      /*end radio button css*/

  .line-tittle-filter{
        width: 80%;
      }

      .line-tittle-filter hr{
        /*background-color: white;*/
        background-color: #eee;
      color: #eee;
      height: 0px;
      border: none;
      border-top: 1px solid #eee;
      }

      .all-parent-isi-content{
        
      }

      .parent-isi-content{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
      }

      .sub-parent-isi-content{
        width: 80%;
        display: flex;
      }

      .content-judul{
        width: 30%;
        transition: all .2s ease-in-out;
      }

      .content-judul:hover{
        transform: scale(1.01);
      }

      .content-judul a{
        color: white;
        text-decoration: none;
      }

      .content-judul a:hover{
        color: grey;
      }

      .isi-content-subbrands{
        display: flex;
        flex-direction: column;
        width: 70%;
        
      }

      .content-nama{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      word-break: break-word;
      padding-right: 2%;
    }

    .content-images{
        width: 100%;
      }

      .content-nama span{
        font-size: 16px;
        letter-spacing: 0.06em;
        text-align: left;
      }

      .content-desc{
        width: 100%;
        /*padding-top: 10%;*/
        
      }


      .content-desc a{
        color: white;
        text-decoration: none!important;
        transition: all .2s ease-in-out;
        
      }

      .content-desc a:hover{
        color: white;
        text-decoration: none;
        transform: scale(1.01);
        
      }

      .content-desc p {
        text-align: left;
        font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.06em;
      }

      .projectscope-desc span {
        text-align: left;
        font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.06em;
    font-weight: 400;
    margin-right: 1%;
      }

      .projectscope-desc span {
        text-align: left;
        font-family: Montserrat;
    font-style: italic;
    font-weight: normal;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.06em;
      }

      .projectscope-desc{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 4%;
        flex-wrap: wrap;
      }

      .child-projectscope-desc{
        width: auto;
        padding-right: 1%;

        
      }



      .parent-line-content{
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .line-content{
        width: 80%;
        
      }

      .line-content hr{
        background-color: #eee;
      color: #eee;

      height: 0px;
      border: none;
      border-top: 1px solid #eee;
      }

      .parent-col-indexing{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1%;

      }

      .col-indexing{
        width: 80%;
        
        display: flex;
        justify-content: space-between;
      }

      #filter-section{
        /*padding-top: 0.2%;*/
      }

      .btn-left-index:hover{
        background-color: darkgrey;
        border-radius: 50%;
      }

      .btn-right-index:hover{
        background-color: darkgrey;
        border-radius: 50%;
      }

      .parent-nomor-indexing{
        width: 40%;
        align-items: center;
        display: flex;
        justify-content: center;
      }

      .nomor-indexing{
        width: 60%;
        
        display: flex;
        justify-content: center;
      }

      .nomor-indexing a{
        font-size: 12px;
        text-decoration: none;
        color: grey;
      }

      .nomor-indexing a:active{
        color: white;
      }

      .active-indexing a{
        padding-left: 5%;
        padding-right: 5%;
        color: white;
      }

      .halaman-aktif{
        background-color: red;
        color: grey;
      }

      .back-btn{
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .back-btn img{
        width: 60%;
      }

      .next-btn{
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .next-btn img{
        width: 60%;
      }


      /*end subbrands*/





      /*tambahan home*/

      .c-anim-desc{
    display: none;
  }

  .c-anim-btn img{
    margin-bottom: 0em;
    width: 60%;
  }

      /*end tambahan home*/

      /*contact*/

      .konten
  {
    position: relative;
    margin: 0 auto;
    top: 20%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .konten .paragraph p
  {
    position: absolute;
    margin: 0 auto;
    z-index: 3;
    overflow: hidden;
    top: 30%;
    font-weight: normal !important;
    line-height: 28px;
    font-style: normal;
    text-align: center;
  }

  .parent-btn-inquiry{
    margin-top: 5%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 80%;
    
    display: flex;
    justify-content: center;
  }

  .angka-lima{
    margin-top: 20%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 83%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 7px;*/
  }

  .ukuran-angka-lima img{
    width: 70%;
  }

  .tab {
    width: 100%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 12px;*/
  }

  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: 0.5px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 50px;
    outline: none;
    cursor: pointer;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 4%;
    padding-right: 4%;
    transition: 0.3s;
    font-size: 12px;
    margin-right: 2%;
    width: calc(96%/2);
    margin-bottom: 10%;
    margin-top: 5%;
  }

  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #fff;
    color: #000;
  }

  /* Create an active/current tablink class */
  /*.tab button.active {
    border-bottom: 0.5px solid white;		
  }*/

  .tab button:active {
    background-color: #fff;
    color: #000;
  }

  .tab .active {
    background-color: #fff;
    color: #000;
  }

  .tab button:focus {
    background-color: #fff;
    color: #000;
  }

  .align-project{
    text-align: left;
    
    width: 80%;
  }

  #projectDiv {
    display: show;
  }

  #generalDIV{
    display: none;
  }

  .tabcontent {
    /*padding: 6px 12px;*/
    border-top: none;
  }

  

  .project-in-mind {
    font-size: 21px;
    letter-spacing: .05em;
    font-weight: 400;
  }

  .fill-in-the-field{
    padding-left: 0;
    margin-left: 0;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.5em;
    font-weight: 200;
  }

  .parent-general-project{
    margin-top: 5%;
    
    width: 100%;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
  }

  .project-after-parent{
    
    display: flex;
    width: 100%;
    flex-direction: column;
    /*align-items: center;*/
    padding: 0;
  }

  .subject-general{
    
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .subject-general label{
    font-size: 12px;
    letter-spacing: .1em;
    font-weight: 300;
  }

  .subject-general input{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 18px;
  }

  .colom-input{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 7%;
  }

  .colom-input-subject{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 7%;
  }


  .colom-input-textarea label{
    font-size: 18px;
    letter-spacing: .1em;
    font-weight: 300;
  }



  .colom-input-textarea textarea{
    /*background-color: black; */

    padding-left: 0;
    font-size: 18px;
    height: 120px;
  }

  .colom-input label{
    font-size: 18px;
    letter-spacing: .1em;
    font-weight: 300;
  }

  .colom-input input{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 18px;
  }

  .colom-input select{
    width: 100%;
    font-size: 18px;
  }




  .colom-input-subject label{
    font-size: 18px;
    letter-spacing: .1em;
    font-weight: 300;
  }

  .colom-input-subject input{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 18px;
  }

  .colom-input-subject select{
    width: 100%;
    font-size: 18px;
  }





  .fo
  {
    border: none;
    border-bottom: 1px solid #FFF8F8;
    border-radius: 0px;
    background-color: black;
  }

  .form-control{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8;
    width: 100%;
    color: white;
  }

  .form-control:focus{
    background-color: black;
    color: white;
    text-decoration: none;
    outline: none;

    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;

  }


  .parent-project-details{
    margin-top: 10%;
  }

  .project-details p{
    margin-top: 5%; 
    font-size: 21px;
  }

  .project-scope select{
    color: white; 
    border: none; 
    background-color: #000000; 
    border-bottom: 1px solid #FFF8F8; 
    border-radius: 0px; 
    overflow-y: all; 
    width: 100%;
    padding-left: 0;
  }

  select:required:invalid {
        color: gray;
      }
      option[value=""][disabled] {
        /*display: none;*/
      }

  .project-scope select option{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    line-height: 120%;
    /* identical to box height, or 30px */

    letter-spacing: 0.06em;

    color: #FFFFFF;
  }

  .parent-budget select{
    color: white; 
    border: none; 
    background-color: #000000; 
    border-bottom: 1px solid #FFF8F8; 
    border-radius: 0px; 
    overflow-y: all; 
    width: 90%;
  }

  .project-descriptions{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    
  }

  .project-descriptions label{
    font-size: 12px;
  }

  .project-descriptions textarea{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    height: 150px; 
    margin-top: 0;
    padding-left: 0;
    font-size: 18px;
  }

  .btn-submit {
    margin-top: 5%;
    margin-bottom: 20%;
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .btn-submit button {
    position: relative;  
    top: 15px; 
    background-color: #FFF8F8; 
    border-radius: 50px;
  }

  .btn-submit button span {
    color: black; 
    letter-spacing: 1px; 
    font-weight: bold;
  }

  .btn-submit img{
    width: 18%;
  }
  
  .btn-submit input{
    width: 18%;
  }

  .style-btn-submit{
    width: 15%;
    height: 35px;
  }

  .parent-general{
    /*left: -20%; right: 0 !important;*/
    width: 10%;
  }

  .parent-general p {
    display: block; 
    position: absolute; 
    transform: rotate(-90deg); 
    top: 12%; 
    left: -45%; 
    font-size: 22px;
  }

  .general-in-mind{
    font-size: 28px;
    letter-spacing: .05em;
    font-weight: 400;
  }


  .colom-input{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 7%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-subject{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 7%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */


  .colom-input-textarea{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 7%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */


  .colom-input input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 18px;
  }

  .colom-input-subject input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 18px;
  }




  .colom-input select{
    width: 100%;
    font-size: 18px;
  }

  .colom-input-subject select{
    width: 100%;
    font-size: 18px;
  }

  input[type="text"]{
    /*font-size: 15px/24px; */
    font-family: Degular Display ;
    color: #000000; 
    width: 100%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
  }



  .effect-16{
    border: 0; 
    padding: 4px 0; 
    border-bottom: 1px solid #ccc; 
    background-color: transparent;
    z-index: 9;
  }

  .effect-16 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 0px; 
    background-color: #fff; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16 ~ label{
    position: absolute; 
    left: 0; 
    width: 100%; 
    top: 9px; 
    color: #aaa; 
    transition: 0.3s; 
    z-index: 0; 
    letter-spacing: 0.5px;
  }
  .effect-16:focus ~ label, .has-content.effect-16 ~ label{
    top: -16px; 
    font-size: 12px; 
    color: #3399FF; 
    transition: 0.3s;
  }



      /*end contact*/



      /*career*/
      .closing-section-career{
    height: 15vh;
  }

      .all-parent-sub-career{
    
  }

  .parent-sub-career{
    position: relative;
    width: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cls-recruitment{
    position: absolute;
    z-index: 999;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 3%;
    width: 80%;
  }

  .cls-recruitment p:nth-child(1) {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 120%;
    /* or 60px */
    letter-spacing: 0.05em;
    color: #FFF8F8;
  }

  .cls-recruitment p:nth-child(2){
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 20%;
    /* or 42px */
    letter-spacing: 0.05em;
    color: #FFF8F8;
  }

  .sub-parent-recruitment{
    width: 80%;
  }

  .parent-recruitment{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .parent-recruitment p{
    text-align: left;
  }

  .new-were-always{
    width: 100%;
    padding-top: 5%;
  }

  .new-were-always p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 30px */
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .new-the-opportunity{
    width: 100%;
  }

  .new-the-opportunity p {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 30px */
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .parent-isi-all-content{
    margin-bottom: 5%;
    
  }

  .parent-col-center-hiring{
    display: flex;
    width: 80%;
    margin-top: 12%;
  }

  .text-garis-hello-current{
    width: 60%;
    text-align: left;
  }

  .text-garis-hello-current span{
    font-size: 14px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* identical to box height, or 25px */
    text-align: left;
    letter-spacing: 0.06em;
  }

  .garis-hello-current {
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 0.5px;
      width: 40%;
      float: left;
  }

  .parent-all-col-career{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .kiri-hiring-col{
    width: 100%;
  }

  .parent-title-hiring{
    text-align: left;
    border-bottom: 0.5px solid white;
    width: 100%;
  }

  .parent-title-hiring a{
    text-decoration: none;
  }

  .parent-title-hiring:hover{
    text-decoration: none;
    
  }

  .btn-hiring{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn-hiring span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    /* identical to box height, or 42px */
    letter-spacing: 0.05em;
    color: #FFFFFF;
  }

  .btn-hiring img{
    width: 5%;
  }

  .rotate{
      -moz-transition: all 0.1s linear;
      -webkit-transition: all 0.1s linear;
      transition: all 0.1s linear;
  }

  .rotate.down{
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
  }

  .panel-heading .collapsed .active {
      -webkit-transform: rotate(180deg);    
      -moz-transform: rotate(180deg);        
      -o-transform: rotate(180deg);          
      -ms-transform: rotate(180deg);         
      transform: rotate(180deg);
      position: absolute;
  }

  .panel-heading .active {
      -webkit-transform: rotate(0deg);     
      -moz-transform: rotate(0deg);        
      -o-transform: rotate(0deg);          
      -ms-transform: rotate(0deg);   
      transform: rotate(0deg);
      position: absolute;
  }

  .parent-title-hiring .rotate {
    transform: rotate(180deg);
    transition: .3s transform ease-in-out;
  }
  .parent-title-hiring .collapsed .rotate {
    transform: rotate(0deg);
  }

  .isi-hiring{
    text-align: justify;
    padding-top:5%;
    
  }

  .isi-hiring{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 30px */
    letter-spacing: 0.05em;
    color: #FFF8F8;
  }

  .parent-link-apply{
    padding-top: 4%;
    padding-bottom: 10%;
  }

  .link-apply-now:hover{
    text-decoration: none;
  }

  .apply-class{
    width: 32%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding: 1.5%;
  }

  .apply-class span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 100%;
    /* identical to box height, or 16px */

    text-align: center;
    letter-spacing: 0.06em;

    color: #FFFFFF;
  }

  .apply-class:hover{
    text-decoration: none;
    
  }

  .new-col-career{
    width: 100%;
    position: relative;
    margin-bottom: 2%;
  }

  .kanan-hiring-col{
    width: 100%;
  }

      /*end career*/




    
       /*project details*/

      .header-subbrands{
    z-index: 1;
  }

  .header-looping-logo{
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 1;
    padding-bottom: 1%;
    position: absolute;
    top: 5%;
    left: 0;
  }

  .logo{
      transition: all;
      z-index: 9;
      opacity: 1;
    }

    .content-section-header{
    object-fit: cover;
    width: 100%;
    height: 100%;
      overflow: hidden;
    margin-bottom: 5%;
  }

  .parent-header-scroll{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    align-content: space-around;
    width: 100%;
    height: 100vh;
  }

  .header-scroll{
    z-index: 99;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 21%;
    align-items: center;
  }

  .parent-scroll{
    width: 100%;
    height: 114px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .btn-scroll{
    display: flex;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;
  }

  .btn-scroll:hover{
    background-color: #444444;
  }

  .btn-scroll img{
    width: 60%;
  }

  

  .text-scroll{
    /*margin-top: 5%;*/
    animation: down2 2.5s infinite;
    -webkit-animation: down2 2.5s infinite;
  }

  @keyframes down {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(10px);
    }
    40% {
      transform: translate(0);
    }
  }

  @-webkit-keyframes down{
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(10px);
    }
    40% {
      transform: translate(0);
    }
  }

  @keyframes down2 {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(5px);
    }
    40% {
      transform: translate(0);
    }
  }

  @-webkit-keyframes down2{
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(5px);
    }
    40% {
      transform: translate(0);
    }
  }

  .text-scroll p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    /* or 30px */
    display: flex;
    align-items: flex-end;
    text-align: center;
    letter-spacing: 0.04em;
  }

  .before-parent-desc-projects{
    display: flex;
    width: 100%;
    
    justify-content: center;
    margin-top: 20%;
  }

  .parent-desc-projects{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }

      .tittle-subcontent{
    width: 100%;
  }

  .tittle-subcontent p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    /* identical to box height, or 60px */
    display: flex;
    align-items: flex-end;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .parent-client-projects{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 2%;
  }

  .client-projects{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*background-color:red;*/
    
  }

  .client-projects p:nth-child(1){
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 9px;
    line-height: 100%;
    /* identical to box height, or 16px */
    letter-spacing: 0.06em;
    text-align:left;
  }

  .client-projects p:nth-child(2){
    margin-top: -5%;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 100%;
    /* identical to box height, or 30px */
    letter-spacing: 0.06em;
    text-align:left;
  }

  .year-projects{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*background-color:orange;*/
    
  }

  .year-projects p:nth-child(1){
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 9px;
    line-height: 100%;
    /* identical to box height, or 16px */
    letter-spacing: 0.06em;
  }

  .year-projects p:nth-child(2){
    margin-top: -5%;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 100%;
    /* identical to box height, or 30px */
    letter-spacing: 0.06em;
  }

  .parent-tag-projects{
    width: 100%;
    display: flex;
    margin-top: 2%;
    flex-wrap: wrap;
    
  }

  .tag-projects{
    border: 1px solid white;
    width:calc(95% / 2);
    height: 25px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2%;
    margin-top: 4%;
  }

  .tag-projects span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 9px;
    line-height: 100%;
    /* identical to box height, or 16px */
    text-align: center;
    letter-spacing: 0.1em;
    color: #FFFFFF;
  }

  .description-projects{
    width: 100%;
    margin-top: 10%;
  }

  .description-projects p{
    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.07em;
    text-align: justify;
  }

  .parent-bab-content{
    margin-bottom: 8%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bab-content-awal{
    margin-top: 10%;
    
  }

  .parent-iframe-video{
        display: flex;
        width: 100%;
        justify-content: center;
      }

      .ukuran-video{
        display: flex;
        width: auto;
        height: auto;
      }

      .bab-content{
    margin-top: 8%;
  }

  .parent-subcontent-desc{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 8%;
  }

  .subcontent-desc{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .subcontent-desc h1{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    /* or 42px */
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    text-align: left;
    color: #FFFFFF;
  }

  .subcontent-desc p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.06em;
    /* or 27px */
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding-top: 2%;
    text-align: justify;
  }

       /*end project details*/

      




      /*start class home*/

      .wrapper{
    width: 100%;
  }

  .parent-header-showreel{
    display: flex;
    flex-direction: column;
    align-content: space-around;
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .parent-showreel-video{
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .caption-header{
    position: relative;
    bottom:30%;
    z-index: 99;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .parent-caption-header{
    width: 90%;
    
    display: flex;
    justify-content: flex-start;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }



  .text-header p{
    font-size: 2px;
  }

  .text-header p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* or 42px */

    letter-spacing: 0.05em;

    color: #FFFFFF;
  }

  .caption-header p:nth-child(1) {
      font-family: Montserrat;
      font-size: 14px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile{
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .watch-profile span {
      font-family: Montserrat;
      font-size:10px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }

  .caption-header a{
      color: white;
      text-decoration: none;
  }

  

  .underline{
    border-bottom: 0.5px solid currentColor;
  }

  .parent-thumbnail-business{
    margin-top: 5%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 80%;
      margin-top: 4%;
      /*transition: opacity .6s;*/
    }

    /*.background-mmp:hover{
    opacity: 1;
    top: 0;
    left: 0;
    height: auto;
    background: url('../assets/images/bg/mmp.jpg') no-repeat;
    background-size: cover;
  }*/



  .mmp-logo-before-hover{
  }

  

      /*end home*/

      .ini-row {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
    justify-content: center;	
  }

  .parent-li{
    width: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .parent-li a:hover {
    background-color: #c6a159;
    padding: 12px 0; /* Ubah padding saat tautan dihover untuk mengatur ukuran */
    color: #000;
    
  }

  .container-full{
    color: #c6a159;
    min-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
  }

  

  .nav-ok{
    position: fixed;
    z-index: 1;
    background: cover;
    
  }

  .parent-header-about{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: space-around;
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .header-about{
    z-index: 99;
    display: flex;
    flex-direction: column;
    /*height: 100vh;*/
    width: 100%;
    height: 100%;
    position: relative;
    align-items: center;
    
  }

  .parent-showreel-video-about{
    position: absolute;
    width: 100%;
    z-index: 1;
  }

  .img-bg-about{
      object-fit: cover;
    width: 100vw;
    height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      background-size: cover;
  }

  .showreel{
    position: relative;
    top: 0;
    width: 100%;
  }

  .underline{
    border-bottom: 0.5px solid currentColor;
  }

  .parent-our-sub-brands-about{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .sub-parent-garis-hello{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

  .img-about-subbrands{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .img-about-subbrands img{
    width: 60%;
    margin-bottom: 5%;
  }

  .parent-selected{
    margin-top: 10%;
  }

  .new-parent-selected-client{
    width: 100%;
    display: flex;
    
    justify-content: center;
  }

  .drop-hello{
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
    margin-top: 0%;
    margin-bottom: 15%;
  }

  .drop-hello hr{
    width: 100%;
    height: .2px;
    color: #fff;
    background-color: #fff;
  }

  .hcwhy{
      width: 100%;
      display: flex;
      flex-direction:column;
      margin-bottom: 10%;
      margin-top: 0%;
      align-items: center;
    }

  .hcwhy-sub{
    margin-bottom: -5%;
  }

  

  .all-parent-footer{
    display: flex;
    /*flex-direction: column;*/
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 2%;
    padding-bottom: 3%;
    background-color: #000000;


  }

  .parent-footer{
    position: relative;
    display: contents;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding: 0%;
    z-index: 9;
    
  }

  .parent-footer-dua{
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0%;
    z-index: 9;
  }
  .parent-footer-tiga{
    position: inherit;
    display: contents;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 0%;
    z-index: 9;
    /**/
  }
  .info-footer p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #c6a058;
    margin-bottom:1em;
  }
  .p2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #c6a058;
  }


  .kiri-footer{
    z-index: 3;
    padding: 0;
    margin: 0;
    padding-left: 0;
  }

  .info-footer div{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #c6a159;
    letter-spacing: 0.08em;
  }
  .info-footer img{
    margin-right: 9px;
  }
  .info-footer h2 {
    font-size: 13px; /* Ukuran teks sesuaikan dengan preferensi Anda */
    margin: -5px;
    padding: 0px; /* Sesuaikan padding sesuai kebutuhan Anda */
    background-color: rgba(0, 0, 0, 0); /* Warna latar belakang teks dengan transparansi */
    display: inline-block;
    border-radius: 5px;
  }
  

  .parent-socmed-footer{
    display: flex;
    justify-content: center;
    width: 90%;
    bottom: 0;
    margin-top: 1%;
  }

  .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 20%;
  }

  .socmed-footer{
    width: 100%;
    
  }

  .socmed-footer img{
    padding: 23%;
    width: 40px;
  }



      .new-logo-maika {
          width: 30%;
          margin-top: 0%;
      }

      .new-logo-maika img{
          width: 80%;
      }

  .center-selected-client{
    width: 80%;
    background-color: black;
    display: flex;
    justify-content: flex-end;
  }

  .images-selected-client{
    width: 100%;
    
  }

      

      .closing-section-general{
    height: 0vh;
  }



  .parent-about-subbrands{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 15%;
      width: 100%;
      
  }

  .kiri-about-subbrands{
      display: flex;
      width: 100%;
      
      justify-content: center;
  }

  .kanan-about-subbrands{
      width: 80%;
      height: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      
  }

  .parent-img-about-subbrands{
      width:calc(100% / 1);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 0%;
      margin-bottom: 2%;
      flex-wrap: wrap;
  }	

  .list-about-subbrands ul{
      list-style-position: inside;
      text-align: left;
      float: right;
      display: inline-block;
  }

  .list-about-subbrands ul li {
      list-style-type: disc;
      list-style-position: inside;
      line-height: 120%;
      position: relative;
      font-size: 0.5em;
  }

  .list-about-subbrands ul li span{
      margin-left: -0.1em;
      letter-spacing: .05em;
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 150%;
      color: #FFF8F8;
  }

  /*.list-about-subbrands ul li {
      list-style-type: none;
        position: relative;
  }

  .list-about-subbrands ul li::before{
      content: '■';
        position: absolute;
        left: -01em;    
        font-size: 0.5em;
        top: 1em;
  }

  .list-about-subbrands ul li span{
    background-color: orange;
  }*/

      .about-header-tengah{
      width: 100%;
      height: 55%;
      position: relative;
  }

  .we-help-organization{
      z-index: 99;
      position: absolute;
      bottom: 20%;
      width: 60%;
      height: 21%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
  }

  .we-help-organization span{
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 120%;
      /* or 30px */
      letter-spacing: 0.04em;
      color: #FFFFFF;
  }

  .we-help-organization p{
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 120%;
      /* or 19px */
      display: flex;
      align-items: flex-end;
      text-align: center;
      letter-spacing: 0.06em;
      color: #FFFFFF;
  }

      .header-logo-about{
      display: flex;
      width: 100%;
      height: 10%;
      justify-content: center;
      z-index: 1;
      padding-bottom: 1%;
      position: relative;
      top: 3%;
      left: 0;
  }

  .header-logo-about img{
      width: 50%;
  }

      .parent-section-gif{
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      
  }

  .section-gif{
      width: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;	
  }

  /*.child-asset-gif{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }*/

  .child-asset-gif{	
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
  }

  .asset-index-kanan{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0%;
      margin-top: 0%;
  }

  .child-index-kanan{
    width: 100%;
    height: 100%;
    padding-top: 8%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .container-carousel{
      z-index: 10;
      display: flex;
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

  }
  .carousel{
      width: 100%;
      height: auto;
      display: flex;
      transition: .4s ease-in-out;

  }
  .carousel img{
      min-width: 1%;
      min-height: 105%;
      /*height: auto;*/
      transition: .3s ease;
      object-fit: contain;
      padding-left: 0;
      margin-left: 0;
  /*     margin-left: 7px; */
    padding: 0%;
  }
  #right{
    display: block;
      position: absolute;
      width: 9%;
      height: 9%;
      line-height: 9%;
      top: 45%;
      right: 8px;
      background: none;
      cursor: pointer;
      border: none;
      outline: none;
      font-size: 30px;
      color: black;
      background: transparent;
      padding: 0px;
      border-radius: 50%;
      z-index: 999;

  }

  /*#right:hover{*/
    /*background-color: red;*/
    
    /*transform: scale(1.05);*/
    /*transition: 300ms ease-in-out;*/
  /*}*/

  #right img{
    width: 100%; 
  }




















  .btn-asset-gif{
    position: absolute;
    outline: none;
    right: -8%;
    border: unset;
  }

  .btn-asset-gif img{
    width: 80%;
  }

  .asset-gif{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-right: 0%;

  }



  .index-bintang{
      text-align: left;
  }

  .index-bintang span{
      font-size: 12px;
  }

  .deskripsi-index-satu{
    padding-top: 2%;
      
  }

  .deskripsi-index-satu p{
      text-align: left;
      font-family: montserrat;
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 120%;
      /* or 30px */

      letter-spacing: 0.06em;

      


  }
  .deskripsi-index-satu h1{
    text-align: left;
    font-family: montserrat;
    font-style: normal;
    line-height: 45px;
    letter-spacing: 0.06em;
}

  .deskripsi-index-dua{
    padding-top: 1%;
  }

  .deskripsi-index-dua p{
      text-align: left;
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 10px;
      line-height: 120%;
      /* or 19px */
      letter-spacing: 0.06em;
      color: #c6a159;
  }

  .parent-garis-index{
      margin-top: 10%;
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
  }

  .text-garis-index{
      margin-right: 0%;
      display: flex;
      width: 90%;
  }

  .text-garis-index span{
      font-size: 10px;
  }

  .garis-index{
      background-color: #FFF8F8;
      width: 90%;
      height: 0.1px;
  }



  .our-subbrands-hello{
        width: 80%;
        display: flex;
        flex-direction: column;
    }

  .parent-garis-hello{
      margin-top: 10%;
      display: flex;
      flex-direction: row;
      width: 80%;
      justify-content: flex-start;
      align-items: center;
      
  }

  .text-garis-hello{
      margin-right: 8%;
      display: flex;
      width: auto;
      
  }

  .text-garis-hello span{
      font-size: 16px;
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      /* identical to box height, or 25px */

      letter-spacing: 0.06em;
  }

  .garis-hello{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width: 100%;
      height: 0.5px;
  }

  .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 50%;
      
  }

  .text-garis-hello-subbrands span{
      font-size: 16px;
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
      /* identical to box height, or 25px */

      letter-spacing: 0.06em;
  }

  .garis-hello-subbrands{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:50%;
      height: 0.5px;
  }



    
  .tittle-showreel h3{
      /* Heading 3 */

      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 120%;
      /* identical to box height, or 30px */
      letter-spacing: 0.06em;
  }

        /* Loader */
  #loader {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 100%;
      background-color: #000000;
      background-image: url("../img/loader/LOOP_MAIKA LOGO.gif"); 
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center;
      overflow: hidden;
      justify-content: center;
      align-items: center;
  }
    /* End Loader */

        
        /*GRADIENT*/
    .slick-prev
    {
      left: 55px;
    }
    .slick-next
{
right: 100px;
}
  #grad1 {
      z-index: 2;
      width: 100%;
        height: 75px;
        background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); 
  }

    /*HEADER*/

  .section-header{
      height: 100vh;
  }

  .section-description{
      margin-top: 0%;
  }



      .parent-showreel-video{
          margin-top: 0%;

      }

      .parent-showreel{
          margin-top: 0%;
          display: flex;
          justify-content: center;
    }

      .showreel{
      position: relative;
      top: 0;
      width: 100%;

  }

  .showreel img{
      transform:scale(1.5);
        -ms-transform:scale(1.5); /* IE 9 
        -moz-transform:scale(1.5); /* Firefox */
        -webkit-transform:scale(1.5); /* Safari and Chrome */
        -o-transform:scale(1.5); /* Opera */
  }

        /* Video Background */
  .video-bg{
      object-fit: cover;
      width: 100vw;
      height: 100vh;
        overflow: hidden;
        display: block;
        justify-content: center;
        align-items: center;
        z-index: 1;
      
        background-size: cover;
  }

  /*.caption-header{
      position: relative;
      bottom: 16em;
      padding: 8%;
      z-index: 99;
  }*/

  

    /*NAVBAR*/

  .parent-navbar{
      position: fixed;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 5%;
      z-index: 999;
      

  }

  .parent-navbar-2{
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 86%;
      padding: 5%;
      z-index: 9;
  }			

  .hamburger{
      z-index: 3;
      padding: 0;
      margin: 0;
      padding-left: 0;
      cursor: pointer;
      text-align: right;
      margin-right: 25px;
  }

  .hamburger i{
    padding: 0;
    margin: 0;
    padding-left: 0;
    margin-left: 0;
  }

  .hamburger img{
    width: 25%;
  }


  

  .nav-toggle{
      width: 100%;
      padding: 0;
      margin: 0;
  }

  .nav-toggle img{
      width: 80%;
  }

  .logo-maika-white{
      
      justify-content: left;
      
  }

  .logo-maika-white img{

      width: 17%;
      height: 60%;
      z-index: 1;
    
  }
  .logo {
    opacity: 1; /* Mulai dengan opasitas 0 */
    transition: opacity 0.3s; /* Animasi perubahan opasitas saat scroll */
  }

  .logo img {
    width: 65px; /* Atur lebar logo sesuai kebutuhan */
    height: auto;
    margin-left: 25px;
  }
   /* CSS tambahan untuk animasi muncul saat scroll */
   .logo.visible {
    opacity: 1;
  }

  #wrapperAll{
      height: 100vh;
      width: 100%;
      background-color: #000000;
      z-index: 99999;
      position: absolute;
      top: 0;
      left: 0;
      overflow-x: hidden;
      transition: 0.8s ease-in-out;
      padding-top: 0%;
      padding-left: 0%;
      text-align:left;
      display: flex;
      overflow: hidden;
      align-items: center;
  }

  .sidenav {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 999;
    top: 0;
    right: -40px;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    transition: 0.8s;
    padding-top: 0%;
    padding-left: 0%;
    
    display: flex;
    overflow: hidden;
    /*align-items: center;*/
    transition: 0.1ms ease-out;
    border-left: 1px solid #c6a159;
  }
  .menu a.home-link {
    border-top: 1px solid #fff;
  }
  .sidenav ul {
    
    list-style-type: none;
    padding: 0;
  }

  .sidenav ul a  {
    text-decoration: none;
          color: #c6a159;
          display: block;
          transition: background-color 0.3s, padding 0.3s; /* Menambahkan efek transisi pada padding */
        padding: 37px 4px; /* Tambahkan padding atas dan bawah pada setiap item menu */
  
  }
  .sidenav .closebtn {
      position: absolute;
      top: 5px;
      right: 32px;
      font-size: 21px;
  }
  .sidenav a hover{
    background-color: #f905d4;
    padding: 12px 0; /* Ubah padding saat tautan dihover untuk mengatur ukuran */
  }

  .parent-maika-desc{
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5%;
    }


    .parent-maika-desc p:nth-child(1){
        font-size: 16px;
        font-weight: 200;
        text-align: left;

    }

    .index-maika-desc{
        top: 0%;
    }

    .link-desc{
        display: flex;
    }

    .link-desc a{
        /*text-decoration: underline;*/
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        margin-right: 4%;
        color: white;
        letter-spacing: .09em;
    }




      /*PAR SUBBRANDS*/

    .parent-par-subbrands{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        padding: 5%;

    }

    .index-subbrands-par{
        display: flex;
        margin-top: 0%;
        padding: 5%;
    }

    .index-subbrands-par p{
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 200;
        text-align: left;
        letter-spacing: .1em;
    }

      

    /*BUSINESS UNITS*/

  .section-units{
      height: 100vh;
  }

  .parent-our-sub-garis{
      display: none;
      background-color: #FFF8F8;
      position: relative;
      width:10%;
      height: 0.5px;
  }

  .our-sub-garis{

  }

  .parent-our-subbrands{
        width: 100vw;
        height: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }


    .title-subbrands p {
        margin-top: 2%;
        margin-bottom: 8%;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .1em;
    }

   /* .after-background-mmp{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 0;
    }*/

    .logo-brands{
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%;
    }


  .logo-brands img{
        width: 100%;
        margin-top: 12%;
  }


  .logo-brands p{
        font-weight: 200;
        letter-spacing: .15em;
        font-size: 10px;
  }


    .background-mmp{
        opacity: 1;
        transition: opacity .6s;
    }

  /*.background-mmp:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;*/
      /*background: url('../assets/images/bg/mmp.jpg') no-repeat;*/
      /*background-size: cover;*/
  /*}*/


    .background-imaginaria{
        opacity: 0.5;
        transition: opacity .6s;
        width: 70%;
    }

  .background-imaginaria:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;
      /*background: url('../assets/images/bg/Imaginaria.png') no-repeat;*/
      background-size: cover;
  }

  .background-offline{
        opacity: 0.5;
        transition: opacity .6s;
        width: 70%;
    }

  .background-offline:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;
      /*background: url('../assets/images/bg/offline.jpg') no-repeat;*/
      background-size: cover;
  }

  .background-mana{
        opacity: 0.5;
        transition: opacity .6s;
        width: 70%;
    }

  .background-mana:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;
      /*background: url('../assets/images/bg/mana.png') no-repeat;*/
      background-size: cover;
  }

  .background-everyday{
        opacity: 0.5;
        transition: opacity .6s;
        width: 70%;
    }

  .background-everyday:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;
      /*background: url('../assets/images/bg/everyday2.png') no-repeat;*/
      background-size: cover;
  }

  .background-kaji{
        opacity: 0.5;
        transition: opacity .6s;
        width: 70%;
    }

  .background-kaji:hover{
      opacity: 1;
      top: 0;
      left: 0;
      width: 100%;
      /*background: url('../assets/images/bg/kaji.jpg') no-repeat ;*/
      background-size: cover;
  }



  /*FOOTER*/

  .c-maika{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  

  .garis{
      display: flex;
      flex-direction: column;
      margin-top: 0%;
      background-color: #FFF8F8; 
      width: 70%; 
      height: 0.5px;
  }

  .how-can{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10%;
      padding: 2%;
      width: 80%;
      
  }

  .how-can p{
      text-align: center;
  }

  .how-can p:nth-child(1){
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 120%;
      /* identical to box height, or 30px */

      text-align: center;
      letter-spacing: 0.06em;

      color: #FFFFFF;
  }

  .how-can p:nth-child(2){
      font-family: Montserrat;
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      line-height: 150%;
      /* or 27px */
      text-align: center;
      letter-spacing: 0.06em;
      color: #FFFFFF;
  }

  .how-can p:nth-child(3){
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 8px;
      line-height: 100%;
      /* identical to box height, or 16px */

      text-align: center;
      letter-spacing: 0.06em;
      text-decoration-line: underline;
      text-transform: uppercase;

      color: #FFFFFF;
  }

  .how-can a{
      font-family: Montserrat;
      font-style: normal;
      font-weight: normal;
      font-size: 8px;
      line-height: 100%;
      /* identical to box height, or 16px */
      text-align: center;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #FFFFFF;

  }

  .how-can a:hover{
      text-decoration: none;
      color: grey;

  }

    /*ABOUT*/
  .section-about{
      height: 100vh;
  }

  .parent-about-section-1{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: auto;
      width: 100vw;
      position: relative;
      margin-top: 0%;
  }

  .about-maika-desc{
      position: relative;
      top: 0;
  }

  .about-maika-desc p{
      /*position: relative;*/
      top: 15%;
      z-index: 0;
      text-align: right;
      font-size: 29px;
  }

    

  .parent-about-par-1{
      width: 60%;
      display: flex;
      justify-content: flex-start;
      z-index: 1;
  }

  .parent-about-par-2{
      width: 60%;
      display: flex;
      justify-content: flex-end;
      z-index: 1;
  }

  .parent-about-par-3{
      width: 60%;
      display: flex;
      justify-content: flex-end;
      z-index: 1;
  }

  .parent-about-par-4{
      width: 80%;
      display: flex;
      justify-content: center;
      top: 0;
      position: re;
  }

  .about-par-1{
  }

  .about-par-2{
  }

  .about-par-3{

  }

  .about-par-1 p{
      text-align: left;
      font-size: 18px;
      font-weight: 400;
  }

  .about-par-2 p {
      text-align: left;
      font-size: 16px;
      font-weight: 400;
      margin-top: 25%;
  }

  .about-par-3 p{
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    margin-top: 25%;
  }

  .parent-about-section-1{
    display: flex;
    flex-direction: column;
  }

  .about-header p:nth-child(1) {
    font-size: 16px;
    letter-spacing: .1em;
  }

  .about-header p:nth-child(2) {
    font-size: 18px;
    letter-spacing: .1em;
  }

    

  .about-header hr{
    width: 1px;
    height: 0px;
    background-color: #fff;
    color: #fff;
    z-index: 99;
    transition: 100ms linear;
  }

  .we-help{
    width: 80%;
    height: 20%;
    position: absolute;
    top: 80%;
    z-index: 99;
  }

  .we-help p{
    font-size: 14px;

    font-weight: 400;
    letter-spacing: .1em;
  }

  .creative-about p{
    font-weight: 400;
  }

  .about-header img{
    width: 29%;
    margin-top: 0;
  }


  #section-sub-brands{
    position: relative;
    margin-top: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }

  .parent-our-sub{
    display: none;
    left: -50%; 
    z-index: 1;
  }

  .our-sub-brands{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }


  .parent-sub-brands{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .parent-sub-brands p {
    margin-top: 3%;
    letter-spacing: .1em;
    color: white;
    font-size: 12px;
  }

  .detail-sub-brands p{
    text-align: center; 
    letter-spacing: 1px; 
    margin-top: 0%; 
    font-size: 12px;
    font-weight: 400;
  }

  .maika-desc p:nth-child(1) {
    position: absolute;
    top: 15%;
    z-index: 0;
    text-align: right;
    font-size: 16px;
  }

  .maika-desc p:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 65%;
    z-index: 0;
    text-align: left;
    font-size: 14px;
  }

  .maika-desc p:nth-child(3) {
    position: absolute;
    top: 65%;
    left: 65%;
    z-index: 0;
    text-align: left;
    font-size: 18px;
  }

  .maika-img-desc{
    position: absolute;
    z-index: -99;
  }

  .maika-img-desc img{
    width: 75%;
  }

  .maika-expand{
    position: absolute;
  }

  /*About people section*/
  .about-people{
    margin-top: 20%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }

  .parent-img-about-people{
    width: 100%;
    display: flex;
    justify-content: center;
    
  }

  .parent-desc-about-people{
    position: relative;
    width: 80%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    
  }

  .brnormal{
    display: block;
          margin-bottom: 1em;
  }

  .new-desc-about-people{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .new-desc-about-people p:nth-child(1){
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    /* or 30px */

    display: flex;
    align-items: center;
    letter-spacing: 0.06em;

    color: #FFF8F8;
  }

  .new-desc-about-people p:nth-child(2){
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    /* or 30px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .new-desc-about-people p:nth-child(3){
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 19px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .new-desc-about-people p:nth-child(4){
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 19px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .new-desc-about-people p:nth-child(5){
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 120%;
    /* or 19px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
    color: #FFF8F8;
  }

  .desc-about-people{
    position: relative;
    padding: 15%;
    width: 100%;
    margin-top: 16%;
  }

  .desc-about-people p:nth-child(1){
    color: white; 
    text-align: right;
    font-size: 21px; 
    margin-top: -25%;
    letter-spacing: .05em;
  }

  .desc-about-people p:nth-child(2){
    text-align: right; 
    color: white;
    font-size: 14px; 
    font-weight: 300;
    letter-spacing: .05em;
  }

  .img-about-people{
    
    display: none;
  }

  .img-about-people img{
    width: 100%;
    margin-left: 0%;
    margin-top: 0%;
  }

  .img-about-people-mobile{
    
    width: 80%;
  }

  .img-about-people-mobile img{
    width: 100%;
    margin-left: 0%;
    margin-top: 8%;
  }

  .img-about-people-2{
    position: relative;
  }

  .img-about-people-2 img{
    display: none;
    width: 45%; 
    margin-top: -30%; 
    margin-left: 0%;
  }

  /*Selected clients section*/

  .parent-selected-client{
    margin-top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .selected-client{
    left: 15%; 
    z-index: 1; 
    position: relative;
    margin-top:15%;
  }

  .selected-client p {
    font-size: 11px; 
    color: white;
    position: relative; 
    line-height: 50px;
    letter-spacing: .4em;
    transform: rotate(0deg);
    top: 0px;

  }

  .parent-img-selected-client{
    margin-left: 0%;
  }

  .img-selected-client{

  }

  .parent-nusantara{
    margin-top: 25%;
    margin-bottom: 15%;
  }

  .nusantara h4{
    font-size: 16px; 
    color: white;
    line-height: 50px; 
    letter-spacing: .025em; 
    font-weight: 500;
  }


  

      


  /*SUBCONTENT*/

  .parent-content-desc{
    width: 100%;
    margin-top: 12%;
    padding-left: 0%;
    display: flex;
    flex-direction: column;
  }

  .parent-content-desc p{

  }

  .parent-about{
    left: -17%; 
    right: 0 !important;
  }

  .parent-about p{
    display: none; 
    position: relative; 
    transform: rotate(-90deg); 
    top: 70px; 
    left: -5%; 
    font-weight: 400;
  }

  .container-parent-content{
    justify-content: center;
  }


  .after-parent-content-desc{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }


  .font-12{
    font-size: 10px;
  }

  .font-22{
    font-size: 14px;
  }

  .font-11{
    font-size: 11px;
  }

  .font-16{
    font-size: 16px;
    letter-spacing: .05em;
  }

  .parent-all-desc-content{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .parent-subcontent{
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .subcontent-1{
    line-height: 1em;
    width: 65%;
    margin-top: 2%;
  }

  .subcontent-2{
    line-height: 1em;
    width: 35%;
    margin-top: 2%;
  }

  .subcontent-3{
    line-height: 1em;
    width: 100%;
    margin-top: 2%;
  }

  .subcontent-1-a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .subcontent-2-a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .subcontent-3-a{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .parent-content-client{
    display: flex;
    width: 100%;
    height: 50%;
  }

  .client-content-1{
    width: 100%;
    height: 50%;
  }

  .client-content-2{
    width: 40%;
  }

  .img-bg{
      object-fit: cover;
    width: 100vw;
    height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      background-size: cover;
  }

  .before-all-parent-column-grid{
    margin-left: 0;
    padding-left: 0;
    width: 100%;
  }


  .all-parent-column-grid{
    width: 100%;
    height: 100%;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

  }

  .parent-column-grid-1{
    width: 100%;
    height: 40px; 
    border: 0.3px solid #cccccc;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .parent-column-grid-2{
    width: 100%;
    height: 40px; 
    border: 0.3px solid #cccccc;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: 0%;
    margin-top: 3%;
  }

  .parent-column-grid-3{
    width: 100%;
    height: 40px; 
    border: 0.3px solid #cccccc;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: 0%;
    margin-top: 3%;
  }

  .column-grid{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin-top: 0%;
  }

  .column-grid p {
    display: flex;
    font-size: 8px;
  }

  .column-grid span {
    display: flex;
    font-size: 8px;
  }


  .content-section-video{
    margin-top: 0%;
    margin-bottom: 5%;
    width: 100%;
  }

  #content-1{
    width: 100vw;
    display: flex;
    height: auto;
    margin-top: 10%;
    flex-direction: column;
    align-items: center;
  }

  .parent-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
  }

  .title-content{
    margin-top: 2%;
    width: 100%;
  }

  .title-content p{
    font-size: 18px;
    letter-spacing: .1em;
  }

  .deskripsi-subcontent{
    margin-top: 2%;
    width: 100%;
  }

  .deskripsi-subcontent p{
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.5em;
    text-align: center;
  }

  .content-section-par{
    width: 90%;
  }


  .content-desc-paragraf{
    text-align: justify; 
    margin-top: 12%;
    margin-bottom: 25%;
    width: 100%;
  }

  .content-desc-paragraf p{
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.5em;
  }


  .parent-sub-content{
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
  }

  .parent-sub-content p{
    text-align: left;
  }

  .content-section{
    margin-top:0%;
  }

  .parent-to-buy-subcontent{
    height: 30vh;
    margin-top: 15%;
    margin-bottom: 5%;
  }

  .parent-to-buy-subcontent p{
    font-size: 12px;
  }

  .buy-subcontent p:nth-child(1){
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    letter-spacing: .1em;
    color: white;
  }

  .buy-subcontent p:nth-child(2){
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    letter-spacing: .1em;
    color: white;
  }

  .buy-subcontent a{
    font-size: 10px;
    color: white;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    letter-spacing: .1em;
    color: white;

  }

  .buy-subcontent a:hover{
    text-decoration: none;
    color: grey;
  }

  .view-our-subbrands{
        font-size: 12px;
      }

      .parent-tag-content{
        margin-top: 35%;
        display: flex;
        justify-content: center;

      }

      .before-parent-tag{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;

      }

      .parent-tag{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        padding: 1%;
        margin-bottom: 3%;
      }

      .after-parent-tag{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 90%;
      }

      .after-parent-tag a{
        display: flex;
        flex-direction: row;
        width: calc(96%/2);
        height: 21px;
        justify-content: center;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0.5);
        background-color: black;
        align-items: center;
        margin-right: 1%;
        margin-left: 1%;
        margin-bottom: 2%;
        text-decoration: none;
        color: white;
      }

      .after-parent-tag a:hover{
        color: black;
        background-color: #FFF8F8;
      }

      .isi-tag{
        
      }

      .isi-tag span{
        display: flex;
        align-self: center;
        /*margin-top: 5%;*/
        font-size: 7px;
      }

      .parent-content{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        width: 85%;
        margin-top: 7%;
      }


      .isi-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
        padding: 1%;
        margin-bottom: 2%;
      }

      .thumbnail-img{
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
      }

      .thumbnail-img img
      {
          transition: transform .2s ease-out;
      }

      .thumbnail-img img:hover
      {
          transform: scale(1.2);
      }

      .thumbnail-img a:hover
      {
          transform: scale(1.2);
      }

      .parent-info-thumbnail{
        width: 100%;
        text-align: left;
      }

      .info-thumbnail{
        margin-top: 5%;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .info-thumbnail p{
        font-size: 12px;
      }

      .parent-load-more{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 60%;
        padding: 1%;
      }

      .after-parent-load-more{
        margin-top: 15%;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
      }

      .after-parent-load-more a{
        display: flex;
        flex-direction: row;
        width: calc(80%/2);
        height: 25px;
        justify-content: center;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0.5);
        background-color: black;
        align-items: center;
        text-decoration: none;
        color: white;
      }

      .after-parent-load-more a:hover{
        color: black;
        background-color: #FFF8F8;
      }

      .load-more{
        
      }

      .load-more span{
        display: flex;
        align-self: center;
        /*margin-top: 5%;*/
        font-size:9px;
      }

  .parent-thumbnail-content{
        margin-top: 35%; 
        margin-bottom: 25%;
      }

      .parent-div-arrow{
        display: flex;
        flex-direction: row;
      }

      .arrow-kiri{
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .arrow-kanan{
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .thumbnail-content{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-top: 8%;
      }


      .thumbnail-content img{
        width: 90%;
      }

      .thumbnail-content img
      {
          transition: transform .2s ease-out;
      }

      .thumbnail-content img:hover
      {
          transform: scale(1.2);
      }

      .other-projects-1{
        width: 100%;
        padding-top: 5%;
        margin-bottom: 0%;
      }

      .other-projects-1 a{
        text-decoration: none;
        color: #FFF8F8;
      }

      .other-projects-1 a p{
        font-size: 12px;
        margin-top: 4%;
      }

      .other-projects-2{
        display: none;
        width: 100%;
        margin-bottom: 6%;
      }

      .other-projects-2 a{
        text-decoration: none;
        color: #FFF8F8;
      }

      .other-projects-2 a p{
        font-size: 12px;
        margin-top: 4%;
      }

      .other-projects-3{
        display: none;
        width: 100%;
        margin-bottom: 6%;
      }

      .other-projects-3 a{
        text-decoration: none;
        color: #FFF8F8;
      }

      .other-projects-3 a p{
        font-size: 12px;
        margin-top: 4%;
      }

  /*CAREER*/

  .career{
    margin-top:-4%;
    display: flex;
    flex-direction: row;
    /**/
    justify-content: center;
    width: 90%;
  }

  .parent-career-header{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }

  .career-text{
    /*transform: rotate(-90deg); */
    margin-top: -10%; 
    font-size: 18px; 
    font-weight: 300; 
    letter-spacing: 6px;
    display: flex;
    width: 6%;
  }

  .career-text p{
    transform: rotate(0deg); 
    margin-left: 0%;
  }

  .parent-career-jump{
    display: flex;
    flex-direction: column;
  }

  .career-jump p{
    font-size: 21px;
    text-align: left;
  }

  .career-find p{

    font-size: 14px;
    text-align: left;

  }

  .img-bg-career{
    object-fit: cover;
    width: 100vw;
    height: 30vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      background-size: cover;
  }

  .header-career{
    width: 100%;
    height: 294px;
    background: url('../assets/career/Screenshot 2020-08-10 at 16.13 1.jpg') no-repeat 100% 100%;
    /*background-position: center;*/
    background-size: cover;
  }

  .parent-par-1{
    display: flex;
    right: 80px; bottom: 7px; 
  }

  .parent-jump{
    display: flex;
    align-items: flex-start;
  }

  .par-1{
    transform: rotate(-90deg); 
    margin-top: 15%;
    position: absolute;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 6px;
    margin-left: 7%;
  }

  .par-2{
    font-size: 18px;
    font-weight: 600; 
    letter-spacing: 1px;
    text-align: left;
  }

  .par-3{
    margin-top: 1%; 
    margin-bottom: -1%; 
    font-style: 14px;
    text-align: left;
  }

  .margin-career{
    margin-top: -5%;
  }

  .parent-content-career{
    display: flex;
    flex-direction: column;
  }

  .parent-btn-creative-all{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .parent-btn-creative-all p{
    display: flex;
    flex-direction: column;
    margin-top: 5%;
  }

  .btn{
    border: 1px solid #FFF8F8;
    border-radius: 25px;
    width: auto;
    height: auto;
    text-align: left;
    display: flex;
  }

  .btn span{
    color: white; 
    letter-spacing: 1px; 
    padding: 1px;
    font-size: 12px;
    margin-top: 0;
    padding-top: 0;
  }

  .parent-career{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }


  .all-parent-par-1{
  }

  .garis-career{
    background-color: white;
    width: 100%;
    height: 1px;
  }

  .career-email{
    margin-left: 0%; 
    margin-top: 5%;
    margin-bottom: 21%;
    display: flex;
    justify-content: center;
  }

  .email-us{
  }

  .link-email-career{
    display: flex;
    justify-content: center;
    align-self: center;
  }

  .link-email-career a{
    text-decoration: none; 
    color: white;
    font-size: 12px;
    display: flex;
    justify-content: center;
  }

  .sub-parent-content-career{
    margin-left: 0%;
  }

  .parent-content-career{
    display: flex;
    flex-direction: column;
  }

  .parent-isi-career{
    margin: 0;
    padding: 0;
  }

  .parent-creative-management{
    border: 1px solid #FFF8F8;
    background-color: transparent; 
    border-top-right-radius: 00px;
    border-bottom-right-radius: 20px;
    margin-left: 0%; 
    margin-bottom: 1.6%; 
    text-align: center;
    width: 100%;
  }


  .before-creative-management{
    display: flex;
    flex-direction: column;
    border-top-right-radius: 0px;
  }

  .creative-management{
    width: 100%; 
    height: 50%; 
    padding: 0; 
    margin: 0; 
    padding-left: 0px;  
    margin-top: 0%; 
    border-top-left-radius: 0px;
  }

  .isi-content-creative-management{
    z-index: 0; 
    background-color: white; 
    border-top-right-radius: 0px; 
    text-align: center; 
    align-items: center; 
    margin-left: 0%;
    width: 100%;
  }

  .parent-content-pm{
    width: 100%; 
    height: 100%;  
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .isi-content-pm{
    width: 100%; 
    height: 100%; 
    text-align: left;
    margin-top: 6%;
    padding: 5%;
  }

  .isi-content-pm h4{
    color: black; 
    font-weight: bold;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .05em;
  }

  .isi-content-pm p{
    font-size: 14px; 
    color: black;
    letter-spacing: .1em;
    font-weight: 500;
  }

  .parent-par-pm{
    width: 100%; 
    height: 100%; 
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  .par-pm{
    width: 90%;
    margin-top: 10%;
  }

  .par-pm p {
    font-size: 14px; 
    font-weight: 400; 
    text-align: left; 
    letter-spacing: .1em;
  }

  .parent-par-pm-qualification{
    width: 100%; 
    padding: 0; 
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }

  .par-pm-qualification{
    margin-top: 5%; 
    margin-left: 2%;
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .par-pm-qualification h4{
    font-size: 16px; 
    font-weight: bold; 
    text-align: left;
    letter-spacing: .1em;
  }

  .par-pm-qualification p{
    font-size: 14px; 
    font-weight: 400; 
    text-align: left;
    letter-spacing: .05em;
  }

  .parent-pm-apply{
    width: 100%; 
    height: 100%;  
    padding: 0; 
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }

  .pm-apply{
    margin-top: 5%; 
    margin-bottom: 5%;
    display: flex;
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .pm-apply p{
    font-size: 14px; 
    font-weight: 400; 
    text-align: left;
    letter-spacing: .1em;
  }

  .pm-apply p:nth-child(2){
    font-size: 12px; 
    font-weight: 400; 
    text-align: left;
    letter-spacing: .1em;
  }

  .parent-were-always{
    display: flex;
    text-align: left;
    flex-direction: column;
    width: 90%;
  }

  .were-always{
    text-align: left;
    margin-left: 0%;
    margin-top: 7%;
    padding-left: 0;
  }

  .were-always p {
    text-align: left;
    font-size: 14px;
  }

  .margin-left-5{
    margin-left: 0%;
    padding-left: 0;
  }

  .margin-top-5{
    margin-top: 6%;
  }

  .career-caption label{
    font-size: 14px;
  }

  .cv-upload {
    display: flex;
    flex-direction: column;
  }


  .cv-upload label {
    font-size: 14px;
    margin-top: 7%;
  }

  .cv-upload label i{
    font-size: 11px;
  }

  .cv-upload input{
    margin-left: 0%;
    margin-top: 2%;
    font-size: 12px;
    padding-left: 0;
  }

  .sub-parent-submit-btn{
    display: flex;
    justify-content: center;
  }

  .parent-submit-btn{
    display: flex;
    width: 75%;
    height: 15%; 
    margin-left: 0%; 
    margin-top: 15%;
    margin-bottom: 50%;
    justify-content: flex-end;
  }

  .submit-btn{
    display: flex;
    justify-content: flex-end;
  }

  .submit-btn a button{
    background-color: #FFF8F8; 
    border-radius: 50px;
    width: 80px;
    justify-content: center;
    padding: 2%;
  }

  .submit-btn a button span{
    color: black; 
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 11px;
  }

  .col-md-5-custom{
    width: 100%;
  }

  .closing-section-end{
    height: 10vh;
  }
    }

    @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .deskripsi-index-satu{
    }
}

    @media only screen and (min-width: 320px){
    }

    @media only screen and (min-width:  375px) and (max-width: 768px){
  .video-bg{
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: block;
    justify-content: center;
    align-items: center;
    z-index: 1;
    filter: brightness(30%);
    background-size: cover;
}

      .text-garis-hello-current{
    width: 50%;
    text-align: left;
  }
  .garis-hello-current {
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 0.5px;
      width: 50%;
  }

  .text-garis-hello-current span{
    font-size: 16px;
  }

      .text-garis-hello-clients{
      margin-right: 0%;
      display: flex;
      width: 30%;
      
  }

  .garis-hello-clients{
      background-color: #eee;
      border: 0 none;
      color: #eee;					width:70%;
      height: 0.5px;
  }

      /*tambahan last edit*/

      .how-can p:nth-child(1){
      font-size: 18px;
      line-height: 120%;
  }

  .how-can p:nth-child(2){
      font-size: 12px;
      line-height: 150%;
  }

  .how-can p:nth-child(3){
      font-size: 10px;
      line-height: 100%;
  }

  .how-can a{
      font-size: 12px;
      line-height: 100%;

  }

  .how-can a:hover{
      text-decoration: none;
      color: grey;

  }


      /*end last edit*/



      /*career*/

      .cls-recruitment p:nth-child(1) {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    /* or 60px */
    letter-spacing: 0.05em;
    color: #FFF8F8;
    padding-bottom: 5%;
  }

  .cls-recruitment p:nth-child(2){
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 20%;
    /* or 42px */
    letter-spacing: 0.05em;
    color: #FFF8F8;
  }
  .new-were-always p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    /* or 30px */

    letter-spacing: 0.04em;

    color: #FFF8F8;
  }
  .new-the-opportunity p {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 120%;
    /* or 30px */

    letter-spacing: 0.04em;

    color: #FFF8F8;
  }
  .btn-hiring span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 120%;
    /* identical to box height, or 42px */
    letter-spacing: 0.05em;
    color: #FFFFFF;
  }

  .btn-hiring img{
    width: 3%;
  }
  .isi-hiring{
    text-align: justify;
    padding-top:6%;
    padding-bottom: 2%;
    font-size: 14px;
  }
  .apply-class span{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 100%;
    /* identical to box height, or 16px */

    text-align: center;
    letter-spacing: 0.06em;

    color: #FFFFFF;
  }

  .how-can a{
    font-size: 10px;
  }

      /*end career*/

      /*project details*/

      .before-parent-desc-projects{
    margin-top: 10%;
  }

  .parent-scroll{
    /*bottom: 15%;*/
  }

  .btn-scroll{
    display: flex;
    justify-content: center;
  }

  .btn-scroll img{
    width: 80%;
  }

  .text-scroll{
    /*margin-top: 4%;*/
  }	

  .text-scroll p{
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.04em;
  }

  .tittle-subcontent p {
    font-size: 21px;
  }

  .client-projects p:nth-child(1){
    font-size: 12px;
  }

  .client-projects p:nth-child(2){
    font-size: 21px;
  }

  .year-projects p:nth-child(1){
    font-size: 12px;
  }

  .year-projects p:nth-child(2){
    font-size: 21px;
  }

  .tag-projects{
    width:calc(95% / 2);
    height: 32px;
    border-radius: 50px;
    margin-right: 2%;
    margin-top: 4%;
  }

  .tag-projects span{

    font-size: 12px;

  }

  .description-projects p{
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.07em;
    text-align: justify;
  }

  .parent-iframe-video{
        display: flex;
        width: 100%;
        justify-content: center;
      }

      .ukuran-video{
        display: flex;
        width: 100%;
        height: 240px;
      }


  /*end project details*/
      
      

      /*home*/

      .caption-header{
    bottom:30%;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }

  .text-header p{
    font-size: 2px;
  }

  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile{
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:12px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

  .caption-header a{
      color: white;
      text-decoration: none;
  }


      /*end home*/



      .we-help-organization{
        bottom: 22.5%;
      }

      .we-help-organization span{

      }

      .we-help-organization p{
        font-size: 16px;
      }

      .index-bintang{
      text-align: left;
  }

  .index-bintang span{
      font-size: 12px;
  }

  .deskripsi-index-satu{
      
  }

  .deskripsi-index-satu p{
      font-size: 18px;
  }

  .deskripsi-index-dua{
    
  }

  .deskripsi-index-dua p{
      font-size: 11px;
  }

  .parent-img-about-subbrands{
      width:calc(100% / 2);
  }

  .text-garis-hello{
      margin-right: 6%;
      display: flex;
      width: auto;
      
  }

  .parent-about-subbrands{
      margin-top: 15%;
      
  }

  .text-garis-hello span{
      font-size: 16px;
  }

  .garis-hello{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width: 100%;
      height: 0.5px;
  }

  .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 40%;
      
  }

  .garis-hello-subbrands{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:60%;
      height: 0.5px;
  }

  .new-desc-about-people{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .new-desc-about-people p:nth-child(1){
    font-size: 18px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 18px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 13px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 13px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 13px;

  }
    }

    @media only screen and (min-width: 414px){
      .caption-header{
    bottom: 13em;
  }
    }

    @media only screen and (min-width: 768px){

      


      .asset-index-kanan{
        width: 50%;
        margin-top: -4%;
      }
      



      .text-garis-hello-clients{
      margin-right: 0%;
      display: flex;
      width: 20%;
      
  }

  .text-garis-hello-clients span{
      font-size: 25px;
  }

  .garis-hello-clients{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:80%;
      height: 0.5px;
  }
      
      /*subbrands*/

      .parent-header-looping{
    width: 100%;
  }

  .parent-header-looping video{
    width: 100%;
  }

  .tanda-bintang h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .maika-motion-picture h1{
    font-family: 'Degular Display';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0.05em;

  }

  .maika-motion-picture h1{
    text-align: left;
    margin-top: 5%;


  }

  .through-various h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .button-business-units p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 115%;
    /* or 18px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
  }

  .parent-iframe-video-subbrands{
        display: flex;
        width: 100%;
        justify-content: center;

      }

      .ukuran-video-subbrands{
        display: flex;
        width: 100%;
        height: 320px;
        
      }

      .tittle-projects-filter span{
    text-align: left;
    font-size: 24px;
  }

  .radio-filter{
    display: flex;
    align-items: center;
    
    width: auto;
    padding-right: 5%;
  }

  .radio-filter input{
    padding-right: 10%;
  }

  .radio-filter label{
    font-size: 14px;
  }

  .all-parent-content-filtering{
    margin-bottom: 9%;
  }

  .content-nama span{
        font-size: 25px;
      }

      .content-images{
        width: 100%;
        
      }

      .child-content-images{
        width: 100%;
        height: 100%;
        overflow: hidden;
        
        
      }


      .child-content-images img{
        width: 100%;
        transition: all .2s ease-in-out;
        
      }

      .child-content-images img:hover{
        transform: scale(1.05);
        
      }

      .content-desc p {
    font-size: 16px;
      }

      .projectscope-desc span {
    font-size: 16px;
      }

      .nomor-indexing{
        width: 40%;
        
        display: flex;
        justify-content: center;
      }

      .nomor-indexing a{
        font-size: 16px;
        text-decoration: none;
        color: grey;
      }

      .nomor-indexing a:active{
        color: white;
      }

      .active-indexing a{
        padding-left: 5%;
        padding-right: 5%;
        color: white;
      }

      .back-btn{
        width: 20%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .back-btn img{
        width: 40%;
      }

      .next-btn{
        width: 20%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .next-btn img{
        width: 40%;
      }

      /*tambahan about*/

      

      .parent-about-subbrands{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-top: 5%;
      width: 100%;
      
  }

  .kiri-about-subbrands{
      display: flex;
      width: 70%;
      justify-content: flex-end;
  }

  .kanan-about-subbrands{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      
  }

  .parent-img-about-subbrands{
      width:calc(92%/2);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 0%;
      margin-bottom: 2%;
      flex-wrap: wrap;
      margin-left: 4%;
      
  }


      /*end tambahan about*/

      .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 30%;
      
  }

  .text-garis-hello-subbrands span{
      font-size: 25px;
  }

  .garis-hello-subbrands{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:70%;
      height: 0.5px;
  }

  .logo-business-units-img{
      width: calc(80%/5);
      display: flex;
      justify-content: flex-start;
      margin-top: 5%;
      margin-right: 4%;

  }

  .logo-business-units-img img{
      /*width: 70%;*/
  }




      /*end subbrands*/


      /*tambahan home*/

      .c-anim-btn img{
    margin-bottom: 0em;
    width: 80%;
  }

      /*end tambahan home*/


      /*contact*/

      .angka-lima{
    margin-top: 15%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 80%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 7px;*/
  }

  .ukuran-angka-lima img{
    width: 80%;
  }

      .parent-btn-inquiry{
    margin-top: 5%;
    width: 80%;
  }

  .tab button{
    font-size: 16px;
    padding-top: 1%;
     padding-bottom: 1%;
      padding-left: 2%;
      padding-right: 2%;
      width: 30%;	
      margin-top: 2%;
  }

  

  

  .align-project{
    width: 80%;
    margin-top: 2%;
  }

  .project-in-mind {
    font-size: 25px;
  }

  .fill-in-the-field{
    font-size: 16px;
  }

  .subject-general label{
    font-size: 16px;
  }

  .subject-general input{
    font-size: 18px;
  }

  .colom-input label{
    font-size: 16px;
  }

  .colom-input input{
    font-size: 18px;
  }

  .colom-input select{
    font-size: 18px;
  }

  .colom-input-subject label{
    font-size: 16px;
  }

  .colom-input-subject input{
    font-size: 18px;
  }

  .colom-input-subject select{
    font-size: 18px;
  }

  .project-descriptions label{
    font-size: 16px;
  }

  .project-descriptions textarea{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    height: 150px; 
    margin-top: 0;
    padding-left: 0;
    font-size: 18px;
  }

  .btn-submit img{
    width: 10%;
  }
  
  .btn-submit input{
    width: 10%;
  }



      /*end contact*/


      /*career*/

      .text-garis-hello-current span{
        font-size: 25px;
      }

      .garis-hello-current{
        width: 80%;
      }

      .parent-sub-career{
    margin-top: 2%;
  }

      .cls-recruitment p:nth-child(1) {
    font-size: 25px;
    line-height: 120%;
    padding-bottom: 2%;

  }

  .cls-recruitment p:nth-child(2){
    font-size: 25px;
    line-height: 20%;
  }

  .new-were-always{
    width: 80%;
    padding-top: 0%;
  }
  .new-the-opportunity{
    width: 90%;
  }
  .new-were-always p{
    font-size: 16px;
    line-height: 120%;

  }
  .new-the-opportunity p {
    font-size: 16px;
    line-height: 120%;
  }
  .btn-hiring span{
    font-size: 32px;
    line-height: 120%;
  }

  .btn-hiring img{
    width: 3%;
  }
  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 18px;
  }
  .parent-link-apply{
    padding-top: 4%;
    padding-bottom: 6%;
  }
  .apply-class{
    width: 21%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding-top: 1%;
    padding-bottom: 1%;
  }
  .apply-class span{
    font-size: 16px;
    line-height: 100%;
  }

  /*tambahan new career*/

  .parent-all-col-career{
    margin-top: -5%;
  }



  /*end tambahan new careerr*/

      /*end career*/



      /*project details*/

      .before-parent-desc-projects{
    display: flex;
    width: 100%;
    
    justify-content: center;
    margin-top: 10%;
  }

      .subcontent-desc h1{
    font-size: 25px;
    line-height: 120%;

  }

  .subcontent-desc p{
    font-size: 18px;
    line-height: 150%;
  }

      .parent-iframe-video{
        display: flex;
        width: 100%;
        justify-content: center;
      }

      .ukuran-video{
        display: flex;
        width: 100%;
        height: 480px;
      }

      .description-projects p{
    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.07em;
    text-align: justify;
  }

      .tag-projects{
    border: 1px solid white;
    width:calc(94% / 3);
    height: 40px;
    border-radius: 50px;
  }

  .tag-projects span{
    font-size: 16px;
  }

      .tittle-subcontent p{
    font-size: 25px;
  }

  .client-projects p:nth-child(1){
    font-size: 16px;
  }

  .client-projects p:nth-child(2){
    font-size: 25px;
    line-height: 120%;
  }

  .year-projects p:nth-child(1){
    font-size: 16px;
  }

  .year-projects p:nth-child(2){
    font-size: 25px;
    line-height: 120%;
  }

      .parent-scroll{
    /*bottom: 10%;*/
  }

  .btn-scroll{
    display: flex;
    justify-content: center;
  }

  .btn-scroll img{
    width: 100%;
  }

  .text-scroll{
    /*margin-top: 3%;*/
  }

  .text-scroll p{
    font-size: 21px;
    line-height: 120%;
    letter-spacing: 0.04em;
  }



      /*end project details*/
      
      /*home*/

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 80%;
      margin-top: 4%;
      /*transition: opacity .6s;*/
    }

      .caption-header{
    bottom: 18em;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 80%;
  }

  .text-header p{
    font-size: 2px;
  }

  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 25px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile{
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:16px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

  .caption-header a{
      color: white;
      text-decoration: none;
  }


      /*end home*/
      

      .parent-navbar{
    width: 100%;
    padding-top: 2%;
    
  }

  

  
  

  .new-logo-maika img{
        width: 55%;
      }

      .we-help-organization{
        width: 60%;
      }

      .we-help-organization span{
        font-size: 25px;
      }

      .we-help-organization p{
        font-size: 20px;
      }

     

  

  .section-gif{
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    
      
  }


  .asset-gif{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 7%;

  }


  

  .index-bintang{
    text-align: left;
  }

  .index-bintang span{
    font-size: 16px;
  }

  .deskripsi-index-satu{
    padding-top: 4%;		
  }

  .deskripsi-index-satu p{
    font-size: 18px;


  }

  .deskripsi-index-dua{
    padding-top: 6%;
    width: 90%;
  }

  .deskripsi-index-dua p{
    font-size: 12px;
  }

  /*.parent-img-about-subbrands{
    width:calc(100% / 3);
  }*/

  #section-sub-brands{
    margin-top: 5%;
  }

  .text-garis-hello{
    display: flex;
    width: auto;
    
  }

  .garis-hello{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 0.5px;
    width: 90%;
  }

  .text-garis-hello span{
    font-size: 25px;
  }

  .list-about-subbrands ul li span{
    font-size: 14px;
  }

  .img-about-subbrands img{
    width: 80%;
    margin-bottom: 5%;
  }

  .about-people{
    margin-top: 15%;
    width: 80%;
    height: 100%;
    flex-direction: row;
  }

  .parent-desc-about-people{
    width: 50%;

  }

  .parent-img-about-people{
    width: 50%;
  }

  .new-desc-about-people{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .img-about-people{
    display: flex;
    justify-content: center;
    padding: 10%;
  }

  .img-about-people img{
    width: 100%;
  }

  .img-about-people-mobile{
    display: none;
  }

  .new-desc-about-people p:nth-child(1){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 16px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 16px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 16px;
  }

  .how-can p{
      text-align: center;
  }

  .how-can p:nth-child(1){
      font-size: 22px;
  }

  .how-can p:nth-child(2){
      font-size: 16px;
  }

  .how-can a{
      font-size: 16px;
  }

      .drop-hello{
    margin-top: 5%;
    margin-bottom: 0%;
  }

  .hcwhy{
      margin-top: -5%;
    }

    .info-footer div{
      font-size: 11px;
    }

    .all-parent-footer{
      padding-bottom: 2%;
    }

    .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 12%;
  }

    }

    @media only screen and (min-width:  960px){

      
      .closing-section-general{
        height: 5vh;
      }

      .closing-project-details{
        height: 15vh;
      }

      .closing-section-career{
    height: 35vh;
  }
      
      .section-description{
        margin-bottom: 10%;
      }

      /*carousel*/

      .asset-gif{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 7%;

  }


  .asset-index-kanan{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0%;
    margin-top: -3%;
    padding-left: 2.5%;

  }

  .child-index-kanan{
    width: 100%;
    height: auto;
    padding-top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 8%;
    margin-left: 40px;
  }


      .child-asset-gif{
    
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }


  


      /*end carousel*/

      

      /*tambahan about*/

      .parent-about-subbrands{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-top: 3%;
      width: 100%;
      
  }

  .kiri-about-subbrands{
      display: flex;
      width: 74%;
      justify-content: flex-end;
  }

  .kanan-about-subbrands{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      
  }

  .parent-img-about-subbrands{
      width:calc(92%/3);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 0%;
      margin-bottom: 2%;
      flex-wrap: wrap;
      margin-left: 2%;
      
  }


      /*end tambahan about*/

      .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 22%;
      
  }

  .text-garis-hello-subbrands span{
      font-size: 25px;
  }

  .garis-hello-subbrands{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:78%;
      height: 0.5px;
  }
      




      /*subbrands*/

      .logo-business-units{
        margin-bottom: 15%;
      }


  .logo-business-units-img{
      width: 18%;
      display: flex;
      justify-content: flex-start;
      margin-top: 5%;
      margin-right: 2%;

  }

  

      /*.isi-header{
    margin-top: 0%;
  }*/

  .isi-header{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 16%;
  }

  .isi-header-kiri{
    width: 50%;
    padding: 2%;
  }

  .isi-header-kanan{
    width: 50%;
    padding: 2%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: space-between;
    
  }

  .parent-iframe-video-subbrands{
        display: flex;
        width: 100%;
        justify-content: center;

      }

      .ukuran-video-subbrands{
        display: flex;
        width: 100%;
        height: 480px;
        
      }

      .nomor-indexing{
        width: 25%;
        
        display: flex;
        justify-content: center;
      }

      .nomor-indexing a{
        font-size: 16px;
      }

      .back-btn{
        width: 20%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .back-btn img{
        width: 30%;
      }

      .next-btn{
        width: 20%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .next-btn img{
        width: 30%;
      }

      .logo-business-units-img img{
      /*width: 50%;*/
  }

      /*endsubbrands*/



      /*contact*/

      .btn-submit img{
    width: 8%;
  }
  
  .btn-submit input{
    width: 8%;
  }

  .angka-lima{
    margin-top: 15%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 80%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 7px;*/
  }

  .ukuran-angka-lima img{
    width: 100%;
  }

      .parent-btn-inquiry{
    margin-top: 2%;
    width: 80%;
  }

  .tab button {
    
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
    transition: 0.3s;
    /*font-size: 12px;*/
    width: 25%;
  }

  .align-project{
    margin-top: -2%;
  }



      /*end contact*/


      /*career*/

      .text-garis-hello-current span{
        font-size: 25px;
      }

      .text-garis-hello-current{
        width: 27%;
      }

      .garis-hello-current{
        width: 73%;
      }
  .parent-all-col-career{
    margin-top: -5%;
  }

  .parent-sub-career{
    margin-top: 2%;
  }

      .cls-recruitment p:nth-child(1) {
    font-size: 25px;
    line-height: 120%;
  }

  .cls-recruitment p:nth-child(2){
    font-size: 25px;
    line-height: 20%;
  }
  .new-were-always{
    width: 60%;
    padding-top: 0%;
    margin-top: -1%;
  }
  .new-were-always p{
    font-size: 16px;
    line-height: 120%;
  }
  .new-the-opportunity{
    width: 70%;
  }
  .new-the-opportunity p {
    font-size: 16px;
    line-height: 120%;
  }
  .btn-hiring span{
    font-size: 32px;
    line-height: 120%;
  }



  .btn-hiring img{
    width: 2%;
  }
  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 18px;
  }
  .parent-link-apply{
    padding-top: 4%;
    padding-bottom: 6%;
  }
  .apply-class{
    width: 19%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding: 1%;
  }
  .apply-class span{
    font-size: 16px;
    line-height: 100%;
  }

      /*end career*/

      /*project details*/

      .parent-desc-projects{
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

      .ukuran-video{
        display: flex;
        width: 100%;
        height: 540px;
      }

      .description-projects{
    width: 100%;
    margin-top: 5%;
  }

      .tag-projects span{
    font-size: 18px;
  }

      .client-projects p:nth-child(1){
    font-size: 16px;
  }

  .client-projects p:nth-child(2){
    font-size: 25px;
    line-height: 150%;
  }

  .year-projects p:nth-child(1){
    font-size: 16px;
  }

  .year-projects p:nth-child(2){
    font-size: 25px;
    line-height: 150%;
  }


      /*end project details*/



      /*home*/

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 80%;
      margin-top: 4%;
      /*transition: opacity .6s;*/
    }


      .caption-header{
    bottom: 18em;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 60%;
  }

  .text-header p{
    font-size: 2px;
  }

  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 22px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile{
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:14px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

  .caption-header a{
      color: white;
      text-decoration: none;
  }


      /*end home*/



      .new-logo-maika img{
        width: 40%;
      }

      .we-help-organization{
        width: 50%;
      }

      .index-bintang span{
        font-size: 21px;
      }

      .deskripsi-index-satu p{
        font-size: 24px;
      }

      .deskripsi-index-dua p{
        font-size: 16px;
      }

      .list-about-subbrands ul li span{
        font-size: 14px;
      }

      .new-desc-about-people p:nth-child(1){
    font-size: 29px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 29px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 18px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 18px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 18px;
  }

  .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 14%;
  }

  .sidenav li {
    font-size: 42px;
    
      border-bottom: 1px solid #c6a159; /* Atur garis bawah secara default */
  }

  



  .parent-isi-content{
        width: 100%;
        height: 100%;
        
        display: flex;
        justify-content: center;
      }

      .sub-parent-isi-content{
        width: 80%;
        display: flex;
      }

      .content-judul{
        width: 20%;
      }

      .isi-content-subbrands{
        display: flex;
        flex-direction: row;
        width: 80%;
        
      }

      .content-nama{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .content-images{
        width: 40%;
      }

      .content-nama span{
        font-size: 18px;
      }

      .content-desc{
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 0%;
        padding-left: 2%;
      }

      .content-desc p {

    font-size: 14px;
      }
      


      .projectscope-desc span {
    font-size: 12px;
      }

      .parent-line-content{
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .line-content{
        width: 80%;
        
      }

      .line-content hr{
        background-color: #fff;
        color: #fff;
        width: 100%;
    height: .2px;
      }














    }

    @media only screen and (min-width:  1280px){

      .closing-section-career{
    height: 35vh;
  }
      /*carousel*/

      .asset-gif{
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 3%;
      padding-left: 3%;

  }


  .asset-index-kanan{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0%;
    margin-top: -4%;
    padding-left: 2.5%;

  }
  

.see-more i {
margin-left: 5px;
}
.see-more u {
font-size: 14px;
}
/* Gaya CSS untuk Bagian Teks di Atas Gambar */
.text-over-image {
position: relative;
background-color: #007BFF; /* Warna latar belakang sesuaikan dengan preferensi Anda */
text-align: center;
padding: 40px 0;

}

.image-container {
position: relative;
}

.image-container img {
border-radius: 50%; /* Untuk membuat latar belakang gambar berbentuk bulat */
width: 150px; /* Sesuaikan ukuran gambar sesuai kebutuhan Anda */
height: 150px;
object-fit: cover; /* Menghindari distorsi gambar */
}

.text-container {

top: 50%;
left: 50%;
transform: translate(0%, -37%);
}

.text-container h2 {
font-size: 36px; /* Ukuran teks besar sesuaikan dengan preferensi Anda */
color: #c6a058
; /* Warna teks sesuaikan dengan preferensi Anda */
margin: 0;
padding: 10px;
}
/* Gaya CSS untuk Bagian dengan Latar Belakang Gambar dan Teks di Depan */
.background-with-text {
background-image: url('/Landing_Page/PMA/assets/img/home/footer.png'); /* Ganti 'background.jpg' dengan URL gambar latar belakang yang Anda inginkan */
background-size: auto 80%; /* Atur gambar latar belakang menjadi 80% lebar elemen dan otomatis mengatur tingginya */
background-position: center; /* Pusatkan gambar latar belakang */
background-repeat: no-repeat; /* Hindari pengulangan gambar latar belakang */
color: #fff; /* Warna teks pada elemen */
text-align: center;
padding: 20px;
display: flex; /* Menggunakan CSS Flexbox */
flex-direction: column; /* Teks dan gambar akan menjadi satu kolom */
align-items: center; /* Pusatkan elemen vertikal di tengah */
justify-content: end; /* Pusatkan elemen horizontal di tengah */
height: 300px; /* Tinggi elemen teks */
margin-top:5%;
}
.background-with-text a {
text-decoration: none;
color: #c6a159; /* Warna tautan sesuaikan dengan preferensi Anda */

transition: color 0.3s;
}


.text-container {

}

.text-container h2 {
padding: 0px; /* Ruang padding untuk teks */
}

    }

    @media only screen and (min-width:  1366px){

      .list-about-subbrands ul li {
      font-size: 0.8em;
  }

      .closing-section-career{
    height: 35vh;
  }


      /*tes select2*/

      .select2-selection__choice{
        color: black!important;
        font-size: 22px!important;
        padding-left: 4%!important;
        padding-right: 4%!important;
      /*background-color: transparent!important;*/
      border:none!important;
      border-radius: 25px!important;
      background-color: rgba(255, 255, 255, 1) !important;
      letter-spacing: 0.06em!important;
  }

  .select2-selection__choice__remove{
      border: none!important;
      border-radius: 0!important;
      padding: 0 2px!important;
  }

  .select2-selection__choice__remove:hover{
      background-color: transparent!important;
      color: #ef5454 !important;
  }

  .select2-container {
      width: 100% !important;
  }

  .select2-hidden-accessible { 
    position: fixed !important; 
  }


      .select2-container--default{
        

      }

      .select2-selection--single{
        background-color: black!important;
        color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      outline: none;
      border-radius: 0!important;
      padding-bottom: 35px!important;
      }

      .company-industry{
        display: flex;
        justify-content: flex-end;
      }

      .budget-range{
        display: flex;
        justify-content: flex-end;
      }

      .select2-search__field{
        background-color: black!important;
        border: none!important;
        outline: none!important;
        color: #fff!important;
      }

      .select2-selection__rendered{
        color: #fff!important;
        font-size: 22px!important;
        padding-left: 0!important;
        border: none;
        outline: none;
      }

      .select2-container--default .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-container--open .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-selection__arrow {
      height: 90% !important;
      background-color: black!important;
  }

      .select2-container--default .select2-selection--multiple{
      background-color: black!important;
      color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      border-radius: 0!important;
  }

      .select2-dropdown.select2-dropdown--below{
      background-color: black!important;
      color: white!important;
      text-align: left!important;
      font-size: 22px!important;
      letter-spacing: 0.06em!important;
      overflow-x: hidden!important;
  }

  .mul-select{
    /*width: 100%!important;*/
    overflow: hidden;
  }

      /*end teselect2*/
  .gradien-sebelah-kanan{
  height: 40%;
  width: 8%;
  margin: 9em 58px 0px 88%;
  text-align-last: right;
  position: absolute;
  z-index: 3;
  /* background: linear-gradient(90deg, rgb(0 0 0) 4%, rgba(106,105,128,0) 40%, rgba(252,252,252,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 99%); */
  background: linear-gradient(88deg, rgba(0,0,0,0) 0%, rgba(0,0,0,12) 100%);
}
.gradien-sebelah-kiri{
  
  height: 40%;
  width: 13%;
  margin: 9em 62px 0px 4%;
  position: absolute;
  z-index: 3;
  /* background: linear-gradient(90deg, rgb(0 0 0) 4%, rgba(106,105,128,0) 40%, rgba(252,252,252,0) 0%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 99%); */
  background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,12) 100%);
}



      /*contact tambahan*/

      .colom-input{
    float: left; 
    width: 49%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-subject{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-textarea{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } 

  .colom-input input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 22px;
  }

  .colom-input input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 22px;
  }


  .colom-input select{
    width: 49%;
    font-size: 22px;
  }



  .colom-input-subject input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 22px;
  }

  .colom-input-subject input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 22px;
  }


  .colom-input-subject select{
    width: 100%;
    font-size: 22px;
  }

  .colom-input-textarea textarea{
    width: 100%;
    height: 150px;
    padding-left: 0;
    font-size: 22px;
  }

  .colom-input-textarea label{
    font-size: 22px;
  }




  .subject-general label{
    font-size: 22px;
  }

  .subject-general input{
    font-size: 22px;
  }

  .colom-input label{
    font-size: 22px;
  }

  .colom-input-subject label{
    font-size: 22px;
  }

  .project-descriptions label{
    font-size: 22px;
  }

  .project-descriptions textarea{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    height: 150px; 
    margin-top: 0;
    padding-left: 0;
    font-size: 22px;
  }

  /*input[type="text"]{*/
    /*font-size: 15px/24px; */
  /*	font-family: Degular Display ;
    color: #fff; 
    width: 48%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
  }*/

  .effect-16{
    border: 0; 
    padding: 4px 0; 
    border-bottom: 1px solid #ccc; 
    background-color: transparent;
    z-index: 9;
  }

  .effect-16 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 0px; 
    background-color: #fff; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16 ~ label{
    position: absolute; 
    left: 0; 
    width: 100%; 
    top: 7px; 
    color: #aaa; 
    transition: 0.3s; 
    z-index: 0; 
    letter-spacing: 0.5px;
    font-size: 22px;
    font-family: Montserrat;
  }
  .effect-16:focus ~ label, .has-content.effect-16 ~ label{
    top: -21px; 
    font-size: 14px; 
    color: #3399FF; 
    transition: 0.3s;
  }


      /*end contact tambahan*/

      .fixed-footer{
    
    z-index: 99;
  }

        /* Loader */
  #loader {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 100%;
      background-color: #000000;
      background-image: url("../img/loader/LOOP_MAIKA LOGO.gif"); 
      background-size: 40%;
      background-repeat: no-repeat;
      background-position: center;
      overflow: hidden;
      justify-content: center;
      align-items: center;
  }
    /* End Loader */

      .closing-section-general{
        height: 5vh;
      }

      
      /*subbrands*/

      .parent-showreel{
        margin-top: 0%;
        display: flex;
        justify-content: center;
      }

      .isi-header{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;
  }

  .isi-header-kiri{
    width: 50%;
    padding: 2%;
  }

  .isi-header-kanan{
    width: 50%;
    padding: 2%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: space-between;
    
  }

  .tanda-bintang h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .maika-motion-picture h1{
    font-family: 'Degular Display';
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: 0.05em;

  }

  .maika-motion-picture h1{
    text-align: left;
    margin-top: 5%;
  }

  .through-various h2{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    line-height: 120%;
    letter-spacing: 0.04em;

  }

  .button-business-units p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 115%;
    /* or 18px */
    display: flex;
    align-items: center;
    letter-spacing: 0.06em;
  }

  .ukuran-video-subbrands{
        display: flex;
        width: 100%;
        height: 640px;
        
      }

      .parent-content-filtering{
    width: 100%;
    height: 56px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    padding-top: 8%;
    margin-bottom: 0%;
  }

  .content-filtering{
    width: 80%;
    display: flex;
    flex-direction: row;
  }

  .sub-parent-radio-filter{
    margin-top: 0%;
  }

  .all-parent-content-filtering{
    margin-bottom: 3%;
  }





  .all-parent-isi-content{
        
      }

      .parent-isi-content{
        width: 100%;
        height: 100%;
        
        display: flex;
        justify-content: center;
      }

      .sub-parent-isi-content{
        width: 80%;
        display: flex;
      }

      .content-judul{
        width: 20%;
      }

      .isi-content-subbrands{
        display: flex;
        flex-direction: row;
        width: 80%;
        
      }

      .content-nama{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .content-images{
        width: 40%;
      }

      .content-nama span{
        font-size: 21px;
      }

      .content-desc{
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 0%;
        padding-left: 2%;
      }

      .content-desc p {

    font-size: 16px;
      }
      
      .projectscope-desc {
          margin-top: 0%;
      }

      .projectscope-desc span {
    font-size: 16px;
      }

      .parent-line-content{
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .line-content{
        width: 80%;
        
      }

      .line-content hr{
        background-color: #fff;
        color: #fff;
        width: 100%;
    height: .2px;
      }

  .tittle-projects-filter{
    width: 20%;
    
    display: flex;
    align-items: center;
  }

  .tittle-projects-filter span{
    text-align: left;
    font-size: 25px;
  }

  .parent-radio-filter{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    
  }

  .sub-parent-radio-filter{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    
    align-items: flex-start;
    margin-top: 0%;
  }

  .radio-filter{
    display: flex;
    align-items: center;
    
    width: auto;
    padding-right: 3%;
  }

  .radio-filter input{
    padding-right: 10%;

  }

  .radio-filter label{
    font-size: 16px;

  }

  .nomor-indexing{
        width: 15%;
        
        display: flex;
        justify-content: center;
      }

      .nomor-indexing a{
        font-size: 16px;
      }

      .back-btn{
        width: 20%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .back-btn img{
        width: 18%;
      }

      .next-btn{
        width: 20%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .next-btn img{
        width: 18%;
      }

      .parent-logo-business-units{
      }

      .logo-business-units{
        width: 80%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }

      .child-logo-business-units{
        width: 80%;
        display: flex;
        flex-direction: row;
      }

      .logo-business-units-img{
      }

      .logo-business-units-img img{
      width: 80%;
  }

  .sub-parent-garis-hello-subbrands{
    margin-top: 5%;
    display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
  }


  .text-garis-hello-clients{
      margin-right: 0%;
      display: flex;
      width: 15%;
      

  }

  .text-garis-hello-clients span{
      font-size: 25px;
  }

  .garis-hello-clients{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:85%;
      height: 0.5px;
  }



  .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 20%;
      

  }

  .text-garis-hello-subbrands span{
      font-size: 25px;
  }

  .garis-hello-subbrands{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width:80%;
      height: 0.5px;
  }

  .child-embed-youtube{
        width: 80%;
        margin-top: 2%;
      }



  



      /*end subbrands*/



      /*tambahan home*/

      

  .after-background-mmp{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 96px;
        padding: 0;
        margin: 0;
    }


    .c--anim-btn span {
    color: white;
    text-decoration: none;
    text-align: center;
    display: flex;
  }

  .c--anim-btn, .c-anim-btn {
    transition: 0.3s;     
  }

  .c--anim-btn {
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

  .c-anim-btn{
    margin-top: 0em;   
  }

  /*.c-anim-btn img{
    margin-bottom: 0em;
  }*/

  .c-anim-btn img{
    margin-bottom: 0em;
    width: 100%;
  }

  .c--anim-btn:hover{
    text-decoration: none;
  }

  .c--anim-btn:hover .c-anim-btn{
    margin-top: -6em;
  }

  .c-anim-desc{
      background-color: #272727;
      width: 100%;
      height: 96px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .c-anim-desc span{
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      font-size: 18px;
      line-height: 120%;
      /* identical to box height, or 30px */
      letter-spacing: 0.06em;
      color: #FFFFFF;

  }

      /*end tambahan home*/





      /*contact*/

      .angka-lima{
    margin-top: 12%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 80%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 12px;*/
  }

  .ukuran-angka-lima img{
    width: 100%;
  }

      .parent-btn-inquiry{
    margin-top: 2%;
    width: 80%;
  }

  .align-project{
    width: 80%;
    margin-top: -2%;
  }

  .project-in-mind {
    font-size: 32px;
  }

  .fill-in-the-field{
    font-size: 22px;
  }

  .input-project-bagi-dua{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

  }

  .colom-input{
    
    width: 49%;
    /*padding-right: 4%;*/
    display: flex;
    flex-direction: column;
  }

  .colom-input-subject{
    
    width: 100%;
    /*padding-right: 4%;*/
    display: flex;
    flex-direction: column;
  }

  .parent-project-details{
    margin-top: 0%;
  }

  .project-details p{
    margin-top: 5%; 
    font-size: 25px;
  }

  .project-descriptions{
    
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-descriptions label{
    font-size: 22px;
  }

  .project-descriptions textarea{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    height: 150px; 
    margin-top: 0;
    padding-left: 0;
    font-size: 22px;
  }

  .btn-submit img{
    width: 6%;
  }
  
  .btn-submit input{
    width: 6%;
  }

  .tab button{
    font-size: 16px;
    padding-top: 0.6%;
     padding-bottom: 0.6%;
      padding-left: 1%;
      padding-right: 1%;	
      width: 19%;
  }

  



      /*end contact*/



      /*career*/

      .text-garis-hello-current{
        width: 22%;
      }

      .garis-hello-current{
        width: 78%;
      }


      .parent-isi-all-content{
        margin-top: -4%;
    margin-bottom: 5%;
    
  }

      .cls-recruitment p:nth-child(1) {
    font-size: 32px;
    line-height: 120%;
  }

  .cls-recruitment p:nth-child(2){
    font-size: 32px;
    line-height: 20%;
  }
  .new-were-always{
    width: 50%;
  }
  .new-were-always p{
    font-size: 21px;
    line-height: 120%;
  }
  .new-the-opportunity{
    width: 70%;
    padding-top: 0.5%;
  }
  .new-the-opportunity p {
    font-size: 21px;
    line-height: 120%;
  }
  .btn-hiring span{
    font-size: 32px;
    line-height: 120%;
  }

  .btn-hiring img{
    width: 1.5%;
  }
  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 21px;
  }
  .parent-link-apply{
    padding-top: 2.5%;
    padding-bottom: 4%;
  }
  .apply-class{
    width: 17%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding: 1%;
  }
  .apply-class span{
    font-size: 18px;
    line-height: 100%;
  }

      /*end career*/



      /*project details*/

      .parent-desc-projects{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }

      .description-projects{
    width: 100%;
    margin-top: 2%;
  }

      .parent-bab-content{
    margin-bottom: 6%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bab-content-awal{
    margin-top: 10%;
    
  }
  .bab-content{
    margin-top: 6%;
  }

  .parent-subcontent-desc{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6%;
  }

      .subcontent-desc h1{
    font-size: 35px;
    line-height: 120%;
  }

  .subcontent-desc p{
    font-size: 18px;
    line-height: 150%;
  }

      .ukuran-video{
        display: flex;
        width: 100%;
        height: 720px;
      }

      .parent-scroll{
    /*bottom: 10%;*/
  }
  .text-scroll{
    /*margin-top: 2%;*/
  }

      .description-projects p{
    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 21px;
    line-height: 150%;
    letter-spacing: 0.07em;
    text-align: justify;
  }

  .parent-tag-projects{
    width: 100%;
    display: flex;
    margin-top: 2%;
    flex-wrap: wrap;
    
  }

      .tag-projects{
    border: 1px solid white;
    width:calc(80% / 4);
    height: 50px;
    border-radius: 50px;
    margin-right: 2%;
    margin-top: 0%;
    margin-bottom: 2%;
  }

  .tag-projects span{
    font-size: 16px;
  }

      .tittle-subcontent p{
    font-size: 50px;
  }

  .client-projects p:nth-child(1){
    font-size: 16px;
  }

  .client-projects p:nth-child(2){
    font-size: 25px;
    line-height: 250%;
  }

  .year-projects p:nth-child(1){
    font-size: 16px;
  }

  .year-projects p:nth-child(2){
    font-size: 25px;
    line-height: 250%;
  }




      /*end project details*/



      
      /*home*/

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 80%;
      margin-top: 1%;
      /*transition: opacity .6s;*/
    }

      .caption-header{
    bottom:35%;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 50%;
  }

  .text-header p{
    font-size: 2px;
  }

  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 24px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile{
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:14px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }


      /*end home*/


      

      .closing-section-end{
    /*height: 15vh;*/
  }


      .parent-section-gif{
      margin-top: 10%;
  }

  .parent-selected{
    margin-top: 2%;
  }

  .about-people{
    margin-top: 12%;
    width: 70%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }

  #section-sub-brands{
    margin-top: 2%;
  }

      .new-logo-maika img{
        width: 40%;
      }

      .we-help-organization{
    bottom: 15%;
    width: 40%;
  }

      .we-help-organization span{
        font-size: 29px;
      }

      .we-help-organization p {
        font-size: 27px;
      }

      .asset-index-kanan{
    width: 40%;
    padding-left: 0%;
  }

      .index-bintang span{
        font-size: 21px;
      }

      .deskripsi-index-satu{
        padding-top: 6%;
      }

      .deskripsi-index-satu p{
        font-size: 30px;
      }

      .deskripsi-index-dua{
        padding-top: 4%;
      }

      .deskripsi-index-dua p{
        font-size: 18px;
      }

      /*tambahan about*/

      

      .parent-about-subbrands{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-top: 2%;
      width: 100%;
      
  }

  .kiri-about-subbrands{
      display: flex;
      width: 76%;
      justify-content: flex-end;
  }

  .kanan-about-subbrands{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      
  }

  .parent-img-about-subbrands{
      width:calc(92%/3);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 0%;
      margin-bottom: 2%;
      flex-wrap: wrap;
      margin-left: 2%;
      
  }


      /*end tambahan about*/

      

  .parent-garis-hello{
      margin-top: 10%;
      display: flex;
      flex-direction: row;
      width: 80%;
      justify-content: flex-start;
      align-items: center;
      
  }

  .text-garis-hello{
      margin-right: 6%;
      display: flex;
      width: auto;
      
  }

  .text-garis-hello span{
      font-size: 25px;
  }

  .garis-hello{
      background-color: #eee;
      border: 0 none;
      color: #eee;
      width: 100%;
      height: 0.5px;
  }

  .img-about-subbrands img {
    width: 100%;
  }

  .list-about-subbrands ul li span{
    font-size: 16px;
  }

  .new-desc-about-people{
    width: 100%;
  }

  .new-desc-about-people p:nth-child(1){
    font-size: 32px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 32px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 22px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 22px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 22px;
  }

  

  .parent-navbar{
      padding-top: 3%;
      /*background-color: #eee;*/

  }

  .parent-navbar-2{
      padding: 3%;
  }

  .new-logo-maika {
          width: 30%;
          margin-top: 0%;
      }

      .new-logo-maika img{
          width: 30%;
      }

      .center-selected-client{
    width: 80%;
    background-color: black;
    display: flex;
    justify-content: flex-end;

  }

  .images-selected-client{
    width: 90%;
    
  }

  .hcwhy{
      margin-top: -5%;
    }

    .all-parent-footer{
    display: flex;
    /*flex-direction: column;*/
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 2%;
    padding-bottom: 3%;
    background-color: #000000;

  }

  .parent-footer{
    position: relative;
    display: contents;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding: 0%;
    z-index: 9;
    
  }

  .parent-footer-dua{
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0%;
    z-index: 9;
  }
  .parent-footer-tiga{
    position: inherit;
    display: contents;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 0%;
    z-index: 9;
    /**/
  }
  .info-footer p{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #c6a058;
    margin-bottom: 1rem;
  }

  .info-footer div{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #c6a058;
  }

  .parent-socmed-footer{
    display: flex;
    justify-content: center;
    width: 63%;
    bottom: 0;
    margin-top: 1%;
  }

  .all-socmed-footer{
    display: flex;
    flex-direction: row;
  
  }

  .socmed-footer{
    width: 100%;
    
  }

  .socmed-footer img{
    padding: 15%;
  }
    }

    @media only screen and (min-width:  1440px){

      .closing-section-career{
    height: 55vh;
  }
      

      .container-carousel{
        display: flex;
        justify-content: center;
      }

      .carousel{
      }



      .closing-section-end{
        height: 25vh;
      }


      /*contact*/

      .angka-lima{
    margin-top:8%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 80%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 12px;*/
  }

  .ukuran-angka-lima img{
    width: 100%;
  }

      .parent-btn-inquiry{
    margin-top: 4%;
    width: 80%;
  }

  .align-project{
    width: 80%;
    margin-top: -4%;
  }

  .tab button{
    width: 17%;
  }

  .tab button span{
    font-size: 16px;
  }


      /*end contact*/




      .about-people{
    margin-top: 10%;
    width: 80%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }
      
      /*career*/

      .parent-col-center-hiring{
    display: flex;
    width: 80%;
    margin-top: 10%;
  }

  .parent-all-col-career{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .kiri-hiring-col{
    width: 48%;
  }

  .kanan-hiring-col{
    width: 48%;
  }

      .cls-recruitment p:nth-child(1) {
    font-size: 32px;
    line-height: 120%;
  }

  .cls-recruitment p:nth-child(2){
    font-size: 32px;
    line-height: 20%;
  }
  .new-were-always{
    width: 50%;
  }
  .new-were-always p{
    font-size: 18px;
    line-height: 120%;
  }
  .new-the-opportunity{
    width: 60%;
  }
  .new-the-opportunity p {
    font-size: 18px;
    line-height: 120%;
  }
  .btn-hiring span{
    font-size: 32px;
    line-height: 120%;
  }

  .btn-hiring img{
    width: 2.5%;
  }
  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 16px;
  }
  .parent-link-apply{
    padding-top: 4%;
    padding-bottom: 5%;
  }
  .apply-class{
    width: 22%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding: 1%;
  }
  .apply-class span{
    font-size: 14px;
    line-height: 100%;
  }

      /*end career*/

      /*project details*/

      .parent-desc-projects{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }


      /*end project details*/


      .we-help-organization{
      bottom: 14%;
      width: 40%;
  }

  

  .asset-index-kanan{
    width: 40%;
    padding-left: 0%;
  }

  .child-index-kanan{
    width: 100%;
    height: auto;
    padding-top: 0%;
  }

  .index-bintang span{
        font-size: 21px;
      }

      .deskripsi-index-satu p{
        font-size: 30px;
      }

      .deskripsi-index-dua p{
        font-size: 18px;
      }

      .new-desc-about-people p:nth-child(1){
    font-size: 35px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 35px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 25px;
  }	
    }

    @media only screen and (min-width:  1920px){
        
        .input-image{
            width: 40%;
        }


      .closing-section-career{
    height: 35vh;
  }


      /*tes select2*/

      .select2-selection__choice{
        color: black!important;
        font-size: 25px!important;
        padding-left: 4%!important;
        padding-right: 4%!important;
      /*background-color: transparent!important;*/
      border:none!important;
      border-radius: 25px!important;
      background-color: rgba(255, 255, 255, 1) !important;
      letter-spacing: 0.06em!important;
  }

  .select2-selection__choice__remove{
      border: none!important;
      border-radius: 0!important;
      padding: 0 2px!important;
  }

  .select2-selection__choice__remove:hover{
      background-color: transparent!important;
      color: #ef5454 !important;
  }

  .select2-container {
      width: 100% !important;
  }

  .select2-hidden-accessible { 
    position: fixed !important; 
  }


      .select2-container--default{
        

      }

      .select2-selection--single{
        background-color: black!important;
        color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      outline: none;
      border-radius: 0!important;
      padding-bottom: 39px!important;
      }

      .company-industry{
        display: flex;
        justify-content: flex-end;
      }

      .budget-range{
        display: flex;
        justify-content: flex-end;
      }

      .select2-search__field{
        background-color: black!important;
        border: none!important;
        outline: none!important;
        color: #fff!important;
      }

      .select2-selection__rendered{
        color: #fff!important;
        font-size: 25px!important;
        padding-left: 0!important;
        border: none;
        outline: none;
      }

      .select2-container--default .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-container--open .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-selection__arrow {
      height: 90% !important;
      background-color: black!important;
  }

      .select2-container--default .select2-selection--multiple{
      background-color: black!important;
      color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      border-radius: 0!important;
  }

      .select2-dropdown.select2-dropdown--below{
      background-color: black!important;
      color: white!important;
      text-align: left!important;
      font-size: 25px!important;
      letter-spacing: 0.06em!important;
      overflow-x: hidden!important;
  }

  .mul-select{
    /*width: 100%!important;*/
    overflow: hidden;
  }

      /*end teselect2*/

      /*contact tambahan*/

      .colom-input{
    float: left; 
    width: 49%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-subject{
    float: left; 
    width: 49%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-textarea{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } 

  .colom-input input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 25px;
  }

  .colom-input-subject input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 25px;
  }



  .colom-input-textarea label{
    font-size: 25px;
  }




  .colom-input select{
    width: 49%;
    font-size: 25px;
  }

  .colom-input-subject select{
    width: 49%;
    font-size: 25px;
  }

  .colom-input-textarea textarea{
    width: 100%;
    height: 150px;
    padding-left: 0;
    font-size: 25px;
  }

  /*input[type="text"]{*/
    /*font-size: 15px/24px; */
  /*	font-family: Degular Display ;
    color: #fff; 
    width: 48%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
  }*/

  .effect-16{
    border: 0; 
    padding: 4px 0; 
    border-bottom: 1px solid #ccc; 
    background-color: transparent;
    z-index: 9;
  }

  .effect-16 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 0px; 
    background-color: #fff; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16 ~ label{
    position: absolute; 
    left: 0; 
    width: 100%; 
    top: 7px; 
    color: #aaa; 
    transition: 0.3s; 
    z-index: 0; 
    letter-spacing: 0.5px;
    font-size: 25px;
    font-family: Montserrat;
  }
  .effect-16:focus ~ label, .has-content.effect-16 ~ label{
    top: -25px; 
    font-size: 18px; 
    color: #3399FF; 
    transition: 0.3s;
  }


      /*end contact tambahan*/


      /*tambahan about*/

      .closing-section-general{
        height: 2vh;
      }

      

      .parent-about-subbrands{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      margin-top: 5%;
      width: 100%;
      
  }

  .kiri-about-subbrands{
      display: flex;
      width: 71%;
      justify-content: flex-end;
  }

  .kanan-about-subbrands{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      
  }

  .parent-img-about-subbrands{
      width:calc(92%/3);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 0%;
      margin-bottom: 2%;
      flex-wrap: wrap;
      margin-left: 0%;
      
  }


      /*end tambahan about*/
      
      /*subbrands*/

      .sub-parent-header-subbrands{
    width: 70%;

  }

  .child-embed-youtube{
        width: 70%;
        margin-top: 2%;
      }

  .parent-content-filtering{
    width: 100%;
    height: 56px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
  }

  .content-filtering{
    width: 70%;
    display: flex;
    flex-direction: row;
  }

  .tittle-projects-filter{
    width: 20%;
    
    display: flex;
    align-items: center;
  }

  .tittle-projects-filter span{
    text-align: left;
    font-size: 21px;
  }

  .parent-radio-filter{
    width: 80%;
    display: flex;
  }

  .sub-parent-radio-filter{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    
    align-items: center;
  }

  .line-tittle-filter{
        width: 70%;
      }
  .sub-parent-isi-content{
        width: 70%;
      }
  .content-judul{
        width: 30%;
      }

      .isi-content-subbrands{
        width: 70%;
      }
  .line-content{
        width: 70%;
      }
  .col-indexing{
        width: 70%;
      }

      .logo-business-units{
      width: 70%;
      margin-bottom: 15%;
  }

      /*end subbrands*/


      /*contact*/

      .btn-submit img{
    width: 5%;
  }
  
  .btn-submit input{
    width: 5%;
  }

      .angka-lima{
    margin-top:10%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 70%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 12px;*/
  }

  .ukuran-angka-lima img{
    width: 100%;
  }

      .parent-btn-inquiry{
    margin-top: 2%;
    width: 70%;
  }

  .align-project{
    width: 70%;
    margin-top: -3%;
  }

  .tab button{
    width: 16%;
  }



  /*end contact*/

      /*career*/


      .sub-parent-recruitment{
    width: 70%;
  }
  .parent-col-center-hiring{
    width: 70%;
    margin-top: 10%;
  }

  .cls-recruitment{
    width: 70%;
  }

  .cls-recruitment p:nth-child(1) {
    font-size: 35px;
    line-height: 120%;

  }

  .cls-recruitment p:nth-child(2){
    font-size: 35px;
    line-height: 20%;
  }

  .new-were-always{
    width: 50%;
    margin-top: -1%;
  }
  .new-were-always p{
    font-size: 25px;
    line-height: 120%;
  }
  .new-the-opportunity{
    width: 70%;
  }
  .new-the-opportunity p {
    font-size: 25px;
    line-height: 120%;
  }

  .btn-hiring span{
    font-size: 35px;
    line-height: 120%;
  }

  .btn-hiring img{
    width: 2.5%;
  }

  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 18px;
  }

  .apply-class{
    padding-top: 0.5%;
    padding-bottom: 1%;
    width: 20%;
  }

      /*end career*/

      /*project details*/

      .subcontent-desc h1{
    font-size: 35px;
    line-height: 120%;
  }

  .subcontent-desc p{
    font-size: 18px;
    line-height: 150%;
  }

      .tittle-subcontent p{
    font-size: 50px;
  }

  .client-projects p:nth-child(1){
    font-size: 16px;
  }

  .client-projects p:nth-child(2){
    font-size: 25px;
    line-height: 300%;
  }

  .year-projects p:nth-child(1){
    font-size: 16px;
  }

  .year-projects p:nth-child(2){
    font-size: 25px;
    line-height: 300%;
  }

      .parent-desc-projects{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }

  .parent-bab-content{
    margin-bottom: 8%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bab-content-awal{
    margin-top: 10%;
    width: 70%;
    
  }

  .bab-content{
    margin-top: 8%;
    width: 70%;
  }

  .parent-scroll{
    /*bottom: 10%;*/
  }

  .btn-scroll{
    display: flex;
    justify-content: center;
  }

  .btn-scroll img{
    width: 100%;
  }

  .text-scroll{
    /*margin-top: 1%;*/
  }

  .text-scroll p{
    font-size: 21px;
    line-height: 120%;
    letter-spacing: 0.04em;
  }





      /*end project details*/



      /*home*/

      .parent-caption-header{
    width: 70%;
    
    display: flex;
    justify-content: flex-start;
  }

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 70%;
      margin-top: 1%;
      /*transition: opacity .6s;*/
    }

    .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 40%;
  }


      .caption-header{
    bottom: 21em;
  }


  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 27px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:14px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

      /*end home*/

      

      .we-help-organization{
      bottom: 15%;
      width: 30%;
  }

  .section-gif{
      width: 70%;		
  }

  .asset-gif{
    width: 50%;
    height: 100%;
  }

  .asset-index-kanan{
    width: 50%;
    padding-left: 7%;
  }

  .deskripsi-index-satu{
    padding-top: 6%;
  }

  .deskripsi-index-dua{
    padding-top: 5%;
  }

  .child-index-kanan{
    width: 80%;
    height: auto;
    padding-top: 0%;
  }

  .parent-garis-hello{
      width: 70%;
  }

  /*.kiri-about-subbrands{
    width: 70%;
  }*/

  .about-people{
    margin-top: 15%;
    width: 70%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }

  .parent-about-subbrands{
      margin-top: 2%;
  }

  .parent-desc-about-people{
    width: 50%;
    justify-content: flex-end;

  }

  .parent-img-about-people{
    width: 50%;
  }

  .new-desc-about-people{
    width: 90%;
  }

  .new-desc-about-people p:nth-child(1){
    font-size: 35px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 35px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 25px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 25px;
  }

  .new-parent-selected-client{
    width: 100%;
  }

  .center-selected-client{
    width: 70%;
    display: flex;
    justify-content: flex-end;
  }

  .images-selected-client{
    width: 87%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    
  }

  .images-selected-client img{
    width: 100%;
  }

  .how-can{
    width: 70%;
  }

  .how-can p{
      text-align: center;
  }

  .how-can p:nth-child(1){
      font-size: 25px;
  }

  .how-can p:nth-child(2){
      font-size: 18px;
  }

  .how-can a{
      font-size: 16px;
  }

  

      .new-logo-maika {
          width: 30%;
          margin-top: 0%;
      }

      .new-logo-maika img{
          width: 25%;
      }

      .closing-section-end{
    height: 15vh;
  }

  .info-footer div{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #FFFFFF;
  }
  .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 6%;
  }

  .socmed-footer{
    width: 100%;
    
  }

  .socmed-footer img{
    padding: 15%;
  }

  .list-about-subbrands ul li span{
        font-size: 18px;
      }


  .nav-toggle{
      width: 100%;
      padding: 0;
      margin: 0;
  }

  .nav-toggle img{
      width: 100%;
  }


  .closing-section-end{
    /*height: 15vh;*/
  }


      .parent-section-gif{
      margin-top: 10%;
  }

  .parent-selected{
    margin-top: 0%;
  }

  .about-people{
    margin-top: 10%;
    width: 70%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }

  #section-sub-brands{
    margin-top: 0%;
  }

  .isi-header{
    margin-top: 10%;
  }
    }

    @media only screen and (min-width:  2048px){

      .closing-section-career{
    height: 35vh;
  }


      /*career*/


    

      .text-garis-hello-current{
        width: 18%;
      }

      .garis-hello-current{
        width: 82%;
      }


      .parent-isi-all-content{
        /*margin-top: -4%;
    margin-bottom: 5%;*/
    
  }


      /*end career*/

      /*home*/

      .parent-caption-header{
    width: 70%;
    
    display: flex;
    justify-content: flex-start;
  }

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 70%;
      margin-top: 1%;
      /*transition: opacity .6s;*/
    }


      .caption-header{
    bottom: 25em;
  }


  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 35px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:16px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

      /*end home*/
      
      .section-gif{
    width: 70%;		
  }

      .child-index-kanan{
        width: 80%;
      }

      .we-help-organization span{
        font-size:32px;
      }

      .we-help-organization p{
        font-size: 29px;
      }

      .index-bintang span{
        font-size: 29px;
      }

      .deskripsi-index-satu p{
        font-size: 35px;
      }

      .deskripsi-index-dua p{
        font-size: 22px;
      }

      .new-desc-about-people{
    width: 90%;
  }

      .new-desc-about-people p:nth-child(1){
    font-size: 38px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 38px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 28px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 28px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 28px;
  }

  .how-can{
    width: 70%;
  }

  .how-can p{
      text-align: center;
  }

  .how-can p:nth-child(1){
      font-size: 27px;
  }

  .how-can p:nth-child(2){
      font-size: 20px;
  }

  .how-can a{
      font-size: 20px;
  }

  .info-footer div{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #FFFFFF;
  }
  .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 6%;
  }

  .socmed-footer{
    width: 100%;
    
  }

  .socmed-footer img{
    padding: 15%;
  }

  .isi-header{
    margin-top: 3%;
  }

  

    }

    @media only screen and (min-width: 3840px){

      .list-about-subbrands ul li {
      font-size: 1em;
  }

      /*tes select2*/

      .select2-selection__choice{
        color: black!important;
        font-size: 25px!important;
        padding-left: 4%!important;
        padding-right: 4%!important;
      /*background-color: transparent!important;*/
      border:none!important;
      border-radius: 25px!important;
      background-color: rgba(255, 255, 255, 1) !important;
      letter-spacing: 0.06em!important;
  }

  .select2-selection__choice__remove{
      border: none!important;
      border-radius: 0!important;
      padding: 0 2px!important;
  }

  .select2-selection__choice__remove:hover{
      background-color: transparent!important;
      color: #ef5454 !important;
  }

  .select2-container {
      width: 100% !important;
  }

  .select2-hidden-accessible { 
    position: fixed !important; 
  }


      .select2-container--default{
        

      }

      .select2-selection--single{
        background-color: black!important;
        color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      outline: none;
      border-radius: 0!important;
      padding-bottom: 50px!important;
      }

      .company-industry{
        display: flex;
        justify-content: flex-end;
      }

      .budget-range{
        display: flex;
        justify-content: flex-end;
      }

      .select2-search__field{
        background-color: black!important;
        border: none!important;
        outline: none!important;
        color: #fff!important;
      }

      .select2-selection__rendered{
        color: #fff!important;
        font-size: 35px!important;
        padding-left: 0!important;
        border: none;
        outline: none;
      }

      .select2-container--default .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-container--open .select2-selection--multiple:before {
      content: ' ';
      display: block;
      position: absolute;
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px;
      height: 0;
      right: 6px;
      top: 50%;
      width: 0;cursor: pointer
  }

  .select2-selection__arrow {
      height: 90% !important;
      background-color: black!important;
  }

      .select2-container--default .select2-selection--multiple{
      background-color: black!important;
      color: white!important;
      border: none!important;
      padding-left: 0!important;
      padding: 0!important;
      border-bottom: 1px solid white!important;
      border-radius: 0!important;
  }

      .select2-dropdown.select2-dropdown--below{
      background-color: black!important;
      color: white!important;
      text-align: left!important;
      font-size: 35px!important;
      letter-spacing: 0.06em!important;
      overflow-x: hidden!important;
  }

  .mul-select{
    /*width: 100%!important;*/
    overflow: hidden;
  }

      /*end teselect2*/

      /*contact tambahan*/

      .colom-input{
    float: left; 
    width: 49%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-subject{
    float: left; 
    width: 49%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } /* necessary to give position: relative to parent. */

  .colom-input-textarea{
    float: left; 
    width: 100%; 
    /*margin: 40px 3%; */
    margin-top: 5%;
    position: relative;
    color: #fff;
  } 

  .colom-input input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 35px;
  }

  .colom-input-subject input{
    background-color: transparent; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    padding-left: 0;
    font-size: 35px;
  }





  .colom-input-textarea label{
    font-size: 35px;
  }




  .colom-input select{
    width: 49%;
    font-size: 35px;
  }

  .colom-input-subject select{
    width: 49%;
    font-size: 35px;
  }

  .colom-input-textarea textarea{
    width: 100%;
    height: 150px;
    padding-left: 0;
    font-size: 35px;
  }

  /*input[type="text"]{*/
    /*font-size: 15px/24px; */
  /*	font-family: Degular Display ;
    color: #fff; 
    width: 48%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
  }*/

  .effect-16{
    border: 0; 
    padding: 4px 0; 
    border-bottom: 1px solid #ccc; 
    background-color: transparent;
    z-index: 9;
  }

  .effect-16 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 0px; 
    background-color: #fff; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16:focus ~ .focus-border, .has-content.effect-16 ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
    z-index: 9;
  }
  .effect-16 ~ label{
    position: absolute; 
    left: 0; 
    width: 100%; 
    top: 7px; 
    color: #aaa; 
    transition: 0.3s; 
    z-index: 0; 
    letter-spacing: 0.5px;
    font-size: 35px;
    font-family: Montserrat;
  }
  .effect-16:focus ~ label, .has-content.effect-16 ~ label{
    top: -43px; 
    font-size: 25px; 
    color: #3399FF; 
    transition: 0.3s;
  }


      /*end contact tambahan*/








      .closing-section-general{
        height: 0vh;
      }

      
      .text-garis-hello-clients span{
      font-size: 45px;
  }

  /*radio button css*/

      [type="radio"]:checked,
  [type="radio"]:not(:checked) {
      position: absolute;
      left: -9999px;
  }
  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label
  {
      position: relative;
      padding-left: 40px;
      padding-bottom: 8%;
      cursor: pointer;
      line-height: 12px;
      display: inline-block;
      color: #fff;
  }
  [type="radio"]:checked + label:before,
  [type="radio"]:not(:checked) + label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 18px;
      border: 1px solid #fff;
      border-radius: 100%;
      background: #000;
  }
  [type="radio"]:checked + label:after,
  [type="radio"]:not(:checked) + label:after {
      content: '';
      width: 10px;
      height: 10px;
      background: #fff;
      position: absolute;
      top: 4px;
      left: 4px;
      border-radius: 100%;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  [type="radio"]:not(:checked) + label:after {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  [type="radio"]:checked + label:after {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
  }


      /*end radio button css*/


      /*subbrands*/

      .tanda-bintang h2{
        font-size: 65px;
      }

      .maika-motion-picture h1{
        font-size: 65px;
      }

      .through-various h2{
        font-size: 45px;
      }

      .button-business-units p{
        font-size: 32px;
      }

      .parent-iframe-video-subbrands{
        display: flex;
        width: 100%;
        justify-content: center;

      }

      .ukuran-video-subbrands{
        display: flex;
        width: 100%;
        height: 1080px;
        
      }

      .parent-content-filtering{
    height: 90px;
  }

  .tittle-projects-filter{
    width: 20%;
    
    display: flex;
    align-items: center;
  }

  .tittle-projects-filter span{
    text-align: left;
    font-size: 45px;
  }

  .radio-filter input{
    padding-right: 65%;

  }

  .radio-filter label{
    font-size: 35px;

  }

  .content-judul{
    width: 20%;
  }

  .isi-content-subbrands{
    width: 80%;
  }

  .content-nama span{
    font-size: 65px;
  }

  .content-desc p {
    font-size: 35px;
  }
  
  .projectscope-desc {
          margin-top: 0%;
      }

  .projectscope-desc span {
    font-size: 35px;
      }

  .nomor-indexing a{
    font-size: 35px;
  }

  .text-garis-hello-subbrands{
      margin-right: 0%;
      display: flex;
      width: 15%;
      

  }

  .text-garis-hello-subbrands span{
      font-size: 45px;
  }

  .sub-parent-garis-hello-subbrands{
    margin-top: -15%;
    display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
  }

  .all-parent-isi-content{
    margin-bottom: 2%;
  }





      /*end subbrands*/




      /*tambahan home*/

      .after-background-mmp{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 156px;
        padding: 0;
        margin: 0;
    }

      .c--anim-btn{
      }

      .c-anim-btn{
        width: 20%;

      }



      .c-anim-btn img{
    margin-bottom: 0em;
    width: 100%;
  }

  .c--anim-btn:hover{
    text-decoration: none;
  }

  .c--anim-btn:hover .c-anim-btn{
    margin-top: -12em;
  }

  .c-anim-desc{
      background-color: #272727;
      width: 100%;
      height: 156px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .c-anim-desc span{
      font-family: Montserrat;
      font-style: normal;
      font-weight: 500;
      font-size: 35px;
      line-height: 120%;
      /* identical to box height, or 30px */
      letter-spacing: 0.06em;
      color: #FFFFFF;

  }



  /*contact*/

      .angka-lima{
    margin-top: 10%;
    margin-left: 0%;
    margin-bottom: 0%;
    width: 100%;
    
    display: flex;
    justify-content: center;
  }

  .tab-angka-lima {
    width: 70%;
    
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    /*padding: 6px 12px;*/
  }

  .ukuran-angka-lima img{
    width: 200%;
  }

      .parent-btn-inquiry{
    margin-top: 2%;
    width: 70%;
  }

  .align-project{
    width: 70%;
    margin-top: -3%;
  }

  .project-in-mind {
    font-size: 55px;
  }

  .fill-in-the-field{
    font-size: 35px;
  }

  .input-project-bagi-dua{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

  }

  .colom-input{
    
    width: 49%;
    /*padding-right: 4%;*/
    display: flex;
    flex-direction: column;
  }

  .colom-input-subject{
    
    width: 49%;
    /*padding-right: 4%;*/
    display: flex;
    flex-direction: column;
  }


  .parent-project-details{
    margin-top: 0%;
  }

  .project-details p{
    margin-top: 5%; 
    font-size: 25px;
  }

  .project-descriptions{
    
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .project-descriptions label{
    font-size: 32px;
  }

  .project-descriptions textarea{
    background-color: black; 
    border-bottom: 1px solid #FFF8F8; 
    color: white; 
    width: 100%;
    height: 200px; 
    margin-top: 0;
    padding-left: 0;
    font-size: 45px;
  }

  .btn-submit img{
    width: 6%;
  }
  
  .btn-submit input{
    width: 6%;
  }

  .tab button{
    font-size: 35px;
    padding-top: 0.5%;
     padding-bottom: 0.5%;
      padding-left: 2%;
      padding-right: 2%;	
      width: 15%;
  }

  .tab button span{
    font-size: 28px;
  }

  



      /*end contact*/



  /*end tambahan home*/

      /*career*/

      .text-garis-hello-current{
        width: 15%;
      }

      .text-garis-hello-current span{
        font-size: 42px;
      }

      .garis-hello-current{
        width: 85%;
      }


      .parent-isi-all-content{
        /*margin-top: -4%;
    margin-bottom: 5%;*/
    
  }

      .sub-parent-recruitment{
    width: 70%;
  }
  .parent-col-center-hiring{
    width: 70%;
    margin-top: 10%;
  }

  .cls-recruitment{
    width: 70%;
  }

  .cls-recruitment p:nth-child(1) {
    font-size: 49px;
    line-height: 120%;
  }

  .cls-recruitment p:nth-child(2){
    font-size: 49px;
    line-height: 20%;
  }

  .new-were-always{
    width: 40%;
  }
  .new-were-always p{
    font-size: 32px;
    line-height: 120%;
  }
  .new-the-opportunity{
    width: 60%;
  }
  .new-the-opportunity p {
    font-size: 32px;
    line-height: 120%;
  }

  .btn-hiring span{
    font-size: 65px;
    line-height: 120%;
  }

  .btn-hiring img{
    width: 2.5%;
  }

  .isi-hiring{
    text-align: justify;
    padding-top:3%;
    font-size: 25px;
  }

  

  .parent-link-apply{
    padding-top: 4%;
    padding-bottom: 10%;
  }

  .link-apply-now:hover{
    text-decoration: none;
  }

  .apply-class{
    width: 20%;
    border: 0.5px solid white;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding: 1%;
  }

  .apply-class span{
    font-size: 25px;
  }

  .drop-hello-career{
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
    margin-top: 0%;
    margin-bottom: 0%;
  }

      /*end career*/

      /*project details*/

      .description-projects p{
    text-align: left;
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 35px;
    line-height: 150%;
    letter-spacing: 0.07em;
    text-align: justify;
  }

      .tag-projects{
    border: 1px solid white;
    width:calc(94% / 4);
    height: 75px;
    border-radius: 50px;
  }

  .tag-projects span{
    font-size: 30px;
  }

      .subcontent-desc h1{
    font-size: 60px;
    line-height: 120%;
  }

  .subcontent-desc p{
    font-size: 42px;
    line-height: 150%;
  }

      .tittle-subcontent p{
    font-size: 65px;
  }

  .client-projects p:nth-child(1){
    font-size: 30px;
  }

  .client-projects p:nth-child(2){
    font-size: 65px;
    line-height: 300%;
  }

  .year-projects p:nth-child(1){
    font-size: 30px;
  }

  .year-projects p:nth-child(2){
    font-size: 65px;
    line-height: 300%;
  }

      .parent-desc-projects{
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .parent-bab-content{
    margin-bottom: 8%;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ukuran-video{
        display: flex;
        width: 100%;
        height: 1280px;
      }

  .parent-iframe-video{
        display: flex;
        width: 100%;
        justify-content: center;
        
      }

  .bab-content-awal{
    margin-top: 8%;
    width: 70%;
    
  }

  .bab-content{
    margin-top: 8%;
    width: 70%;
  }

  .sub-content-img img{
    width: 100%;
  }

  .parent-scroll{
    /*bottom: 10%;*/
    margin-top: 2%;
  }

  .btn-scroll{
    display: flex;
    justify-content: center;
    width: 2.5%;
  }

  .btn-scroll img{
    width: 100%;
  }

  .text-scroll{
    /*margin-top: 1%;*/
  }

  .text-scroll p{
    font-size: 35px;
    line-height: 250%;
    letter-spacing: 0.04em;
  }





      /*end project details*/

      /*home*/

      .closing-section-index{
    height: 0vh;
  }

      .parent-caption-header{
    width: 70%;
    
    display: flex;
    justify-content: flex-start;
  }

  .caption-header-par-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 30%;
  }

      .background-mmp{
      opacity: 1;
      display: flex;
      justify-content: center;
      
      width: 70%;
      margin-top: 1%;
      /*transition: opacity .6s;*/
    }


      .caption-header{
    bottom: 39em;
  }


  .caption-header p:nth-child(1) {
      font-family: 'Manrope', sans-serif;
      font-size: 48px;
      font-weight: 200;
      text-align: left;
  }

  .watch-profile span {
      font-family: 'Manrope', sans-serif;
      font-size:24px;
      font-weight: 500;
      /*text-decoration: underline;*/
      text-align: left;
  }

  .nav-toggle{
      width: 100%;
      padding: 0;
      margin: 0;
  }

  .nav-toggle img{
      width: 100%;
  }

  
  .we-help-organization{
    
    width: 20%;
    bottom: 19%;
  }

  .we-help-organization span{
        font-size:42px;
      }

      .we-help-organization p{
        font-size: 40px;
      }

      .section-gif{
    width: 70%;		
  }

  .child-index-kanan{
    width: 80%;
    height: 100%;
    
    padding-top: 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .index-bintang span{
        font-size: 50px;
      }

      .deskripsi-index-satu p{
        font-size: 60px;
        padding-top: 5%;
      }

      .deskripsi-index-dua p{
        font-size: 45px;
        padding-top: 5%;
      }

      .text-garis-hello span{
        font-size: 45px;
      }

      .img-about-subbrands{
        width: 30%;
        margin-bottom: 1%;
      }

      .list-about-subbrands ul li span{
        font-size: 29px;
      }

      .new-desc-about-people{
    width: 80%;
    height: 50%;
  }

  .new-desc-about-people p:nth-child(1){
    font-size: 55px;
  }

  .new-desc-about-people p:nth-child(2){
    font-size: 55px;
  }

  .new-desc-about-people p:nth-child(3){
    font-size: 45px;
  }

  .new-desc-about-people p:nth-child(4){
    font-size: 45px;
  }

  .new-desc-about-people p:nth-child(5){
    font-size: 45px;
  }

  .center-selected-client{
    width: 70%;
    background-color: black;
    display: flex;
    justify-content: flex-end;
  }

  .images-selected-client{
    width: 85%;
    
  }

  .images-selected-client img{
    width: 100%;
  }

  .drop-hello{
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
    margin-top: 0%;
    margin-bottom: 0%;
  }

  .drop-hello hr{
    width: 100%;
    height: .2px;
    color: #fff;
    background-color: #fff;
  }

  .sub-parent-garis-hello{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
    }



    .parent-garis-hello{
      width: 70%;
  }

  .hcwhy{
      width: 100%;
      display: flex;
      flex-direction:column;
      margin-bottom: 0%;
      margin-top: -7%;
      align-items: center;
    }

  .how-can{
    width: 70%;
  }

  .how-can p{
      text-align: center;
  }

  .how-can p:nth-child(1){
      font-size: 42px;
  }

  .how-can p:nth-child(2){
      font-size: 35px;
  }

  .how-can a{
      font-size: 35px;
  }

  .info-footer div{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 150%;
    /* identical to box height, or 15px */
    text-align: center;
    color: #FFFFFF;
  }
  .all-socmed-footer{
    display: flex;
    flex-direction: row;
    width: 5%;
  }

  .socmed-footer{
    width: 100%;
    
  }

  .socmed-footer img{
    padding: 15%;
  }

  .closing-section-end{
    height: 28vh;
  }


      .parent-section-gif{
      margin-top: 10%;
  }

  .parent-selected{
    margin-top: 0%;
  }

  .about-people{
    margin-top: 10%;
    width: 70%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }

  #section-sub-brands{
    margin-top: 0%;
  }

  .isi-header{
    margin-top: 0%;
  }
    }
.section-thumb {
        background-color: #000000;
        padding: 40px 0;
    }
 /* Container for Thumbnails */
.thumbnail-container {
display: flex;
gap: 20px;
overflow-x: scroll; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent wrapping of thumbnails */
}

/* Gaya CSS untuk Bagian Achievements */
.achievements {

padding: 40px 0;
text-align: center;
}

.achievements h2 {
font-size: 24px;
margin-bottom: 20px;
}

.achievement-thumbnails {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin-top: 20px;
/* margin-left: 35px; */

margin-bottom: 30px;
padding: 9px;
}

.achievement-item {
margin: 10px 10px;
}

.achievement-item img {
max-width: 100%;
height: auto;
transition: transform 0.3s;
width:400px;
/*height:200px;*/
}

.achievement-item:hover img {
transform: scale(1.2);
}

.see-more a {
text-decoration: none;
color: #c6a159; /* Warna tautan sesuaikan dengan preferensi Anda */
transition: color 0.3s;

}

.arrow {
margin-left: -5px; /* Jarak antara teks "See More" dan ikon panah */
font-size: 10px; /* Ukuran font ikon panah */
vertical-align: super; /* Menggeser ikon ke atas sehingga sejajar dengan teks */
}




.see-more img {
margin-left: 5px;
}
/* Gaya CSS untuk Bagian Teks di Atas Gambar */
.text-over-image {
position: relative;
background-color: #007BFF; /* Warna latar belakang sesuaikan dengan preferensi Anda */
text-align: center;
padding: 40px 0;

}

.image-container {
position: relative;
}

.image-container img {
border-radius: 50%; /* Untuk membuat latar belakang gambar berbentuk bulat */
width: 150px; /* Sesuaikan ukuran gambar sesuai kebutuhan Anda */
height: 150px;
object-fit: cover; /* Menghindari distorsi gambar */
}

.text-container {

top: 50%;
left: 50%;
transform: translate(0%, -37%);
}

.text-container h2 {
font-size: 36px; /* Ukuran teks besar sesuaikan dengan preferensi Anda */
color: #c6a058
; /* Warna teks sesuaikan dengan preferensi Anda */
margin: 0;
padding: 10px;
}
/* Gaya CSS untuk Bagian dengan Latar Belakang Gambar dan Teks di Depan */
.background-with-text {
background-image: url('/Landing Page/PMA/assets/img/home/footer.png'); /* Ganti 'background.jpg' dengan URL gambar latar belakang yang Anda inginkan */
background-size: auto 80%; /* Atur gambar latar belakang menjadi 80% lebar elemen dan otomatis mengatur tingginya */
background-position: center; /* Pusatkan gambar latar belakang */
background-repeat: no-repeat; /* Hindari pengulangan gambar latar belakang */
color: #fff; /* Warna teks pada elemen */
text-align: center;
padding: 20px;
display: flex; /* Menggunakan CSS Flexbox */
flex-direction: column; /* Teks dan gambar akan menjadi satu kolom */
align-items: center; /* Pusatkan elemen vertikal di tengah */
justify-content: end; /* Pusatkan elemen horizontal di tengah */
height: 300px; /* Tinggi elemen teks */
}
.background-with-text a {
text-decoration: none;
color: #c6a159; /* Warna tautan sesuaikan dengan preferensi Anda */

transition: color 0.3s;
}


.text-container {

}

.text-container h2 {
padding: 12px; /* Ruang padding untuk teks */
}


.menu {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: -250px;
background-color: #333;
overflow-x: hidden;
transition: 0.3s;
}

/* CSS lainnya... */
/* CSS lainnya... */

/* CSS lainnya... */

.menu ul {
list-style-type: none;
padding: 0;
}

.menu li {
text-align: center;
}

.menu a {
text-decoration: none;
color: #fff;
display: block;
transition: background-color 0.3s, padding 0.3s; /* Menambahkan efek transisi pada padding */
padding: 10px 0; /* Tambahkan padding atas dan bawah pada setiap item menu */
border-bottom: 1px solid #fff; /* Atur garis bawah secara default */
}

.menu a.home-link {
border-top: 1px solid #fff;
}

.menu a:hover {
background-color: blue;
border-bottom: 1px solid blue;
padding: 12px 0; /* Ubah padding saat tautan dihover untuk mengatur ukuran */
}

/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 15%;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
z-index: 4;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 23px;
}

.slick-prev
{
left: -49px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}

.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
.about-us {
display: flex;
justify-content: center;
align-items: center;
/*height: 100vh;*/
/* background-color: #f0f0f0;*/

}

.about-content {
text-align: center;
width:100vh;
margin-top: 16vh;
}

.about-content h2 {
align-items: center;
/* Montserrat Bold = 700 */
font-weight: 700;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
text-align: center;
/*margin-top:90px;*/
font-size: 40px;
}

.about-content p {
font-size: 16px;
color: #c6a058;
margin-top: 20px;
}
.logo-client {
text-align: center;
animation: slideLogo 3s infinite alternate;
}

.client-logos {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.clients-logoss img {
width: 150px; /* Atur lebar sesuai kebutuhan */
height: 150px; /* Atur tinggi sesuai kebutuhan */
margin: 10px; /* Atur jarak antara logo klien */
filter: grayscale(100%); /* Mengubah gambar menjadi hitam putih */
}
.client-logos img:hover {
filter: none; /* Hilangkan filter saat dihover */
}.achievement-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
margin-bottom: 50px;
}

.achievement-card {
width: 48%; /* Membuat dua kolom dengan sedikit jarak */
margin-bottom: 20px;
position: relative;
}

.achievement-card img {
max-width: 100%;
height: auto;
display: block;
}

.achievement-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 94%;
/*background-color: rgba(0, 0, 0, 0.7);  Latar belakang semi-transparan */
display: flex;
flex-direction: row;
justify-content: center;
align-items: end;
}
a:hover {
color: #c6a159;
text-decoration: underline
}

h3, p {

text-align: center;
color: #c6a159;
font-size: 18px;
}
.archievment{
font-size: 14px;
}
.archievment img{
margin-left: -5px; /* Jarak antara teks "See More" dan ikon panah */
font-size: 10px; /* Ukuran font ikon panah */
vertical-align: super; /* Menggeser ikon ke atas sehingga sejajar dengan teks */
}

.arrows{
margin-left: -1px;
font-size: 10px;
/* vertical-align: super; */
position: absolute;

}


/* CSS page Im3... */

.im3-section {
text-align: center;
/*  padding: 20px;*/
margin-top: 0%;
}

.im3-section h2 {
font-size: 24px;
}

.im3-section p {
font-size: 16px;
margin-top: 10px;

}/* CSS lainnya... */

.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 28px 153px 37px;
/*max-width: 600px;*/
opacity: 1; /* Mengatur elemen grid menjadi terlihat */
transform: translateY(0); /* Mengubah transform menjadi 0 (tanpa translasi) */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Efek transisi */
width:75%;
}

.image {
position: relative; /* Diperlukan untuk mengatur posisi deskripsi dan gambar */
/*border: 1px solid #ccc;*/

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
text-align: center;
}

.image img {
max-width: 100%;
height: auto;
object-fit: cover;
cursor: pointer;
}

figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7); /* Warna latar belakang deskripsi */
color: #fff; /* Warna teks deskripsi */
padding: 5px;
font-size: 14px; /* Sesuaikan ukuran font sesuai kebutuhan */
}/* CSS lainnya... */

.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Latar belakang dengan efek blur */

background-image: url(../img/im3/bulet.png);

backdrop-filter: blur(8px);
z-index: 1;
overflow: auto;
background-size: 100%;
background-repeat: no-repeat;
}

.popup-content {
display: flex;
justify-content: space-between; /* Menyebelahkan elemen flex */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

border-radius: 5px;

width: 100%; /* Lebar popup */
/*max-width: 800px;  Batas maksimum lebar popup */
overflow: auto;
}

.image-container-header {
text-align: center;
}

.image-container-header img {
width: 20%; /* Mengatur lebar gambar menjadi 200 piksel */
height: 20%; /* Mengatur tinggi gambar menjadi 200 piksel */
}

.image-container-header p {
font-size: 16px;
margin-top: 50px;
margin-bottom: 62px;
margin-left: 16%;
margin-right:16%;
color:white;
}

/* Gaya dasar kartu */
.card {
width: 300px;
height: 200px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 24px;
font-weight: bold;
margin: 0 10px;
}

/* Gaya kontainer slider */
.card-slider {
max-width: 900px;
margin: 0 auto;
}
/* Gaya utama untuk card-slider */
.card-slider {
  /* width: 80%;  Lebar card-slider */
   margin: 0 auto; /* Pusatkan card-slider di tengah */
   padding: 20px; /* Ruang padding di sekitar card-slider */
 }
 /* Gaya untuk judul slider */
 .slider-title-container {
   display: flex; /* Menggunakan flexbox untuk mengatur gambar dan judul secara horizontal */
   align-items: center; /* Pusatkan elemen secara vertikal */
   text-align: center; /* Teks berada di tengah */
   margin-bottom: 20px; /* Ruang bawah judul */
 }
 
 /* Gaya untuk gambar judul */
 .slider-title-container img {
   width: 19%; /* Lebar gambar judul */
   height: 20%; /* Tinggi gambar judul */
   margin-right: 10px; /* Ruang antara gambar dan judul */
 }
 
 /* Gaya untuk judul slider */
 .slider-title {
   font-size: 24px; /* Ukuran font judul */
 }
 
 /* Gaya untuk setiap card dalam slider */
 .card {
   border: 0px solid #dddddd00; /* Garis batas card */
   border-radius: 8px; /* Sudut melengkung pada card */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan card */
   overflow: hidden; /* Hindari gambar yang terlalu besar keluar dari card */
   transition: transform 0.2s ease-in-out; /* Transisi saat hover */
   margin-right: 10px; /* Ruang antara card */
   padding: 10px; /* Ruang padding di dalam card */
   text-align: center; /* Teks berada di tengah */
   cursor: pointer; /* Pointer saat hover */
   background-color: #ffffff00;
 }
 
 /* Gaya gambar dalam card */
 .card img {
   width: 100%; /* Lebar gambar 100% */
   height: auto; /* Tinggi gambar otomatis disesuaikan */
   display: block; /* Gambar ditampilkan sebagai blok */
   border-radius: 12px;
 }
 
 /* Hover efek untuk card */
 .card:hover {
   transform: scale(1.05); /* Perbesar card saat hover */
 }
 
 /* Gaya untuk popup container */
 .popup-container {
   display: none; /* Sembunyikan popup secara default */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #c6a058, rgba(0, 0, 0, 0.7)); /* Gradien emas ke hitam dengan transparansi */

   /*background: rgba(0, 0, 0, 0.7);  Latar belakang transparan */
   z-index: 1000; /* Layer indeks tinggi */
   justify-content: center; /* Pusatkan konten secara horizontal */
   align-items: center; /* Pusatkan konten secara vertikal */
 }
 
 
 /* Gaya untuk konten popup */
 .popup-content {
  
   display: flex;
   background-color: #fff; /* Warna latar belakang popup */
     border-radius: 8px; /* Sudut melengkung pada popup */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bayangan popup */
     padding: 20px; /* Ruang padding di dalam popup */
     max-width: 80%;
     max-height: 80%;
     position: absolute; /* Gunakan posisi absolut untuk simbol close */
     top: 50%; /* Pusatkan vertikal ke tengah layar */
     left: 50%; /* Pusatkan horizontal ke tengah layar */
     transform: translate(-50%, -50%); /* Geser ke tengah layar */
 }
 
 .close-popup {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   font-size: 20px;
 }
 
 .popup-media-left {
   flex: 1; /* Bagi ruang setengah pada sisi kiri */
   padding: 10px; /* Ruang padding di dalam media */
   overflow: hidden; /* Hindari gambar yang terlalu besar keluar dari popup */
 }
 
 .popup-media-left img {
   width: 100%; /* Lebar gambar 100% */
   height: auto; /* Tinggi gambar otomatis disesuaikan */
   display: block; /* Gambar ditampilkan sebagai blok */
 }
 
 .popup-info {
   flex: 1; /* Bagi ruang setengah untuk info */
   padding: 10px; /* Ruang padding di dalam info */
 }
 
 .popup-title-left {
   font-size: 18px; /* Ukuran font judul */
   margin-bottom: 10px; /* Ruang bawah untuk judul */
 }
 
 .popup-description-left {
   font-size: 14px; /* Ukuran font deskripsi */
 }
 .image-container-header {
   background-size: auto 80%; /* Atur gambar latar belakang menjadi 80% lebar elemen dan otomatis mengatur tingginya */
 background-position: center; /* Pusatkan gambar latar belakang */
 background-repeat: no-repeat; /* Hindari pengulangan gambar latar belakang */
 color: #fff; /* Warna teks pada elemen */
 text-align: center;
 padding: 20px;
 display: flex; /* Menggunakan CSS Flexbox */
 flex-direction: column; /* Teks dan gambar akan menjadi satu kolom */
 align-items: center; /* Pusatkan elemen vertikal di tengah */
 /*justify-content: end;  Pusatkan elemen horizontal di tengah */
 height: 300px; /* Tinggi elemen teks */
}
.judul-header{
 font-size: larger;
}

.image-container-header img {
 background-size: auto 80%; /* Atur gambar latar belakang menjadi 80% lebar elemen dan otomatis mengatur tingginya */
 background-position: center; /* Pusatkan gambar latar belakang */
 background-repeat: no-repeat; /* Hindari pengulangan gambar latar belakang */
 color: #fff; /* Warna teks pada elemen */
 text-align: center;
 padding: 20px;
 display: flex; /* Menggunakan CSS Flexbox */
 flex-direction: column; /* Teks dan gambar akan menjadi satu kolom */
 align-items: center; /* Pusatkan elemen vertikal di tengah */
 justify-content: end; /* Pusatkan elemen horizontal di tengah */
 height: 100%; /* Tinggi elemen teks */
 width: 44%;
 margin-top: 15%;
 
}
.image-background-header img{
 
  
  margin-top: 50px;
  margin-bottom: 5%;
  width: 55%;
}

.image-container-header p {
   font-size: 16px;
   margin-top: -100px;
   margin-left: 16%;
   margin-right:16%;
   color:white;
}
/* ... (gaya lain seperti sebelumnya) ... */

.gambar-bawah-header {
  text-align: center;
  padding: 20px;
 
}
.thumbnail-card-bawah-header {
  display: flex; /* Mengatur card menjadi flex container */
  justify-content: center; /* Mengatur jarak antara card */
  flex-wrap: wrap; /* Membungkus card jika melebihi lebar */
  margin-top: -50px;
}

.card-bawah-header {
  
  padding: 10px;
  max-width: 45%; /* Lebar maksimum untuk dua card dalam satu baris */
  margin: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
  display: flex; /* Mengatur card menjadi flex container */
  flex-direction: column; /* Mengatur kontennya menjadi kolom */
  align-items: center; /* Pusatkan kontennya di tengah */
}
.card-bawah-header img {
  width: 40vh; /* Mengatur lebar gambar */
/*  height: 400px;  Mengatur tinggi gambar */
  max-width: 100%; /* Menghindari gambar terlalu besar */
  max-height: 100%; /* Menghindari gambar terlalu besar */
}
.campaign-youtube {
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 0px 0px 0px 10%;
}

.image-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr); /* 2 kolom */
}

.item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c6a159; /* Menambahkan garis bawah */
  padding-bottom: 10px; /* Jarak antara card */
}

.item.no-border {
  border-bottom: none; /* Menghilangkan garis bawah pada card ke-5 */
}
.item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  display: none;
}
.item:hover img {
  transform: scale(1.1);
}

.item:hover .video-iframe-campaign {
  display: block;
}
.item img {
  width: 82vh; /* Mengatur lebar gambar */
/*  height: 400px;  Mengatur tinggi gambar */
  max-width: 100%; /* Menghindari gambar terlalu besar */
  max-height: 100%; /* Menghindari gambar terlalu besar */
}

.description {
  margin-left: 10px;
}

h3 {
  font-size: 18px;
  margin: 0;
}

p {
  font-size: 14px;
  margin: 0;
}

.description h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.description p {
  font-size: 16px;
  line-height: 1.5;
}
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;

 
}
/* Add more CSS styling as needed */
.video-iframe-campaign {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  display: none;
}
.youtube-embed {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CSS untuk card dan detail */
.card-campaign {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  border-bottom: 1px solid #c6a159; /* Menambahkan garis bawah */
  padding-bottom: 10px; /* Jarak antara card */
  width: 85%;
  
}

.card-content-campaign {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.card-campaign img {
 width: 48%;
  height: auto;
}

.card-details-campaign {
 margin: 2%;
  text-align: left; /* Aligment teks ke kanan */
}

.card-campaign h2 {
 
  margin: 0;
  text-align: left; /* Aligment teks ke kiri */
    font-weight: 700;
    font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 24px;
}

.card-campaign p {
  font-size: 16px;
  margin: 0;
  text-align: left; /* Aligment teks ke kanan */
}

/* CSS untuk video YouTube */
.youtube-embed-campaign {
  display: none;
  top: 0;
  left: 0;
  height: 100%;
  width:48%;
}

/* CSS untuk efek hover */
.card-campaign.no-border {
  border-bottom: none; /* Menghilangkan garis bawah pada card ke-5 */
}
.video-youtube {
  
  width: 100%;
  height: 47vh;
  margin-left: 0px;
  margin-top: 0px;
}
.hover-image {
  width: 48%;
  height: auto;
  transition: transform 0.3s; /* Efek transisi ketika dihover */
}
.hover-image:hover {
  transform: scale(1.1); /* Memperbesar gambar saat dihover */
}