/*--DARK MODE--*/
    .theme-switch-wrapper {
      display: flex;
      justify-content: center;
      align-items:center;
      margin-left: auto;
      margin-right: auto;
    }

    .theme-switch-wrapper p{
      font-size:50%; 
      rotate: 270deg;
      margin-right: -10px;
    }

    .theme-switch {
      display: inline-block;
      height: 36px;
      position: relative;
      width: 36px;
    }
    .theme-switch input {
      display:none;
    }
    .slider {
      background-color: #ccc;
      bottom: 0;
      cursor: pointer;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: .4s;
    }
    .slider:before {
      background-color: #fff;
      bottom: 4px;
      content: "";
      height: 28px;
      left: 4px;
      position: absolute;
      transition: .4s;
      width: 28px;
      box-shadow: 0px 1.5px #888888;
    }
    input:checked + .slider {
      background-color: #66bb6a;
      
    }
    input:checked + .slider:before {
      transform: translateZ(-21px);
      box-shadow: 0px -1.5px #888888;
      height: 27px;
      width: 27px;
      left: 5px;
      bottom: 4.2px;
    }
    .slider.round {
      border-radius: 50%;
    }
    .slider.round:before {
      border-radius: 50%;
    }
    /*------------------------------*/




@media only screen and (max-width: 700px) {
    /* For mobiles: */
    
    .first-header {

        height: 250px;

      }

    nav {
        position:absolute;
        width: 100%;
        justify-content: space-between;
        height: 20%;
        z-index: 1;
      }

    nav > .mobile{
        padding-right: 3%;
        display: flex;
        position:static;
      }

    nav > ul {
        display: none;
      }
    
    .mading-1 > h1{
        padding-top: 25%;
        justify-content: center;
        text-align: center;
        font-size: xx-large;
      }

    .mading-1 > p{
        font-size: medium;
      }

    /*------------------------------------------------*/

    /* Konten Dropdown (Hidden secara Default) */

    nav .mobile ul {
        display: none;
        position:absolute;
        background-color: var(--nav-color);
        width: 100%;
        margin: -10px -410px;
        height: 500%;
        padding: 70px;
        padding-top: 80px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: -10;
      }

      nav .mobile ul li:hover {
        background-color: var(--section-color);
      }



    /*-----------------DARK MODE switcher------------------*/



    /*------------------DARK MODE END----------------------*/


    /*--------------------MAIN MENU------------------------------------------*/

    #product-picture {
        padding-bottom: 15%;

      }

    #product-picture .proyek-item .menu-bar {
        display: none;
      }

    #product-picture .proyek-item .mobile-bar {
        display: block;
        list-style-type: circle;
        padding-bottom: 5%;
      }
    
    #product-picture .proyek-item .mobile-bar li:hover{
        box-shadow: 0px 8px 50px 5px var(--secondary-color);
        background-color: var(--form-color);
        color: var(--heading-color);
      }
      
    #product-picture .grid-container{
        display: none;
      }

    #product-picture-2 .grid-container-2{
        display: none;

      }

    #product-picture-2 {
        margin-top: 0%;
        padding-bottom: 15%;
      }

    #product-picture .w3-content{
        display:flex;
        position:static;
        align-items:stretch;
        justify-content: center;
      }

    #product-picture .w3-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
    #product-picture-2 .w3-content{
        display:flex;
        position:static;
        align-items:stretch;
        justify-content: center;
      }

    #product-picture-2 .w3-content img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
    #product-picture-2 .proyek-item-2 .menu-bar-2 {
        padding-bottom: 5%;
        list-style-type: georgian;
      }
    
    #proses-produksi{
        margin-top: 5%;
        padding-top: 20px;
        padding-bottom: 5%;
      } 

    #proses-produksi h2{
        text-align: center;
        padding-bottom: 10%;
      }


    #proses-produksi .produksi{

        padding-bottom: 0%;
      }

    #proses-produksi .produksi > iframe{
        position: absolute;
        width:80%; 
        height:50vh;
        margin-top:10% ;
        margin-bottom: 0%;
      }
      

    #proses-produksi .produksi-2{

        padding-bottom: 0%;
      }

    #proses-produksi .produksi-2 > iframe{
        position: absolute;
        width:80%; 
        height:50vh;
        margin-top:10% ;
      
      }

    .pic-ctn > img {
        position: absolute;
        border-radius: 50%;
        width:80vw; 
        height:50vh;
        margin-top:15% ;
        
      }


    #kontak h2{
        margin-top: 5%;
        padding-top: 10px;
        padding-bottom: 10%;
      }

    form{
      margin-top: -2%;
      width: 87%;
    }

    form fieldset{
        padding: 20px 10px 10px 10px;

      }

      form fieldset{
        filter: blur(2px);
        -webkit-filter: blur(2px);
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
      }
        
      
      form fieldset:hover{
        filter: blur(0px);
        -webkit-filter: blur(0px);
        margin-top: -5%;
      }

    form fieldset legend{
        padding: 10px;
        text-align: center;
      }
    /*
      #product-picture .grid-container {
        display: block;
        padding-bottom: 10%;
      }


    #product-picture-2 .grid-container-2 {
        display: block;
        padding-bottom: 10%;
      }

      */

      footer{
        text-align: center;
        margin-top: 0%;
        margin-bottom: 1.5%;
        animation: glow 1s ease-in-out infinite alternate;
      }
      
      @keyframes glow {
        from {
          text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #eda010, 0 0 40px #eda010, 0 0 50px #eda010, 0 0 60px #ed8210, 0 0 70px #ed8210;
        }
        
        to {
          text-shadow: 0 0 10px #fff, 0 0 30px #e5d183ec, 0 0 40px #e5d183ec, 0 0 50px #e5d183ec, 0 0 60px #e5d183ec, 0 0 70px #e5d183ec, 0 0 80px #ed5d10;
        }
      }
    }