/* =====================
 Product Categories
===================== */


.product-categories-section{


padding:

100px 0;


background:

var(--bg-section);


}



.section-title{


text-align:center;


margin-bottom:60px;


}



.section-title span{


color:

var(--sky-secondary);


font-size:16px;


}



.section-title h2{


font-size:40px;


margin:

15px 0;


}



.section-title p{


color:

var(--text-secondary);


}




.categories-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.category-card{


padding:

35px 25px;


background:

var(--bg-card);


border:

1px solid

var(--border-color);


border-radius:

var(--radius-large);


text-align:center;


transition:

var(--transition);


position:relative;


overflow:hidden;


}




.category-card::before{


content:"";


position:absolute;


width:100%;


height:3px;


top:0;


right:0;


background:

linear-gradient(

90deg,

var(--sky-primary),

var(--sky-secondary)

);


transform:

scaleX(0);


transition:.3s;


}




.category-card:hover::before{


transform:

scaleX(1);


}




.category-card:hover{


transform:

translateY(-10px);


box-shadow:

var(--shadow-blue);


}




.category-icon{


width:70px;


height:70px;


margin:0 auto 25px;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:

rgba(0,183,255,.1);


color:

var(--sky-secondary);


font-size:28px;


}





.category-card h3{


font-size:22px;


margin-bottom:15px;


}




.category-card p{


font-size:14px;


}




.category-card a{


display:inline-block;


margin-top:20px;


color:

var(--sky-secondary);


font-weight:700;


}
4) Responsive
اضافه شود:
@media(max-width:1100px){


.categories-grid{


grid-template-columns:

repeat(2,1fr);


}


}



@media(max-width:600px){


.categories-grid{


grid-template-columns:

1fr;


}



.section-title h2{


font-size:30px;


}


}