* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: segoe print;
    background-color: #111;
    overflow-x: hidden;
    /* Mencegah scroll horizontal */
}

/* Enable smooth scrolling */
html {
    scroll-behavior: smooth;
    /* Smooth scroll for all anchor links */
    overflow-x: hidden;
    /* Mencegah scroll horizontal */
}

/* Navbar Styles.................................. */
.navigasi-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    opacity: 80%;
    color: white;
    padding: 0px 35px 0px 25px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    /* Ensure the navbar stretches across the full screen width */
}

.navigasi-logo-img {
    height: 45px;
    /* Adjust the logo size */
}

.navigasi-nav-links {
    display: flex;
}

.navigasi-links {
    display: flex;
    list-style-type: none;
    gap: 25px;
    /* Space between menu items */
}

.navigasi-link {
    text-decoration: none;
    /* No underline by default */
    color: white;
    /* Ensure the link is white */
    font-size: 1rem;
    padding: 0.5px;
    font-weight: bold;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    /* Add transition for underline */
}

.navigasi-link:hover {
    color: white;
    /* Keep white color on hover */
    border-bottom: 2px solid #e67e22;
    /* Orange underline on hover */
}

/* Active Link Styles */
.navigasi-link.active {
    color: #e67e22;
    /* Permanent orange color for active link */
    border-bottom: 2px solid #e67e22;
    /* Orange underline for active link */
}

.navigasi-link-item {
    display: flex;
    align-items: center;
}

/* Hover effect */
.navigasi-link:hover {
    color: #e67e22;
    border-bottom: 2px solid #e67e22;
    /* Orange underline on hover */
}

/* Active Link Styles */
.navigasi-link.active {
    color: #e67e22;
    /* Permanent orange color for active link */
    border-bottom: 2px solid #e67e22;
    /* Orange underline for active link */
}

/* Mobile Navbar Styles */
@media screen and (max-width: 768px) {
    .navigasi-navbar {
        padding: 0px 15px;
        /* Reduce padding on mobile */
    }

    .navigasi-logo-img {
        height: 35px;
        /* Slightly smaller logo */
    }

    .navigasi-nav-links {
        display: none;
        /* Hide navigation links initially */
        flex-direction: column;
        width: 100%;
        text-align: center;
        /* Center links vertically */
    }

    .navigasi-links {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        /* Stack the links vertically */
        margin-top: 15px;
    }

    .navigasi-link {
        font-size: 0.9rem;
        /* Reduce font size */
        padding: 10px 0;
        /* Add padding for clickable area */
    }

    .navigasi-link:hover {
        border-bottom: 2px solid #e67e22;
        /* Maintain hover effect */
    }

    .navigasi-link.active {
        color: #e67e22;
        /* Active link color */
        border-bottom: 2px solid #e67e22;
    }

    .hamburger {
        display: block;
        /* Show hamburger menu */
        cursor: pointer;
    }

    .hamburger:before {
        content: '\100';
        font-size: 30px;
        color: white;
        /* Add a hamburger icon */
    }
}

/* On mobile, show the navigation menu when active */
@media screen and (max-width: 768px) {
    .navigasi-nav-links.active {
        display: flex;
        /* Show the links when the hamburger is clicked */
    }
}

/* Carousel Styles........................................... */
.carousel {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Smooth transition for sliding effect */
}

.carousel-item {
    min-width: 100%;
    position: relative;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Caption Styles */
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    /* Start from below */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30px;
    text-align: center;
    width: 80%;
    max-width: 650px;
    border-radius: 10px;
    opacity: 0;
    /* Start invisible */
}

/* Animation when the slide comes in */
.carousel-item.active .carousel-caption {
    transform: translate(-50%, -50%);
    /* Move up to the center */
    opacity: 1;
    /* Make it visible */
}

/* For smooth effect of slide-in from bottom */
.carousel-item .carousel-caption h2,
.carousel-item .carousel-caption p {
    transform: translateY(50px);
    opacity: 0;
    animation: slideUp 0.8s forwards;
}

.carousel-item.active .carousel-caption h2,
.carousel-item.active .carousel-caption p {
    animation: slideUp 0.8s forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modify <h2> and <p> styles */
.carousel-caption h2 {
    font-size: 25px;
    color: orange;
    /* Ganti warna h2 menjadi orange */
    margin-bottom: 15px;
    /* Menambahkan jarak antara h2 dan p */
}

.carousel-caption p {
    margin-top: 10px;
    text-size-adjust: 15px;
    /* Menambahkan jarak atas antara p dan h2 */
}

/* Navigation Arrows Styles */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel-prev img,
.carousel-next img {
    width: 150px;
    /* Default size for desktop */
    height: auto;
}

.carousel-prev {
    left: 0.2px;
}

.carousel-next {
    right: 0.2px;
}

.carousel-prev:hover,
.carousel-next:hover {
    opacity: 0.8;
}

/* Indicators Styles */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.indicator {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
}

.indicator.active {
    background-color: orange;
}

/* Media Queries for Responsiveness */

/* Mobile Landscape and smaller devices */
@media (max-width: 480px) {

    /* Resize carousel arrows */
    .carousel-prev,
    .carousel-next {
        width: 60px;
        /* Slightly bigger arrows for mobile */
        height: 60px;
    }

    .carousel-prev img,
    .carousel-next img {
        width: 60px;
        /* Resize arrow image */
        height: auto;
    }

    /* Make sure .carousel-caption remains visible */
    .carousel-caption {
        opacity: 1;
        /* Ensure visibility */
        transform: translate(-50%, -50%);
        /* Keep it centered */
        padding: 20px;
        /* Add some padding for better spacing */
        width: 90%;
        /* Reduce width of the box */
        max-width: 500px;
        /* Limit max width */
    }

    /* Adjust text sizes */
    .carousel-caption h2 {
        font-size: 20px;
        /* Make the heading smaller */
        margin-bottom: 10px;
        /* Adjust spacing */
    }

    .carousel-caption p {
        font-size: 12px;
        /* Reduce the font size for paragraph */
        margin-top: 10px;
    }

    /* Ensure caption text animation works properly */
    .carousel-caption h2,
    .carousel-caption p {
        opacity: 1;
        transform: translateY(0);
        animation: slideUp 0.8s forwards;
    }
}

/* About Section .................................... */
.about {
    width: 80%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 30px;
    text-align: center;
}

.about h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: orange;
    margin-bottom: 20px;
}

.about hr {
    border: 1px solid #fff;
    margin: 20px 0;
}

.about p {
    color: #fff;
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Animasi saat scroll untuk .about */
.about h2,
.about p {
    opacity: 0;
    transform: translateY(30px);
    /* Mulai dari bawah */
    transition: all 0.8s ease-in-out;
}

.about.visible h2,
.about.visible p {
    opacity: 1;
    transform: translateY(0);
    /* Gerak ke posisi normal */
}

/* Media Queries */

/* Mobile Devices - Max width 768px */
@media (max-width: 768px) {
    .about {
        width: 90%;
        padding: 20px;
    }

    .about h2 {
        font-size: 2em;
    }

    .about p {
        font-size: 1em;
    }

    /* Animasi tetap berjalan */
    .about h2,
    .about p {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-in-out;
    }

    .about.visible h2,
    .about.visible p {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Devices - Max width 480px */
@media (max-width: 480px) {
    .about {
        width: 95%;
        padding: 15px;
    }

    .about h2 {
        font-size: 1.8em;
    }

    .about p {
        font-size: 0.9em;
    }

    /* Animasi tetap berjalan */
    .about h2,
    .about p {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-in-out;
    }

    .about.visible h2,
    .about.visible p {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Location Section............................................ */

/* Container for both box and location card */
.location-container {
    display: flex;
    justify-content: flex-start;
    /* Align both boxes to the left */
    gap: 0;
    /* No space between the box and location card */
    margin: 0;
    /* Remove any margin from the container */
    flex-wrap: wrap;
    /* Allow elements to wrap on smaller screens */
}

/* Location Card */
.location-card {
    background-color: #191919;
    color: white;
    border-radius: 5px;
    width: 100%;
    /* Full width to make it responsive */
    display: flex;
    flex-direction: row;
    /* Horizontal layout: box on the left, image on the right */
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0;
    /* Remove margin to avoid space */
    flex: 1;
    /* Allow the location card to be flexible */
}

/* Box for Locations */
.box-locations {
    width: 70%;
    /* Adjust the width to fit with the image */
    height: 230px;
    background-color: #191919;
    padding: 0;
    /* Remove padding */
    border-radius: 5px;
}

/* Image Section - Right */
.card-image {
    position: relative;
    width: 45%;
    /* 60% for image to fill the remaining space */
    height: 100%;
    /* Use full height of the parent container */
    overflow: hidden;
    animation: slideUp 1s ease-out forwards;
    border-radius: 5px;
}

/* Ensure image is responsive and takes up full height while maintaining aspect ratio */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Maintain aspect ratio while filling the container */
}

/* Circular Buttons for Image */
.circle-buttons {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.circle-btn {
    width: 8px;
    height: 8px;
    background-color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.circle-btn:hover {
    background-color: #f39c12;
}

/* Content Section - Right */
.card-content {
    padding: 20px;
    width: 60%;
    /* Adjust width to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: popIn 1s ease-out forwards;
}

.card-content h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #f39c12;
}

.card-content p {
    font-size: 15px;
    margin-bottom: 20px;
    color: #ccc;
}

/* Button - Explore */
.explore-btn {
    background-color: #f39c12;
    /* Background color */
    color: white;
    /* Text color */
    text-decoration: none;
    margin-left: 0;
    padding: 3px 12px;
    /* Adjust the padding to make the button compact */
    font-size: 0.9rem;
    /* Font size to make it compact */
    font-weight: bold;
    border-radius: 5px;
    /* Rounded corners */
    display: inline-block;
    /* Keeps the button inline with content */
    cursor: pointer;
    /* Pointer on hover */
    transition: background-color 0.3s ease;
    /* Smooth transition for background color */
    white-space: nowrap;
    /* Prevent text from wrapping */
    width: auto;
    /* Ensure the width is only as wide as the text */
    max-width: 80px;
    /* Ensure the button doesn’t stretch too wide */
    text-align: center;
    /* Align text inside */
}

.explore-btn:hover {
    background-color: #e67e22;
    /* Darker orange on hover */
}

/* Animations for Pop-up and Pop-left */
@keyframes pop-left {
    0% {
        transform: translateX(50px);
        /* Start from right */
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        /* Move to the original position */
        opacity: 1;
    }
}

/* Apply pop-left animation to title, description, and image */
.pop-left {
    animation: pop-left 1s ease-out forwards;
    /* Apply the animation */
}

@keyframes pop-up {
    0% {
        transform: scale(0.9);
        /* Start small */
        opacity: 0;
    }

    100% {
        transform: scale(1);
        /* Original size */
        opacity: 1;
    }
}

.pop-up {
    animation: pop-up 1s ease-out forwards;
    /* Apply the animation */
}

/* Media Queries for Mobile Devices */

/* For devices with width <= 768px (tablets and below) */
@media (max-width: 768px) {
    .location-container {
        flex-direction: column;
        /* Stack box and card vertically */
        align-items: center;
        /* Center align items */
        gap: 10px;
        /* Add gap for better spacing */
    }

    .box-locations {
        width: 100%;
        /* Take full width on mobile */
        height: 150px;
        /* Smaller height on mobile */
        display: none;
        /* Hide box-locations on mobile */
    }

    .location-card {
        width: 100%;
        /* Take full width on mobile */
        margin: 10px 0;
        /* Add some margin to create space between elements */
    }

    .card-image {
        width: 100%;
        /* Ensure image takes full width */
        height: auto;
        /* Maintain aspect ratio */
    }

    .card-content {
        width: 100%;
        /* Content section takes full width */
        padding: 10px;
        /* Add some padding */
    }

    .card-content h2 {
        font-size: 18px;
        /* Adjust the font size for better readability on mobile */
        margin-bottom: 10px;
    }

    .card-content p {
        font-size: 14px;
        /* Adjust font size for readability */
        margin-bottom: 20px;
    }

    .explore-btn {
        padding: 6px 20px;
        /* Adjust button padding for mobile */
        font-size: 1.2rem;
        /* Increase font size on mobile for readability */
        max-width: 150px;
        /* Limit the max-width of the button */
        text-align: center;
    }
}

/* For devices with width <= 480px (phones and smaller) */
@media (max-width: 480px) {
    .location-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .box-locations {
        display: none;
    }

    .location-card {
        width: 100%;
        margin: 10px 0;
    }

    .card-image {
        width: 100%;
        height: auto;
    }

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

    .card-content h2 {
        font-size: 16px;
    }

    .card-content p {
        font-size: 12px;
    }

    .explore-btn {
        padding: 6px 14px;
        /* Adjust padding */
        font-size: 1rem;
        /* Adjust font size */
        max-width: 140px;
        /* Ensure button doesn't stretch too wide */
        text-align: center;
    }
}

/* Menu Section.................................... */

/* General Styling for the Custom Menu */
.custom-menu-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    /* Center both sections */
    background-image: url('img/background\ 1.png');
    /* Add your image path here */
    background-size: cover;
    background-position: center;
    position: relative;
    /* To position the shapes correctly */
}

/* Shape Styles */
.shape {
    position: absolute;
}

/* Left Shape */
.left-shape {
    left: 325px;
    /* Position to the left of the main course container */
    top: 10%;
    /* Center it vertically in the main course section */
    width: 8px;
    height: 330px;
    background-color: #e67e22;
}

/* Right Shape for Side Dish */
.right-side-shape {
    right: 325px;
    /* Position to the right of the side dish container */
    top: 56%;
    /* Center it vertically in the side dish section */
    width: 8px;
    height: 330px;
    background-color: #fff;
}

/* Bottom Shape */
.bottom-shape {
    align-items: center;
    bottom: 10px;
    /* Position it at the bottom */
    width: 715px;
    height: 7px;
    background-color: #111;
}

/* Main Course Section */
.main-course-section {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Align the entire Main Course section to the right */
}

/* Side Dish Section */
.side-dish-section {
    margin-bottom: 70px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Align the entire Side Dish section to the left */
}

/* Card Container */
.custom-menu-card-container {
    background-color: #191919;
    border-radius: 5px;
    display: flex;
    width: 100%;
    max-width: 1190px;
    /* Increased width of the container */
    flex-direction: row;
    /* Align images and text side by side */
    position: relative;
    height: auto;
    /* Auto height to fit the image */
}

/* Image Container */
.custom-menu-image {
    position: relative;
    width: 35%;
    display: flex;
    justify-content: center;
}

.custom-menu-image img {
    width: 100%;
    height: 100%;
    /* Set image height to fill its container */
    object-fit: cover;
    /* Ensure the image covers the area without distortion */
}

/* Circle Buttons */
.custom-circle-buttons {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

/* General Circle Button Styles */
.custom-circle-btn {
    width: 12px;
    height: 12px;
    background-color: white;
    /* Default color */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Smooth transition for hover and active states */
}

.custom-circle-btn.active {
    background-color: #f39c12;
}

.custom-circle-btn:hover {
    background-color: #f39c12;
}

/* Text Animation */
@keyframes popTextFromRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes popTextFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Content Section */
.custom-menu-content {
    padding: 20px;
    background-color: #191919;
    color: white;
    flex: 1;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center the content */
    align-items: flex-start;
    /* Align text to the left */
    padding-top: 0px;
    /* Adds space from the top of the container */
    height: 100%;
}

/* Text Alignment */
.main-course-section .custom-menu-content h3,
.main-course-section .custom-menu-content p {
    text-align: left;
    /* Left align text in Main Course section */
    padding-right: 180px;
}

.side-dish-section .custom-menu-content h3,
.side-dish-section .custom-menu-content p {
    text-align: right;
    /* Right align text in Side Dish section */
    padding-left: 180px;
}

/* Title and Description Styling */
.custom-menu-card-container .custom-menu-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #f39c12;
}

.custom-menu-card-container .custom-menu-content p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

/* Main Course Label - Positioned at the bottom-right */
#custom-main-course-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: orange;
    font-size: 16px;
    font-weight: bold;
    z-index: 3;
}

/* Side Dish Label - Positioned at the bottom-left */
#custom-side-dish-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: orange;
    font-size: 16px;
    font-weight: bold;
    z-index: 3;
}

/* For Side Dish: Align text to the right */
.side-dish-section .custom-menu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align content to the right */
    padding-right: 20px;
    /* Space from the right edge */
}

/* Side Dish Title and Description */
.side-dish-section .custom-menu-content h3,
.side-dish-section .custom-menu-content p {
    text-align: right;
    /* Right align text in Side Dish section */
    margin-right: 8px;
    /* Add space from the right edge */
}

/* Rest of the layout remains the same */
.main-course-section .custom-menu-content h3,
.main-course-section .custom-menu-content p {
    text-align: left;
    /* Left align text in Main Course section */
    margin-left: 8px;
    /* Add space from the left edge */
}

/* Responsive Design - Adjust for smaller screen widths */

/* For smaller screens (below 768px) */
@media (max-width: 768px) {
    .custom-menu-container {
        background-image: url('img/background\ 1.png');
        /* Ensure the image is applied */
        background-size: cover;
        background-position: center;
        flex-direction: column;
        padding: 20px;
    }

    .custom-menu-card-container {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .custom-menu-image {
        width: 100%;
        height: auto;
    }

    .custom-menu-content {
        width: 100%;
        padding: 15px;
        align-items: flex-start;
    }

    .custom-circle-buttons {
        position: static;
        margin-top: 10px;
        justify-content: center;
        gap: 12px;
    }

    .main-course-section .custom-menu-content h3,
    .main-course-section .custom-menu-content p {
        padding-right: 20px;
    }

    .side-dish-section .custom-menu-content h3,
    .side-dish-section .custom-menu-content p {
        padding-left: 20px;
    }

    #custom-main-course-label,
    #custom-side-dish-label {
        font-size: 14px;
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    #custom-main-course-title,
    #custom-side-dish-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    #custom-main-course-description,
    #custom-side-dish-description {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* For even smaller screens (below 480px) */
@media (max-width: 480px) {
    .custom-menu-container {
        background-image: url('img/background\ 1.png');
        /* Ensure the image is applied */
        background-size: cover;
        background-position: center;
        flex-direction: column;
        padding: 20px;
    }

    .custom-menu-card-container {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
    }

    .custom-menu-image img {
        width: 60%;
        height: auto;
    }

    .custom-menu-content {
        padding: 10px;
    }

    .custom-circle-buttons {
        gap: 10px;
    }

    .custom-menu-card-container .custom-menu-content h3 {
        font-size: 18px;
        padding-left: 90px;
    }

    .custom-menu-card-container .custom-menu-content p {
        font-size: 14px;
        padding-left: 90px;
    }
}

/* Apply the fade effect to the main course image */
.custom-menu-image img {
    animation: fadeOutIn 1s ease-in-out;
}

/* Apply the pop animation for the main course title and description */
#custom-main-course-title,
#custom-main-course-description {
    animation: popTextFromRight 2s ease-out;
}

/* Apply the pop animation for the side dish title and description */
#custom-side-dish-title,
#custom-side-dish-description {
    animation: popTextFromLeft 2s ease-out;
}

/* Gallery Section.................................... */

/* Gallery1.......................... */
.gallery1-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #191919;
    margin: 0;
    padding: 0;
}

/* Gallery1 Image Section */
.gallery1 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.gallery1 img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

/* Text Section */
.text-content1 {
    display: flex;
    flex-direction: row;
    /* Align text and shapes in a row */
    gap: 5px;
    /* Space between the shape and text */
    align-items: center;
    justify-content: center;
    /* Center all elements */
    width: 100%;
}

/* Shape for Gallery */
.shape-gallery {
    height: 3px;
    background-color: #ffffff;
    width: 360px;
    /* Fixed width for both shapes */
}

/* Left Shape (Flex In to Left) */
.shape-gallery.left {
    margin-right: auto;
    /* Pushes the left shape to the left */
}

/* Right Shape (Flex In to Right) */
.shape-gallery.right {
    margin-left: auto;
    /* Pushes the right shape to the right */
}

/* Text Box Section (Flex to Fill the Space) */
.text-box1 {
    flex-grow: 1;
    /* Allow the text box to grow and take the available space */
    text-align: center;
    padding-top: 8px;
    padding-bottom: 15px;
    max-width: 800px;
    width: 100%;
}

/* Text Box Paragraph Styling */
.text-box1 p {
    font-size: 16px;
    line-height: 1;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 2.5px;
    /* Add this line to increase the space between letters */
}

/* Adjust space and position for each box */
.text-box1 {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Initial state for animations (hidden and translated) */
.image-animate {
    opacity: 0;
    transform: translateY(50px);
    /* Initially hide and move down */
    transition: all 0.8s ease-out;
}

/* Visible classes that will be added when elements enter the viewport */
.visible-left {
    opacity: 1;
    transform: translateX(0);
    /* Move left shape to its normal position */
}

.visible-right {
    opacity: 1;
    transform: translateX(0);
    /* Move right shape to its normal position */
}

/* Image Animation */
.image-animate {
    opacity: 0;
    transform: translateY(50px);
    /* Initially hidden and moved down */
    transition: all 0.8s ease-out;
    /* Smooth transition for pop-up effect */
}

.visible-image {
    opacity: 1;
    transform: translateY(0);
    /* Animate image to its original position */
}

/* Text Box Animation */
.text-box1 {
    opacity: 0;
    transform: translateY(50px);
    /* Initially hidden and moved down */
    transition: all 0.8s ease-out;
    /* Smooth transition for pop-up effect */
}

.visible {
    opacity: 1;
    transform: translateY(0);
    /* Animate text to original position */
}

/* Gallery2.............................. */
.gallery2-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    /* Reduced padding to prevent pushing cards down */
    background-color: #111;
}

.gallery2 {
    display: flex;
    gap: 24px;
    /* Increased gap to scale the spacing */
    width: 100%;
    justify-content: center;
    /* Center the cards horizontally */
    align-items: center;
    /* Center the cards vertically */
    max-width: 1200px;
    /* Increase max-width slightly */
    flex-wrap: nowrap;
    /* Prevent wrapping */
}

/* Card styling */
.gallery2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 36%;
    /* Increased card width by 20% (previously 30%) */
    height: auto;
    /* Allow height to adjust based on content */
    background-color: #191919;
    /* Background color */
    position: relative;
    flex-shrink: 0;
    /* Prevent the card from shrinking */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Box shadow for depth */
}

/* Background styling for card */
.gallery2-card-background {
    width: 100%;
    height: auto;
    /* Adjust height based on image aspect ratio */
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* Center the image */
    align-items: center;
}

/* Make the image adjustable */
.gallery2-card-background img {
    width: 100%;
    /* Image takes up the full width of the card */
    max-width: 100%;
    /* Ensure the image does not overflow */
    height: auto;
    /* Maintain the aspect ratio */
    max-height: 360px;
    /* Optional max height for the image */
    object-fit: cover;
    /* Ensure the image covers the area without distortion */
}

/* Text styling */
.gallery2-card-text {
    width: 100%;
    padding: 14px;
    /* Slightly increased padding for text */
    text-align: center;
    font-size: 14px;
    /* Slightly larger text size */
    letter-spacing: 2.5px;
    color: #fff;
    background-color: #191919;
    /* Dark background for the text */
    position: absolute;
    bottom: 0;
    /* Align text to the bottom */
    opacity: 0;
    /* Start with invisible text */
    animation: popUpText 0.6s ease-out forwards;
    /* Apply pop-up animation */
}

/* Animation for the text to pop up */
@keyframes popUpText {
    0% {
        transform: translateY(20px);
        /* Start from below */
        opacity: 0;
        /* Invisible */
    }

    100% {
        transform: translateY(0);
        /* Move to original position */
        opacity: 1;
        /* Fully visible */
    }
}

/* Scrollbar customization for horizontal scrolling */
.gallery2::-webkit-scrollbar {
    height: 8px;
}

.gallery2::-webkit-scrollbar-thumb {
    background-color: #191919;
}

.gallery2::-webkit-scrollbar-thumb:hover {
    background-color: #191919;
}

.gallery2::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Flexible Shape Styling */
.gallery2-shape {
    width: 60%;
    height: 1.5px;
    /* Shape height */
    background-color: #ffffff;
    /* Shape color */
    margin-top: 50px;
    /* Space between the gallery and the shape */
    border-radius: 2px;
    /* Optional: rounded edges for the line */
    display: flex;
    justify-content: center;
    /* Center horizontally */
}

/* Responsiveness for smaller screens */
@media (max-width: 768px) {
    .gallery2 {
        gap: 12px;
        width: 100%;
        flex-direction: column;
        /* Stack cards vertically on smaller screens */
    }

    .gallery2-card {
        width: 90%;
        /* Adjust width for smaller screens */
    }

    .gallery2-shape {
        width: 80%;
        /* Adjust shape width for smaller screens */
    }
}

@media (max-width: 480px) {
    .gallery2 {
        gap: 12px;
        width: 100%;
    }

    .gallery2-card {
        width: 100%;
        /* Full width for mobile devices */
    }

    .gallery2-shape {
        width: 100%;
        /* Full width for mobile devices */
    }
}

/* Gallery3............................. */
.gallery3 {
    display: flex;
    justify-content: space-between;
    padding: 0;
    /* Remove any padding around the entire container */
    background-color: #111;
    width: 100%;
    /* Ensure it fills the entire width */
    margin: 0;
    /* Remove any margins around the container */
    box-sizing: border-box;
    /* Ensure the padding doesn't affect width */
}

/* Side Boxes */
.gallery3.side-box {
    width: 20%;
    /* Adjust the width as needed */
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    /* Remove padding for exact edge alignment */
    margin: 250px 0px;
}

/* Left and Right Boxes Text Alignment */
.gallery3.left-box {
    text-align: right;
    /* Align text to the right */
    margin-left: 0;
    /* Ensure it sticks to the left edge */
}

.gallery3.right-box {
    text-align: left;
    /* Align text to the left */
    margin-right: 0;
    /* Ensure it sticks to the right edge */
}

/* Cards Section */
.gallery3.cards {
    width: 60%;
    /* Adjusted width for the middle cards */
    display: flex;
    justify-content: space-between;
}

/* Individual Card Styling */
.gallery3.card {
    background-color: #191919;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 0;
}

.gallery3.card img,
.gallery3.card video {
    width: 100%;
    /* Ensure the image/video takes up the full width of the container */
    height: 100%;
    /* Set the height to 100% to fill the container */
    object-fit: cover;
    /* Ensures image/video fills the container while preserving aspect ratio */
}

.gallery3.card p {
    margin-top: 10px;
    padding-bottom: 7px;
    font-size: 16px;
    color: #ffffff;
}

.gallery3.left-box,
.gallery3.right-box {
    font-size: 14px;
    color: #ffffff;
}

.gallery3.left-box {
    margin-left: 0;
    padding-left: 0;
}

.gallery3.right-box {
    margin-right: 0;
    padding-right: 0;
}

/* Adjust margin for the image card */
.gallery3.card.image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    /* Adjust left margin */
    margin-right: 8px;
    /* Adjust right margin */
}

.gallery3.card.image-card {
    margin-top: 0;
    margin-bottom: 0;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .gallery3 {
        flex-direction: column;
        /* Stack the left-box, cards, and right-box vertically */
    }

    .gallery3.side-box {
        width: 100%;
        /* Make the side boxes take full width on smaller screens */
        margin: 20px 0;
        /* Adjust margin for a better appearance on mobile */
    }

    .gallery3.cards {
        width: 100%;
        /* Cards will also take full width on small screens */
        flex-direction: column;
        /* Stack cards vertically on small screens */
        align-items: center;
        /* Center the cards horizontally */
    }

    .gallery3.card {
        width: 90%;
        /* Make cards take 90% width of the container */
        margin: 15px 0;
        /* Adjust margin for better spacing */
    }

    .gallery3.left-box,
    .gallery3.right-box {
        font-size: 12px;
        /* Reduce font size for smaller screens */
        padding: 10px;
        /* Add some padding for better spacing */
    }
}

/* Responsive Design for Tablets */
@media (max-width: 1024px) {
    .gallery3 {
        flex-direction: column;
        /* Stack the left-box, cards, and right-box vertically */
    }

    .gallery3.side-box {
        width: 30%;
        /* Side boxes take 30% width on tablet screens */
        margin: 20px 0;
        /* Adjust margin for tablets */
    }

    .gallery3.cards {
        width: 80%;
        /* Cards take 80% width on tablets */
        flex-direction: column;
        /* Stack cards vertically */
    }

    .gallery3.card {
        width: 85%;
        /* Cards will take 85% width of the container on tablets */
        margin: 20px 0;
        /* Adjust margin for tablets */
    }
}

/* Animation for pop-up effect */
@keyframes pop-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
        /* Start slightly lower from its normal position */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* Text returns to original position */
    }
}

/* Apply the pop-up animation to elements */
.pop-up {
    animation: pop-up 0.6s ease-out forwards;
    opacity: 0;
    /* Initial opacity 0 */
}

/* Contact Section */

/* Gariskontak */
.gariskontak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 25vh;
}

.gariskontak-line {
    width: 98%;
    height: 0.8px;
    background-color: #f39c12;
    margin: -30px 0;
}

.gariskontak-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gariskontak-img {
    align-content: center;
    width: 120px;
    height: auto;
    margin-right: -30px;
}

.gariskontak-text {
    color: white;
}

.gariskontak-name {
    font-size: 15px;
    font-weight: bold;
}

.gariskontak-surname {
    font-size: 18px;
    margin-top: -10px;
    font-weight: bold;
    color: #f39c12;
}

/* Manajemen Section */
.manajemen-container {
    width: 100%;
    margin: -50px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Blue background with 50% opacity */
}

.manajemen-media-section {
    text-align: center;
}

.manajemen-media-section h2 {
    font-size: 25px;
    color: #ffffff;
    margin-bottom: 20px;
}

.manajemen-media-carousel {
    display: flex;
    justify-content: space-around;
    gap: 25px;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.manajemen-media-item {
    width: 100%;
    max-width: 450px;
    /* Set container width to 450px */
    height: 250px;
    /* Set container height */
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    /* Smooth transition effect */
}

.manajemen-media-item.show {
    opacity: 1;
}

.manajemen-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel navigation buttons */
.manajemen-carousel-buttons {
    margin-top: 20px;
}

.manajemen-carousel-button {
    background-color: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    margin: 0 2px;
    color: #fff;
    transition: color 0.3s ease;
}

.manajemen-carousel-button.active {
    color: #f39c12;
    /* Orange color for active button */
}

.manajemen-carousel-button:hover {
    color: #f39c12;
}

/* Mobile Device Styling */
@media (max-width: 768px) {
    .manajemen-container {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .manajemen-media-section h2 {
        font-size: 20px;
        /* Smaller font size on mobile */
    }

    .manajemen-media-carousel {
        flex-direction: column;
        justify-content: center;
    }

    .manajemen-media-item {
        max-width: 100%;
        height: 200px;
        margin-bottom: 15px;
        /* Add space between items */
    }

    .manajemen-carousel-button {
        font-size: 20px;
        /* Smaller button size for mobile */
    }
}

/* Copyright Section */
.contact {
    background-image: url('img/background\ 2.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 650px;
    color: white;
}

.contact-content {
    text-align: left;
    padding-top: 250px;
    /* Adjusted for better desktop positioning */
}

.h1-contact {
    font-size: 1.5rem;
    margin-bottom: 25px;
    margin-left: 180px;
    color: #f39c12;
}

.contact-box {
    border-left: 2px solid #ffffff;
    padding-left: 20px;
    margin-left: 180px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 25px;
    margin-bottom: 50px;
}

.info {
    display: flex;
    align-items: left;
    gap: 15px;
}

.info img {
    width: 30px;
    height: 30px;
}

.halal-cert {
    position: absolute;
    right: 50px;
    margin-top: -170px;
}

.halal-cert img {
    width: 300px;
    height: 320px;
}

.p-copyright {
    padding-top: 120px;
}

.footer {
    text-align: center;
    margin-top: -15px;
    color: white;
    font-size: 1.2rem;
    bottom: 10px;
}

/* Mobile Design - Adjustments for smaller screens */
@media only screen and (max-width: 768px) {
    .contact {
        height: auto;
        padding: 100px 20px;
    }

    .contact-content {
        padding-top: 50px;
    }

    .h1-contact {
        font-size: 1.1rem;
        margin-left: 10px;
    }

    .contact-box {
        margin-left: 10px;
    }

    .contact-info {
        gap: 20px;
    }

    .info img {
        width: 25px;
        height: 25px;
    }

    .halal-cert {
        position: relative;
        right: auto;
        bottom: 50px;
        margin-top: 20px;
        margin-left: -60px;
        width: 120px;
        height: 140px;
        text-align: center;
    }

    .footer {
        font-size: 1rem;
        padding: 5px 0;
    }
}