:root {
    --charcoal: #0b0f14;
  --light-charcoal: #141b23;

  --gold: #d4af37;
  --soft-gold: #f1d27a;

  --off-white: #f8f6f1;
  --light-gray: #cfcfcf;

  --dark-text: #101010;
}


*{
    margin: 0px;
    padding: 0px;

}
body{
    background-color: white;
}

.img-hover-zoom {
    transition: transform .5s ease, opacity .5s ease;
  }
  .card:hover .img-hover-zoom {
    transform: scale(1.1);
    opacity: 1 !important;
  }
  .card:hover {
    border-color: #c5a059 !important;
    transition: 0.5s;
  }




.premium{
    color: var(--gold);
}
.hero-section{
    height: 400px;
}
.wedding h4,.corporate h4,.privateDinners h4 {
font-size: 15px;
color: var(--gold);
}


.top-heading{
    color:var(--gold)
}
.icon{
    font-size: 30px;
}

/* carousel */
.myicon{
    padding: 25px;
}



.custom-img {
  width: 100%;
  height: 250px; /* Sab images ki height barabar rahegi */
  object-fit: cover; /* Images stretch nahi hongi */
  border-radius: 8px; /* Thoda professional look ke liye */
  transition: transform 0.3s; /* Hover effect ke liye */
}

.custom-img:hover {
  transform: scale(1.03); /* Mouse lane par halka sa zoom */
}

/* Indicators ya controls ko visible rakhne ke liye padding */
.carousel-inner {
  padding: 20px 0;
}



/* 1. Main Button Container */
.carousel-control-prev,
.carousel-control-next {
   
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 1 !important; /* Takki arrow halka na dikhe */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}

/* 2. Default Bootstrap Icon ko disable karein */
.carousel-control-prev-icon,
.carousel-control-next-icon {
   
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
}

.modal{
    z-index: 99999!important;
}



#imageModal .btn-close {
    background-color: var(--gold);
    /* Dark, slightly transparent background */
    opacity: 1; /* Make it fully opaque */
    border-radius: 50%; /* Make it circular */
    padding: 1rem; /* Increase clickable area */
    
    /* Fine-tune position: moves it inward from the edge */
    top: 15px !important; 
    right: 15px !important;
    
    /* Ensures it's always above the image */
    z-index: 2; 
}

/* Optional: Add a subtle hover effect */
#imageModal .btn-close:hover {
    
    transform: scale(1.1);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* wedding ceremony*/


.heading2{
    font-size: 40px;
    font-weight: 400;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-left: 10px;
}



/* corporate section */


.Corporate-section{
    background-color: var(--off-white);
}

.corporate-main{
    background-color: var(--off-white);
}


/* slider */
/* Container for the carousel to ensure the buttons have room to sit outside if needed */
#nineImageCarousel {
    padding: 0 40px; /* Adds space on the sides so buttons don't cover text */
}

/* Adjusting the appearance of the custom buttons */
.myicon {
    background-color: #d4af37; /* The gold/yellow color from your image */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Position the buttons slightly outward */
.carousel-control-prev {
    left: -20px;
    opacity: 1; /* Make sure they are always visible */
}

.carousel-control-next {
    right: -20px;
    opacity: 1;
}

/* Ensure images fit nicely and don't get cut off */
.custom-img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: matches the soft look of the menu */
    object-fit: contain;
}



/* Fix the horizontal overflow */
#nineImageCarousel {
    overflow-x: hidden;
    padding: 0 10px;
}

/* Adjust image height to prevent vertical stretching */
.custom-img {
    width: 100%;
    max-height: 70vh; /* Limits height to 70% of screen height on mobile */
    object-fit: contain;
    border-radius: 15px;
}

/* Button Styling */
  .btn-outline-gold {
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.4s;
  }
  .btn-outline-gold:hover {
   background-color: #b79433;
   
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
  }


/* Make buttons responsive */
@media (max-width: 576px) {
    .myicon {
        width: 35px !important;
        height: 35px !important;
        background-color: rgba(212, 175, 55, 0.7) !important; /* Semi-transparent */
    }
    
    /* Move buttons slightly outside or to the very edge */
    .carousel-control-prev {
        left: 5px;
    }
    .carousel-control-next {
        right: 5px;
    }

    /* Reduce the gap in the row for mobile */
    .row.g-4 {
        --bs-gutter-x: 0.5rem;
    }
}

/* Ensure the row doesn't cause horizontal scrolling */
.carousel-inner .row {
    margin-right: 0;
    margin-left: 0;
}