/* ==========================================
   SERVIZI - FIERY ORANGE THEME
========================================== */

.services{

    padding:160px 0;

    background:#070708;

}

.services-title{

    text-align:center;

    margin-bottom:80px;

}

.services-title h2{

    margin-top:20px;

    font-size:52px;

}

.services-title p{

    margin-top:20px;

    color:#cfcfcf;

    font-size:18px;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

    line-height:1.8;

}

/* GRID */

.services-grid{

    display:grid;

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

    gap:35px;

}

/* CARD */

.service-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    min-height:320px;

    border-radius:24px;

    background:rgba(20,20,22,.7);

    border:1px solid rgba(255,85,0,.2);

    backdrop-filter:blur(14px);

    transition:.4s ease;

}

/* Luce */

.service-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(circle,
    rgba(255,85,0,.2),
    transparent 70%);

    top:-120px;

    right:-120px;

    transition:.5s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#FF5500;

    box-shadow:
    0 0 45px rgba(255,85,0,.25);

}

.service-card:hover::before{

    transform:scale(1.25);

}

/* Icona */

.service-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(255,85,0,.12);

    border:1px solid rgba(255,85,0,.35);

    font-size:34px;

    margin-bottom:28px;

    color:#FF5500;

}

/* Titolo */

.service-card h3{

    font-size:34px;

    margin-bottom:18px;

}

/* Testo */

.service-card p{

    color:#d8d8d8;

    line-height:1.8;

    font-size:18px;

}

/* Bottone */

.service-card a{

    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#FFB700;
    font-weight:600;
    text-decoration:none;

}

.service-card a span{

    display:inline-block;
    transition:transform .35s ease;

}

.service-card:hover a span{

    transform:translateX(14px);

}

.service-card a:hover{

    transform:translateX(6px);
    color:#FF5500;

}

.service-icon img{

    width:48px;
    height:48px;

    transition:.35s ease;
}

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

    transform:scale(1.15) rotate(5deg);

    filter:drop-shadow(0 0 15px rgba(255,183,0,.7));

}