/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');

/* CSS Variables */
:root {
    --primary-gold: #BFA181; /* Soft Gold */
    --secondary-dark: #2c3e50; /* Deep Charcoal/Blue */
    --accent-light: #f8f5f2; /* Very Light Beige/Off-white */
    --text-dark: #333;
    --text-light: #fff;
    --border-light: #e0e0e0;
    --bs-primary: var(--primary-gold); /* Override bootstrap primary */
    --bs-secondary: var(--secondary-dark); /* Override bootstrap secondary */
}

/* Global Styles */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background-color: #fff;
    line-height: 1.7;
    font-weight: 300; /* Lighter default weight */
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-3, .display-4 {
    font-family: 'Playfair Display', serif;
    color: var(--secondary-dark);
    font-weight: 700;
}

/* Links */
a {
    color: var(--primary-gold);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #a98b6c; /* Darker gold */
}

/* Navbar Styles */
.navbar {
    padding: 0.7rem 0;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid transparent; /* Prepare for scrolled border */
}
.navbar.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border-light);
}

.navbar-brand span.fw-bold {
    color: var(--primary-gold);
}
.navbar-brand {
    color: var(--secondary-dark);
    font-size: 1.8rem; /* Slightly larger */
}

.nav-link {
    color: var(--secondary-dark);
    transition: color 0.3s ease;
    font-weight: 400;
    margin: 0 0.6rem;
    padding: 0.5rem 0; /* Adjust padding */
    position: relative;
}
/* Underline effect on hover/active */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-gold);
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 80%; /* Adjust width of underline */
}
.nav-link:hover, .nav-link.active {
    color: var(--primary-gold);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Softer gradient overlay */
    background: linear-gradient(45deg, rgba(44, 62, 80, 0.65), rgba(0, 0, 0, 0.35));
    z-index: 1;
}

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

.hero-section h1, .hero-section p {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    color: var(--text-light); /* Ensure text is white */
}
.hero-section h1 {
    font-weight: 700; /* Bolder hero heading */
}
.hero-section p {
    font-size: 1.1rem; /* Slightly larger lead text */
    font-weight: 300;
}
/* Animation for Hero Text */
.hero-text-animated h1 {
    animation: fadeInUp 1s ease-out 0.2s both;
}
.hero-text-animated p {
    animation: fadeInUp 1s ease-out 0.5s both;
}
.hero-text-animated .btn {
    animation: fadeInUp 1s ease-out 0.8s both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Card Base Styles */
.card {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-light);
    border-radius: 10px; /* Soft rounded corners */
    overflow: hidden;
    background-color: #fff;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(44, 62, 80, 0.1), 0 5px 10px rgba(44, 62, 80, 0.08);
}

/* Card Image Wrapper */
.image-wrapper {
    overflow: hidden;
    position: relative;
    background-color: var(--accent-light);
}

.card-img-top {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure images cover the area */
}

.card:hover .card-img-top {
    transform: scale(1.07);
    filter: brightness(1.03);
}

/* Category Card Specific */
.category-card {
    text-align: center;
    border-radius: 10px;
    padding: 0;
    max-width: 180px;
}
.category-card .card-body {
    padding: 1rem 0.5rem;
}
.category-card:hover {
    background: #fff; /* Keep background white */
}
.category-image-wrapper {
    height: 150px; /* Adjust as needed */
    display: flex; /* Center icon fallback */
    align-items: center;
    justify-content: center;
}
.category-card .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-card h5 {
    color: var(--secondary-dark);
    transition: color 0.3s ease;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Use Poppins for category name */
    font-weight: 600;
}
.category-card:hover h5 {
     color: var(--primary-gold);
}
.category-card .card-text {
    font-size: 0.9rem;
    color: #6c757d; /* Muted text */
}

/* Product Card Specific */
.product-card {
   position: relative;
   text-align: center; /* Center align product content */
}
.product-card .image-wrapper { /* Define height for product images */
    height: 250px; /* Adjust as needed */
}
.product-card .card-body {
    padding: 1rem;
}
.product-card h5 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--secondary-dark);
}
.product-card h5 a {
    color: inherit; /* Inherit color from h5 */
    text-decoration: none;
}
.product-card h5 a:hover {
    color: var(--primary-gold);
}

/* Price Tag */
.price {
    font-size: 1.25rem;
    color: var(--primary-gold);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem; /* Add space below price */
}

/* Buttons */
.btn {
    border-radius: 50px;
    padding: 0.7rem 2rem;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    border: 1px solid transparent;
    text-transform: uppercase; /* Optional: Uppercase buttons */
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--primary-gold);
    border-color: var(--primary-gold);
    color: var(--text-light);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #a98b6c;
    border-color: #a98b6c;
    color: var(--text-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(191, 161, 129, 0.3);
}

.btn-outline-primary {
    color: var(--primary-gold);
    border-color: var(--primary-gold);
    background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary-gold);
    color: var(--text-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(191, 161, 129, 0.2);
}

/* Smaller Button Variant */
.btn-sm {
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
}

/* Form Controls */
.form-control {
    border-radius: 8px; /* Match card radius */
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}
.form-control:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 0.25rem rgba(191, 161, 129, 0.25); /* Use gold color */
}

/* Section Styling */
section {
    padding: 5rem 0; /* Consistent vertical padding */
}
.bg-light {
    background-color: var(--accent-light) !important; /* Use accent light */
}
.section-title { /* Optional helper class for section headings */
    margin-bottom: 3rem; /* More space after title */
    font-weight: 700;
}


/* Footer */
footer {
    background-color: var(--secondary-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 4rem 0 2rem;
    font-size: 0.95rem;
}
footer h5 {
    color: var(--text-light);
    font-family: 'Playfair Display', serif;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}
footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: var(--primary-gold);
}
footer .list-unstyled li {
    margin-bottom: 0.6rem;
}
footer .list-unstyled i {
    color: var(--primary-gold);
    margin-right: 0.75rem; /* Space after icon */
    width: 20px; /* Align icons */
    text-align: center;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}
.breadcrumb-item a {
    color: var(--primary-gold);
}
.breadcrumb-item.active {
     color: #6c757d;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #adb5bd;
}

/* Alert Messages */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.alert-primary { background-color: var(--accent-light); color: var(--secondary-dark); border-left: 5px solid var(--primary-gold); }
.alert-success { border-left: 5px solid #198754; }
.alert-danger { border-left: 5px solid #dc3545; }
.alert-warning { border-left: 5px solid #ffc107; }
.alert-info { border-left: 5px solid #0dcaf0; }


/* Video Card (Keeping existing 9:16 structure) */
.video-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(44, 62, 80, 0.1), 0 5px 10px rgba(44, 62, 80, 0.08);
}
.video-wrapper-9-16 {
    position: relative;
    width: 100%;
    padding-top: 177.78%; /* 9:16 Aspect Ratio */
    overflow: hidden;
    background-color: #000;
    border-radius: 10px 10px 0 0; /* Match card radius */
}
.video-wrapper-9-16 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-card .card-body {
    padding: 1rem;
}
.video-card h5 {
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}


/* Loading Animation Placeholder (Keep if used) */
.loading { position: relative; }
.loading::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.8); display: flex; justify-content: center;
    align-items: center; z-index: 1000;
    /* Add a spinner or text if needed */
}


/* Responsive Design */

/* Tablet */
@media (max-width: 992px) {
    .hero-section {
        padding: 6rem 0;
        min-height: 75vh;
    }
    .hero-section h1 {
        font-size: 3rem; /* Adjust heading size */
    }
    .product-card .image-wrapper{
        height: 220px;
    }
    .category-image-wrapper {
        height: 120px;
    }
    section {
        padding: 4rem 0;
    }
}

/* Mobile Large & Tablet Portrait */
@media (max-width: 768px) {
    body { line-height: 1.6; }
    h1, .display-3 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.6rem; }

    .hero-section {
        text-align: center;
        padding: 5rem 0;
        min-height: 70vh;
    }
    .hero-section .col-lg-8 { width: 100%; }
    .hero-section p { font-size: 1rem; }

    .navbar-nav { margin-top: 1rem; text-align: center; }
    .nav-link { padding: 0.8rem 0; margin: 0; }
    .nav-link::after { bottom: 5px; /* Adjust underline position */ }

    .btn { padding: 0.6rem 1.6rem; font-size: 0.85rem; }
    .btn-lg { padding: 0.8rem 2rem; font-size: 1rem; }

    /* Stack About Us image */
    .about-us-section .text-md-end {
        text-align: center !important;
        margin-top: 2.5rem;
    }
    .about-us-section img { max-height: 200px; }

    /* 2 columns for products/categories */
    .featured-products .col-md-3,
    .categories-section .col-lg-2 {
        width: 50%;
        padding-left: 0.75rem; padding-right: 0.75rem; /* Adjust gutter */
    }

    /* Stack video columns */
     .featured-videos .col-sm-6 {
         width: 75%; /* Allow videos to be slightly larger than 50% */
         margin-left: auto; margin-right: auto;
     }
      .video-card { max-width: 100%; }


    /* Responsive Table for Metal Prices */
    .metal-prices-table table { width: 100%; }
    .metal-prices-table thead { display: none; } /* Hide header */
    .metal-prices-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        padding: 0.5rem;
    }
     .metal-prices-table td {
        display: flex; /* Use flex for alignment */
        justify-content: space-between; /* Space between label and value */
        align-items: center;
        text-align: right;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px dashed var(--border-light);
    }
     .metal-prices-table td:last-child { border-bottom: none; }
     .metal-prices-table td::before {
        content: attr(data-label); /* Use data-label */
        font-weight: 600;
        text-align: left;
        padding-right: 1rem;
        color: var(--secondary-dark);
     }

     /* Adjust Special Offer section */
     .special-offer-section .row { flex-direction: column-reverse; } /* Image first on mobile */
     .special-offer-section .col-md-6 { width: 100%; }
     .special-offer-section img { margin-top: 2rem; }
}

/* Mobile Small */
@media (max-width: 576px) {
     h1, .display-3 { font-size: 2.2rem; }
     h2 { font-size: 1.8rem; }
     h3 { font-size: 1.4rem; }

    .hero-section {
        padding: 4rem 0;
        min-height: 60vh;
    }

    /* 1 column for products/categories/videos */
    .featured-products .col-md-3,
    .categories-section .col-lg-3,
    .featured-videos .col-sm-6 {
        width: 100%;
    }
    .video-card { max-width: 85%; margin-left: auto; margin-right: auto; }
    .product-card .image-wrapper{
        height: 250px; /* Can be larger in single column */
    }
    .category-image-wrapper {
        height: 120px;
    }

    footer .col-md-4 {
        margin-bottom: 2.5rem;
        text-align: center;
    }
    footer .col-md-4:last-child { margin-bottom: 0; }
    footer .list-unstyled i { margin-right: 0.5rem; }

    section { padding: 3rem 0; }
    .section-title { margin-bottom: 2rem; }

    .navbar-brand { font-size: 1.4rem; }
    .navbar-toggler { padding: 0.2rem 0.5rem; font-size: 1rem; }
}

/* Hero Carousel Slide Styling */
.hero-slide {
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 87vh; /* Ensure the slide itself has height */
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center the inner container */
}


/* Ensure hero text is above the overlay */
.hero-slide .container {
    position: relative;
    z-index: 2;
}

/* Metal Prices Section Styling */
.metal-prices-table td {
    font-size: 1.2rem; /* Increased font size */
    color: #b8860b; /* DarkGoldenrod color */
    font-weight: 500; /* Slightly bolder */
}

/* Ensure table header remains readable */
.metal-prices-table thead th {
     font-size: 1.2rem; /* Match td size or adjust */
     /* Header color is already set in the template, but you could override here if needed */
}

/* Optional: Style for the metal type column if needed */
.metal-prices-table td[data-label="Metal Type"] {
    color: #333; /* Keep metal type color standard or adjust */
    font-weight: normal;
}
/* Adjust Hero Carousel Control Positions */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 8%; /* Adjust width if needed */
    height: 80%; /* Full height */
    /* Ensure vertical centering */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Smooth fade effect */
}

#heroCarousel .carousel-control-prev {
    left: -2%; /* Push outside to the left, adjust value as needed */
}

#heroCarousel .carousel-control-next {
    right: -2%; /* Push outside to the right, adjust value as needed */
}

/* Show Hero Carousel Controls on Carousel Hover */
#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next {
    opacity: 1; /* Make controls visible on hover */
}