/* =====================================================
   BRANDS PAGE
===================================================== */

.brands-section{

padding:90px 20px;

background:
linear-gradient(135deg,#111827 0%,#1f2937 45%,#0f172a 100%);

position:relative;

overflow:hidden;

}

.brands-section::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:rgba(255,255,255,.04);

filter:blur(120px);

border-radius:50%;

top:-250px;

left:-200px;

}

.brands-section::after{

content:"";

position:absolute;

width:500px;

height:500px;

background:rgba(0,153,255,.08);

filter:blur(120px);

border-radius:50%;

right:-200px;

bottom:-150px;

}

.brands-section .container{

position:relative;

z-index:2;

}

.brands-header{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:60px;

}

.brands-header h1{

font-size:46px;

color:white;

margin-bottom:20px;

font-weight:700;

}

.brands-header p{

color:#d4d4d4;

font-size:18px;

line-height:1.8;

}

.brands-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:16px;

}

.brand-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 20px;

min-height:85px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.12);

border-radius:18px;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

}

.brand-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:#00a8ff;

transform:scaleY(0);

transition:.35s;

}

.brand-card:hover::before{

transform:scaleY(1);

}

.brand-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.12);

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.brand-card h2{

color:white;

font-size:20px;

margin-bottom:4px;

font-weight:700;

}

.brand-card p{

color:#cfcfcf;

font-size:13px;

line-height:1.3;

margin:2px 0;
}

.brand-card span{

font-size:26px;

color:#00a8ff;

font-weight:bold;

transition:.35s;

}

.brand-card:hover span{

transform:translateX(8px);

}

@media(max-width:768px){

.brands-section{

padding:70px 15px;

}

.brands-header h1{

font-size:34px;

}

.brands-header p{

font-size:16px;

}

.brands-grid{

grid-template-columns:1fr;

gap:18px;

}

.brand-card{

padding:22px;

}

.brand-card h2{

font-size:22px;

}

}