:root{

/* =========================
   SERVICES SECTION
========================= */

--services-padding:160px 0;


--services-bg: rgba(255,122,24,0.05);

/* header */
--services-head-width:700px;
--services-head-margin:0 auto 70px;

--services-title-size:clamp(34px,5vw,45px);
--services-title-weight:900;
--services-title-line:1;
--services-title-margin:12px;

--services-text-margin:14px;
--services-text-color:rgb(220, 219, 219);

/* grid */
--services-grid-columns:repeat(4,1fr);
--services-grid-gap:26px;

--services-grid-tablet:repeat(2,1fr);
--services-grid-mobile:1fr;

/* card */
--service-card-bg:#111;
--service-card-color:rgba(255, 255, 255, 0.838);

--service-card-border:1px solid rgba(255,255,255,0.06);
--service-card-radius:16px;

--service-card-transition:.35s ease;
--service-card-transform:translateY(0);

--service-card-hover-transform:translateY(-10px);
--service-card-hover-border:rgba(255,122,0,0.35);
--service-card-hover-shadow:0 30px 80px rgba(0,0,0,0.6);

/* image */
--service-img-height:220px;
--service-img-transition:.6s ease;
--service-img-hover-scale:scale(1.1);

/* body */
--service-body-padding:20px;

--service-title-size:20px;
--service-title-margin:10px;

--service-text-size:14px;
--service-text-color:rgba(255,255,255,0.65);
--service-text-height:42px;

/* link */
--service-link-margin:14px;

--service-link-size:12px;
--service-link-weight:800;
--service-link-spacing:1px;

--service-link-color:#ff7a00;
--service-link-transition:.3s ease;

--service-link-hover:translateX(6px);

}



/* =====================================================
   SERVICES MODERN GRID
===================================================== */

.services-modern{

    padding:var(--services-padding);

    background:var(--services-bg);

    position:relative;

    overflow:hidden;
}

/* ambient glow */

.services-modern::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;
}

/* header */

.services-head{

    text-align:center;

    max-width:var(--services-head-width);

    margin:var(--services-head-margin);
}

.services-head h2{

    font-size:var(--services-title-size);

    font-weight:var(--services-title-weight);

    text-transform:uppercase;

    line-height:var(--services-title-line);

    margin-top:var(--services-title-margin);
}

.services-head p{

    margin-top:var(--services-text-margin);

    color:var(--services-text-color);
}

/* grid */

.services-grid{

    display:grid;

    grid-template-columns:var(--services-grid-columns);

    gap:var(--services-grid-gap);
}

/* card */

.service-card{

    text-decoration:none;

    color:var(--service-card-color);

    background:var(--service-card-bg);

    border:var(--service-card-border);

    border-radius:var(--service-card-radius);

    overflow:hidden;

    transition:var(--service-card-transition);

    transform:var(--service-card-transform);

    position:relative;
}

/* hover */

.service-card:hover{

    transform:var(--service-card-hover-transform);

    border-color:var(--service-card-hover-border);

    box-shadow:var(--service-card-hover-shadow);
}

/* image */

.service-img{

    position:relative;

    height:var(--service-img-height);

    overflow:hidden;
}

.service-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:var(--service-img-transition);
}

.service-card:hover .service-img img{

    transform:var(--service-img-hover-scale);
}

/* content */

.service-body{

    padding:var(--service-body-padding);
}

.service-body h3{

    font-size:var(--service-title-size);

    margin-bottom:var(--service-title-margin);
}

.service-body p{

    font-size:var(--service-text-size);

    color:var(--service-text-color);

    min-height:var(--service-text-height);
}

/* link */

.service-link{

    display:inline-block;

    margin-top:var(--service-link-margin);

    font-size:var(--service-link-size);

    font-weight:var(--service-link-weight);

    letter-spacing:var(--service-link-spacing);

    color:var(--service-link-color);

    transition:var(--service-link-transition);
}

.service-card:hover .service-link{

    transform:var(--service-link-hover);
}

/* responsive */

@media(max-width:1100px){

.services-grid{

grid-template-columns:var(--services-grid-tablet);

}

}

@media(max-width:600px){

.services-grid{

grid-template-columns:var(--services-grid-mobile);

}

}