*{
    font-family: "Vazirmatn", sans-serif !important;
}
:root{

    --primary:#c9a227;

    --primary-light:#e8cb63;

    --text:#202020;

    --text-muted:#6f6f6f;

    --bg:#f8f9fb;

    --card:#ffffff;

    --radius:24px;

}

/* =========================
BASE TYPOGRAPHY
========================= */

body {
    font-family: Vazirmatn, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 600;
}

p {
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.9;
}

/* =========================
SERVICE GRID
========================= */
.service-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    margin:70px 0;

}
/* =========================
SERVICE CARD
========================= */
.service-card{

    position:relative;

    overflow:hidden;

    background:var(--card);

    border-radius:var(--radius);

    padding:35px;

    border:1px solid rgba(0,0,0,.05);

    display:flex;

    flex-direction:column;

    gap:18px;

    cursor:pointer;

    transition:

    transform .45s,

    box-shadow .45s,

    border-color .45s;

    box-shadow:

    0 18px 40px rgba(0,0,0,.06),

    0 3px 10px rgba(0,0,0,.04);

}
.service-card:hover{

    transform:

    translateY(-14px);

    border-color:var(--primary);

    box-shadow:

    0 28px 70px rgba(0,0,0,.12),

    0 12px 35px rgba(201,162,39,.18);

}
.service-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(201,162,39,.18),

    transparent 70%);

    opacity:0;

    transition:.45s;

}

.service-card:hover::before{

    opacity:1;

}
.service-card:hover::before {
    opacity: 1;
}
.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:

    linear-gradient(

    90deg,

    var(--primary),

    var(--primary-light));

    transition:.4s;

}

.service-card:hover::after{

    width:100%;

}
/* =========================
ICON
========================= */
.service-card .icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:

    linear-gradient(135deg,#fff,#f4f4f4);

    box-shadow:

    0 15px 30px rgba(0,0,0,.06);

    transition:.45s;

}
.service-card:hover .icon{

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light));

    color:white;

    transform:

    rotate(-8deg)

    scale(1.08);

}
/* =========================
TEXT
========================= */
.service-card h3{

    margin:0;

    font-size:24px;

    font-weight:800;

    color:#222;

    transition:.35s;

}

.service-card:hover h3{

    color:var(--primary);

}
.service-card p{

    margin:0;

    color:var(--text-muted);

    line-height:2;

    font-size:15px;

}

/* =========================
RESPONSIVE
========================= */
@media(max-width:1100px){

    .service-grid{
    
        grid-template-columns:repeat(2,1fr);
    
    }
    
    }
    
    @media(max-width:700px){
    
    .service-grid{
    
        grid-template-columns:1fr;
    
    }
    
    .service-card{
    
        padding:28px;
    
    }
    
    }
@media (max-width: 900px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}
.service-card{
    font-family: "Vazirmatn", sans-serif;
}