:root {
    --primary-color:#2563eb;   /* أزرق حديث */
    --secondary-color:#1e40af;
    --accent-color:#38bdf8;
    --text-dark:#0f172a;
}

body {
    background:#f8f9fa;
    text-decoration: none !important;
}

.services-small-item {
    background:#ebedef;
    border-radius:12px;
    padding:1.5rem;
    min-height:280px;
    position:relative;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    transition:.4s cubic-bezier(.175,.885,.32,1.275);
}

.services-small-item::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    opacity:0;
    transition:.4s;
}

.services-small-item:hover::before {opacity:1}
.services-small-item * {position:relative;z-index:2}
.services-small-item:hover * {color:#fff!important}

.services-small-item:hover {
    transform:translateY(-8px);
    box-shadow:0 12px 24px rgba(0,0,0,.15);
}

.icon {font-size:2.2rem;margin-bottom:15px}
.sub-icon {
    font-size:.7em;
    position:absolute;
    bottom:-6px;
    right:-10px;
    color:#0052cc;
}

.services-title {
    font-size:1rem;
    font-weight:700;
    min-height:3.2em;
    margin:15px 0;
}

.services-small-item p {
    font-size:.85rem;
    color:#666;
    text-decoration: none !important;

}

.button {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid rgba(0,0,0,.1);
}

.services-small-item:hover .button i {
    transform:translateX(-5px);
}

.section-title {
    font-size:1.8rem;
    font-weight:700;
    border-right:4px solid var(--primary-color);
    padding-right:1rem;
    margin:2rem 0;
    position:relative;
}

.section-title::after {
    content:"";
    position:absolute;
    right:-18px;
    top:50%;
    width:10px;
    height:10px;
    background:var(--accent-color);
    border-radius:50%;
    transform:translateY(-50%);
}

@media (hover:none){
    .services-small-item:hover{transform:none}
    .services-small-item:hover::before{opacity:0}
    .services-small-item:hover *{color:inherit!important}
}
.services-small-item,
.services-small-item:hover,
.services-small-item *,
.services-small-item a {
    text-decoration: none !important;
}