/* Hero Section */
#heroSection {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: white;*/
    padding: 4rem 4%;
    color: black;
    height: 400px;
    margin-top: 40px;
}

.hero-content {
    max-width: 50%;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: bold;
    color: black;
}

.hero-content p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    width: 60%;
}

.exploreButtonsContainer {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hero-content button {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: white;
    color: black;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    width: 45%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-content button:hover {
    background-color: black;
    color: white;
}

.hero-images {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

#heroRowUpper {
    position: relative;
    width: 100%;
    height: 120px;
}

#heroRowMiddle {
    position: relative;
    width: 100%;
    height: 120px;
    margin-top: 8px;
}

#heroRowBottom {
    position: relative;
    width: 100%;
    height: 120px;
    margin-top: 8px;
}

#heroBackgroundCircleGradient {

    position: absolute;
    /* This ensures it ignores flex layout */
    top: -5.5%;
    left: -15.5%;
    width: 125%;
    /* Adjust size */
    height: 115%;
    background: linear-gradient(to right, peachpuff, rgb(135, 106, 241));
    opacity: 0.6;
    border-radius: 40%;
    filter: blur(30px);
    /* Softens the edges */
    /*transform: translate(100%, -50%);*/
    /* Centers it properly */
    z-index: -1;
    /* Places it behind the hero images */
    pointer-events: none;
    /* Prevents accidental interactions */
}

/* Assign each image to its area */
#heroUpperLeft {
    position: relative;
    float: left;
    height: 100%;
}

#heroUpperRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#heroMiddleLeft {
    position: relative;
    float: left;
    height: 100%;
}

#heroMiddleCenter {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#heroMiddleRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#heroBottomLeft {
    position: relative;
    float: left;
    height: 100%;
}

#heroBottomRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#heroImageGrid {
    width: 100%;
}

/* Some optional styling for the images themselves */
.hero-images img {
    object-fit: cover;
    /* or contain, depending on how you want them cropped */
    border-radius: 8px;
    /* if you want rounded corners */
}


/* How It Works */
#howItWorksSection {
    padding: 4rem 2%;
    text-align: center;
    background: black;
    color: white;
}

#howItWorksSection h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.how-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2rem;
}

.stepIcon {
    height: 50px;
    width: 50px;
}

.how-step {
    padding: 2rem;
    border: 1px solid rgb(50, 50, 50);
    border-radius: 20px;
    max-width: 300px;
    flex: 1 1 250px;
    box-sizing: border-box;
    color: white;
}



.how-step .icon {
    margin-bottom: 1rem;
}

.how-step h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.how-step p {
    font-size: 0.95rem;
    color: #555;
}

/* Brands */
/*
.brands {
    margin-top: 3rem;
}

.brands p {
    margin-bottom: 1rem;
}

.brands ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.brands li img {
    height: 30px;
    opacity: 0.8;
}

.brands li img:hover {
    opacity: 1;
}
*/
/* new brands css */
/* Original Brands Section Styling */
.brands {
    margin-top: 3rem;
}

.brands p {
    margin-bottom: 1rem;
}

/* Outer container centers the scrolling area */
.brands-container {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    /* Ensure nothing bleeds outside */
}

/* Wrapper to restrict visible area to one copy */
.brands-wrapper {
    overflow: hidden;
    width: 100%;
    /* The width will be set dynamically via JavaScript */
}

/* Infinite Carousel Container */
#brandsScroll {
    display: flex;
    white-space: nowrap;
    cursor: grab;
    user-select: none;
    overflow-x: auto;
    touch-action: pan-y;

    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

#brandsScroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}


/* Each brand list as an inline-flex container */
.brands-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Style individual brand items */
.brands-list li {
    flex: 0 0 auto;
    margin: 0 2rem;
}

/* Brand Images */
.brands-list li img {
    height: 50px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.brands-list li img:hover {
    opacity: 1;
}




/* Featured Products */
#featuredProductsSection {
    padding: 4rem 2%;
}

#featuredProductsTitleHolder {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

#featuredProductsSection h2 {
    text-align: left;
    font-size: 2rem;
}

#seeAllButton {
    padding: 0.75rem 1.5rem;
    border: none;
    background-color: black;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
}

/* PRODUCT CARDS */

#productsGrid {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping to a new line */
    gap: 2rem;
    /* Keep your spacing between cards */
    overflow-x: auto;
    /* Allow horizontal scrolling */

    /* Hide scrollbar in Firefox */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* IE and Edge */
    user-select: none;
    /* Standard */
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    touch-action: pan-y;
}

img {
    -webkit-user-drag: none;
    /* Prevent image dragging in WebKit browsers */
    /*user-drag: none;*/
}

/* Hide scrollbar in Chrome, Safari, Opera */
#productsGrid::-webkit-scrollbar {
    display: none;
}


/* Lower Nav Section */
#lowerNavSection {
    padding: 4rem 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lower-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.lower-nav-item {
    text-align: center;
}

.lower-nav-item img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.lower-nav-item h3 {
    font-size: 1.2rem;
    font-weight: 700;
}


/*lower nav section */
#ctaImageGrid {
    width: 100%;
}

.ctaImages {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 50%;
    overflow: visible;
}

#ctaRowUpper {
    position: relative;
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#ctaRowMiddle {
    position: relative;
    width: 100%;
    height: 250px;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#ctaRowBottom {
    position: relative;
    width: 100%;
    height: 250px;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}



/* Assign each image to its area */
#ctaUpperLeft {
    position: relative;
    float: left;
    height: 100%;
}

#ctaUpperRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#ctaMiddleLeft {
    position: relative;
    float: left;
    height: 100%;
}

#ctaMiddleCenter {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#ctaMiddleRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

#ctaBottomLeft {
    position: relative;
    float: left;
    height: 100%;
}

#ctaBottomRight {
    position: relative;
    float: left;
    margin-left: 8px;
    height: 100%;
}

/* @media rules */

@media only screen and (max-width: 1075px) {
    #heroRowUpper {
        height: 110px;
    }

    #heroRowMiddle {
        height: 110px;
    }

    #heroRowBottom {
        height: 110px;
    }

    /* CTA overrides */
    /* Let the outer container stack rows vertically with a vertical gap */
    #ctaImageGrid {
        display: flex;
        flex-direction: column;
        gap: 0px;
        /* gap between the top row and bottom row */
        width: 100%;
        max-width: 100%;
    }

    /* Each row becomes a 2-column grid with an 8px gap */
    #ctaRowUpper {
        display: grid;
        grid-template-columns: calc(34% - 4px) calc(66% - 4px);
        gap: 8px;
        width: 100%;
        height: auto;
        position: static;
        align-items: start;
        /* top-align images if heights differ */
    }

    #ctaRowBottom {
        display: grid;
        grid-template-columns: calc(60% - 4px) calc(40% - 4px);
        gap: 8px;
        width: 100%;
        height: auto;
        position: static;
        align-items: start;
        /* top-align images if heights differ */
    }

    /* Override floats and forced heights on the images themselves */
    #ctaRowUpper img,
    #ctaRowBottom img {
        float: none;
        margin-left: 0;
        width: 100%;
        /*height: auto !important;*/
        height: 100%;
        /* preserve each image's aspect ratio */
        object-fit: cover;
        /* or 'contain' if you prefer no cropping */
        display: block;
        border-radius: 8px;
    }

    /*cta section mobile*/
    #callToActionSection {
        width: 100%;
    }
}

@media only screen and (max-width: 1030px) {

}

@media only screen and (max-width: 990px) {
    #heroRowUpper {
        height: 100px;
    }

    #heroRowMiddle {
        height: 100px;
    }

    #heroRowBottom {
        height: 100px;
    }
}

@media only screen and (max-width: 920px) {
    #heroSection {
        flex-direction: column;
        margin-top: 40px;
        justify-content: flex-start;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        height: auto;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-content p {
        max-width: 100%;
        width: 100%;
        margin-top: 1.4em;
        margin-bottom: 2em;
    }

    .exploreButtonsContainer {
        width: 100%;
        max-width: 100%;
    }

    .hero-images {
        width: 100%;
        max-width: 100%;
    }

    #heroRowUpper {
        width: 100%;
        height: 100%;
    }

    #heroRowMiddle {
        width: 100%;
        height: 100%;
    }

    #heroRowBottom {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 905px) {
    #heroRowUpper {
        height: 90px;
    }

    #heroRowMiddle {
        height: 90px;
    }

    #heroRowBottom {
        height: 90px;
    }
}

@media only screen and (max-width: 816px) {
    #heroRowUpper {
        height: 75px;
    }

    #heroRowMiddle {
        height: 75px;
    }

    #heroRowBottom {
        height: 75px;
    }
}

/*Mobile rules*/

@media only screen and (max-width: 620px) {

    /*
    .hero-images{
        width:100%;
        max-width:100%;
    }
    #heroRowUpper{
        width:100%;
        height:100%;
    }
    #heroRowMiddle{
        width:100%;
        height:100%;
    }
    #heroRowBottom{
        width:100%;
        height:100%;
    }
        */
    /* Ensure the collage takes full width */
    /* --------------------- HERO IMAGE GRID REFRACTORED CSS --------------------- */

    /* Overall container for hero images: fill 100% of the parent element */
    .hero-images {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: visible;
        margin-top: 60px;
    }

    /* The grid that stacks rows with an 8px vertical gap */
    #heroImageGrid {
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 100%;
    }

    /* --------------------- Override Existing Row Styles --------------------- */
    /* Remove fixed heights, floats, and absolute positioning from hero rows */
    #heroRowUpper,
    #heroRowMiddle,
    #heroRowBottom {
        height: auto !important;
        position: static !important;
        display: grid !important;
        /*gap: 2px;*/
        align-items: stretch;
    }

    /* --------------------- Top Row --------------------- */
    /* Two columns:
     - Left (#heroUpperLeft): ~66.6666% (non-square)
     - Right (#heroUpperRight): ~33.3333% and forced square */
    #heroRowUpper {
        grid-template-columns: calc(66.6666% - 4px) calc(33.3333% - 4px);
    }

    #heroRowUpper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
    }

    /* Force the right image to be square */
    #heroUpperRight {
        aspect-ratio: 1;
    }

    /* --------------------- Middle Row --------------------- */
    /* Three equal columns using calc() to ensure equal widths:
     Each column: calc((100% - 16px) / 3)
     (16px is the total horizontal gap: 8px + 8px) */
    #heroRowMiddle {
        grid-template-columns: calc((100% - 16px) / 3) calc((100% - 16px) / 3) calc((100% - 16px) / 3);
    }

    #heroRowMiddle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
        aspect-ratio: 1;
    }

    /* --------------------- Bottom Row --------------------- */
    /* Two columns:
     - Left (#heroBottomLeft): forced square (~33.3333%)
     - Right (#heroBottomRight): fills the remaining space (~66.6666%) */
    #heroRowBottom {
        grid-template-columns: calc(33.3333% - 4px) calc(66.6666% - 4px);
    }

    #heroRowBottom img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        position: relative;
    }

    /* Force only the left image to be square */
    #heroBottomLeft {
        aspect-ratio: 1;
    }


    #heroMiddleCenter {
        margin-left: 8px;
    }

    #heroMiddleRight {
        margin-left: 16px;
    }

    /* CTA overrides */

    #lowerNavSection{
        padding:0px;
        width:100%;
    }

    #ctaRowUpper {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items:center;
        width:100%;
    }

    #ctaRowUpper img {
        width: 90%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        /* Use 'contain' if you prefer letterboxing over cropping */
        display: block;
        /* removes extra bottom space */
    }

    #ctaRowBottom {
        width:100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: center;
    }

    #ctaRowBottom img {
        width: 90%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        /* Use 'contain' if you prefer letterboxing over cropping */
        display: block;
        /* removes extra bottom space */
    }

}

@media only screen and (max-width: 520px) {
    #heroRowUpper {
        height: 60px;
    }

    #heroRowMiddle {
        height: 60px;
    }

    #heroRowBottom {
        height: 60px;
    }
}

@media only screen and (max-width: 460) {
    #heroRowUpper {
        height: 50px;
    }

    #heroRowMiddle {
        height: 50px;
    }

    #heroRowBottom {
        height: 50px;
    }
}