/* ==========================================================================

/* KRONOS COMPUTER & SERVIZI - STYLESHEET

/* ========================================================================== */



/* Variabili di Colore Aziendali */

:root {

--brand-dark: #0a192f;

--brand-navy: #0f2942;

--brand-blue: #0052cc;

--brand-light-blue: #0080ff;

--brand-cyan: #00d2ff;

--brand-gray-bg: #f8fafc;

}



/* Personalizzazione Scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--brand-dark);

}

::-webkit-scrollbar-thumb {

background: #1e3a8a;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: var(--brand-blue);

}



/* Classi Utility e Componenti */

.top-bar {

background-color: var(--brand-dark);

}



.hero-bg {

background: radial-gradient(circle at 70% 30%, rgba(0, 128, 255, 0.25) 0%, rgba(10, 25, 47, 0.95) 70%), url('https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;

}



.gradient-text {

background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}



.glass-card {

background: rgba(15, 41, 66, 0.7);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}



/* Menu e Pulsanti */

.btn-primary {

background: linear-gradient(135deg, var(--brand-blue), var(--brand-light-blue));

transition: all 0.3s ease;

}



.btn-primary:hover {

opacity: 0.95;

transform: translateY(-1px);

}



/* Menu e Navigazione */

.nav-link {

    position: relative;

    padding: 0.5rem 0.75rem;

    font-size: 0.875rem;

    font-weight: 500;

    color: #334155;

    transition: color 0.2s ease-in-out;

}



.nav-link:hover,

.nav-link.active {

    color: var(--brand-blue);

    font-weight: 600;

}



/* Riga/Sottolineatura sotto la voce attiva */

.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0%;

    height: 2px;

    background-color: var(--brand-blue);

    transition: width 0.25s ease-in-out;

    border-radius: 2px;

}



/* Mostra la riga se la voce è attiva o in hover */

.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



/* Hover Animazione Schede Servizio */

.service-card:hover img {

transform: scale(1.05);

}



.service-card:hover h3 {

color: var(--brand-blue);

}