/* General Styling */
:root {
    --bg-header: #d9e6e4;
    --bg-main: #f3efe7;
    --text-color: #4a4a4a;
    --footer-bg: #333;
    --border-color: #d1c8b9;
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Helvetica Neue', Arial, sans-serif;
}
html {
    overflow-x: hidden;
}

@font-face {
    font-family: 'Metrolin';
    src: url('https://batikchicindonesia.com/assets/fonts/Metrolin-z83V0.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Condensed';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Condensed.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Condensed Bold';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Condensed-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Expanded';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Exp.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Expanded Bold';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Exp-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Expanded Italic';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Exp-Italic.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Italic';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Italic.otf') format('opentype');
}

@font-face {
    font-family: 'DIN Bold';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'DIN';
    src: url('https://batikchicindonesia.com/assets/fonts/DIN.otf') format('opentype');
}


body {
    margin: 0;
    font-family: 'DIN', sans-serif;
    font-size: 1.5rem;
    background-color: var(--bg-main);
    color: var(--text-color);
    text-align: center;
    letter-spacing: 0.15rem;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3 {
    font-family: 'Metrolin';
    letter-spacing: 0.18rem !important;
}

p {
    line-height: 1.6;
}

a {
    color: var(--text-color);
    text-decoration: none;
}
.mobile-section {
display: none !important;
}
.fas.fa-bars.hamburger {
display: none;
}
section {
max-width: 100vw;
position: relative;
overflow-x: hidden;
}

/* Header & Hero Section */
.hero {
    background-color: var(--bg-header);
    position: relative;
}


        /* Container utama yang membungkus kedua gambar */
        .parallax-container {
            position: relative;
            height: auto;
            overflow: hidden; /* Menghindari elemen keluar dari kontainer */
            display: flex;
            min-height: 90vh;
            max-height: 110vh;
        }
        
        /* Gambar latar belakang yang bergerak lebih cepat */
        .parallax-background {
            position: relative;
            width: 100vw !important;
            height: auto;
            top: 0;
            left: 0;
            object-fit: cover; /* Agar gambar latar belakang memenuhi kontainer */
            z-index: 1;
            transition: transform 0.1s ease-out;
        }
        
        /* Gambar depan yang bergerak lebih lambat dibandingkan latar belakang */
        .foreground {
            position: absolute;
            width: 100%;
            z-index: 2; /* Pastikan gambar depan berada di atas latar belakang */
            transition: transform 0.1s ease-out; /* Efek transisi pada gambar depan */
            bottom: -2%;
            left: -1%;
            transform-origin: left center;
        }
        
        .foreground img {
            width: 55% !important;
            transition: transform 0.1s ease-out; /* Efek transisi pada gambar */
        }  
        .menu-header {
            display: block;
            position: fixed;
            z-index: 99999 !important;
            width: 100vw;
            transition: all 0.3s ease;
        }
        .hero-background {
            padding-top: 10vh;
        }

  
.header-container {
    display: flex;
    justify-content: right;
    transition: all 0.3s ease;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    padding: 1.5% 5%;
}
.menu-header.scrolled .header-container {
    padding: 1% 5% 1% 2% !important;
    align-items: center !important;
    background-color: #d9e6e4;
    transition: all 0.3s ease;
    justify-content: space-between;
}
.menu-header.scrolled {
    transition: all 0.3s ease;
}
.scrolled .logo {
    position: relative !important;
    left: 0px;
    width: 5vw !important;
    transition: all 0.3s ease;
}
.logo {
    width: 13.5vw;
    height: auto;
    position: absolute;
    left: 5%;
    object-fit: cover;
    transition: all 0.3s ease;
}
.logo-roa {
    width: 23vw !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
.hero-text {
    text-align: center;
}
.hero-text h1 {
    font-size: 3rem;
    margin: 0;
}
.hero-text .subtitle {
    border: 1px solid var(--text-color);
    padding: 5px 15px;
    display: inline-block;
    margin-top: 10px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline;
    padding-inline: 1rem;
}
nav ul li:not(:last-child) {
border-right: solid 2pt var(--text-color);
}
.hero-background img {
    width: 100%;
    display: block;
}

/* Features Section */
.features-container {
    display: flex;
    overflow: hidden; /* Menyembunyikan elemen yang keluar dari container */
    position: relative;
}
.features {
    display: flex;
    width: max-content;
}
.feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    margin-right: 15pt;
}
.feature-item span {
    width: max-content;
}
.feature-item img {
    width: 5rem;
    height: auto;
    object-fit: contain;
    margin-right: 10px;
}
.features-utama {
border-bottom: solid white 2pt;
padding-block: 0.5%;
}

/* About Section */
.about {
    border-bottom: solid white 2pt;
}
.about-container {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
    padding-inline: 5%;
    padding-bottom: 2%;
    justify-content: space-evenly;
}
.about-image {
    flex: 1;
    max-width: 30%;
}
.about-image img {
    max-width: 100%;
}
.about-text {
    flex: 2;
    max-width: 40%;
}
.about-text h2 {
    font-size: 2rem;
}

/* Fish Types Section */
.fish-types {
    border-bottom: solid white 2pt;
}
.fish-types-container {
    display: flex;
    justify-content: space-between;
    padding-inline: 5%;
    padding-block: 0px;
}
.fish-card {
    flex: 1;
    padding: 5% 3%;
    display: flex;
    flex-direction: column; /* Menata elemen secara vertikal */
    align-items: center; /* Menjaga semua konten berada di tengah */
    text-align: center;
}
.fish-card:not(:last-child) {
    border-right: 2pt solid white;
}
.fish-card h3, .fish-card h4, .fish-card img {
    margin: 0;
    padding: 0;
}
.fish-card h3 {
    font-size: 3.5rem;
    font-family: 'Metrolin';
    margin-bottom: 10px; /* Menambah jarak antara h3 dan h4 */
}
.fish-card h4 {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Metrolin';
    letter-spacing: 2px;
    margin-bottom: 10px; /* Menambah jarak antara h4 dan gambar */
}
.fish-card img {
    width: 80%;
    height: inherit;
    object-fit: contain !important;
}
.fish-types-container {
    display: flex;
    justify-content: space-between;
    align-items: normal;
    height: 100%;
}
.fish-card .gambar-fish {
    width: 100%;  /* Menjamin lebar gambar sesuai dengan container */
    height: 20rem; /* Biarkan tinggi mengikuti rasio aspek gambar */
    max-height: 100%; /* Atur maksimal tinggi */
    display: flex;
    justify-content: center; /* Menjaga gambar tetap di tengah */
    align-items: center; /* Pastikan gambar tetap proporsional */
}
.fish-card .nama-fish {
    margin-bottom: 2%;
}

/* Gallery Product Section */
.product-gallery .gallery-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    padding-top: 5%;
    padding-inline: 5%;
    padding-bottom: 3%;
}
.product-gallery .gallery-images {
    position: relative;
    margin-bottom: 3%;
    width: 100%;
    overflow: hidden;
}
.product-gallery .gallery-images img {
    height: auto;
    width: calc(100% / 6 - 2%);
    margin-inline: 1%;
}
.product-gallery {
    display: flex;
    position: relative;
    width: 100vw;
    border-bottom: solid white 2pt;
}
.view-products-btn {
    font-weight: bold;
}

/* Contact Section */
.contact {
    display: block;
    position: relative;
}
.contact-container {
    padding-block: unset;
    padding-inline: unset;
    justify-content: space-between;
    height: auto;
    width: auto;
    display: flex;
    position: relative;
    max-height: 50vh;
}
.contact-card {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
    border: dashed 2pt white;
    padding: 3%;
    justify-content: space-between;
}
.contact-image img {
    width: 100%; /* Agar gambar memenuhi lebar div */
    height: 100%; /* Agar gambar memenuhi tinggi div */
    object-fit: contain; /* Agar gambar tidak melampaui batas div, namun tetap proporsional */
}
.contact-details h3 {
    font-size: 3rem;
    margin: unset;
}
.contact-details a {
    display: block;
    margin-top: 5px;
    font-weight: bold;
}
.contact-image {
    display: flex;
    width: 40%;
    height: 90%;
    max-height: 100%; /* Pastikan div ini tidak melebihi tinggi maksimal */
    align-items: center;
    justify-content: center; /* Menjaga gambar tetap di tengah */
}
.contact-details {
    width: 55%;
}
.telp-contact {
    width: auto;
    border-right: solid 2pt white;
}
.contact-container > div {
    padding-block: 3%;
    padding-inline: 5%;
    width: calc(100% / 2);
    position: relative;
    display: flex;
}
.telp-contact .contact-image {
    position: relative;
    left: -3%;
}
.telp-roa {
    font-weight: bold;
    font-size: 1.8rem;
    margin-block: 1%;
}

/* Footer Section */
footer {
    color: #314b46;
    text-align: left;
    border-top: solid 2pt white;
}
footer .container {
    padding: unset;
}
footer .container p {
    margin: unset;
    text-align: left;
}
footer .container {
    padding-block: 1rem;
    padding-inline: 3%;
}
.alamat-contact a {
    display: flex;
    flex-shrink: 1;
}

/* Product_roa page */
/* Hero_paralax section */
.pantai-roa .pulau-roa-kanan {
position: absolute;
right: -1.5%;
bottom: 0px;
width: 75% !important;
}
.pantai-roa .parallax-background {
bottom: -3%;
position: absolute;
top: unset;
}
.pantai-roa .pulau-roa-kiri {
bottom: 0%;
transform: translateY(-3%);
position: absolute;
}
.pantai-roa .foreground {
bottom: 0% !important;
}
.foreground-second {
position: absolute;
width: 100%;
z-index: 2;
transition: transform 0.1s ease-out;
bottom: -2%;
left: -1%;
transform-origin: left center;
}
.foreground-second img {
width: 59% !important;
transition: transform 0.1s ease-out;
}

/* product carousel section */
.product-carousel-roa {
display: flex;
width: 100%;
justify-content: center;
}
.product-item {
width: calc(100% / 3);
border-right: solid 2pt white;
border-bottom: solid 2pt white;
padding: 3%;
}
#product-roa .container.gallery-container {
padding: unset;
}
.second-row .product-item {
border-bottom: unset;
}
.second-row .product-item:first-child {
border-left: solid 2pt white;
}
#product-roa .product-item img {
height: auto;
width: auto;
min-height: 40vh;
max-height: 27vw;
}
.product-item p {
margin-block: 1%;
}
.product-item .product-price {
font-weight: bold;
}
.product-name {
text-transform: uppercase;
}

/* gourmet section */
.gourmet-logo img {
width: 35rem;
}
.gourmet-image {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
.gourmet-image img {
width: 30rem;
height: auto;
object-fit: contain;
}
.container.gourmet-container {
position: relative;
min-height: 60vh;
height: auto;
padding: 5%;
}
.desc-gourmet {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
width: 85%;
display: flex;
justify-content: space-between;
}
.gourmet-text {
width: 30%;
}
.gourmet-text.kiri {
text-align: right;
}
.gourmet-text.kanan {
text-align: left;
}
.gourmet-text h2 {
margin-top: 0;
}
.gourmet-text.kiri h2::after {
content: ' ';
position: absolute;
display: block;
top: 1rem;
right: -26%;
width: 23%;
border-top: dashed white;
}
.gourmet-text.kanan h2::before {
content: ' ';
position: absolute;
display: block;
top: 1rem;
left: -26%;
width: 23%;
border-top: dashed white;
}
.gourmet-text div {
position: relative;
}

/* Heritage Bakes */
.heritage-bakes-page .menu-kue {
display: none;
}
.heritage-bakes-page .menu-atas.heritage {
font-family: 'Metrolin';
}
.heritage-bakes-page .parallax-background.meja-panjang {
width: 100vw !important;
position: absolute;
bottom: -1%;
z-index: 1;
top: unset;
height: 45%;
}
.heritage-bakes-page .heritage-bakes-logo {
width: auto;
height: 70%;
object-fit: contain;
overflow: hidden !important;
}
.heritage-bakes-page .parallax-background {
z-index: unset;
}
.heritage-bakes-page .parallax-container {
min-height: unset;
max-height: unset;
justify-content: center;
height: 200vh;
}
.heritage-bakes-page .foreground {
display: flex;
justify-content: center;
left: unset;
transform-origin: center;
bottom: 0px;
width: auto;
height: 115vh;
}
.heritage-bakes-page .logo-roa {
width: auto !important;
left: unset;
transform: unset;
height: 85vh;
z-index: 2;
display: flex;
flex-direction: column;
top: 8%;
}
.heritage-bakes-page .logo {
width: auto;
height: 3rem;
position: relative;
left: unset;
}
.heritage-bakes-page .header-container {
justify-content: center;
align-items: center;
}
.heritage-bakes-page .wmm-coklat {
max-height: 30%;
width: auto !important;
object-fit: contain;
margin-bottom: 7%;
}
.heritage-bakes-page .foreground img {
width: auto !important;
height: auto;
}

.heritage-bakes-page #menu-atas-kue {
margin: unset;
font-family: 'Metrolin';
letter-spacing: 0.18rem;
font-weight: bold;
}
.heritage-bakes-page #menu-hamburger {
display: flex;
position: absolute;
left: 5%;
}
.heritage-bakes-page .menu-atas.menu-open {
transition: 0.5s ease 0s;
transform: translateX(0%);
}
.heritage-bakes-page .menu-atas {
display: flex;
position: fixed;
width: auto;
height: 100vh;
z-index: 99999;
padding-inline: 2%;
padding-block: 3%;
top: 0px;
left: 0px;
background: #E7B084;
background: -webkit-linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
background: -moz-linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
background: linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#E7B084", endColorstr="#EFCFAE", GradientType=0);
justify-content: flex-start;
flex-direction: column;
transition: 1s ease 0s;
transform: translateX(-100%);
}
.heritage-bakes-page .menu-atas .judul-menu {
margin: unset;
text-align: left;
font-family: 'Metrolin';
letter-spacing: 0.18rem;
font-weight: bold;
color: #581300;
}
.heritage-bakes-page .menu-atas .judul-menu::after {
display: block;
content: '';
width: 100%;
height: auto;
border-top: solid 2px;
margin-block: 3rem;
}
.heritage-bakes-page nav ul li {
border: unset !important;
}
.heritage-bakes-page .menu-atas li a {
font-family: 'Metrolin';
letter-spacing: 0.18rem;
font-weight: bold;
color: #581300;
}
.heritage-bakes-page #overlay-menu-atas {
display: none;
}
.heritage-bakes-page #overlay-menu-atas.menu-open {
display: unset;
position: fixed;
width: 100vw;
height: 100vh;
background: black;
top: 0px;
left: 0px;
opacity: .50;
z-index: -9;
transition: 0.5s ease 0s;
}
.heritage-bakes-page .menu-open .header-container {
z-index: -9;
}
.heritage-bakes-page #overlay-menu-atas {
transition: 0.5s ease 0s;
}
.heritage-bakes-page nav ul {
display: flex;
flex-direction: column;
height: 20vh;
justify-content: space-between;
text-align: left;
padding-block: 2%;
width: fit-content;
}
.heritage-bakes-page .hero {
background-color: unset !important;
}
.heritage-bakes-page .hero-background {
padding-top: unset;
background: #E7B084;
background: -webkit-linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
background: -moz-linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
background: linear-gradient(0deg, rgb(231, 176, 132) 38%, rgb(239, 207, 174) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#E7B084", endColorstr="#EFCFAE", GradientType=0);
}
.heritage-bakes-page .legacy-img {
width: 45%;
object-fit: contain;
max-height: 60vh;
display: block;
}
.heritage-bakes-page .legacy-desc {
width: 55%;
display: flex;
padding-left: 5%;
text-align: left;
flex-direction: column;
justify-content: center;
}
.heritage-bakes-page .legacy-section {
display: flex;
padding-inline: 10%;
padding-block: 5%;
justify-content: space-between;
background: #f4aa78;
}
.heritage-bakes-page h1, .heritage-bakes-page h2, .heritage-bakes-page h3 {
font-size: calc(1rem + 1vw + 30%);
margin-top: unset;
letter-spacing: 0.3rem !important;
}
.heritage-bakes-page body {
color: #581300;
font-size: calc(0.5rem + 0.5vw + 30%);
}
.heritage-bakes-page .features-utama {
border-bottom: unset;
background-color: #d1834e;
}
.heritage-bakes-page .menu-header.scrolled .header-container {
background-color: #f4aa78;
justify-content: center;
padding: 2% !important;
}
.heritage-bakes-page .scrolled .logo {
width: auto !important;
object-fit: contain;
height: 2rem !important;
}
.heritage-bakes-page a {
letter-spacing: 0.16rem;
}

/* heritage collection section */
.heritage-bakes-page .collection-section .collection-title {
margin-top: 7%;
margin-bottom: 2%;
}
.heritage-bakes-page .product-card .product-info {
width: 100%;
text-align: left;
position: relative;
padding-block: 5%;
transition: 0.5s ease 0s;
}
.heritage-bakes-page .product-card .product-img {
height: 40rem;
width: 30%;
object-fit: contain;
max-width: 30%;
position: absolute;
z-index: 9;
max-height: 60vh;
}
.heritage-bakes-page .collection-section .product-card {
width: 90rem;
height: 40rem;
position: relative;
align-items: center;
justify-content: space-between;
display: flex;
margin-block: 0.5%;
max-width: 85vw;
max-height: 70vh;
}
.heritage-bakes-page .collection-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 4%;
}
.heritage-bakes-page .product-info p {
font-size: calc(0.5rem + 0.5vw + 30%);
margin-bottom: unset;
margin: unset;
}
.heritage-bakes-page .product-card:nth-child(2n+1) .product-img {
right: 0;
left: unset;
}
.heritage-bakes-page .product-card:nth-child(2n) .product-img {
left: 0;
right: unset;
}
.heritage-bakes-page .product-card:nth-child(2n) .product-info {
padding-left: 31%;
padding-right: 5%;
}
.heritage-bakes-page .product-card:nth-child(2n+1) .product-info {
padding-left: 1%;
padding-right: 35%;
}
@media only screen and (orientation: landscape) {
    .heritage-bakes-page .product-card:nth-child(2n+1):hover .product-info {
    padding-left: 5% !important;
    }
    .heritage-bakes-page .product-card:nth-child(2n):hover .product-info {
    padding-left: 35% !important;
    }
}

/* footer heritage */
.heritage-bakes-page footer {
color: #581300;
text-align: center;
border-top: unset;
font-family: 'Metrolin';
letter-spacing: 0.15rem !important;
}
.heritage-bakes-page .alamat-heritage {
margin-block: 2%;
font-weight: bold;
}
.heritage-bakes-page #footer-links {
padding-block: 2%;
background: #581300;
color: #f4aa78;
display: flex;
justify-content: center;
font-weight: bold;
}
.heritage-bakes-page .footer-copyright {
display: flex;
flex-direction: column;
padding-bottom: 1%;
background: #f4aa78;
}
.heritage-bakes-page .footer-copyright .logo {
object-fit: contain;
height: 2.5rem;
margin-block: 2%;
}
.heritage-bakes-page #footer-links a {
margin-inline: 3%;
color: #f4aa78;
}
.heritage-bakes-page .button-order {
display: none;
}
.heritage-bakes-page .button-link {
width: 100%;
}