/* To make the navigation bar sticky */
#sticky {
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    z-index: 1000; /* Adjust as needed */
    background-color: #ffffff;
}


/* To manage the size of the 3 carousel images */
.carousel-img {
    width: 100%;
    height: 700px; 
    object-fit: cover; /* Maintain aspect ratio */
}

/* To make carousel images text standout */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.9); /* Background color with transparency */
    padding: 10px; /* Adjust padding as needed */
    border-radius: 20px; /* Rounded corners for the box */
    max-width: 700px; /* Limiting the width */
    margin: 0 auto; /* Center the box horizontally */
}

/* Styling for line above the why us section */
.featurette-divider {
    width: 40%;
    border-top: 10px solid rgb(126, 126, 126); /* Adjust the color and thickness as needed */
    margin: 0 auto; /* Center the line horizontally */
    margin-top: 70px;
    border-radius: 300px; /* Half of the height to create rounded ends */
}

/* Styling for line under the why us section */
.featurette-divider-two {
    width: 40%;
    border-top: 10px solid rgb(126, 126, 126); 
    margin: 0 auto; /* Center the line horizontally */
    border-radius: 300px; /* Half of the height to create rounded ends */
    margin-bottom: 70px;
}

.featurette-divider-three {
    width: 40%;
    border-top: 10px solid rgb(126, 126, 126); /* Adjust the color and thickness as needed */
    margin: 0 auto; /* Center the line horizontally */
    margin-top: 70px;
    border-radius: 300px; /* Half of the height to create rounded ends */
    margin-bottom: 70px;
}

/* To manage the size of the 6 why us images */
.card-img {
    width: 100%;
    height: 300px; 
    object-fit: cover; /* Maintain aspect ratio */
}

/* To manage the size of the gallery images */
.gallery-image {
    width: 100%;
    height: 700px; 
    object-fit: cover; /* Maintain aspect ratio */
}

/* To manage cocktail generator */
#cocktailPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 9999;
}


#cocktailImage {
    max-width: 100%;
    max-height: 100%;
}

/* To manage close pop-up button */
#closePopupBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    background-color: #ffffff;
}


/* To manage the size of the social media icons & follow us text */
.fa-facebook {
        font-size: 64px; /* Adjust the size as needed */
        margin-right: 60px;
        margin-bottom: 40px;
        margin-top: 15px;
}

.fa-instagram {
    font-size: 64px; /* Adjust the size as needed */
    margin-top: 15px;
}

.follow-us-text {
    font-size: 38px; /* Adjust the font size as needed */
}

@media (max-width: 767px) {
    #cocktailPopup {
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        padding: 0;
    }

    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        border: none;
    }

    .modal-header {
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #dee2e6;
    }

    .modal-title {
        margin-bottom: 0;
    }

    .modal-body {
        padding: 1rem;
    }

    .close {
        padding: 1rem;
    }

    #cocktailImage {
        max-width: 100%;
        height: auto;
    }
}