*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Header Section */
.product-catalog-header {
    text-align: center;
    border-bottom: 2px solid #D9D9D9;
    padding: 40px 50px;
    margin: 40px auto;
    max-width: 1200px;
}

.product-catalog-header h2{
    font-size: 2em;
    margin-bottom: 10px;
    color: #989898;
}

.product-catalog-header p{
    font-size: 1.2em;
    color: #252525;
}

/* Product Category Section */
.product-category-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
    margin-bottom: 50px;
}

.product-category-container{
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    justify-content: center;
}

.product-category{
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #262626, #6A6A6A);
    border-radius: 10px;
    padding: 30px;
    flex: 1;
    min-width: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-category:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.product-category-caption{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 150px;
}

.product-category-caption h2{
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ffffff;
    line-height: 1.2;
}

.product-category-caption p{
    font-size: 1em;
    color: #dddddd;
}

.product-category-image{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-category-image img{
    height: 150px;
    width: 150px;
    border-radius: 10px;
    object-fit: contain;
}

@media (min-width: 76px){
    .product-catalog-ads{
        max-width: 1400px;
        margin: 10px auto;
        padding: 0 10px;
    }
}

@media (min-width: 769px){
    .product-catalog-ads{
    padding: 0 20px;}
}

/* Category Color Variations */

/* First Row */
.product-category-container:nth-child(1) .product-category:nth-child(1){
    background: linear-gradient(to bottom, #262626, #6A6A6A);
}

.product-category-container:nth-child(1) .product-category:nth-child(2){
    background: linear-gradient(to bottom, #f1f1f1, #d8d8d8);
}

.product-category-container:nth-child(1) .product-category:nth-child(2) h2,
.product-category-container:nth-child(1) .product-category:nth-child(2) p{
    color: rgb(37, 37, 37);
}

.product-category-container:nth-child(1) .product-category:nth-child(3){
    background: linear-gradient(to bottom, #4FB7F2, #0E3458);
}

/* Second Row - Different Colors */
.product-category-container:nth-child(2) .product-category:nth-child(1){
    background: linear-gradient(to bottom, #FFB75E, #ED8F03);
}

.product-category-container:nth-child(2) .product-category:nth-child(2){
    background: linear-gradient(to bottom, #1E3C72, #2A5298);
}

.product-category-container:nth-child(2) .product-category:nth-child(3){
    background: linear-gradient(to bottom, #2193B0, #6DD5ED);
}

/* Third Row - Different Colors */
.product-category-container:nth-child(3) .product-category:nth-child(1){
    background: linear-gradient(to bottom, #141E30, #243B55);
}

.product-category-container:nth-child(3) .product-category:nth-child(2){
    background: linear-gradient(to bottom, #ffd96f, #EFB82A);
}

.product-category-container:nth-child(3) .product-category:nth-child(2) h2{
    color: rgb(48, 48, 48);
}

.product-category-container:nth-child(3) .product-category:nth-child(2) p{
    color: rgb(48, 48, 48);
}


.product-category-container:nth-child(3) .product-category:nth-child(3){
    background: linear-gradient(to bottom, #136a8a, #267871);
}

/* LAPTOP VIEW (1024px - 1440px) */
@media (max-width: 1440px) and (min-width: 1024px){
    .product-catalog-header{
        margin: 30px auto;
        padding: 30px 40px;
    }

    .product-category-container{
        max-width: 1200px;
        gap: 18px;
    }

    .product-category{
        padding: 25px;
    }

    .product-category-caption h2{
        font-size: 1.3em;
    }

    .product-category-image img{
        height: 130px;
        width: 130px;
    }
}

/* TABLET VIEW (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px){
    .product-catalog-header{
        margin: 30px 40px;
        padding: 30px 30px;
    }

    .product-catalog-header h2{
        font-size: 1.8em;
    }

    .product-catalog-header p{
        font-size: 1.1em;
    }

    .product-category-section{
        padding: 15px 20px;
        gap: 20px;
    }

    .product-category-container{
        flex-direction: column;
        max-width: 100%;
        gap: 15px;
    }

    .product-category{
        padding: 25px;
        width: 100%;
    }

    .product-category-caption{
        min-width: 0;
        flex: 1;
    }

    .product-category-caption h2{
        font-size: 1.4em;
    }

    .product-category-image img{
        height: 120px;
        width: 120px;
    }
}

/* MOBILE VIEW (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px){
    .product-catalog-header{
        margin: 20px 20px;
        padding: 25px 20px;
    }

    .product-catalog-header h2{
        font-size: 1.6em;
    }

    .product-catalog-header p{
        font-size: 1em;
    }

    .product-category-section{
        padding: 15px;
        gap: 15px;
    }

    .product-category-container{
        flex-direction: column;
        margin: 0;
        gap: 15px;
    }

    .product-category{
        flex-direction: row;
        padding: 20px;
        text-align: left;
        gap: 15px;
    }

    .product-category-caption{
        flex: 1;
        min-width: 0;
    }

    .product-category-caption h2{
        font-size: 1.2em;
    }

    .product-category-caption p{
        font-size: 0.9em;
    }

    .product-category-image img{
        height: 140px;
        width: 140px;
    }
}

/* SMALL MOBILE VIEW (≤480px) */
@media (max-width: 480px){
    .product-catalog-header{
        margin: 15px 15px;
        padding: 20px 15px;
    }

    .product-catalog-header h2{
        font-size: 1.4em;
    }

    .product-catalog-header p{
        font-size: 0.9em;
    }

    .product-category-section{
        padding: 10px;
        gap: 12px;
    }

    .product-category-container{
        flex-direction: column;
        margin: 0;
        gap: 12px;
    }

    .product-category{
        flex-direction: row;
        padding: 15px 20px;
        text-align: left;
        gap: 12px;
    }

    .product-category-caption{
        flex: 1;
        min-width: 0;
    }

    .product-category-caption h2{
        font-size: 1.1em;
        line-height: 1.3;
    }

    .product-category-caption p{
        font-size: 0.85em;
    }

    .product-category-image img{
        height: 120px;
        width: 120px;
    }
}

/* LARGE DESKTOP (1441px+) */
@media (min-width: 1441px){
    .product-catalog-header{
        max-width: 1400px;
        padding: 50px 60px;
    }

    .product-category-container{
        max-width: 1600px;
    }

    .product-category{
        padding: 35px;
    }

    .product-category-caption h2{
        font-size: 1.6em;
    }

    .product-category-image img{
        height: 170px;
        width: 170px;
    }
}