/* * Mobile Responsive Styles (Screens up to 991.98px wide)
 * This targets tablets and smartphones to optimize layout, 
 * focusing on a smaller logo and a full-width, touch-friendly menu button.
 */

 /* nav na-bar */
@media (max-width: 991.98px) {
    /* Adjust logo size on mobile/tablet for better screen fit */
    #logo {
        width: 60px !important;
        height: 60px !important;
    }

    /* Slightly reduce the font size of the brand name */
    .navbar-brand {
        font-size: 1.25rem !important;
    }

    /* Add top padding to the navbar links container if it were to be used in mobile */
    .navbar-nav {
        padding-top: 0.5rem;
    }

    /* Ensure the main collapse container takes full width when active */
    #navbar {
        width: 100% !important;
    }

    /* Ensure the dropdown container element takes full width and centers content */
    .drop {
        width: 100% !important;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* Make the Menu button full width on mobile for easy tapping */
    #Menu {
        width: 100% !important; 
    }
}

/* slideshow */
 .carousel-item img {
            /* Override the inline 400px height with object-fit for better scaling */
            width: 100%;
            height: 250px; /* Default height for mobile/small screens */
            object-fit: cover; /* Ensures the image covers the container without distortion */
            transition: height 0.3s ease; /* Smooth transition for resizing */
            border-radius: 0.75rem; /* Tailwind-like rounded corners */
        }

        /* Medium devices (tablets, 768px and up) */
        @media (min-width: 768px) {
            .carousel-item img {
                height: 350px;
            }
        }

        /* Large devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .carousel-item img {
                /* Set the desired height for large screens (e.g., the original 400px) */
                height: 450px;
            }
        }

/* nav featured section */
/* Media Query for Desktop/Tablet (to maintain the original desired large size) */
@media (min-width: 768px) {
    #images {
        /* On medium devices and larger, set the original fixed dimensions */
        width: 280px; 
        height: 200px;
        /* Re-center the image in the fixed-width column */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Heading 4: Centered for a cleaner look when columns stack on mobile */
h4 {
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 12px;
}

/* Product Column Content Alignment: Centers items when stacked on mobile */
/* Targeting the product container (col-md-3) */
.col-md-3 {
    text-align: center;
    padding: 15px; /* Add padding inside the column for mobile spacing */
    margin-bottom: 25px !important; /* Space between stacked products on mobile */
}


/* Button Styling: Optimized for touch targets */
.btn-success {
    /* Original custom button styles, combined and cleaned up */
    background-color: black !important;
    border-color: #aea7a3 !important;
    color: whitesmoke;
    letter-spacing: 1px;
    
    /* Crucial mobile optimization: Make button full width for easy tapping */
    width: 100%;
    padding: 12px 15px; /* Increase padding for better touch target */
    border-radius: 8px; /* Slightly rounded corners */
}

/* about header */
@media (max-width: 991.98px) {
            
            /* Smaller logo on mobile for better space management */
            #logo {
                width: 60px;
                height: 60px;
            }

            /* Adjust container padding if necessary, although Bootstrap handles this well */
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            /* Ensure the navbar content (Logo, Brand, Dropdown) flows nicely */
            .navbar-nav {
                width: 100%; /* Full width for collapsed menu items */
                text-align: center;
                margin-top: 0.5rem;
            }

            /* Fix dropdown positioning when navbar collapses */
            .dropdown-menu {
                /* When the dropdown is inline in the collapsed menu, ensure it's full width */
                width: 100%;
                text-align: center;
                margin-top: 0.5rem;
            }

            /* Adjust spacing between the Brand/Logo and the Menu button when they are side-by-side */
            .navbar > .container > .navbar-brand {
                margin-right: auto; /* Push the brand to the left if needed */
            }
        }

        /* Additional style to make the "About Us" link visible on mobile when using Bootstrap 5 */
        .navbar-brand {
            /* If you want the "About Us" link to be near the logo */
            margin-right: 1rem;
        }