html,
    body {
        height: 100%;
    }

    body {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1;
    }

    #searchForm {
        max-width: 250px;
        border-radius: 999px;

    }

    #searchIcon {
        cursor: pointer;
        border-radius: 0 999px 999px 0;
        background-color: #e9ecef;
    }

    #searchForm:focus-within {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    #searchIcon:hover {
        background-color: #6c757d;
    }

    #searchBar {
        background-color: #e9ecef;
        border-radius: 999px 0 0 999px;
    }

    .table-wrap {
        display: flex;
        justify-content: center;
    }

    #order {
        margin-top: 100px;
    }

    #order ul li {
        margin-top: 10px;
    }

    #search,
    #orderList th,
    #orderList td,
    #userList th,
    #userList td {
        padding: 1rem;
        white-space: nowrap;
        border: 1px solid black;
    }

    #orderList,
    #userList,
    #dashboard {
        width: 100%;
    }

    #adminDashboard {
        margin-top: 110px;
    }

    #home,
    #download-root {
        padding-top: 45px;
    }

    #cart {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 50vh;
    }

    table tfoot tr:last-child td {
        border-bottom: none;
        padding-top: 2rem;
    }

    #registerForm,
    #signinForm,
    #updateForm,
    #about {
        height: 70vh;
    }

    #imgGrid {
        height: auto;
        width: auto;
        /* background-color: black; */
    }

    .smdiv,
    #addImg {
        height: 100px;
        width: 100px;
    }

    .delImg,
    #addImg {
        cursor: pointer;
    }

    #faq {
        margin-top: 30%;
    }


    #registerCard,
    #signinCard {
        width: 350px;
    }

    .turnstile-wrapper {
        min-height: 80px;
        min-width: auto;
    }

    /* force the carousel itself to have the same height as the slides */
    #carouselExampleFade {
        width: min(700px, 100%);
        height: clamp(250px, 60vw, 500px);
        position: relative;

    }

    /* make inner + items inherit that height */
    #carouselExampleFade .carousel-inner,
    #carouselExampleFade .carousel-item {
        height: 100%;
    }

    /* make images fill the 500px box */
    #carouselExampleFade .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .navbar-brand-img {
        height: 40px;
        /* match navbar height */
        width: auto;
        object-fit: contain;
    }

    @media (max-width: 768px) {

        /* Center the whole column vertically */
        main {
            justify-content: center;

        }

        #about {
            height: 15vh;
        }

        #faq {
            margin-top: 0;
            padding-top: 0;
        }

        /* Optional: add controlled spacing between carousel and button */
        main {
            gap: 16px;
        }
    }