/* Carousel Styling */
#imageCarousel {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.carousel-item {
    transition: transform 0.8s ease-in-out; /* Smooth transition for item movement */
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: opacity 0.8s ease-in-out; /* Smooth fade effect */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white icons */
    border-radius: 50%;
    padding: 12px; /* Increased icon size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for controls */
}

.carousel-indicators [data-bs-target] {
    background-color: #ff6f61; /* Coral-colored indicators */
    opacity: 0.5;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators .active {
    opacity: 1; /* Fully opaque for active indicator */
}

/* General Styling */
body {
    font-family: 'Poppins', sans-serif; /* Lively font */
    background-color: #f5f5f5; /* Off-white background */
    color: #333; /* Dark gray text */
}

/* Text Shadows */
.text-shadow-sm {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.text-shadow-md {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.text-shadow-lg {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* Navbar Styling */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

    .navbar-brand .svg-inline--fa.fa-store {
        margin-left: 5px;
    }

.navbar-nav .nav-link {
    color: #333;
    font-weight: 500;
    transition: color 0.2s ease; /* Smooth hover transition */
}

    .navbar-nav .nav-link:hover {
        color: #ff6f61; /* Coral color on hover */
    }

/* Showcase Section */
.showcase-section {
    padding: 6rem 0;
    background-color: #ff6f61;
    color: #fff;
    text-align: center;
}

.showcase-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.showcase-subheading {
    font-size: 1.25rem;
    margin-bottom: 3rem;
}

/* Product Cards Styling */
.card {
    border: none;
    border-radius: 15px; /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
    background-color: #fff;
}

    .card:hover {
        /*transform: translateY(-10px);*/
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    }

.card-img-top {
    height: 150px;
    object-fit: cover;
}

.card-body {
    padding: 2rem;
}

.card-title {
    font-weight: 600;
    color: #333;
}

.card-text {
    color: #6c757d;
}

.btn-primary {
    background-color: #ff6f61;
    border-color: #ff6f61;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #e74c3c;
        border-color: #c0392b;
    }

/* Categories Styling */
#categoryFlexGrid .card {
    height: 4rem;
}

#categoryFlexGrid .card-body {
    padding: 0 15px;
}

    #categoryFlexGrid .card-body h5 {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Placeholder Images */
.store-card-img,
.product-card-img {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M547.6 103.8L490.3 13.1C485.2 5 476.1 0 466.4 0L109.6 0C99.9 0 90.8 5 85.7 13.1L28.3 103.8c-29.6 46.8-3.4 111.9 51.9 119.4c4 .5 8.1 .8 12.1 .8c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.1 0 49.3-11.4 65.2-29c15.9 17.6 39.1 29 65.2 29c26.2 0 49.3-11.4 65.2-29c16 17.6 39.1 29 65.2 29c4.1 0 8.1-.3 12.1-.8c55.5-7.4 81.8-72.5 52.1-119.4zM499.7 254.9c0 0 0 0-.1 0c-5.3 .7-10.7 1.1-16.2 1.1c-12.4 0-24.3-1.9-35.4-5.3L448 384l-320 0 0-133.4c-11.2 3.5-23.2 5.4-35.6 5.4c-5.5 0-11-.4-16.3-1.1l-.1 0c-4.1-.6-8.1-1.3-12-2.3L64 384l0 64c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-64 0-131.4c-4 1-8 1.8-12.3 2.3z"/></svg>');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
    background-color: lightgray;
    background-blend-mode: overlay;
}

/* Footer Styling */
footer {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
}

    .footer a {
        color: #ccc;
        transition: color 0.2s ease;
        text-decoration: none;
    }

        .footer a:hover {
            color: #ff6f61;
            text-decoration: underline;
        }

    .footer .lead {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .footer .btn-secondary {
        background-color: #555;
        border: none;
        margin: 0 5px;
    }

        .footer .btn-secondary:hover {
            background-color: #ff6f61;
        }

div[products] ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    div[products] ul li::marker {
        content: "";
    }

    div[products] ul li a {
        color: rgba(33, 37, 41, 0.60);
        text-decoration: none;
    }

        div[products] ul li a:hover {
            color: rgba(33, 37, 41, 0.75);
            text-decoration: underline;
        }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .footer .row {
        flex-direction: column;
    }

    .footer .text-center, .footer .text-end {
        text-align: center !important;
    }

    .footer p, .footer a {
        font-size: 0.875rem;
    }

    .footer .btn-group {
        flex-wrap: wrap;
    }

    .footer .btn-secondary {
        margin: 5px 0;
    }

    #footerLogo {
        margin-bottom: 0;
    }
}

/* Card Hover Effects */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
}

    .card:hover {
        /*transform: scale(1.02);*/
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

.card-img-top {
    max-height: 200px;
    object-fit: cover;
}