body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 10px;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    font-size: 1rem;
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.875rem;
    }

    p {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1rem;
    }

    h5 {
        font-size: 0.875rem;
    }

    h6 {
        font-size: 0.75rem;
    }

    p {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }

    h4 {
        font-size: 0.875rem;
    }

    h5 {
        font-size: 0.75rem;
    }

    h6 {
        font-size: 0.6875rem;
    }

    p {
        font-size: 0.8125rem;
    }
}


.bg-navbar {
    background-color: #741c20;
}

/* ======= HOME SECTION ======= */
.home-section {
    background-color: #8B1E1E;
    text-align: center;
    padding: 50px 20px;
    color: #fff;
    position: relative;
}

.home-content {
    max-width: 600px;
    margin: 0 auto;
}

.home-content h1 {
    font-weight: bold;
}

.home-content p {
    margin-top: 10px;
}

.food-images {
    position: relative;
    margin-top: 20px;
}

.food-images img {
    max-width: 100%;
    height: auto;
}

.main-dish {
    width: 60%;
    margin-top: 20px;
}

.side-dish {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 20%;
}

.sauce {
    position: absolute;
    right: 5%;
    top: 5%;
    width: 15%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-dish {
        width: 80%;
    }

    .side-dish, .sauce {
        width: 18%;
    }
}

@media (max-width: 480px) {
    .main-dish {
        width: 90%;
    }

    .side-dish, .sauce {
        width: 20%;
    }
}

/* ======= END HOME SECTION ======= */
/* ======= HISTORY SECTION ======= */
.history-section {
    position: relative;
    background: url('assets/images/our-history-background.jpg') center/cover no-repeat;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    text-align: center;
}

.history-overlay h2 {
    font-weight: bold;
    margin: 0;
    position: relative;
    z-index: 2;
}

.video-links {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: space-between;
    padding: 20px;
}

.video-intro {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    z-index: 2;
}

.top-left {
    top: 20px;
    left: 20px;
}

.top-right {
    top: 20px;
    right: 20px;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
}

/* ======= Responsive Design ======= */
@media (max-width: 768px) {
    .top-left, .top-right, .bottom-left, .bottom-right {
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    /* Android */
    .history-section {
        height: 70vh;
    }

    .top-left, .top-right, .bottom-left, .bottom-right {
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
    }
}

/* ======= END HISTORY SECTION ======= */
/* ======= HISTORY RESTAURANT SECTION ======= */
.restaurant-section {
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    background-color: #f4edd4;
}

.restaurant-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.restaurant-section * {
    position: relative;
    z-index: 1;
}

.restaurant-img {
    display: flex;
    justify-content: center; /* Tengah horizontal */
    align-items: center; /* Tengah vertikal */
    height: 100%; /* Penting biar col tinggi penuh */
    text-align: center;
}

.restaurant-img img {
    max-width: 60%;
    height: auto;
}

.restaurant-title {
    font-weight: bold;
    text-transform: uppercase;
}

.restaurant-heading span {
    color: #8b1b21;

}

.restaurant-heading {
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.restaurant-description {
    color: #666;
    text-align: justify;
}

/* ======= Responsive Design ======= */
@media (max-width: 768px) {
    /* Tablet */
    .restaurant-section {
        padding: 60px 40px;
    }

    .restaurant-img img {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    /* Android */
    .restaurant-section {
        padding: 40px 20px;
    }

    .restaurant-description {
        text-align: left;
    }

    .restaurant-img img {
        max-width: 90%;
    }
}

/* ======= END RESTAURANT HISTORY SECTION ======= */
/* ======= OUR SERVICES SECTION ======= */
.our-service-section {
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    background-color: #fefdfd;
}

.our-service-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.our-service-section * {
    position: relative;
    z-index: 1;
}

.service-image {
    display: flex;
    justify-content: center; /* Tengah horizontal */
    align-items: center; /* Tengah vertikal */
    height: 100%; /* Penting biar col tinggi penuh */
    text-align: center;
}

.service-image img {
    max-width: 60%;
    height: auto;
}

.service-title {
    font-weight: bold;
    text-transform: uppercase;
}

.service-heading span {
    color: #8b1b21;

}

.service-heading {
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.service-description {
    color: #666;
    text-align: justify;

}

/* ======= Responsive Design ======= */
@media (max-width: 768px) {
    /* Tablet */
    .our-service-section {
        padding: 60px 40px;
    }

    .service-image img {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    /* Android */
    .our-service-section {
        padding: 40px 20px;
    }

    .service-description {
        text-align: left;
    }

    .service-image img {
        max-width: 90%;
    }
}

/* ======= END OUR SERVICE SECTION ======= */
/* ======= RECIPE SECTION ======= */
.featured-recipe-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.featured-recipe-banner {
    position: relative;
    width: 100%;
    height: 350px; /* Sesuaikan sesuai kebutuhan */
    background: rgba(0, 0, 0, 0.5); /* Opsional, kalau mau efek gelap */
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Biar gambar penuh dan rapi */
    filter: brightness(0.7); /* Kasih efek gelap biar teks lebih kontras */
}

.featured-recipe-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
}

.featured-title {
    font-weight: bold;
    margin-bottom: 15px;
}

.btn-read-more {
    background-color: #b49a6b; /* Warna emas ala food website */
    color: #fff;
    padding: 8px 20px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-read-more:hover {
    background-color: #8b1b21; /* Warna saat hover */
}

/* ======= Responsive Design ======= */
@media (max-width: 768px) {
    /* Tablet */
    .featured-recipe-banner {
        height: 280px;
    }

    .btn-read-more {
        padding: 6px 16px;
    }
}

@media (max-width: 480px) {
    /* Android */
    .featured-recipe-banner {
        height: 200px;
    }

    .btn-read-more {
        padding: 5px 14px;
    }
}

/* ======= END RECIPE SECTION ======= */
/* ======= ABOUT US SECTION ======= */
.about-us-section-extra {
    position: relative;
    width: 100%;
    height: 100vh; /* 60% tinggi layar */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-us-content {
    position: relative; /* Bukan absolute lagi */
    text-align: justify;
    color: #fff;
    z-index: 2;
    max-width: 600px;
    margin-left: 60rem;
    border-radius: 10px;
}

.section-title {
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    color: #f5deb3;
    text-transform: uppercase;
}

.section-description {
    margin-bottom: 20px;
    line-height: 1.6;
}

.btn-read-more {
    background-color: #b49a6b;
    color: #fff;
    text-align: center;
    padding: 10px 24px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-read-more:hover {
    background-color: #8b1b21;
}

@media screen and (max-width: 1025px) {
    .about-us-content {
        margin-left: 0;

    }
}

@media screen and (max-width: 768px) {
    .about-us-section-extra {
        height: auto;
        padding: 40px 20px;
    }

    .about-us-content {
        max-width: 100%;
        margin-left: 0;

    }

    .btn-read-more {
        padding: 8px 20px;
    }
}

/* ======= END ABOUT US SECTION ======= */
/* ======= HISTORY RESTAURANT SECTION ======= */
.description-1-section {
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    background-color: #f4edd4;
}

.description-1-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.description-1-section * {
    position: relative;
    z-index: 1;
}

.description-1-img {
    display: flex;
    justify-content: center; /* Tengah horizontal */
    align-items: center; /* Tengah vertikal */
    height: 100%; /* Penting biar col tinggi penuh */
    text-align: center;
}

.description-1-img img {
    max-width: 60%;
    height: auto;
}

.description-1-title {
    font-weight: bold;
    text-transform: uppercase;
}

.description-1-heading span {
    color: #8b1b21;

}

.description-1-heading {
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.description-1-description {
    color: #8b1b21;
    text-align: justify;
}

@media screen and (max-width: 1024px) {
    .description-1-section {
        padding: 60px 40px; /* Kurangi padding untuk tablet */
    }

    .description-1-img img {
        max-width: 80%; /* Perbesar gambar sedikit */
    }

    .description-1-description {
        line-height: 1.5; /* Tambah line-height agar lebih nyaman dibaca */
    }
}

@media screen and (max-width: 768px) {
    .description-1-section {
        padding: 40px 20px; /* Padding lebih kecil untuk mobile */
    }

    .description-1-heading {
        margin-bottom: 15px;
    }

    .description-1-description {
        text-align: justify;
    }

    .description-1-img img {
        max-width: 100%; /* Gambar memenuhi lebar col */
    }

    .description-1-text {
        text-align: center; /* Tengahin teks di layar kecil */
    }

    .row.align-items-center {
        flex-direction: column-reverse; /* Teks di atas, gambar di bawah */
    }
}


/* ======= END DESCRIPTION 1 SECTION ======= */
/* ======= DESCRIPTION 2 SECTION ======= */
.description-2-section {
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    background-color: #8b1b21;
}

.description-2-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/Asset 2.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.description-2-section * {
    position: relative;
    z-index: 1;
}

.description-2-image {
    display: flex;
    justify-content: center; /* Tengah horizontal */
    align-items: center; /* Tengah vertikal */
    height: 100%; /* Penting biar col tinggi penuh */
    text-align: center;
}

.description-2-image img {
    max-width: 60%;
    height: auto;
}

.description-2-title {
    font-weight: bold;
    text-transform: uppercase;
}

.description-2-heading span {
    color: #f4edd4;

}

.description-2-heading {
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.description-2-description {
    color: #f4edd4;
    text-align: justify;

}

@media screen and (max-width: 1024px) {
    .description-2-section {
        padding: 60px 40px; /* Kurangi padding agar lebih pas */
    }

    .description-2-image img {
        max-width: 80%; /* Perbesar gambar sedikit */
    }

    .description-2-description {
        line-height: 1.5; /* Tambah line-height agar lebih nyaman dibaca */
    }
}

@media screen and (max-width: 768px) {
    .description-2-section {
        padding: 40px 20px; /* Kurangi padding agar tidak terlalu lebar */
    }

    .description-2-heading {
        margin-bottom: 15px;
    }

    .description-2-description {
        text-align: justify;
    }

    .description-2-image img {
        max-width: 100%; /* Gambar memenuhi lebar col */
    }

    .description-2 {
        text-align: center; /* Tengahkan teks di layar kecil */
    }

    .row.align-items-center {
        flex-direction: column; /* Gambar di atas, teks di bawah */
        text-align: center;
    }
}

/* ======= END DESCRIPTION 2 SECTION ======= */
/* ======= WHY CHOOSE US SECTION ======= */
.why-choose-us-section {
    background: #fdf5e6; /* Warna background cream */
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    text-align: center;
}

.why-choose-us-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.why-choose-us-section * {
    position: relative;
    z-index: 1;
}

.why-choose-us-heading {
    font-weight: bold;
    color: #8b1b21; /* Merah tua */
    margin-bottom: 40px;
}

.choose-card {
    background-color: #8b1b21; /* Merah tua */
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    font-family: Arial, sans-serif;
    min-height: 180px;
}

.choose-card img {
    width: 50px;
    margin-bottom: 15px;
    filter: invert(75%) sepia(20%) saturate(500%) hue-rotate(30deg) brightness(90%);
}

.choose-card p {
    margin: 0;
    color: #f5deb3; /* Soft gold */
}


.choose-card::before {
    top: 0;
    left: 0;
    border-top: 3px solid #8b1b21;
    border-left: 3px solid #8b1b21;
}

.choose-card::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #8b1b21;
    border-right: 3px solid #8b1b21;
}

@media screen and (max-width: 1024px) {
    .why-choose-us-section {
        padding: 50px 20px; /* Kurangi padding agar lebih proporsional */
    }

    .why-choose-us-heading {
        margin-bottom: 30px;
    }

    .choose-card {
        padding: 15px;
        min-height: 160px;
    }

    .choose-card img {
        width: 45px; /* Sedikit kecilkan ikon */
    }
}

@media screen and (max-width: 768px) {
    .why-choose-us-section {
        padding: 40px 15px; /* Padding lebih kecil di mobile */
    }

    .why-choose-us-heading {
        margin-bottom: 25px;
    }

    .row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .choose-card {
        width: 100%;
        padding: 15px;
        min-height: auto;
    }

    .choose-card img {
        width: 40px; /* Perkecil ikon */
        margin-bottom: 10px;
    }
}


/* ======= END WHY CHOOSE US SECTION ======= */
/* ======= EVENTS SECTION ======= */
.events-section {
    position: relative;
    padding: 80px 0;
    text-align: center;
    color: #fdf5e6;
    height: 50vh;
    overflow: hidden;
}

.events-bg {
    background-color: #8b1b21;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.events-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar full tanpa distorsi */
    filter: brightness(50%); /* Biar lebih gelap */
}


.events-title {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.events-title span {
    color: #ff7a00;

}

/* Swiper Slider */
.events-slider {
    width: 100vw; /* Ambil full lebar viewport */
    max-width: 100%; /* Hindari batasan lebar */
    margin: 0 auto;
}


.events-slider .swiper-slide {
    width: 100vw; /* Ambil full lebar */
    height: 50vh; /* Atur tinggi sesuai kebutuhan */
    display: flex;
    justify-content: center;
    align-items: center;
}

.events-slider .swiper-slide img {
    width: 100vw; /* Ambil full lebar viewport */
    height: 100%; /* Sesuaikan tinggi */
    object-fit: cover; /* Pastikan gambar tidak terdistorsi */
    border-radius: 0; /* Hilangkan border-radius jika ada */
    box-shadow: none; /* Opsional, hilangkan shadow */
}

/* Tombol Navigasi */
.swiper-button-prev,
.swiper-button-next {
    color: #fdf5e6;
}

@media screen and (max-width: 1024px) {
    .events-section {
        padding: 60px 0;
        height: 45vh; /* Kurangi tinggi sedikit untuk tablet */
    }

    .events-title {
        margin-bottom: 15px;
    }

    .events-slider {
        max-width: 700px; /* Kurangi lebar slider */
    }

    .events-slider img {
        border-radius: 8px;
    }

}

@media screen and (max-width: 768px) {
    .events-section {
        padding: 50px 10px; /* Kurangi padding */
        height: auto; /* Biar tinggi menyesuaikan */
    }

    .events-slider {
        max-width: 100%; /* Full lebar di mobile */
    }

    .events-slider img {
        border-radius: 6px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none; /* Sembunyikan tombol navigasi di layar kecil */
    }
}


/* ======= END EVENT SECTION ======= */
/* ======= MAILING SECTION ======= */
.mailing-list-section {
    background-color: #fdf5e6;
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
}

.mailing-list-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.mailing-list-section * {
    position: relative;
    z-index: 1;
}

.mailing-title {
    color: #8b1b21;
    font-weight: bold;
    margin-bottom: 10px;
}

.mailing-subtitle {
    color: #8b1b21;
    margin-bottom: 20px;
}

.mailing-form {
    max-width: 600px;
    margin: 0 auto;
}

.mailing-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #8b1b21;
    color: #fdf5e6;
    outline: none;
    margin-bottom: 10px;
    text-align: center;
}

.mailing-form input::placeholder {
    color: #fdf5e6;
}

.mailing-form button {
    background-color: #8b1b21;
    color: #fdf5e6;
    border: none;
    padding: 10px 40px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

.mailing-consent {
    margin-top: 15px;
    color: #8b1b21;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mailing-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #8b1b21;
    cursor: pointer;
}

.mailing-consent a {
    color: #8b1b21;
    text-decoration: underline;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    .mailing-list-section {
        padding: 40px 20px; /* Kurangi padding agar lebih compact */
    }

    .mailing-form {
        max-width: 500px; /* Kurangi lebar form */
    }

    .mailing-form input[type="email"] {
        padding: 10px;
    }

    .mailing-form button {
        padding: 8px 30px;
    }
}

@media screen and (max-width: 768px) {
    .mailing-list-section {
        padding: 30px 15px; /* Padding lebih kecil untuk mobile */
    }

    .mailing-title {
        margin-bottom: 8px;
    }

    .mailing-subtitle {
        margin-bottom: 15px;
    }

    .mailing-form {
        max-width: 100%; /* Full width di mobile */
    }

    .mailing-form input[type="email"] {
        padding: 10px;
    }

    .mailing-form button {
        width: auto; /* Buat tombol full width agar lebih mudah diklik */
        padding: 10px;
    }

    .mailing-consent {
        text-align: left;
        align-items: flex-start;
    }
}


/* ======= END MAILING SECTION ======= */
/* ======= ABOUT PAGES SECTION ======= */
.about-section {
    background: url('/static/user/images/event-1.png') center/cover no-repeat;
    padding: 80px 0;
    position: relative;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fdf5e6;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 0, 0.6);
}

.header-title {
    color: #fdf5e6;
}

.container {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 1024px) {
    .about-section {
        padding: 60px 20px; /* Kurangi padding biar lebih pas di layar kecil */
        background-position: center;
    }

    .container p {
        max-width: 90%;
        margin: auto;
    }
}

@media screen and (max-width: 768px) {
    .about-section {
        padding: 50px 15px;
    }
}


/* ======= END ABOUT PAGES SECTION ======= */
/* ======= INTRODUCTION SECTION ======= */
.introduction-section {
    background: #fdf6e4;
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
}

.introduction-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.introduction-section * {
    position: relative;
    z-index: 1;
}

.introduction-section h2 {
    font-weight: bold;
    color: #700000;
}

.intro-text {
    background: #fff;
    padding: 20px;
    border: 2px solid #a67c52;
    border-radius: 10px;
    text-align: justify;
}

.intro-image {
    height: 100%;
    background: #700000;
    border: 5px solid #a67c52;
    border-radius: 10px;
}

.intro-footer {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    color: #700000;
}

@media screen and (max-width: 1024px) {
    .introduction-section {
        padding: 40px 20px;
    }

    .introduction-section h2 {
        text-align: center;
    }

    .intro-text {
        padding: 15px;
    }

    .intro-image {
        height: 220px; /* Kurangi ukuran box merah */
    }
}

@media screen and (max-width: 768px) {
    .introduction-section {
        padding: 30px 15px;
    }

    .row {
        flex-direction: column; /* Susun ke bawah untuk layar kecil */
        align-items: center;
    }

    .col-md-6 {
        width: 100%;
    }

    .intro-image {
        width: 100%;
        height: 200px;
        margin-top: 15px;
    }

    .intro-footer {
        text-align: center;
    }
}


/* ======= END INTRODUCTION SECTION ======= */
/* ======= REWARD SECTION ======= */
.rewards-section {
    background-color: #8B0000; /* Warna merah background */
    color: #E3C27E; /* Warna emas untuk teks */
    padding: 50px 0;
}

.rewards-section h2 {
    font-weight: bold;
    color: #fdf5e6;
    margin-bottom: 30px;
}

.reward-item {
    text-align: center;
}

.reward-item img {
    width: 80px; /* Sesuaikan ukuran icon */
    height: auto;
    margin-bottom: 10px;
}

.reward-item p {
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    .rewards-section {
        padding: 40px 20px;
    }

    .reward-item img {
        width: 70px; /* Sedikit kecil biar lebih proporsional */
    }
}

@media screen and (max-width: 768px) {
    .rewards-section {
        padding: 30px 15px;
    }

    .row {
        flex-direction: column; /* Susun ke bawah di layar kecil */
        align-items: center;
    }

    .col-sm-6 {
        width: 80%; /* Lebarkan sedikit biar lebih pas */
        margin-bottom: 20px;
    }

    .reward-item img {
        width: 60px;
    }

}


/* ======= END REWARD SECTION ======= */
/* ======= SUCCESS STORY SECTION ======= */
.success-story-section {
    background-color: #fdf6e4;
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
}

.success-story-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.success-story-section * {
    position: relative;
    z-index: 1;
}

.success-story-section h2 {
    font-weight: bold;
    color: #8B0000; /* Warna merah tua */
}

/* ======= END SUCCESS STORY SECTION ======= */
/* ======= EVENT PAGES SECTION ======= */
.events-pages-section {
    position: relative;
    background: url('/static/user/images/event-1.png') no-repeat center center;
    background-size: cover;
    height: 700px; /* Sesuaikan tinggi */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fdf5e6;
}

.events-pages-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 0, 0, 0.6); /* Overlay warna merah tua */
}

.events-pages-section .container {
    position: relative;
    z-index: 2;
}

.event-pages-title {
    font-weight: bold;
}

.event-pages-description {
    max-width: 600px;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .events-pages-section {
        height: 250px; /* Kurangi tinggi agar tidak terlalu besar */
        padding: 20px;
    }

    .event-pages-description {
        max-width: 500px;
    }
}

@media screen and (max-width: 768px) {
    .events-pages-section {
        height: 200px;
        padding: 15px;
    }

    .event-pages-description {
        max-width: 90%; /* Lebarkan agar pas di layar kecil */
    }
}

@media screen and (max-width: 480px) {
    .events-pages-section {
        height: 180px;
        padding: 10px;
    }

    .event-pages-description {
        max-width: 95%;
    }
}

/* ======= END EVENT PAGES SECTION ======= */
/* ======= PRIVATE EVENT SECTION ======= */
.private-events-section {
    background-color: #fdf6e4;
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
}

.private-events-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.private-events-section * {
    position: relative;
    z-index: 1;
}

/* Judul dan Deskripsi */
.private-events-title {
    font-weight: bold;
    color: #8b0000;
}

.private-events-description {
    max-width: 800px;
    margin: 0 auto;
    color: #6a4c34;
    margin-bottom: 30px;
}

/* Kartu Event */
.private-events-card {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.private-events-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.private-events-card-title {
    margin-top: 10px;
    color: #8b0000;
}

.private-events-card-description {
    color: #6a4c34;
}

/* Tombol */
.private-events-btn {
    background: #c2a16b;
    color: #fdf5e6;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}

.private-events-btn:hover {
    background: #a78250;
}

@media screen and (max-width: 1024px) {
    .private-events-description {
        max-width: 700px;
    }

    .private-events-card {
        padding: 15px;
    }


    .private-events-btn {
        padding: 8px 12px;
    }
}

@media screen and (max-width: 768px) {
    .private-events-description {
        max-width: 90%;
    }

    .private-events-card {
        padding: 12px;
    }

    .private-events-card img {
        width: 90%;
    }

    .private-events-btn {
        padding: 7px 10px;
    }
}

@media screen and (max-width: 480px) {
    .private-events-section {
        padding: 30px 0;
    }

    .private-events-description {
        max-width: 95%;
    }

    .private-events-card {
        padding: 10px;
        margin-bottom: 15px;
    }

    .private-events-card img {
        width: 100%;
    }

    .private-events-btn {
        padding: 6px 10px;
    }
}

/* ======= END PRIVATE EVENT  SECTION ======= */
/* ======= PREVIOUS EVENT SECTION ======= */
.previous-events-section {
    position: relative;
    width: 100%;
    text-align: center;
}

.previous-events-wrapper {
    position: relative;
    width: 100%;
}

/* Judul "PREVIOUS EVENTS" di atas gambar dan tetap di tempatnya */
.previous-events-title {
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 20px; /* Geser ke bagian atas gambar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Supaya tetap di atas */
}

/* Carousel Styling */
.previous-events-section .carousel {
    position: relative;
    z-index: 1;
}

.previous-events-section .carousel-item img {
    height: 500px; /* Sesuaikan tinggi gambar */
    object-fit: cover;
}

/* Navigasi Kiri & Kanan */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    padding: 10px;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 1024px) {
    .previous-events-title {
        top: 15px;
    }

    .previous-events-section .carousel-item img {
        height: 220px; /* Kurangi tinggi gambar */
    }
}

@media screen and (max-width: 768px) {
    .previous-events-title {
        top: 10px;
    }

    .previous-events-section .carousel-item img {
        height: 200px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        padding: 8px;
    }
}

@media screen and (max-width: 480px) {
    .previous-events-title {
        top: 5px;
    }

    .previous-events-section .carousel-item img {
        height: 180px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        padding: 6px;
    }
}

/* ======= END PREVIOUS EVENT SECTION ======= */
/* ======= HAPPENING SECTION ======= */
.happenings-section {
    background-color: #f8eed4; /* Warna latar belakang */
    padding: 50px 0;
    text-align: center;
}


.happenings-title {
    font-weight: bold;
    color: #722f18;
    margin-bottom: 15px;
}

.happenings-description {
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #5a3e30;
}

/* Grid Layout */
.happenings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dua kolom */
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

/* Kartu Event */
.happenings-card {
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.happenings-card:hover {
    transform: translateY(-5px);
}

.happenings-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.happenings-card h3 {
    font-weight: bold;
    color: #a52a2a;
    margin-top: 10px;
}

.happenings-card p {
    color: #5a3e30;
    margin-top: 5px;
}

@media screen and (max-width: 1024px) {
    .happenings-grid {
        grid-template-columns: repeat(2, 1fr); /* Tetap dua kolom */
        gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .happenings-description {
        max-width: 600px;
    }

    .happenings-grid {
        grid-template-columns: repeat(1, 1fr); /* Jadi satu kolom di HP */
    }
}

@media screen and (max-width: 480px) {
    .happenings-description {
        max-width: 90%;
    }

    .happenings-card {
        padding: 10px;
    }
}


/* ======= END HAPPENING SECTION ======= */
/* ======= RESERVATION SECTION ======= */

.reservation-section {
    background-color: #f8eed4; /* Warna latar belakang */
    position: relative;
    padding: 80px 120px;
    overflow: hidden;
    text-align: center;
}

.reservation-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/user/images/BG.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Sesuaikan dengan kebutuhan */
    z-index: 0;
}

.reservation-section * {
    position: relative;
    z-index: 1;
}

.reservation-title {
    font-weight: bold;
    color: #722f18;
    margin-bottom: 15px;
}

.reservation-description {
    max-width: 800px;
    margin: 0 auto 40px auto;
    color: #5a3e30;
}

/* FORM RESERVATION */
.reservation-form {
    max-width: 700px;
    margin: 0 auto;
}

.input-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.input-group input,
.input-group select {
    width: 30%;
    padding: 10px;
    border: none;
    background: #8B0000;
    color: #fdf5e6;
    border-radius: 5px;
}

.input-group input::placeholder,
.input-group select {
    color: #fdf5e6;
}

.input-group select {
    cursor: pointer;
}

/* Tombol Submit */
.reservation-btn {
    background: #8B0000;
    color: #fdf5e6;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.reservation-btn:hover {
    background: #5a0c0c;
}

/* Phone Reservation */
.phone-reservation {
    margin-top: 30px;
    color: #722f18;
}

.phone-number {
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    .reservation-form {
        max-width: 90%;
    }

    .input-group {
        flex-direction: column; /* Biar lebih rapi di layar kecil */
        gap: 10px;
    }

    .input-group input,
    .input-group select {
        width: 100%; /* Full width di layar kecil */
    }

}

@media screen and (max-width: 480px) {
    .reservation-form {
        max-width: 100%;
    }

    .reservation-btn {
        width: 100%; /* Tombol full width di HP */
    }
}

/* ======= END RESERVATION SECTION ======= */
/* ======= MENU SECTION ======= */


.menu-section {
    position: relative;
    background: url('/static/user/images/event-1.png') no-repeat center center;
    background-size: cover;
    height: 700px; /* Sesuaikan tinggi */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fdf5e6;
}

.menu-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 0, 0, 0.6); /* Overlay warna merah tua */
}

.menu-section .container {
    position: relative;
    z-index: 2;
}

.menu-banner {
    padding: 20px;
    border-radius: 10px;
}

.menu-title {
    font-weight: bold;
    color: #f8eccf;
    margin-bottom: 10px;
}

/* ======= END MENU SECTION ======= */
/* ======= SIGNATURE MENU SECTION ======= */
.signature-menu {
    background-color: #f8eccf;
    text-align: center;
    padding: 40px 20px;
}

.signature-title {
    font-weight: bold;
    color: #a62e2e;
    margin-bottom: 10px;
}

.signature-description {
    color: #a62e2e;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Style untuk daftar kategori menu */
.signature-menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1800px;
    margin: 40px auto;
}

.menu-category {
    width: 100%;
    position: relative;
}

/* Judul kategori */
.category-title {
    font-weight: bold;
    color: #a62e2e;
    margin-bottom: 10px;
    text-align: left;
}

/* Styling daftar menu */
.menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}


.menu-item img {
    width: 300px;
    height: auto;
    border-radius: 10px;
}

.signature-menu-list .menu-category:nth-child(odd) .menu-item {
    flex-direction: row; /* Kategori ganjil (1,3,5...) gambar di kiri */
    text-align: left;
}

.signature-menu-list .menu-category:nth-child(even) .menu-item {
    flex-direction: row-reverse; /* Kategori genap (2,4,6...) gambar di kanan */
    text-align: right;
}

.signature-menu-list .menu-category:nth-child(even) .category-title {
    text-align: right;
}

.signature-menu-list .menu-category:nth-child(odd) .menu-item img {
    margin-right: 15px;
}

.signature-menu-list .menu-category:nth-child(even) .menu-item img {
    margin-left: 15px;
}

.rating {
    color: gold;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .signature-menu-list {
        gap: 30px;
        max-width: 95%; /* Biar tidak terlalu lebar */
    }

    .menu-item img {
        width: 250px; /* Perkecil gambar */
    }

    .menu-info {
        max-width: 300px;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .signature-menu {
        padding: 30px 15px; /* Kurangi padding */
    }

    .signature-description {
        max-width: 100%;
    }

    /* Pastikan kategori tetap rata tengah */
    .category-title {
        text-align: center !important;
    }

    /* Atur ulang layout menu-item agar gambar di atas teks */
    .menu-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 0;
    }

    .menu-item img {
        width: 100px;
        margin: 0 0 10px 0; /* Tambahkan jarak bawah */
    }

    .menu-info {
        max-width: 100%;
        padding: 8px;
    }

    .menu-item img {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ======= END SIGNATURE MENU SECTION ======= */
/* ======= NEWS SECTION ======= */
.news-section {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.news-banner {
    position: relative;
    width: 100%;
    height: 100%;
}

.news-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(75%);

}

.news-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));

}

.news-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 90%;
    max-width: 800px;
}

.news-title {
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.news-text {
    max-width: 1500px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .news-section {
        height: 300px; /* Kurangi tinggi banner */
    }

    .news-title {
        font-size: 28px;
    }

    .news-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .news-content {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .news-section {
        height: 250px;
    }

    .news-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .news-text {
        font-size: 12px;
        line-height: 1.5;
    }

    .news-content {
        width: 100%;
        padding: 0 10px;
    }
}

/* ======= END NEWS SECTION ======= */
/* ======= LATEST POST SECTION ======= */
.latest-post-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.latest-post-header {
    display: flex;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.search-post {
    display: flex;
    justify-content: flex-end; /* Dorong ke kanan */
    align-items: center; /* Biar sejajar vertikal */
    height: 100%; /* Kalau perlu penuh tinggi */
}

.search-form {
    align-items: end; /* Ini sebenarnya nggak ngaruh kalau cuma input teks */
}

.latest-post-header span {
    color: #e67318;
    margin-right: 5px;
}

.search-articles {
    padding: 5px 10px;
    border: 1px solid #ccc;
    outline: none;
}

.latest-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post-card {
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Supaya tinggi card konsisten */
}

.post-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.post-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Biar body mengisi ruang kosong */
    padding: 15px;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #e67318;
    margin-bottom: 8px;
}

.post-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.post-excerpt {
    flex-grow: 1; /* Biar description bisa melar kalau panjang */
    color: #555;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more {
    align-self: flex-start; /* Selalu di kiri bawah */
    margin-top: auto; /* Dorong ke bawah */
    color: #e67318;
    text-decoration: none;
    font-weight: bold;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: bold;
}

.pagination a {
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.pagination a.active {
    background-color: #e67318;
    color: #fff !important;
    border-color: #e67318;
}

.pagination span {
    color: #e67318;
}

@media (max-width: 768px) {
    .latest-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-post-header {
        font-size: 18px;
    }

    .search-post {
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .search-articles {
        width: 100%;
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .latest-post-grid {
        grid-template-columns: 1fr; /* Satu kolom */
    }

    .latest-post-header {
        font-size: 16px;
    }

    .search-post {
        justify-content: center;
    }

    .search-articles {
        width: 100%;
    }

    .post-card img {
        height: 210px;
    }

    .post-card-body {
        padding: 10px;
    }

    .post-title {
        font-size: 14px;
    }

    .post-excerpt {
        font-size: 12px;
    }
}


/* ======= END LATEST POST SECTION ======= */
/* ======= DETAIL POST SECTION ======= */
.post-content-section {
    padding: 40px 0;
}

.post-body {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

.post-body img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.post-body h2, .post-body h3, .post-body h4 {
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 12px;
}

.post-body p {
    margin-bottom: 16px;
    text-align: justify;
}

/* Tablet (768px - 991px) */
@media (max-width: 991.98px) {
    .post-content-section {
        padding: 30px 15px;
    }

    .post-body {
        font-size: 16px;
        padding-left: 15px;
        border-left: 3px solid #ff7a00;
    }

    .post-body img {
        margin: 15px 0;
    }
}

/* Mobile (max 767px) */
@media (max-width: 767.98px) {
    .post-content-section {
        padding: 20px 10px;
    }

    .post-body {
        font-size: 15px;
        padding-left: 10px;
        border-left: 1px solid #ff7a00;
    }

    .post-body h2, .post-body h3 {
        font-size: 18px;
    }

    .post-body p {
        margin-bottom: 12px;
    }
}

/* ======= END DETAIL POST SECTION ======= */

/* ======= FOOTER SECTION ======= */
.footer-section {
    background-color: #8b1b21;
    color: #fdf5e6;
    padding-top: 40px;
    font-family: Arial, sans-serif;
}

.contact-heading {
    font-weight: bold;
    margin-bottom: 20px;
    color: #fdf5e6;
    text-transform: uppercase;
    text-align: center;
}

.contact-info p {
    margin: 5px 0;
    color: #fdf5e6;
}

.contact-info i {
    color: #b59a55;
    margin-right: 8px;
}

.contact-details p {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-form label {
    font-weight: bold;
    color: #fdf5e6;
}

.contact-form input,
.contact-form textarea {
    background-color: #fdf5e6;
    border: none;
    color: #8b1b21;
    padding: 8px;
    width: 100%;
}

.contact-form .btn-submit {
    background-color: #b59a55;
    color: #8b1b21;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 10px;
}

.footer-bottom {
    background-color: #b59a55;
    color: #8b1b21;
    text-align: center;
    margin-top: 20px;
    padding: 16px;
}

.footer-bottom p {
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .contact-form .row {
        display: flex;
        flex-wrap: wrap;
    }

    .contact-form .col-md-6 {
        width: 100%; /* Setiap input jadi full width */
    }


    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 10px;
    }

    .contact-form .btn-submit {
        width: 100%;
        padding: 12px;
    }
}

@media screen and (max-width: 768px) {
    .footer-section {
        padding-top: 20px;
        text-align: center; /* Tengahin konten */
    }

    .contact-heading {
        margin-bottom: 15px;
    }

    .contact-info {
        text-align: center; /* Biar teks rata tengah */
    }

    .contact-details p {
        justify-content: center;
    }

    .contact-form {
        margin-top: 20px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 6px;
    }

    .contact-form .btn-submit {
        width: 100%; /* Tombol dibuat full width */
        padding: 10px;
    }

    .footer-bottom {
        padding: 10px 0;
    }
}


/* ======= END FOOTER SECTION ======= */