/* =========================
HERO
========================= */
.sp-cat-hero{
padding:20px 0;
background:
linear-gradient(
135deg,
#eff6ff,
#ffffff
);
}

.sp-cat-hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:50px;
align-items:center;
}

.sp-cat-title{
font-size:28px;
line-height:1.1;
font-weight:900;
margin-bottom:20px;
color:#0f172a;
}

.sp-cat-sub{
font-size:17px;
line-height:1.9;
color:#64748b;
margin-bottom:30px;
}

.sp-cat-stats{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-bottom:30px;
}

.sp-cat-stat{
background:#fff;
padding:18px 22px;
border-radius:20px;

box-shadow:
0 10px 25px rgba(0,0,0,.04);
}

.sp-cat-stat strong{
display:block;
font-size:28px;
font-weight:900;
color:#2563eb;
}

.sp-cat-search{
height:64px;
width:100%;

border:none;
outline:none;

border-radius:20px;

padding:0 24px;

font-size:16px;

background:#fff;

box-shadow:
0 10px 25px rgba(0,0,0,.05);
}

.sp-cat-hero-image img{
width:100%;
border-radius:32px;

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

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

.sp-cat-section{
padding:70px 0;
}

.sp-category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
}

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

.sp-category-card{
position:relative;

border-radius:32px;

overflow:hidden;

padding:34px 28px;

min-height:260px;

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

text-decoration:none;

transition:.35s;

color:#fff;

box-shadow:
0 16px 40px rgba(0,0,0,.08);
}

/* hover */
.sp-category-card:hover{
transform:
translateY(-8px)
scale(1.01);

box-shadow:
0 26px 55px rgba(0,0,0,.12);
}

/* gradients */
.sp-category-card:nth-child(6n+1){
background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);
}

.sp-category-card:nth-child(6n+2){
background:
linear-gradient(
135deg,
#7c3aed,
#6d28d9
);
}

.sp-category-card:nth-child(6n+3){
background:
linear-gradient(
135deg,
#db2777,
#be185d
);
}

.sp-category-card:nth-child(6n+4){
background:
linear-gradient(
135deg,
#ea580c,
#c2410c
);
}

.sp-category-card:nth-child(6n+5){
background:
linear-gradient(
135deg,
#0f766e,
#115e59
);
}

.sp-category-card:nth-child(6n+6){
background:
linear-gradient(
135deg,
#0891b2,
#0e7490
);
}

/* top */
.sp-category-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}

/* image */
.sp-category-image{
width:72px;
height:72px;

border-radius:20px;

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

backdrop-filter:blur(12px);

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

flex-shrink:0;
}

.sp-category-image img{
width:100%;
height:100%;
object-fit:cover;
}

/* title */
.sp-category-card h3{
font-size:24px;
line-height:1.3;
font-weight:900;
margin-bottom:12px;
}

/* desc */
.sp-category-desc{
font-size:14px;
line-height:1.8;
opacity:.92;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* bottom */
.sp-category-bottom{
display:flex;
justify-content:space-between;
align-items:center;

margin-top:28px;
}

/* total */
.sp-category-total{
font-size:14px;
font-weight:800;

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

padding:10px 14px;

border-radius:999px;

backdrop-filter:blur(12px);
}

/* icon */
.sp-category-arrow{
width:54px;
height:54px;

border-radius:18px;

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

display:flex;
align-items:center;
justify-content:center;

backdrop-filter:blur(12px);

transition:.3s;
}

.sp-category-arrow img{
width:22px;
height:22px;

filter:brightness(0) invert(1);

transition:.3s;
}

.sp-category-card:hover
.sp-category-arrow{
transform:
translateX(4px)
translateY(-4px);
}

/* =========================
SEO BLOCK
========================= */

.sp-seo-block{
margin-top:70px;

background:#fff;

padding:45px;

border-radius:32px;

box-shadow:
0 10px 30px rgba(0,0,0,.04);

line-height:1.9;
}

.sp-seo-block h2{
font-size: 28px;
    line-height: 1.2;
    margin: 18px 0 18px;
    text-align: left;
}

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

@media(max-width:1100px){

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

.sp-cat-hero-grid{
grid-template-columns:1fr;
}

}

@media(max-width:768px){
    
h2 {
    font-size: 20px;
    text-align: left;
}
    
.sp-cat-section {
    padding: 20px 0;
}

.sp-category-grid{
gap:10px;
}

.sp-category-image {
    display: none;
}

.sp-category-bottom {
    margin-top: 14px;
}

.sp-category-card {
    border-radius: 32px;
    padding: 23px 20px;
    min-height: 210px;
}

.sp-category-card h3 {
    font-size: 18px;
    font-weight: 700;
}

.sp-category-total {
    font-size: 12px;
    font-weight: 600;
}

.sp-category-arrow {
    width: 40px;
    height: 40px;
}

.sp-category-arrow img {
    width: 18px;
    height: 18px;
}

.sp-cat-title{
font-size:20px;
}

.sp-cat-sub p {
font-size: 14px;
}

.sp-cat-stat strong {
    font-size: 18px;
}
.sp-cat-stat {
    font-size: 14px;
}

}