/* =========================================
   3. STILE DELLE CARD SERVICE
   ========================================= */
.itw-services-feature-card {
    /* Sfondo con gradiente leggerissimo per dare profondità */
    background: linear-gradient(145deg, var(--itw-services-bg-card) 0%, var(--itw-services-bg-card-subtle) 100%);
    border-radius: 1.5rem; /* ~24px */
    padding: 3.125rem 2.2rem; /* ~50px 35px */

    /* Bordo superiore "Accento" */
    border-top: 0.3rem solid var(--itw-primary); /* ~5px */
    border-right: 0.0625rem solid rgba(0, 0, 0, 0.05); /* ~1px */
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.05);
    border-left: 0.0625rem solid rgba(0, 0, 0, 0.05);

    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.08); /* ~15px 45px */
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.itw-services-feature-card:hover {
    transform: translateY(-0.75rem); /* ~ -12px, Effetto sollevamento */
    box-shadow: 0 1.25rem 3.75rem rgba(3, 169, 244, 0.18); /* ~20px 60px */
    border-color: rgba(3, 169, 244, 0.2);
}

/* =========================================
   5. ICONE CENTRALI
   ========================================= */
.itw-services-icon-wrapper {
    width: 5.625rem; /* ~90px */
    height: 5.625rem; /* ~90px */
    background-color: var(--itw-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.8rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: 0.125rem solid transparent; /* ~2px */
}

.itw-services-feature-card:hover .itw-services-icon-wrapper {
    transform: scale(1.15);
    background-color: rgba(3, 169, 244, 0.18);
    border-color: rgba(3, 169, 244, 0.1);
}

.itw-services-icon-wrapper i {
    font-size: 2.2rem;
    color: var(--itw-primary);
}

/* =========================================
   6. TITOLI E LISTA INTERATTIVA
   ========================================= */
.itw-services-card-title {
    color: var(--itw-text-dark);
    font-weight: 700;
    margin-bottom: 1.8rem;
    font-size: 1.6rem;
}

.itw-services-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
    width: 100%;
}

.itw-services-feature-list li {
    text-align: left;
    padding: 0.75rem 0; /* ~12px */
    color: var(--itw-text-dark);
    display: flex;
    align-items: flex-start;
    font-size: 1rem;
    border-bottom: 0.0625rem dashed rgba(0, 0, 0, 0.07); /* ~1px */
    transition: transform 0.3s ease, color 0.3s ease;
}

.itw-services-feature-list li:last-child {
    border-bottom: none;
}

/* Animazione al passaggio del mouse sulla singola riga */
.itw-services-feature-list li:hover {
    transform: translateX(0.5rem); /* ~8px */
    color: var(--itw-primary);
    cursor: default;
}

.itw-services-feature-list li i {
    color: var(--itw-primary);
    margin-top: 0.25rem; /* ~4px */
    margin-right: 1rem; /* ~15px-16px */
    font-size: 1.2rem;

    /* Larghezza fissa elastica */
    width: 1.6rem; /* ~25px */
    text-align: center;
    flex-shrink: 0;
}

/* =========================================
   7. BOTTONI CON FRECCIA ANIMATA
   ========================================= */
.itw-services-btn-primary {
    background-color: var(--itw-primary);
    color: #ffffff;
    border: none;
    border-radius: 2.5rem; /* ~40px, per garantire la forma a pillola a prescindere dal font */
    padding: 0.875rem 2.25rem; /* ~14px 35px */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.075rem; /* ~1.2px */
    transition: all 0.3s ease;
    box-shadow: 0 0.375rem 1.25rem rgba(3, 169, 244, 0.35); /* ~6px 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* ~10px */
}

.itw-services-btn-icon {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.itw-services-btn-primary:hover {
    background-color: #0288D1;
    color: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(3, 169, 244, 0.45); /* ~8px 25px */
    transform: translateY(-0.2rem); /* ~ -3px */
}

/* La freccia scorre in avanti su hover */
.itw-services-btn-primary:hover .itw-services-btn-icon {
    transform: translateX(0.375rem); /* ~6px */
}

/* --- Classe speciale per la card Oro --- */
.itw-card-extra {
    border-top-color: var(--itw-gold) !important;
}

/* Icona grande superiore sempre oro */
.itw-card-extra .itw-services-icon-wrapper {
    background-color: var(--itw-gold-light) !important;
}
.itw-card-extra .itw-services-icon-wrapper i {
    color: var(--itw-gold) !important;
}

/* TUTTE le icone della lista nella card extra sempre oro */
.itw-card-extra .itw-services-feature-list li i {
    color: var(--itw-gold) !important;
}

/* Effetto hover sulla riga: il testo diventa oro */
.itw-card-extra .itw-services-feature-list li:hover {
    color: var(--itw-gold) !important;
}

/* --- NOVITÀ: Modifica dell'Ombra e del Bordo della CARD su HOVER --- */
.itw-card-extra:hover {
    box-shadow: 0 1.25rem 3.75rem rgba(var(--itw-gold-rgb), 0.18) !important;
    border-color: rgba(var(--itw-gold-rgb), 0.2) !important;
}

/* --- NOVITÀ: Modifica dello Sfondo e Bordo dell'ICONA GRANDE su HOVER --- */
.itw-card-extra:hover .itw-services-icon-wrapper {
    background-color: rgba(var(--itw-gold-rgb), 0.18) !important;
    border-color: rgba(var(--itw-gold-rgb), 0.1) !important;
}