
/* ===================== backup section ===================== */
.our-products-section{
    /* padding: 0 5rem; */
    /* margin: 3rem 5rem; */
    display: flex;
}
.our-products-section .our-products-section-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}
.our-products-section .our-products-section-container h2{
    font-size: var(--heading-size-medium);
    text-align: center;
}
.our-products-section .our-products-section-container .scroll-controls{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.our-products-section .our-products-section-container .scroll-controls{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.our-products-section .our-products-section-container .scroll-controls a{
    color: var(--primary-color);
    font-size: var(--secondary-font-size);
    text-align: center;
}
.our-products-section .our-products-section-container .scroll-controls a:hover{
    color: var(--accent-color);
}
.our-products-section .our-products-section-container .scroll-controls button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.our-products-section .our-products-section-container .scroll-controls button:hover{
    color: var(--accent-color);
}
.our-products-section .our-products-section-container .products-container{
    display: flex;
    /* flex-wrap: wrap; */
    gap: 1rem;
    width: 100%;
    overflow-x: auto;
    /* Disable snapping to allow JS-driven smooth scroll */
    /* scroll-snap-type: x mandatory; */
    /* scroll-behavior: smooth; */
}
.our-products-section .our-products-section-container .products-container::-webkit-scrollbar{
    display: none;
}
.our-products-section .our-products-section-container .products-container .product-card{
    scroll-snap-align: unset;
}

/* ===================== media queries ===================== */
@media (max-width: 800px) {
    .our-products-section .our-products-section-container h2{
        font-size: var(--heading-size-small);
        text-align: center;
    }
}
