/* =========================================
FILE: brands-section.css
========================================= */

.brands-section{
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #000000 0%,
        #050505 100%
    );
}

/* =========================================
BACKGROUND GLOW
========================================= */

.brands-glow{
    position:absolute;

    top:120px;
    left:50%;

    transform:translateX(-50%);

    width:600px;
    height:300px;

    background:
    radial-gradient(
        circle,
        rgba(255,0,0,0.12),
        transparent 70%
    );

    filter:blur(80px);

    pointer-events:none;
}

/* =========================================
GRID
========================================= */

.brands-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* =========================================
CARD
========================================= */

.brand-card{
    position:relative;

    background:
    linear-gradient(
        180deg,
        rgba(255,0,0,0.08),
        rgba(0,0,0,0.95)
    );

    border:1px solid rgba(255,0,0,0.12);

    border-radius:32px;

    overflow:hidden;

    padding:45px 35px;

    transition:var(--transition);

    min-height:500px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.brand-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255,0,0,0.35);
}

/* =========================================
TOP GLOW
========================================= */

.brand-card::before{
    content:'';

    position:absolute;

    top:-100px;
    left:50%;

    transform:translateX(-50%);

    width:240px;
    height:200px;

    background:
    radial-gradient(
        circle,
        rgba(255,0,0,0.28),
        transparent 70%
    );

    filter:blur(40px);

    pointer-events:none;
}

/* =========================================
LOGO
========================================= */

.brand-logo{
    height:70px;
    object-fit:contain;
    margin-bottom:30px;
    border-radius: 10px;
}

/* =========================================
TITLE
========================================= */

.brand-title{
    font-size:38px;
    line-height:1.1;
    font-weight:var(--fw-800);

    color:var(--primary-white);

    margin-bottom:20px;
}

/* =========================================
DESC
========================================= */

.brand-desc{
    font-size:15px;
    line-height:1.9;

    margin-bottom:35px;
}

/* =========================================
FEATURES
========================================= */

.brand-features{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:35px;
}

.brand-features span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:40px;
    padding:0 18px;

    border-radius:999px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.06);

    color:var(--primary-white);

    font-size:13px;
    font-weight:600;
}

/* =========================================
BOTTOM
========================================= */

.brand-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* =========================================
PRODUCT COUNT
========================================= */

.brand-products{
    display:flex;
    flex-direction:column;
}

.brand-products h4{
    font-size:30px;
    color:var(--primary-red);
    line-height:1;
}

.brand-products p{
    font-size:13px;
}

/* =========================================
BUTTON
========================================= */

.brand-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:52px;
    padding:0 26px;

    border-radius:999px;

    background:var(--primary-gradient);

    color:var(--primary-white);

    font-size:14px;
    font-weight:600;

    transition:var(--transition);
}

.brand-btn:hover{
    transform:translateY(-3px);
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

    .brands-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .brands-grid{
        grid-template-columns:1fr;
    }

    .brand-card{
        min-height:auto;
        padding:35px 28px;
    }

    .brand-title{
        font-size:30px;
    }

    .brand-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:576px){

    .brand-title{
        font-size:26px;
    }

    .brand-desc{
        font-size:14px;
    }

}