/** custom mobile andre */
@media only screen and (orientation: portrait) {
    body {
        font-size: calc(1.2vw + 1.3vh) !important;
        font-weight: 300 !important;
        line-height: 2 !important;
    }
    .logo_wci\.png {
        background-size: 40% !important;
        }
    .h4, h4 {
        font-size: calc(1.2vw + 1.3vh) !important;
        }
    .overlay-text-center h4 {
        margin-block: 2% !important;
        }
    .icon-header {
        width: 5vw !important;
        height: 5vw !important;
        }
    .search-input {
        display: none;
        }
    .icon {
        margin-left: 0 !important;
        align-items: center !important;
        position: relative;
        }
    .icons {
        width: 15% !important;
        justify-content: space-between !important;
        align-items: center;
        }
    .icons > .icon {
        display: none;
        }
    #cd-cart-trigger {
        display: flex !important;
        }
    .menu-batik {
        position: fixed !important;
        top: 0px;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        z-index: 999999 !important;
        left: -100vh;
        transition: 1s;
        }
    .menu-batik.show {
        left: 0px;
        transition: 1s;
        }
    .brand-section .overlay-text-left > img, .brand-section .overlay-text-right > img {
        width: calc(10vw + 9vh) !important;
        max-height: calc(10vw + 9vh) !important;
        object-fit: contain;
    }
    .brand-section > div > a {
        padding: 3% 10% !important;
    }
    .desc-house-brand > div > a {
        padding: 3% 10% !important;
    }
    .logo img {
        width: auto !important;
    }
    .logo {
        width: 70%;
        height: 7vh !important;
    }
    .brand-section.bc-home .overlay-text-right > img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(102deg) brightness(110%) contrast(101%);
    }
    .header-wrapper {
        padding: 3vw !important;
        max-height: calc(10vh + 9vw);
        justify-content: space-between;
        align-items: center;
    }
    .logo-tengah {
        width: 100vw !important;
        display: block !important;
        margin-top: unset !important;
        padding-block: 10% !important;
    }
    .logo-tengah img {
        width: auto !important;
        max-height: 14vh !important;
        max-width: 45vw !important;
    }
    .logo-tengah p {
        margin-bottom: 0px !important;
    }
    .bx-wrapper {
        margin-bottom: unset !important;
    }
    .slider div {
        height: 75vh !important;
        display: flex;
        justify-content: center;
        overflow: auto;
    }
    .slider div > img {
        width: auto !important;
        height: 100% !important;
        max-width: unset !important;
    }
    .desc-house-brand {
        width: 85% !important;
    }
    .desc-house-brand p {
        font-size: calc(1.2vw + 1.3vh) !important;
    }
    .h2, h2 {
        font-size: calc(1.5vw + 1.6vh) !important;
    }
    p {
        font-size: calc(1.2vw + 1.3vh) !important;
    }
    .overlay-text-right {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-inline: 5% !important;
        width: 100% !important;
        padding-block: 8% !important;
        right: unset !important;
        top: unset !important;
        background: rgba(0, 0, 0, 0.62);
    }
    .brand-section {
        height: auto !important;
        margin-bottom: 3% !important;
        display: flex !important;
        justify-content: center !important;
        background-position-x: 15% !important;
        background-size: cover !important;
    }
    .overlay-text-right p, .overlay-text-left p {
        font-size: calc(1.2vw + 1.3vh) !important;
        margin-block: 3% !important;
        position: relative !important;
        right: unset !important;
        top: unset !important;
    }
    .overlay-text-right img {
        width: 30vw !important;
    }
    .footer-wrapper {
        flex-direction: column;
        font-size: calc(1.1vw + 1.1vh) !important;
    }
    .footer-menu ul li {
        margin: 0 0 10px 0 !important;
    }
    .col-md.p-3.d-flex.justify-content-center.align-items-center {
        width: calc(35% - 2%);
        display: block !important;
        height: 15vh;
        padding: 3.5% !important;
        text-align: center;
    }
    .row .col-md.p-3 img {
        width: auto !important;
        height: auto !important;
        max-height: 100%;
        object-fit: cover !important;
        max-width: 100%;
    }
    .row h2 {
        margin-block: 4% !important;
    }
    .row .menu-heading-shop h2 {
        color: white;
    }
    .row {
        margin-right: unset !important;
        margin-left: unset !important;
        justify-content: space-evenly;
        width: 100%;
        padding-block: 5% !important;
    }
    .collapse.buyers-policy-menu {
        display: none !important; /* Hide the menu by default in portrait mode */
    }
    .menu-heading.active::after {
        content: "-";
    }
    .menu-heading::after {
        content: "+";
        position: absolute;
        right: 10vw;
        color: #9d9d9d;
        font-weight: normal;
    }
    .buyers-policy-menu {
        background: #6c6c6c;
    }
    .policy li {
        padding-left: 16px;
        padding-bottom: 10px;
    }
    .policy a {
        opacity: 100% !important;
    }
    hr {
        margin: unset !important;
    }
    .policy {
        padding: 5% 0 !important;
    }
    .overlay-text-left {
        position: relative;
        top: unset !important;
        left: unset !important;
    }
    .overlay-text-left {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-inline: 5% !important;
        width: 100% !important;
        padding-block: 8% !important;
        right: unset !important;
        top: unset !important;
        background: rgba(0, 0, 0, 0.62);
    }
    .overlay-text-left img {
        width: 30vw !important;
    }
    .col-md:last-child .buyers-policy-menu {
        background: unset !important;
    }
    .brand-section.novita-yunus {
        background-position-x: 92% !important;
        }
    .brand-section.wmm {
        background-position-x: 65% !important;
        }
    .brand-section.bc-home {
        background-position-x: 0% !important;
        }
    .desc-house-brand {
        margin-bottom: unset !important;
        }
    
    .img-header-about {
        width: auto !important;
        height: 60vh;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        }
    .desc-about {
        width: 85% !important;
        }
    .desc-about p {
        margin-top: 3% !important;
        }
    .desc-about h2 {
        margin-block: 5% !important;
        }
    .desc-about hr {
        margin-block: 5% !important;
        width: 5vw !important;
        opacity: 0.5;
        border-top: 2px black solid;
        }
    #hamburger-menu {
        display: flex !important;
        margin-right: 2%;
        }
    .hamburger-icon {
        display: flex;
        align-items: center;
        }
    .hamburger-icon img {
        height: 4.5vw;
        width: auto;
        }
    .close-menu {
        display: flex !important;
        position: absolute;
        top: 10vw;
        right: 10vw;
        }
    body #menu, body #menu2 {
        justify-content: flex-start !important;
        padding-inline: 10% !important;
        padding-top: 20vw !important;
        flex-wrap: unset !important;
        }
    nav .menu-text {
        padding-inline: unset !important;
        border-right: unset !important;
        }
    body nav .menu-item {
        padding-block: 3% !important;
        background: unset !important;
        width: 100% !important;
        padding-top: calc(2vw + 2.1vh) !important;
        }
    nav .menu-text, nav .menu-text a {
        color: white !important;
        }
    .close-menu p {
        margin-bottom: 0px !important;
        font-weight: bold;
        font-size: calc(1.3vw + 1.3vh) !important;
        padding: calc(0.5vw + 1vh) !important;
        line-height: calc(0.5vw + 1vh) !important;
        border: solid 1px white;
        border-radius: 50%;
        color: white;
        margin-left: 5vw;
        }
    .icons.portrait .icon {
        display: block;
        margin-right: 3vw;
        }
    .icons.portrait {
        width: auto !important;
        }
    .icons a {
        display: none;
        }
    .search-form {
        margin: unset;
        }
    body .menu-item .sub-menu, body .menu-item .sub-menu2 {
        width: auto !important;
        z-index: unset !important;
        padding-top: calc(1.5vw + 1.6vh) !important;
        padding-bottom: calc(1.5vw + 1.6vh) !important;
        position: relative !important;
        background: transparent !important;
        padding-top: calc(1.5vw + 1.6vh) !important;
        margin-top: 5% !important;
        border-block: 1px solid white;
        }
    nav a {
        color: white !important;
        }
    .sub-menu-list {
        padding-top: unset !important;
        border-top: unset !important;
        text-align: left !important;
        }
    .sub-menu-list a {
        padding-left: 10% !important;
        }
    nav .menu-text, nav .menu-text a {
        width: 100% !important;
        }
    body .sub-menu .brand-images {
        padding-top: unset !important;
        border-top: unset !important;
        display: flex !important;
        height: fit-content;
        justify-content: space-between;
        flex-wrap: wrap;
        }
    .brand-images img {
        margin-right: unset !important;
        padding: unset !important;
        height: auto !important;
        filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(0%) hue-rotate(43deg) brightness(105%) contrast(106%);
        }
    .brand-images a {
        width: calc(100vw / 3 - 18%) !important;
        height: calc(100vw / 3 - 18%) !important;
        margin-inline: unset !important;
        }
    .menu-item:hover > .menu-text > a {
        font-weight: 600 !important;
        }
    .sub-menu .brand-images a:nth-child(5) {
        height: 3% !important;
        width: 20% !important;
        margin-right: 20% !important;
        }
    .sub-menu .brand-images a:nth-child(4) {
        margin-left: 20% !important;
        }
    .h1, h1 {
        font-size: calc(1.8vw + 1.7vh) !important;
        }
    .events-top h6 {
        margin-top: 10% !important;
        }
    .events-top > div {
        position: relative !important;
        left: unset !important;
        margin-top: 8% !important;
        border-bottom: 1px solid black !important;
        width: 6vw !important;
        }
    .events-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: 6% !important;
        }
    .row.event-list {
        padding-inline: 5%;
        }
    .row.event-list .col-md-4 {
        padding-inline: unset !important;
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-bottom: unset !important;
        border-bottom: solid 1px #d9d9d9;
        padding-bottom: 6%;
        margin-top: 6% !important;
        }
    .row.event-list > .col-md-4 a {
        display: flex;
        justify-content: center;
        width: fit-content;
        }
    .row.event-list .col-md-4:nth-last-child(1) {
        border-bottom: unset !important;
        }
    .events-top p {
        margin-top: 8% !important;
        }
    .row.event-list > .col-md-4 > a:nth-child(1) {
        height: 70vh !important;
        margin-bottom: 6%;
        }
    .h6, h6 {
        font-size: calc(1.2vw + 1.3vh) !important;
        }
    .events_detail-top h6 {
        margin-top: 10% !important;
        }
    .events_detail-top h1 {
        margin-bottom: 10% !important;
        }
    .events_detail-top p strong {
        font-weight: normal !important;
        }
    .events_detail-top p {
        text-align: center;
        margin-top: 8% !important;
        }
    .events_detail-top .owl-carousel.owl-loaded.owl-drag {
        margin-block: 8% !important;
        }
    .owl-carousel.owl-drag .owl-item {
        width: 100% !important;
        }
    .owl-carousel.owl-drag .owl-item:nth-child(3n+2) {
        margin-inline: unset !important;
        }
    .brand-section_bc {
        margin-bottom: 5% !important;
        height: 75vh !important;
        background-position-y: 0%, top !important;
        background-position-x: 0%, center !important;
        display: flex !important;
        align-items: end !important;
        padding-inline: 6% !important;
        }
    .overlay-text-left_banner {
        position: relative !important;
        bottom: 8% !important;
        left: unset !important;
        }
    .cat-section_bc {
        height: 65vw !important;
        margin-bottom: 8% !important;
        }
    .background {
        height: 75vh !important;
        margin-top: unset !important;
        display: flex;
        align-items: end;
        justify-content: center;
        }
    .row .col-md-6 {
        padding-inline: unset !important;
        }
    .text-overlay {
        position: relative !important;
        left: unset !important;
        transform: unset !important;
        height: unset;
        z-index: 1;
        top: 0px;
        bottom: unset;
        width: 80%;
        margin-inline: auto;
        text-align: center !important;
        display: flex;
        justify-content: center;
        align-items: center !important;
        }
    .play-button {
        width: 100vw !important;
        border-radius: 100% !important;
        right: unset !important;
        height: auto !important;
        bottom: 0px !important;
        transform: unset !important;
        top: unset !important;
        position: relative !important;
        margin-bottom: 5% !important;
        }
    .yt-container {
        background-position: top !important;
        flex-direction: column !important;
        justify-content: end !important;
        background: rgb(0,0,0) !important;
        background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%) !important;
        background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%) !important;
        background: linear-gradient(180deg, rgba(0,0,0,0) 5%, rgb(0, 0, 0) 85%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1) !important;
        }
    .play-button:hover {
        border: unset !important;
        }
    .play-button:hover .play-icon {
        opacity: 1 !important;
        }
    .play-icon {
        opacity: 0.6;
        }
    .sub-menu-list a:hover {
        font-weight: bold !important;
        }
    .video-container {
        width: 100vw !important;
        }
    .video-popup {
        width: 100vw !important;
        height: 100vh !important;
        }
    .close-button {
        bottom: 10% !important;
        top: unset !important;
        right: 50% !important;
        width: calc(4vw + 3vh) !important;
        height: calc(4vw + 3vh) !important;
        font-size: calc(2vw + 2.1vh) !important;
        transform: translateX(50%);
        }
    .video-popup iframe {
        width: 100vw !important;
        height: 100vh !important;
        }
    .row.lookbook-list {
        width: 100% !important;
        }
    .overlay-text-center_banner strong {
        font-weight: 350 !important;
        font-size: calc(1.2vw + 1.3vh) !important;
        }
    .overlay-text-center_banner p {
        margin-top: unset !important;
        }
    .overlay-text-center_banner h1 {
        margin-top: unset !important;
        margin-bottom: unset !important;
        }
    .overlay-text-center_banner {
        position: relative !important;
        top: unset !important;
        width: 100% !important;
        left: unset !important;
        transform: unset !important;
        bottom: 6%;
        }
    .title-lookbook {
        display: flex !important;
        background: unset !important;
        align-items: end;
        }
    .lookbook-list .col-md-4 {
        width: 100vw;
        }
    .events_detail-top .gambar-kedua {
        display: none !important;
        }
    .brand-section_bc.ny {
        background-position-x: 61% !important;
        }
    .brand-section_bc.tiraz {
        background-position-x: 25% !important;
        }

    .div-logo {
        margin-top: calc(6vh + 6vw) !important;
        max-height: 25vh;
        background-size: 35%;
        max-width: 90vh;
        }
    .bag-chip {
        line-height: 0px;
        font-size: calc(1vw + 1vh) !important;
        margin: unset !important;
        width: 4vw !important;
        height: 4vw !important;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: -30%;
        top: -30%;
        }
    .logo-app-wmm img {
        width: calc(100% / 3 - 3%);
        }
    .logo-bawah {
        display: flex;
        justify-content: center;
        }
    .tab {
        display: flex;
        flex-direction: column;
        background: #00a9a3;
        padding: 5%;
        position: relative;
        }
    .tab .tablinks {
        padding: 1% !important;
        font-size: calc(1.2vw + 1.3vh) !important;
        color: white;
        opacity: .5;
        display: none;
        }
    .tab .tablinks:hover {
        color: white;
        opacity: 1;
        }
    .tab button.active {
        color: white !important;
        opacity: 1;
        font-size: calc(1.5vw + 1.6vh) !important;
        display: block;
        }
    .tab.show .tablinks {
        display: block;
        }
    .tabcontent p, .tabcontent span {
        color: unset !important;
        }
    .tab::before {
        content: "";
        background: url(https://batikchicindonesia.com/assets/img/user/hamburger-menu-01.png);
        background-size: cover;
        width: 3vw;
        height: 3vw;
        display: flex;
        position: absolute;
        right: 5%;
        font-weight: bold;
        color: white;
        top: 50%;
        transform: translateY(-50%);
        font-size: large;
        }
    .tab.show::before {
        display: none;
        }
    .tabcontent > div {
        margin-block: 10% !important;
        }
    #nasi_campur > div:nth-child(2) {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: 6vw !important;
        }
    .tabcontent {
        padding-block: 5% !important;
        }
    .desc-about.wmm > div:nth-child(2) {
        position: relative !important;
        left: unset !important;
        }
    .desc-about.wmm > div:nth-child(3) {
        margin-top: 3vh !important;
        }
    .desc-about.wmm {
        display: flex;
        flex-direction: column;
        align-items: center;
        }
    .desc-about.wmm > div:nth-child(2) {
        margin-top: 3vh !important;
        }
    .icon-ig {
        width: 18pt !important;
        margin-right: 5%;
        }
    .bc-home .menu-item:nth-child(3) {
        display: none;
        }
    .category-shop {
        text-align: center;
        width: 100vw;
        display: flex;
        justify-content: center;
        }
    .category-shop .cat-cont {
        display: none;
        }
    .category-shop .active .cat-cont {
        display: unset !important;
        }
    .shop-list .col-md-4 {
        width: calc(100% / 2) !important;
        }
    .category-shop .col-md-9 {
        padding-inline: unset !important;
        }
    .shop-list .col-md-4:nth-child(2n+1) {
        padding-left: 0px !important;
        padding-right: 1.5% !important;
        }
    .shop-list .col-md-4:nth-child(2n) {
        padding-right: 0px !important;
        padding-left: 1.5% !important;
        }
    .row.shop-list {
        justify-content: normal !important;
        }
    .brand-logo {
        width: calc(100% / 3 - 5%) !important;
        margin-inline: 1% !important;
        justify-content: center;
        margin-top: 6%;
        }
    .logo-deret-footer {
        flex-wrap: wrap;
        justify-content: space-between;
        }
    .brand-logo > a {
        height: unset !important;
        }
    .brand-logo img {
        width: 100% !important;
        height: auto !important;
        }
    .brand-logo:nth-child(4) {
        width: 25% !important;
        }
    .brand-logo:nth-child(5) {
        width: 22% !important;
        }
    .brand-logo:nth-child(6) {
        width: 35% !important;
        }
    .row.logo-footer {
        margin-top: unset !important;
        }
}
/** custom mobile andre */