/* New Arrivals Section */
.newarrivels-section {
    width: 100%;
    /* Full width of the section */
    background: linear-gradient(to top, #0B0B0B, #222222);
    text-align: center;
    box-sizing: border-box;
    justify-content: space-evenly;
    padding: 50px;
    max-height: 1000vh;
    background-color: #fbf4e8;

}

/* New Arrivals Text */
.newarrivels-text h1 {
    font-size: 56px;
    color: red;
    margin-bottom: 20px;
    font-weight: 900;
}


/* New Arrivals Categories */
.newarrivels-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* New Arrivals Grid */
.newarrivels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Two columns taking equal width */
    gap: 20px;
    /* Spacing between images */
    width: 90%;
    /* Adjust to fit within the section */
    margin: auto;
    /* Center the grid */
}

/* Images */
.newarrivels img {
    width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    /* Rounded corners */
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.newarrivels img:hover {
    transform: scale(1.05);
    /* Zoom effect on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}


@media (max-width: 1024px) {
    .newarrivels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Two columns taking equal width */
        gap: 20px;
        /* Spacing between images */
        width: 90%;
        /* Adjust to fit within the section */
        margin: auto;
        /* Center the grid */
    }


}

@media (max-width: 768px) {

    .newarrivels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Two columns taking equal width */
        gap: 20px;
        /* Spacing between images */
        width: 100%;
        /* Adjust to fit within the section */
        margin: auto;
        /* Center the grid */
    }
}

@media (max-width: 480px) {

    .newarrivels {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* onw columns taking equal width */
        gap: 20px;
        /* Spacing between images */
        width: 100%;
        /* Adjust to fit within the section */
        margin: auto;
        /* Center the grid */
    }

}