/* Navbar Background with Image */
#main-navbar {
    background-image: url('https://images.unsplash.com/photo-1569470451072-68314f596aec?w=600&auto=format&fit=crop&w=1400&q=80');
    background-size: cover;
    background-position: center;
    backdrop-filter: brightness(0.6);
    /* dark overlay for text readability */
    transition: background 0.5s ease;
}
/* Force brand content super close / slightly overlap */
.brand-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;           /* remove flex gap */
  padding: 0 !important;
  margin: 0 !important;
  position: relative;           /* allow text to move over image */
}

/* Remove image spacing */
.brand-logo img {
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  display: inline-block;
}

/* Move text slightly left over the logo */
.brand-logo span {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  position: relative;
  left: -10px;  /* adjust this value to make it closer/further */
  font-weight: 700;
}
/* Shift the whole brand slightly left */
#main-navbar .brand-logo {
  left: -10px; /* move entire logo+text to the left */
  position: relative; /* ensures left works */
}



/* Navbar brand styling */
#main-navbar .navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: #ffffff;
    /* brand text white */
}

/* Navbar links */
#main-navbar .nav-link {
    font-weight: 500;
    color: #ffffff;
    /* links white */
    transition: color 0.3s, transform 0.3s;
}

/* Hover effect for links */
#main-navbar .nav-link:hover {
    color: #ffd700;
    /* gold accent */
    transform: translateY(-3px);
    /* slight lift */
}

/* Active link */
#main-navbar .nav-link.active {
    color: #ffd700;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    #main-navbar {
        background-position: center top;
    }

    #main-navbar .nav-link {
        margin: 0.3rem 0;
    }
}
/* White border for hamburger button */
.navbar-dark .navbar-toggler {
    background-color: transparent;
    /* keep button background transparent */
    border: 2px solid #ffffff;
    /* white border */
    border-radius: 0.25rem;
    /* rounded corners */
    padding: 0.25rem 0.5rem;
    /* adjust size if needed */
}

/* White hamburger lines inside the bordered container */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#hero-carousel img {
    transition: transform 1.5s ease;
}

#hero-carousel .carousel-item.active img {
    transform: scale(1.05);
}


.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-img {
    height: 380px;
    /* try 400px if your layout allows it */
    object-fit: cover;
    width: 100%;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

.card-body {
    padding: 1rem;
    background-color: #fff;
}

.card-body h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.card-body p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
}

.product-card .btn {
    font-size: 0.85rem;
    border-radius: 20px;
    padding: 0.4rem 1rem;
}

.parallax-bg {
  background-image: url('../assets/image/1bb1_28da5fa4.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top; /* <-- was 'center', try 'center top' or 'center 20%' */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.6);
  z-index: 1;
}


/* Overlay initially hidden */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* semi-transparent dark overlay */
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* allows button clicks below overlay */
    border-radius: 0.75rem;
    /* matches image rounding */
}

/* Show overlay on hover */
.product-card:hover .card-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Keep image zoom on hover */
.product-card:hover .product-img {
    transform: scale(1.08);
}




.product-card {
  position: relative;
}

.product-img {
  position: relative;
  z-index: 1;
  cursor: zoom-in;
}

/* Let overlay sit visually on top, but not block clicks to image */
.card-overlay {
  z-index: 2;
  pointer-events: none;
}

/* Enable overlay interactivity only when it’s visible */
.product-card:hover .card-overlay {
  pointer-events: auto;
}

/* Make sure body stays below the image for click detection */
.card-body {
  position: relative;
  z-index: 1;
}



/* ===== Lightbox Styling ===== */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
  transition: opacity 0.3s ease;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  animation: zoomIn 0.3s ease;
}

/* Optional: smooth zoom animation */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}






.carousel-item img.product-img {
  position: relative;
  z-index: 5; /* ensures image sits above overlay layers */
  cursor: zoom-in;
}

.card-overlay {
  pointer-events: none !important; /* never block image clicks */
}







/* Parallax Background */
/* .custom-parallax-bg {
    background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YmFnc3xlbnwwfDB8MHx8fDA%3D&?auto=format&fit=crop&w=1400&q=80');
    
    background-attachment: fixed;
    parallax scroll
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(0.65);
    dims background for readability
    z-index: 1;
} */


.custom-parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ensures video covers section */
    z-index: 1;
    filter: brightness(0.6);
    /* darken video for readability */
    pointer-events: none;
    /* ensures user can interact with content */
}
/* Hover scale effect for cards */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Optional gradient overlay (if you want to add soft pastel effect) */
#custom-order::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 230, 240, 0.4), rgba(255, 240, 245, 0.4));
    z-index: 1;
}


/* Apply the new font to only this section */
.custom-order-cards {
    font-family: 'Playfair Display', serif;
}

.custom-order-cards h5 {
    font-weight: 700;
    /* bold heading */
}

.custom-order-cards p {
    font-weight: 400;
    /* normal paragraph */
}

/* Footer Parallax Background */
.footer-parallax-bg {
    background-image: url('https://images.unsplash.com/photo-1569470451072-68314f596aec?w=600&?auto=format&fit=crop&w=1400&q=80');
    /* replace with your choice */
    background-attachment: fixed;
    /* parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(0.4);
    /* dim for readability */
    z-index: 1;
}

/* Footer Links */
#site-footer a {
    transition: color 0.3s;
}

#site-footer a:hover {
    color: #ffd700;
    /* gold accent on hover */
    text-decoration: underline;
}

/* Responsive spacing */
#site-footer p,
#site-footer ul li {
    font-size: 0.95rem;
}

/* Optional: smooth fade-in animation for footer */
#site-footer {
    animation: fadeInFooter 1.5s ease forwards;
    opacity: 0;
}

@keyframes fadeInFooter {
    to {
        opacity: 1;
    }
}


/* Quick Links */
#site-footer ul li a {
    position: relative;
    transition: color 0.3s, transform 0.3s;
}

#site-footer ul li a:hover {
    color: #ffd700;
    /* gold accent */
    transform: translateX(5px);
    /* slight slide effect */
}

/* Optional underline animation */
#site-footer ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffd700;
    transition: width 0.3s;
}

#site-footer ul li a:hover::after {
    width: 100%;
}
/* Social Media Icons */
#site-footer a.fs-5 i {
    transition: transform 0.3s, color 0.3s;
}

#site-footer a.fs-5:hover i {
    transform: scale(1.2);
    color: #ffd700;
    /* gold accent */
}

/* Optional: add a smooth cursor pointer for icons */
#site-footer a.fs-5 {
    cursor: pointer;
}




/* ==============================
   💻 Desktop Carousel Styling
   ============================== */
#hero-carousel .carousel-item img,
#hero-carousel .carousel-item video {
    height: 300px; /* reduced from 500px */
    object-fit: cover;
}

/* ==============================
   📱 Mobile-First Carousel Styling
   ============================== */
@media (max-width: 768px) {

    /* Reduce overall height for small screens */
    #hero-carousel .carousel-item img,
    #hero-carousel .carousel-item video {
        height: 100px !important; /* reduced slightly from 280px */
        object-fit: cover;
    }

    /* Make captions visible on small screens (they're hidden by d-none d-md-block) */
    #hero-carousel .carousel-caption {
        display: block !important;
        bottom: 10px;
        left: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        padding: 10px;
        text-align: left;
    }

    /* Adjust caption text size for readability */
    #hero-carousel .carousel-caption h2 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    #hero-carousel .carousel-caption p {
        font-size: 0.85rem;
        margin: 5px 0 0;
    }

    /* Shrink carousel controls */
    #hero-carousel .carousel-control-prev-icon,
    #hero-carousel .carousel-control-next-icon {
        width: 25px;
        height: 25px;
    }

    /* Reposition indicators for smaller screens */
    #hero-carousel .carousel-indicators {
        bottom: 5px;
    }

    #hero-carousel .carousel-indicators [data-bs-target] {
        width: 6px;
        height: 6px;
        margin: 2px;
    }
}


.brand-logo {
    gap: 0.4rem !important;
    /* tighten spacing between logo and text */
}

.brand-logo img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
    /* visually centers logo with text */
}

.brand-logo span {
    font-size: 1.1rem;
    /* slightly smaller than default */
    letter-spacing: 0.5px;
    margin-top: 3px;
    /* bring text closer to the logo vertically */
    color: #f8f9fa;
    /* elegant light tone (adjust to theme) */
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

/* Optional hover for premium feel */
.brand-logo:hover span {
    color: #ffc107;
    /* or your brand accent */
    transition: color 0.3s ease;
}

/* For small screens: make it compact */
@media (max-width: 576px) {
    .brand-logo img {
        width: 32px;
        height: 32px;
    }

    .brand-logo span {
        font-size: 0.95rem;
        margin-top: 2px;
    }
}








/* ==============================
   UNIVERSAL RESPONSIVE GRID FIX
   Ensures 2 cards per row on ALL small & medium phones
   ============================== */

@media (max-width: 1200px) {
  .col-12.col-sm-6.col-lg-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }

  .product-card {
    border-radius: 10px;
    margin-bottom: 5px;
  }

  .product-img {
    height: 180px !important;
    object-fit: cover !important;
  }

  .card-body {
    padding: 0.6rem 0.5rem;
  }

  .card-body h6 {
    font-size: 0.9rem;
  }

  .card-body p {
    font-size: 0.78rem;
  }

  .product-card .btn {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Force 2 cards per row on extra-small screens */
@media (max-width: 360px) {
  .col-12.col-sm-6.col-lg-3 {
    flex: 0 0 50% !important;   /* 2 per row */
    max-width: 50% !important;
  }

  .product-img {
    height: 140px !important;   /* slightly smaller to fit nicely */
  }
}





.qc-icon.email {
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}









/* ===== Navbar Search Styling ===== */
#main-navbar form {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 0.3rem 0.6rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

#main-navbar form:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Input fields */
#main-navbar input[type="search"],
#main-navbar input[type="number"] {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  transition: all 0.3s ease;
}

#main-navbar input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#main-navbar input:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Search button */
#main-navbar .btn-outline-light {
  border-color: #ffd700;
  color: #ffd700;
  border-radius: 50%;
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#main-navbar .btn-outline-light:hover {
  background-color: #ffd700;
  color: #000;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Icon */
#main-navbar .btn-outline-light i {
  font-size: 1.1rem;
}

/* ===== Responsive Adjustments for Search Bar Placement ===== */
#main-navbar .search-bar {
  flex-grow: 1;
  max-width: 500px;
  margin: 0 1rem;
}

/* Shrink and center on tablets and phones */
@media (max-width: 992px) {
  #main-navbar .search-bar {
    max-width: 480px; /* wider */
    margin: 0 0.5rem;
    gap: 0.4rem;
  }
  #main-navbar input[type="search"],
  #main-navbar input[type="number"] {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    flex: 1;
  }
  #main-navbar .btn-outline-light {
    display: none !important;
  }
}

/* 📱 For small mobile screens */
@media (max-width: 768px) {
  #main-navbar {
    padding: 0.4rem 0.7rem;
  }

  #main-navbar .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
  }

  .navbar-brand img {
    width: 32px;
    height: 32px;
  }

  .navbar-brand span {
    font-size: 0.9rem;
  }

  /* ✅ Wider search bar, shifted slightly left */
  #main-navbar .search-bar {
    flex: 1;
    min-width: 0;
    max-width: 400px; /* ⬅ further increased */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-right: 0.3rem;
    transform: translateX(-10px);
  }

  #main-navbar input[type="search"],
  #main-navbar input[type="number"] {
    min-width: 70px;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    flex: 1;
  }

  #main-navbar .btn-outline-light {
    display: none !important;
  }

  .navbar-toggler {
    flex-shrink: 0;
    padding: 0.25rem 0.4rem;
  }
}

/* 🔸 Ultra small screens (<450px) */
@media (max-width: 450px) {
  #main-navbar .search-bar {
    max-width: 300px; /* ⬅ increased for tighter devices */
    gap: 0.25rem;
    transform: translateX(-12px);
  }
  #main-navbar input[type="search"],
  #main-navbar input[type="number"] {
    width: 60px;
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
    flex: 1;
  }
  #main-navbar .btn-outline-light {
    display: none !important;
  }
}

/* ✅ Collapse dropdown behavior */
@media (max-width: 768px) {
  #navbarNav {
    position: static;
    width: 100%;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(255, 215, 0, 0.4);
  }

  #navbarNav .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  #main-navbar .container {
    position: relative;
  }

  .navbar-collapse {
    transition: all 0.3s ease-in-out;
  }

  .navbar-collapse.show {
    margin-top: 0.5rem;
  }
}

/* 🎯 Optimize search vs. price input balance */
#main-navbar .search-bar input[type="number"] {
  width: 70px !important;
  min-width: 60px !important;
  text-align: center;
}

/* Main wider search bar */
#main-navbar .search-bar {
  max-width: 600px !important; /* ⬅ further increased for desktop */
}

/* Tablet size */
@media (max-width: 768px) {
  #main-navbar .search-bar input[type="number"] {
    width: 55px !important;
    min-width: 45px !important;
  }

  #main-navbar .search-bar {
    max-width: 400px !important; /* ⬅ more space for search */
  }
}

/* Ultra small */
@media (max-width: 450px) {
  #main-navbar .search-bar input[type="number"] {
    width: 45px !important;
  }

  #main-navbar .search-bar {
    max-width: 300px !important;
  }
}

/* 🚀 Hide Price Max + Expand Search Fully */
@media (max-width: 768px) {
  #main-navbar .search-bar input[name="price_max"],
  #main-navbar .search-bar input[placeholder*="Max"],
  #main-navbar .search-bar input[type="number"]:last-of-type {
    display: none !important;
  }

  #main-navbar .search-bar input[type="search"] {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 520px !important; /* ⬅ biggest so far */
  }

  #main-navbar .search-bar {
    max-width: 500px !important; /* ⬅ wider overall */
  }
}

@media (max-width: 450px) {
  #main-navbar .search-bar input[name="price_max"],
  #main-navbar .search-bar input[placeholder*="Max"],
  #main-navbar .search-bar input[type="number"]:last-of-type {
    display: none !important;
  }

  #main-navbar .search-bar input[type="search"] {
    width: 100% !important;
    max-width: 380px !important; /* ⬅ maximized */
  }

  #main-navbar .search-bar {
    max-width: 360px !important;
  }
}











/* 📱 Tighten spacing between nav links in collapsed menu */
@media (max-width: 768px) {
  #navbarNav .navbar-nav {
    gap: 0.1rem !important; /* reduced further */
    line-height: 1.1 !important; /* compress vertical spacing slightly */
  }
}

@media (max-width: 450px) {
  #navbarNav .navbar-nav {
    gap: 0rem !important; /* nearly stacked */
    line-height: 1 !important; /* make it tighter on ultra-small screens */
  }
}