.app-header .navbar-nav {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
    width: 100%; /* Ensures the items span across the container */
    margin: 0 auto; /* Centers the content within the screen */
}

/* Color */
.azureish-white {
    background-color: var(--azureish-white);
}

.eerie-black {
    background-color: var(--eerie-black);
}

.brandeis-blue {
    background-color: var(--brandeis-blue);
}

.light-dark-gray {
    background-color: var(--light-dark-gray);
}

.golden-white {
    background-color: var(--golden-white);
}

.granite-gray {
    background-color: var(--granite-gray);
}

.quick-links {
    color: var(--granite-gray);
}

.stretch-center-img {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    width: 100%; /* Stretches the image to fit the container */
    max-width: 100%; /* Ensures it doesn't exceed the container's width */
    height: auto; /* Maintains aspect ratio while scaling */
}

/* Custom Margin */
/* Top*/
.golden-margin {
    margin-top: 20px;
}

.golden-margin-large {
    margin-top: 60px;
}

.golden-margin-top {
    margin-top: 20px;
}

.golden-margin-top-large {
    margin-top: 60px;
}

/* Bottom*/
.golden-margin {
    margin-bottom: 20px;
}

.golden-margin-large {
    margin-bottom: 60px;
}

.golden-margin-bottom {
    margin-bottom: 20px;
}

.golden-margin-bottom-large {
    margin-bottom: 60px;
}

/*Product Card: */
.product-name {
    /*font-weight: bold;*/
    /*margin: 5px 0;*/
}

.brand-name {
    color: #757575;
    /*margin: 8px 0;*/
}

.discount {
    /*color: #d32f2f;*/
    font-weight: bold;
}

.logo {
    margin: 10px;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* Carousel */
.carousel-golden-container {
    position: relative;
    width: 100%;
}

.carousel-golden {
    display: flex;
    overflow-x: hidden; /* Hides the scrollbar */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    position: relative;
    -ms-overflow-style: none; /* Internet Explorer and Edge */
}

/* Hide Scrollbar */
.carousel-golden::-webkit-scrollbar {
    display: none; /* Chrome, Safari, WebKit */
}

/* Carousel Item */
.carousel-golden-item {
    min-width: 250px;
    margin: 10px; /* Space around items */
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    scroll-snap-align: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-golden-item img {
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.carousel-golden-item h3 {
    margin: 10px 0;
}

.carousel-golden-item p {
    color: #777; /* Text color */
}

.carousel-golden-item button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

.carousel-golden-item button:hover {
    background-color: #0056b3;
}

/* Navigation Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.arrow:hover {
    background-color: #ffffff;
}

.arrow-left {
    left: -20px; /* Adjust as needed to position it slightly inside the carousel */
}

.arrow-right {
    right: -20px; /* Adjust as needed to position it slightly inside the carousel */
}

/* Footer */
.footer-logo {
    background-color: #2D66F8;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-links a {
    display: block;
    color: black;
    text-decoration: none;
    margin-bottom: 5px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.brandeis-blue-table th {
    background-color: var(--brandeis-blue);
    color: #ffffff;
}

.social-icons a {
    font-size: 20px;
    margin: 0 8px;
    color: black;
}

.social-icons a:hover {
    color: #2D66F8;
}

.vertical-spacer {
    height: 80px; /* Adds 80px vertical space */
}

.footer-align-start {
    display: flex;
    flex-direction: row; /* Aligns elements side-by-side */
    align-items: center; /* Aligns items vertically */
    justify-content: flex-start; /* Ensures items are aligned to the left */
    gap: 10px; /* Adds space between elements */
}

.footer-align-end {
    display: flex;
    flex-direction: row; /* Aligns elements side-by-side */
    align-items: center; /* Aligns items vertically */
    justify-content: flex-end; /* Ensures items are aligned to the right */
    gap: 10px; /* Adds space between elements */
}

/* Optional: Adjust spacing and scaling for the icons */
.social-icons a {
    font-size: 20px;
    margin: 0 8px;
    color: black;
}

.social-icons a:hover {
    color: #2D66F8;
}

/* Custom Menu Items */

.dropdown-menu {
    flex-wrap: wrap;
    /*width: 600px;*/
    width: 100%;
    background-color: #f8f8f8;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
}

.dropdown-item {
    color: #555;
}

.dropdown-item:hover {
    background-color: #ddd; /* Slight hover effect */
    color: #333;
}

.column-title {
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 10px;
}

/*nav.navbar {
    background-color: #f8f8f8; !* Match menu background *!
}*/

.nav-link {
    color: #333; /* Navbar link color */
}

.nav-link:hover {
    color: #555; /* Hover effect for navbar links */
}


/* Hero */
.hero-wrap {
    position: relative;
}

.hero-wrap .hero-mask, .hero-wrap .hero-bg, .hero-wrap .hero-bg-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.hero-wrap .hero-mask {
    z-index: 1;
}

.hero-wrap .hero-content {
    position: relative;
    z-index: 2;
}

.hero-wrap .hero-bg-slideshow {
    z-index: 0;
}

.hero-wrap .hero-bg {
    z-index: 0;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    transition: background-image 300ms ease-in 200ms;
}

.hero-wrap .hero-bg-slideshow .hero-bg {
    background-attachment: inherit;
}

.hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage-outer, .hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage, .hero-wrap .hero-bg-slideshow.owl-carousel .owl-item {
    height: 100%;
}


/* Opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 0.1;
}

.opacity-2 {
    opacity: 0.2;
}

.opacity-3 {
    opacity: 0.3;
}

.opacity-4 {
    opacity: 0.4;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-6 {
    opacity: 0.6;
}

.opacity-7 {
    opacity: 0.7;
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-9 {
    opacity: 0.9;
}

.opacity-10 {
    opacity: 1;
}

.sidebar a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
}

.sidebar a:hover {
    background-color: #e0e0e0;
}

.main-content {
    padding: 20px;
}

.product-placeholder {
    background-color: var(--light-dark-gray);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: #6c757d;*/
}

.product-card {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

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


.filter-section {
    border-right: 1px solid #ddd;
}


.custom-accordion-button {
    background-color: transparent !important; /* Removes background color */
    border: none !important; /* Removes border */
    box-shadow: none !important; /* Removes any box-shadow */
    color: inherit; /* Inherits text color from parent */
}

.item-divider {
    border: none; /* Remove default border */
    border-top: 1px solid #ccc; /* Add a subtle line */
    margin: 5px 0; /* Adjust spacing above and below */
    width: 100%; /* Ensures it stretches fully across the container */
}

/* Products */
.product-image {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    overflow: hidden;
}

.product-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.small-image {
    height: 54px;
    /*width: 133px;*/
    width: 100%; /* Ensures the image fills its container */
    cursor: pointer;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.small-image:hover {
    border-color: #007bff; /* Highlight on hover */
}

.price {
    font-weight: bold;
    font-size: 1.5rem;
    color: #000000;
}

.original-price {
    text-decoration: line-through;
    color: black;
}

.discount-rate {
    color: red;
}

.navbar-nav .nav-item a.nav-link.active {
    background-color: var(--brandeis-blue);
    border-radius: 5px;
    color: white !important;
}

.navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.icon-placeholder {
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 50%;
    margin-bottom: 10px;
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers items horizontally */
}

.section-card {
    background: var(--azureish-white);
    padding: 20px;
    border-radius: 8px;
    height: 100%;
}

.image-left {
    width: 638px;
    height: 536px;
}

.tabs a {
    margin: 0 15px;
    padding: 10px 20px;
    border-bottom: 3px solid transparent;
    text-decoration: none;
    color: black;
}

.tabs a.active {
    border-bottom: 3px solid #000;
}

.contact-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.contact-form .btn {
    background-color: #000;
    color: #fff;
    width: 100%;
}

/*Rounded Buttons */
/* Custom CSS to Make Buttons Rounded */
.rounded-button {
    border-radius: 50px !important; /* Adjust the radius to make it more or less rounded */
}

.btn-white {
    background-color: #ffffff; /* White background */
    color: #000000 !important; /* Black text */
    border: 1px solid #000000; /* Optional: Black border for better contrast */
}

/* Custom Button Styling */
.btn-white {
    background-color: #ffffff; /* White background */
    color: #000000 !important; /* Black text */
    border: 2px solid #000000; /* Thicker border for emphasis */
}

/* Add Spacing */
.custom-spacing {
    padding: 10px 20px; /* Adds vertical (top/bottom) and horizontal (left/right) spacing inside the button */
    margin: 0 15px; /* Adds space on the left and right of the button itself */
}


/* Custom Button Styling */
.custom-button {
    width: 217px; /* Button width */
    height: 56px; /* Button height */
    border-radius: 100px; /* Fully rounded edges */
    padding: 18px 56px; /* Vertical and horizontal spacing */
    background-color: #ffffff; /* White background */
    font-size: 16px; /* Adjust text size for better readability */
    display: inline-flex; /* For gap property */
    align-items: center; /* Align text or content vertically */
    justify-content: center; /* Center content horizontally */
    gap: 10px; /* Space between elements inside the button */
    cursor: pointer; /* Pointer cursor for clickable interaction */
}

.custom-dark-button {
    border-radius: 100px; /* Fully rounded edges */
    padding: 18px 56px; /* Vertical and horizontal spacing */
    background-color: #000000; /* White background */
    font-size: 16px; /* Adjust text size for better readability */
    display: inline-flex; /* For gap property */
    align-items: center; /* Align text or content vertically */
    justify-content: center; /* Center content horizontally */
    gap: 10px; /* Space between elements inside the button */
    cursor: pointer; /* Pointer cursor for clickable interaction */
}

/* Hover Effect */
.custom-button:hover {
    background-color: #f0f0f0; /* Slight gray background on hover */
    color: #000000; /* Retain black text */
}


/* Background Image Styles */
/* Shared Background Styles */
.section-golden {
    height: 308px;
    width: 100%; /* Ensures the section spans the full width of its container */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific Background Images */
.section-golden-1 {
    background-image: url('../images/sections/1.webp');
}

.section-golden-2 {
    background-image: url('../images/sections/2.webp');
}

.section-golden-3 {
    background-image: url('../images/sections/3.webp');
}

.section-golden-4 {
    background-image: url('../images/sections/4.webp');
}

.section-golden-5 {
    background-image: url('../images/sections/5.webp');
}

.section-golden-6 {
    background-image: url('../images/sections/6.webp');
}

.section-golden-7 {
    background-image: url('../images/sections/7.webp');
}

.section-golden-8 {
    background-image: url('../images/sections/8.webp');
}

.section-golden-9 {
    background-image: url('../images/sections/9.webp');
}

/* Account Info */
.account-info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 50%;
}

.account-info h2 {
    text-align: center;
    margin-bottom: 20px;
}

.account-info .form-group {
    margin-bottom: 15px;
}

.account-info .btn {
    width: 100%;
}

.delete-account {
    text-align: center;
    margin-top: 20px;
}

.golden-card-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-info-label {
    color: var(--granite-gray);
}

/* Admin Pages Styles ----------------------------------------------------------------------------------------------- */
.sidebar-admin {
    width: 110px;
    position: fixed;
    height: 100%;
    background-color: var(--eerie-black);
    padding-top: 20px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.sidebar-admin a {
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    color: #000;
    display: block;
}

.main-content-admin {
    margin-left: 100px;
    padding: 20px;
}


header.dashboard-header {
    padding: 20px 0;
    border-bottom: 1px solid #dee2e6;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.user-profile {
    font-size: 1.5rem;
    color: #333;
}

.btn-view {
    font-size: 0.875rem;
}


.admin-container {
    margin-top: 20px;
}

.admin-card {
    margin-bottom: 20px;
}

.btn-approve {
    background-color: #28a745;
    color: white;
}

.btn-reject {
    background-color: #dc3545;
    color: white;
}

.border-dashed {
    border-style: dashed !important;
}


.blue-button {
    background-color: var(--brandeis-blue);
}

.card-blue,
.bg-dark,
.text-bg-dark {
    --lte-card-variant-bg: var(--brandeis-blue);
    --lte-card-variant-bg-rgb: 33, 37, 41;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255, 255, 255;
}


/* Business Sign Up */
/* Global Styles */


.wizard {
    max-width: 500px;
    background: #fff;
    margin: 40px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

/* Progress Indicator */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wizard-progress div {
    flex: 1;
    padding: 10px;
    border-radius: 4px;
    background: #e0e0e0;
    text-align: center;
    font-size: 0.9rem;
    margin: 0 5px;
    transition: background 0.3s;
}

.wizard-progress .active {
    background: var(--brandeis-blue);
    color: #fff;
}

/* Form Step Styles */
.step {
    display: none;
}

.step.active {
    display: block;
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #555;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Navigation Buttons */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.nav-buttons button {
    flex-basis: 48%;
    padding: 10px;
    border: none;
    background: var(--brandeis-blue);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.nav-buttons button:hover {
    background: var(--brandeis-blue);
}

/* Agreement note style */
.agreement-note {
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    color: #777;
}

/* Validation */
input.is-invalid, select.is-invalid {
    border: 2px solid #dc3545;
    background-color: #f8d7da;
}

.form-group input.is-invalid::placeholder {
    color: #dc3545;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.edit-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
}

.dashed-box {
    border: 2px dashed #ccc;
    padding: 1rem;
    border-radius: 8px;
}

.upload-btn {
    background-color: black;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
}

.save-btn {
    background-color: black;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

.one-line-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-upload {
    background-color: #ccc;
    border: none;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    border-radius: 10px;
    cursor: pointer;
}

.card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#mediaPreviewWrapper .thumbnail {
    width: 80px;
    height: 100px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f8f9fa;
}

#mediaPreviewWrapper .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#mediaPreviewWrapper .thumbnail .remove-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 50%;
    cursor: pointer;
}

.table-container {
    margin-top: 20px;
}
.pagination {
    margin-top: 20px;
}


/* Documents */
h1, h2, h3 {
    color: var(--eerie-black);
}
.confidential {
    font-size: 12px;
    color: #666;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-top: 30px;
}
/* Documents */


/* Advert Ribbons*/
 .product-card {
     position: relative;
     overflow: hidden;
 }

.status-ribbon {
    position: absolute;
    top: 12px;
    right: -35px;
    width: 130px;
    padding: 6px 0;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    z-index: 10;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-ribbon.active {
    background-color: #28a745;
}

/* Red background for Inactive status */
.status-ribbon.inactive {
    background-color: #dc3545;
}

/* Advertise On Save All Day */
.benefit-card {
    background-color: #f0f6ff;
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.steps-row {
    position: relative;
}

@media (min-width: 768px) {
    .steps-row::before {
        content: '';
        position: absolute;
        top: 45px;
        left: 15%;
        right: 15%;
        height: 4px;
        background-color: #eaf1ff;
        z-index: 0;
    }
}

.step-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #eaf1ff;
    color: #4a86fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 auto;
    position: relative; /* Needed for z-index to work */
    z-index: 1; /* Ensures the circle is on top of the line */
}

.text-brandeis-blue {
    color: var(--brandeis-blue);
}

/* Info Cards */
.bg-women {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-women-rgb), var(--bs-bg-opacity)) !important;
}

.bg-men {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-men-rgb), var(--bs-bg-opacity)) !important;
}

.bg-kids {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-kids-rgb), var(--bs-bg-opacity)) !important;
}

.bg-home-living {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-home-living-rgb), var(--bs-bg-opacity)) !important;
}

.bg-beauty {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-beauty-rgb), var(--bs-bg-opacity)) !important;
}

.bg-sport {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-sport-rgb), var(--bs-bg-opacity)) !important;
}

.bg-tech {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tech-rgb), var(--bs-bg-opacity)) !important;
}

.bg-food-drink {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-food-drink-rgb), var(--bs-bg-opacity)) !important;
}

.bg-vehicles {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-vehicles-rgb), var(--bs-bg-opacity)) !important;
}

.bg-other {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-other-rgb), var(--bs-bg-opacity)) !important;
}

.float-right {
    float: right !important;
}