.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;
    }
    div .dontShowYet{
        display: block;
    }
}

@media (max-width: 991.98px) {
    .navbar-nav {
        margin-left: initial !important;
        }
    }
    .dontShowYet {
        display: none;
    }
/* .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        text-decoration: none;
        font-size: 17px;
    }
    .style-navs {
        padding-top : 20px;
    }
    .topnav .icon {
        display: none;
    }

    @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
            position : absolute;
            right : 0;
            display: inline-block;
        }
    }

    @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .topnav.responsive a:hover, .topnav.responsive a:active {
        background-color: #dbd3c9;
        color: black;
    }
    .style-navs {
        width : 100%;
        padding-top : 10px;
    }
    } */
    /* .navbar-nav li{
        margin-left: 100px;
    } */
    .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;
    }
    .dontShow { 
        display: none;
    }
    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;
    }
    /* .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;
    }
    .inner p {
        margin-top: 200px;
    }
    .itemLeft { 
        text-align: center;
    }
    .title {
    font-size: 50px;
    }
    
    .bodycopy {
        font-size: 20px;
    }
    .itemCenter{
        text-align: center;
    }
    @supports(-webkit-overflow-scrolling:touch) {
        #container-top{
            background-attachment: scroll;
        }
    }
    @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) {
        .itemCenter{
            text-align: left;
        }
        #container-aboutUS{
            height : 750px;
        }
        #footer { 
            height : 600px;
        }
        #map {
            padding-left: 0px;
            margin-bottom: 50px;
        }
        #kota { 
            bottom : -1280px;
        }
        #map #gambar-map {
            background-image: url('images/homepage/PetaEN.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        .kotak h1 {
            margin-top: -50px;
        }
        .gap {
            margin-bottom: 15px;
        }
        .dontShow {
            display: block;
        }
        .container-logo .alignright {
            display: none;
        }
        .kotak {
            height : 1280px;
            margin-bottom: 0px;
        }
        #container-knitting, #container-dyeing, #container-finishing, #container-marketing {
            height : 300px;
        }
        .inner p {
            margin-top: 30px;
        }
        .itemLeft {
            text-align : left;
        }
        .title {
            font-size: 40px;
        }
        .bodycopy{
            font-size: 15px;
        }
    }
    @media screen and (max-width:542px) {
        #textbox p {
            margin-bottom: 0px;
        }
        #textbox span{
            float : none;
        }
    }
    @media screen and (max-width:530px) {
        .inputFields{
            width: 250px;
        }
        .input-Fields{
            width: 250px;
        }
    }
    @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;
        }
    } */