@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;523;600;700;800&display=swap');
@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');
.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;
}
:root{
    --main-color: #FFF8F8;
    --secondary-color: #000000;
}

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

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

body {
   
    width: 100%;
    height:100%;
    background-image: url('/assets/img/haus/background.jpg');
    background-size: cover, cover; /* Setiap gambar menggunakan cover */
    background-repeat: no-repeat, no-repeat; /* Tidak ada pengulangan gambar */
   

}
body .img {
   
}

.new-container{
      padding-right: 0;
      padding-left: 0;
      margin-right: auto;
      margin-left: auto;
}



/* 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){
     .popup-content {
  
    width: 92%;
    height: 59%;
            }
    .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*/
    
    



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

    .text-garis-hello-clients span{
        font-family: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0.06em;
    }

    .projectscope-desc span {
        text-align: left;
        font-family: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: #fff; 
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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;
    }
    
			.logo img {
				width: 65px; /* Atur lebar logo sesuai kebutuhan */
				height: auto;
				margin-left: 25px;
			}

    .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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
            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: Degular Display;
            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{
      
        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;
    }


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

    .info-footer div{
        font-family: Degular Display;
        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;
        
    }

    .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: Degular Display;
            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: Degular Display;
            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: Degular Display;
            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;
            margin-top: -3%;
    }

    .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: 139%;
        min-height: 105%;
        /*height: auto;*/
        transition: .3s ease;
        object-fit: contain;
        padding-left: 0;
        margin-left: 0;
    /*     margin-left: 7px; */
        padding: 20%;
    }
    #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: Degular Display;
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 120%;
            /* or 30px */

            letter-spacing: 0.06em;

            color: #FFF8F8;


    }

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

    .deskripsi-index-dua p{
            text-align: left;
            font-family: Degular Display;
            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: Degular Display;
            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: Degular Display;
            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: Degular Display;
            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*/

    #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;
            filter: brightness(30%);
            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: 'Manrope', 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: Degular Display;
            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: Degular Display;
            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: Degular Display;
            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: Degular Display;
            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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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){

    
    .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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        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: Degular Display;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 120%;
        letter-spacing: 0.04em;

    }

    .button-business-units p{
        font-family: Degular Display;
        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: Degular Display;
        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: 80%;
        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: 2%;
    }

    .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: 0%;
    }

    /*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%;
    }


    .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;
        
    }

    .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%;

    }
}

@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*/




    /*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: Degular Display;
    }
    .effect-16:focus ~ label, .has-content.effect-16 ~ label{
        top: -21px; 
        font-size: 14px; 
        color: #3399FF; 
        transition: 0.3s;
    }


    /*end contact tambahan*/

    .fixed-footer{
       
        width: 100%;
      
    }

        /* 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: Degular Display;
        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: Degular Display;
        font-style: normal;
        font-weight: normal;
        font-size: 25px;
        line-height: 120%;
        letter-spacing: 0.04em;

    }

    .button-business-units p{
        font-family: Degular Display;
        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: Degular Display;
            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: Degular Display;
        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%;

    }

    .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;
    }
    .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;
        
    }

    .socmed-footer{
        width: 100%;
        
    }

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


}

@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: Degular Display;
    }
    .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: Degular Display;
        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: Degular Display;
        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: Degular Display;
    }
    .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: Degular Display;
            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: Degular Display;
        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: Degular Display;
        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: inline-flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.achievement-item {
margin: 0 10px;
}

.achievement-item img {
max-width: 100%;
height: auto;
transition: transform 0.3s;
width:400px;
height:200px;
}

.achievement-item:hover img {
transform: scale(1.4);
}

.see-more a {
text-decoration: none;
color: #c6a159; /* Warna tautan sesuaikan dengan preferensi Anda */
font-weight: bold;
transition: color 0.3s;
}



.see-more i {
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 */
}


/* 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 */
}
.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;
}

.background-with-text a {
text-decoration: none;
color: #c6a159; /* Warna tautan sesuaikan dengan preferensi Anda */
transition: color 0.3s;
}

.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 */
}


/* CSS lainnya... */

.im3-section {
    text-align: center;
   /*  padding: 20px;*/
   margin-top: 19%;
}

.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;
    position: absolute;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    /* width: 90%; */
    border-radius: 5px;
    overflow: auto;
    
}

.video-container {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    max-width: 100%; /* Lebar maksimum untuk embed YouTube */
}

.description {
    flex: 1;
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
    max-width: 50%; /* Lebar maksimum untuk deskripsi */
}
.judul{
    flex: 1;
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
    max-width: 50%; /* Lebar maksimum untuk deskripsi */
}

/* CSS lainnya... */

@media (max-width: 768px) {
    /* Aturan CSS khusus untuk layar seluler dengan lebar maksimum 768px */
    
    .popup-content {
        flex-direction: column; /* Ubah tumpukan vertikal pada layar seluler */
    }

    .video-container,
    .description {
        max-width: 100%; /* Lebar maksimum pada layar seluler */
    }

    /* Anda juga bisa menyesuaikan lebih banyak gaya CSS sesuai kebutuhan Anda di sini */
}

/* CSS lainnya... */

.close-button {
   position: absolute;
    top: 10px;
    right: 6%;
    cursor: pointer;
    font-size: 56px;
}
/* CSS lainnya... */

.image-container-header {
    text-align: center;
}

.image-container-header img {
    width: 30%; /* 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;
}

/* CSS lainnya... */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Landing_Page/PMA/assets/img/im3/BACKGROUND.png');
    background-size: cover, cover; /* Setiap gambar menggunakan cover */
    background-position: center, center; /* Setiap gambar berada di tengah */
    background-repeat: no-repeat, no-repeat; /* Tidak ada pengulangan gambar */
    opacity: 0.5; /* Opasitas gambar latar belakang */
   
}
.arrow{
margin-left: -5px;
    font-size: 10px;
    vertical-align: super;
}
/* CSS untuk section */
.thumbnailss-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* CSS untuk thumbnail */
.thumbnailss {
    width: 40%; /* Dua kolom, dengan margin di antaranya */
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.thumbnailss img {
    max-width: 100%;
    height: auto;
    width:96%
}

.thumbnailss-info {
    margin-top: 10px;
}

/* CSS untuk popup (tanpa perubahan) */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    justify-content: center;
    align-items: center;
}

.popup-media {
    flex: 1;
    padding: 2%;
   
    overflow: hidden;
}
.video {
position: absolute;
    top: 5%;
    left: 2%;
    width: 48%;
    height: 95%;
}
.popup-info h3{
   
    text-align: left;
	color: #c6a159;
	font-size: 24px;
	font-weight:700;
}
.popup-media h3{
   text-align-last: left;
   
}
.popup-media img {
    max-width: 100%;
    height: auto;
}

.popup-info {
    flex: 1;
    padding: 10px;
    text-align: left;
    align-self: center;
    margin-left:2%;
}

.popup-close {
      position: absolute;
    top: 10px;
    right: 6%;
    cursor: pointer;
    font-size: 56px;
}