.Loading {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: #eaeaea;
    animation: .75s ease-in-out infinite loadingPulse
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif
}

body {
    opacity: 1 !important;
}

.container-productListClass {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.container-inner-productListClass {
    padding: 30px;
    width: 100%;
    max-width: 1290px;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center;
    align-items: center;
    gap: 15px
}

.product-container-productListClass {
    width: 250px;
    height: 350px;
    padding: 30px;
    border: 1px solid #ddd;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left
}

.second-navbar-navBarClass,
.top-navbar-navBarClass {
    width: 100%;
    height: fit-content;
    padding: 30px;
    max-width: 1290px;
    display: flex
}

.product-container-productListClass * {
    color: #000
}

.nav-container-navBarClass {
    background: #1a1a1a;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.top-navbar-navBarClass {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px
}

.form-top-search-box-navBarClass {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%
}

.form-top-search-box-navBarClass select {
    background: #f5f5f5;
    border: none;
    border-radius: 5px 0 0 5px;
    height: 40px
}

a:active,
a:hover,
a:link,
a:visited {
    /* background-color: transparent; */
    text-decoration: none;
    color: #d31044;
}

.form-top-search-box-navBarClass input {
    border: none;
    outline: 0;
    height: 40px;
    flex-grow: 1;
    padding: 0 10px
}





.form-top-search-box-navBarClass button {
    background: #d31044;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 0 5px 5px 0
}

.second-navbar-navBarClass {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.logo-container-navBarClass {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content
}

.hamburger-icon-navBarClass {
    display: none
}

.container-main-page {
    width: 100%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.container-inner-main-page {
    padding: 30px;
    width: 100%;
    max-width: 1290px;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.container-productPageClass {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.container-inner-productPageClass {
    padding: 30px;
    width: 100%;
    max-width: 1290px;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-container-productPageClass {}

.description-container-productPageClass {
    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.button-productPageClass {
    padding: 13px 28px;
    background: #d31044;
    color: white;
    border: none;
    border-radius: 3px;
}

.quantityInput {
    height: 40px;
}

.message {
    width: 100%;
    padding: 20px;
    border-top: solid #5cc25c 5px;
    background: #c3ffc3;
}

.card-loginClass {
    border: solid #dddddd 1px;
    width: fit-content;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;

    padding: 50px;
}

.input-loginClass {
    width: 378px;
    height: 35px;
    border: solid 1px #dddddd;
    border-radius: 3px;
}

.button-loginClass {
    padding: 13px 28px;
    background: #d31044;
    color: white;
    border: none;
    border-radius: 3px;
}

.container-loginClass {
    width: 100%;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Media Query for screens larger than 768px (for 2-column layout on desktop) */
@media screen and (min-width: 768px) {
    .container-inner-productPageClass {
        flex-direction: row;
        /* Switch to row layout for larger screens */
        justify-content: start;
        align-items: start;
    }
}

@media screen and (max-width:600px) {
    .top-navbar-navBarClass {
        flex-direction: column;
        gap: 10px
    }

    .form-top-search-box-navBarClass {
        width: 100%
    }

    .form-top-search-box-navBarClass input {
        flex-grow: 1
    }

    .logo-container-navBarClass {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .hamburger-icon-navBarClass {
        display: block
    }

    .second-nav-container-navBarClass {
        display: none
    }
}

@keyframes loadingPulse {

    0%,
    100% {
        background-color: #eaeaea
    }

    50% {
        background-color: #b9b9b9
    }
}