.navbar .navbar-toggler{
        z-index:1000
    }
    .navbar-nav li{
        margin-left: 100px;
    }
    @media (max-width: 991.98px){
        .navbar .navbar-collapse{
            background:#F2ECE6;
            opacity:0;
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            transition:opacity 0.35s ease;
            display:flex;
            flex-direction:column;
            align-content:center;
            text-align:center !important
        }
        .navbar .navbar-collapse.collapse{
            display:flex;
            opacity:0;
            pointer-events:none
        }
        .navbar .navbar-collapse.collapsing[style*="height"]{
            opacity:1;
            height:100vh !important
        }
        .navbar .navbar-collapse.collapsing{
            opacity:0;
            height:100vh
        }
        .navbar .navbar-collapse.collapse.show{
            opacity:1;
            pointer-events:auto
        }
        .navbar .navbar-collapse .navbar-nav{
            margin-right:initial !important;
            margin-top:auto;
            /* margin-bottom:auto */
        }
        .navbar-nav li{
            margin-left: 0px;
            margin-bottom: 30px;
        }
        .navbar-nav li:nth-child(5) {
            margin-left : 102px;
            margin-bottom:100px;
        }
        .navbar-nav .dontShowYet {
            display: block;
        }
    }

    @media (max-width: 991.98px) {
        .navbar-nav {
            margin-left: initial !important;
        }
    }
    .navbar-toggle .icon-bar {
        width: 22px;
        transition: all 0.2s;
      }
      .navbar-toggle .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
      }
      .navbar-toggle .middle-bar {
        opacity: 0;
      }
      .navbar-toggle .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
      }
      .navbar-toggle.collapsed .top-bar {
        transform: rotate(0);
      }
      .navbar-toggle.collapsed .middle-bar {
        opacity: 1;
      }
      .navbar-toggle.collapsed .bottom-bar {
        transform: rotate(0);
      }
    .dontShowYet {
        display: none;
    }
    .change-color:hover, .change-color:active {
        background-color: #dbd3c9;
    }
    /* style untuk container-top */
    #container-top {
        position: relative;
        height : 100vh;
        text-align : center;
        background-image: url('images/homepage/Landing.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;  
        background-size: cover;
    }
    .vertical-horizontal-center{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    /*style untuk container about us */
    #container-aboutUS{
        height : 600px;
        text-align : center;
        padding : 5%;
    }
    #container-aboutUS p{
        font-size: 20px;
    }
    /* style untuk container galeri */
    .kotak {
        height : 580px;
        width : 100%;
        text-align : center;
        padding-right :0.85%
    }
    #map {
        padding-left: 20px;
        height : 100vh;
    }
    #gambar-map {
        height : 75vh;
        background-image: url('images/homepage/map.svg');
        background-size: cover;
    }
    #kota {
        position:absolute;
        bottom: -1275px;
        left: 70px;
    }
    #kota li {
        list-style: none;
    }
    #kota li::before {
        content: "\2022";
        color: #0492c2;
        font-weight: bold;
        display: inline-block; 
        width: 1em;
        margin-left: -1em;
    }
    #container-knitting {
        background-image : url(images/homepage/ProsesProduksiKnitting.jpg); 
        background-size :cover;
        position : relative;
    }
    /* #container-darker-material:hover, #container-darker-material:active{
        background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://www.xrite.com/-/media/modules/weblog/blog/raw-material-sourcing-textiles/screenshot20160605at91119pmpng.png?la=en&hash=376511823998391B29EAEA7A8657327D4ACCE331);
        background-size : cover;
    } */
    #container-dyeing {
        background-image : url(images/homepage/ProsesProduksiDyeing.jpg); 
        background-size :cover;
        position : relative;
    }
    /* #container-darker-ukuran:hover, #container-darker-ukuran:active {
        background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://img.freepik.com/free-photo/colorful-knitting-thread-texture-handiwork-backdrop_279525-2002.jpg?size=626&ext=jpg); 
        background-size : cover;
    } */
    #container-finishing {
        background-image : url(images/homepage/ProsesProduksiFinishing.jpg); 
        background-size :cover;
        position : relative;
    }
    /* #container-darker-setting:hover, #container-darker-setting:active{
        background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://thepotentializedmen.com/wp-content/uploads/2021/04/istockphoto-821821278-612x612-1.jpg); 
        background-size : cover;
    } */
    #container-marketing {
        background-image : url(images/homepage/ProsesProduksiMarketing.jpg); 
        background-size :cover;
        position : relative;
    }
    /* #container-darker-mesin:hover, #container-darker-mesin:active {
        background:linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6) ),url(https://cdn.shopify.com/s/files/1/0321/0241/files/Sewing_Machine_Stitches_001_large.jpg?17887855082680891261); 
        background-size :cover;
    } */
    /* #container-darker-material:hover .next span,#container-darker-material:active .next span{
        display : block;
        transition-delay: 100s;
    }
    #container-darker-ukuran:hover .next span, #container-darker-ukuran:active .next span{
        display : block;
        transition-delay: 100s;
    }
    #container-darker-setting:hover .next span, #container-darker-setting:active .next span{
        display : block;
        transition-delay: 100s;
    }
    #container-darker-mesin:hover .next span, #container-darker-mesin:active .next span{
        display : block;
        transition-delay: 100s;
    } */
    #button {
        text-align : center;
        height : 200px;
        background-color: #F2ECE6;
        padding-top : 45px;
    }
    .circle {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size : 10px;
        border-radius: 50%;
        text-align: center;
        background-color : transparent;
        border-style: solid;
        border-width : 1px;
        border-color: white;
    }
    .next span{
        position : absolute;
        width : 10px;
        height : 10px;
        border : 1px solid white;  
        transform : translateY(-89%) rotate(-45deg);
        top : 89%;
        left : 278.5px;
        display : none;
        border-top : none;
        border-left : none;
    }
    .next span:before {
        content : '';
        position : absolute;
        width : 202px;
        height :1px;
        border : 1px solid white;
        border-top : none;
        border-left : none;
        border-right : none;
        transform : rotate(45deg) translate(-164px,74px); 
    }
    /*
    .kotak:hover .next span{
    display : block;
    } */
    .inner {
        display : table;
        vertical-align : middle;
        margin-top :125px;
        position : relative;
        top: 50%;
        left: 50%;
    }
    .rotate {  
        transform:  translateX(-50%) translateY(-50%);
    }
    /* style untuk container pesan */
    #container-pesan {
        height : 500px;
        padding : 5%;
    }
    .inputFields{
        width: 500px;
        margin: 15px 0;
        box-shadow : none;
        border-color: #ccc;
        border-radius:0;
        border-style : none none solid none;
    }
    .input-Fields{
        width: 500px;
        margin: 15px 0;
        height: 200px;
    }
    .input-Fields:focus, .inputFields:focus{
        box-shadow: none;
        outline : none;
    }
    .noBullet {
        list-style-type: none;
    }
    .ganti-warna:hover, .ganti-warna:active{
        background-color : #0492c2;
        color : white;
        border-color : #0492c2;
    }
    .button-ganti:hover, .button-ganti:active{
        background-color: #DBD3C9;
        color : black;
        border-color : #F2ECE6;
    }
    .form {
        padding-left : 100px;
    }
    textarea{
        resize: none;
    }
    /* stlye untuk footer */
    #footer{
        background : #0492c2;
        height:380px; 
        color : white;
        padding : 50px;
        padding-top : 30px;
    }
    .alignleft {
        float: left;
    }
    .alignright {
        float: right;
    }
    /* style untuk semua bisa */
    .small {
        line-height: 0.3;
    }
    .bigger {
        line-height : 5;
    }
    .gap {
        margin-bottom: 0px;
    }
    .dontShow { 
        display: none;
    }
    /* .next span{
        position : absolute;
        width : 10px;
        height : 10px;
        border : 1px solid white;  
        transform : translateY(-89%) rotate(-45deg);
        top : 89%;
        right : 70px;
        border-top : none;
        border-left : none;
        display : none;
    }
    .next span {
        transform : translateY(-89%) rotate(-45deg);
        top : 89%;
        right : 70px;
        border-top : none;
        border-left : none;
    }
    .next span:before {
        content : '';
        position : absolute;
        width : 228px;
        height :1px;
        border : 1px solid white;
        border-top : none;
        border-left : none;
        border-right : none;
        transform : rotate(45deg) translate(-185px,83.5px); 
    } */
    #textbox span {
        float : right;
    }
    .rotate p {
        transform: rotate(-90deg);
    }
    .itemLeft { 
        text-align: center;
    }
    @media screen and (max-width: 1300px){
        #container-pesan {
            padding : 5%;
        }
        #container-pesan textarea {
        margin-left : 5px;
        }
        .form, .noBullet, .pesan{
            padding-left : 0px;
        }
    }
    @media screen and (max-width: 1116px){
        #container-pesan {
            height : 750px;
            padding : 5%;
            text-align: center;
        }
        #container-pesan textarea {
        margin-left : 5px;
        }
        .form, .noBullet, .pesan{
            padding-left : 0px;
        }
    }
    @media screen and (max-width: 989px){
        .kotak {
            height : 1850px;
            margin-bottom : -100px;
            padding-right : 12px;
        }
    }
    @media screen and (max-width:576px) {
        #container-aboutUS{
            height : 750px;
        }
        #footer { 
            height : 600px;
        }
        #map > #gambar-map {
            background-image: url('images/homepage/PetaIN.svg');
            background-size: cover;
        }
        .rotate p {
            transform: rotate(0deg);
        }
        .gap {
            margin-bottom: 15px;
        }
        .dontShow {
            display: block;
        }
        .container-logo .alignright {
            display: none;
        }
        .itemLeft {
            text-align : left;
        }
    }
    @media screen and (max-width:530px) {
        .inputFields{
            width: 250px;
        }
        .input-Fields{
            width: 250px;
        }
    }
    @media screen and (max-width:542px) {
        #textbox p {
            margin-bottom: 0px;
        }
        #textbox span{
            float : none;
        }
    }
    @media screen and (max-width:500px) {
        #container-top .bigger img {
            width : 40vh;
            height : 400px;
        }
        #container-aboutUS p {
            font-size: 15px;
        }
    }
    @media screen and (max-width:494px) {
        #button {
            padding-top: 30px;
        }
    }