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

   ELETTRO IMPIANTI srl - Main Styles

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



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

   1. CSS RESET & BASE

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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    color: #1F2937;

    line-height: 1.6;

    background-color: #FFFFFF;

    overflow-x: hidden;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

    transition: color 0.3s ease;

}



ul, ol {

    list-style: none;

}



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

   2. DESIGN SYSTEM - VARIABLES

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

:root {

    /* Colors */

    --primary: #1E40AF;

    --secondary: #F59E0B;

    --dark: #1F2937;

    --light: #F3F4F6;

    --white: #FFFFFF;

    --success: #10B981;

    --alert: #EF4444;

    

    /* Typography */

    --font-heading: 'Poppins', sans-serif;

    --font-body: 'Inter', sans-serif;

    

    /* Spacing (base 8px) */

    --space-xs: 8px;

    --space-sm: 16px;

    --space-md: 24px;

    --space-lg: 32px;

    --space-xl: 48px;

    --space-2xl: 64px;

    --space-3xl: 96px;

    

    /* Border Radius */

    --radius-sm: 4px;

    --radius-md: 6px;

    --radius-lg: 8px;

    

    /* Shadows */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);

    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    

    /* Transitions */

    --transition: all 0.3s ease;

    

    /* Z-index */

    --z-header: 1000;

    --z-modal: 2000;

}



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

   3. TYPOGRAPHY

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

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--space-md);

    color: var(--dark);

}



h1 {

    font-size: 2.5rem; /* 40px */

}



h2 {

    font-size: 2rem; /* 32px */

}



h3 {

    font-size: 1.5rem; /* 24px */

}



h4 {

    font-size: 1.25rem; /* 20px */

}



p {

    margin-bottom: var(--space-sm);

    line-height: 1.7;

}



small {

    font-size: 0.875rem; /* 14px */

}



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

   4. LAYOUT UTILITIES

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

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--space-md);

}



.container-fluid {

    width: 100%;

    padding: 0 var(--space-md);

}



.section {

    padding: var(--space-3xl) 0;

}



.section-alt {

    background-color: var(--light);

}



.text-center {

    text-align: center;

}



.text-primary {

    color: var(--primary);

}



.text-secondary {

    color: var(--secondary);

}



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

   5. BUTTONS

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

.btn {

    display: inline-block;

    padding: 12px 24px;

    font-family: var(--font-body);

    font-size: 1rem;

    font-weight: 600;

    text-align: center;

    border: none;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: var(--transition);

    min-width: 44px;

    min-height: 44px;

}



.btn-primary {

    background-color: var(--primary);

    color: var(--white);

}



.btn-primary:hover {

    background-color: #1E3A8A;

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}



.btn-secondary {

    background-color: var(--secondary);

    color: var(--white);

}



.btn-secondary:hover {

    background-color: #D97706;

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}



.btn-alert {

    background-color: var(--alert);

    color: var(--white);

}



.btn-alert:hover {

    background-color: #DC2626;

    transform: scale(1.05);

}



.btn-outline {

    background-color: transparent;

    border: 2px solid var(--primary);

    color: var(--primary);

}



.btn-outline:hover {

    background-color: var(--primary);

    color: var(--white);

}



.btn-large {

    padding: 16px 32px;

    font-size: 1.125rem;

}



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

   6. CARDS

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

.card {

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: var(--space-lg);

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    height: 100%;

}



.card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-5px);

}



.card-icon {

    width: 64px;

    height: 64px;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: var(--space-md);

    font-size: 1.5rem;

    color: var(--white);

}



.card-title {

    font-size: 1.25rem;

    margin-bottom: var(--space-sm);

    color: var(--dark);

}



.card-text {

    color: #6B7280;

    margin-bottom: var(--space-md);

}



.card-link {

    color: var(--primary);

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition);

}



.card-link:hover {

    color: var(--secondary);

    gap: 12px;

}



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

   7. HEADER / NAVBAR

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

.header {

    background-color: var(--white);

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: var(--z-header);

    transition: var(--transition);

}



.header.scrolled {

    box-shadow: var(--shadow-md);

    padding: 8px 0;

}



.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--space-md) 0;

}



.navbar-brand {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 12px;

}



.navbar-brand img {

    height: 50px;

}



.navbar-menu {

    display: flex;

    align-items: center;

    gap: var(--space-lg);

}



.navbar-nav {

    display: flex;

    gap: var(--space-lg);

    align-items: center;

}



.nav-link {

    font-weight: 500;

    color: var(--dark);

    padding: 8px 0;

    position: relative;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--secondary);

    transition: width 0.3s ease;

}



.nav-link:hover,

.nav-link.active {

    color: var(--primary);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.navbar-cta {

    margin-left: var(--space-md);

}



/* Mobile Menu Toggle */

.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    gap: 6px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

}



.mobile-menu-toggle span {

    display: block;

    width: 30px;

    height: 4px;

    background-color: var(--primary);

    transition: var(--transition);

    border-radius: 2px;

}



.mobile-menu-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(8px, 8px);

}



.mobile-menu-toggle.active span:nth-child(2) {

    opacity: 0;

}



.mobile-menu-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

}



/* Body scroll lock */

body.menu-open {

    overflow: hidden;

}



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

   8. HERO SECTION

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

.hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    background: linear-gradient(135deg, rgba(30, 64, 175, 0.8), rgba(30, 58, 138, 0.7)), 

                url('../images/hero/hero-bg.jpg') center/cover no-repeat;

    color: var(--white);

    padding: var(--space-3xl) 0;

    margin-top: 82px; /* Header height */

}



.hero-content {

    max-width: 700px;

}



.hero-headline {

    font-size: 3rem;

    color:#fff;

    margin-bottom: var(--space-md);

    animation: fadeInUp 0.8s ease-out;

}



.hero-subheadline {

    font-size: 1.25rem;

    margin-bottom: var(--space-xl);

    opacity: 0.95;

    font-weight: 400;

    animation: fadeInUp 0.8s ease-out 0.2s backwards;

}



.hero-cta {

    display: flex;

    gap: var(--space-md);

    flex-wrap: wrap;

    animation: fadeInUp 0.8s ease-out 0.4s backwards;

}



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

   9. SECTIONS

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

.section-header {

    text-align: center;

    max-width: 800px;

    margin: 0 auto var(--space-2xl);

}



.section-title {

    font-size: 2.5rem;

    margin-bottom: var(--space-sm);

    position: relative;

    display: inline-block;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -8px;

    left: 50%;

    transform: translateX(-50%);

    width: 60px;

    height: 4px;

    background: linear-gradient(to right, var(--primary), var(--secondary));

    border-radius: 2px;

}



.section-intro {

    font-size: 1.125rem;

    color: #6B7280;

    line-height: 1.8;

}



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

   10. GRID LAYOUTS

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

.grid {

    display: grid;

    gap: var(--space-lg);

}



.grid-2 {

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

}



.grid-3 {

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

}



.grid-4 {

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

}



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

   11. CTA EMERGENCY SECTION

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

.cta-emergency {

    background: linear-gradient(135deg, var(--alert), #DC2626);

    color: var(--white);

    text-align: center;

    padding: var(--space-2xl) var(--space-md);

    border-radius: var(--radius-lg);

    margin: var(--space-3xl) 0;

}



.cta-emergency h2 {

    color: var(--white);

    font-size: 2rem;

    margin-bottom: var(--space-md);

}



.cta-emergency .btn {

    background-color: var(--white);

    color: var(--alert);

    font-size: 1.25rem;

    padding: 16px 40px;

}



.cta-emergency .btn:hover {

    background-color: var(--light);

    transform: scale(1.05);

}



.cta-emergency-subtitle {

    margin-top: var(--space-md);

    opacity: 0.95;

    font-size: 1rem;

}



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

   12. FEATURES / WHY CHOOSE US

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

.features {

    background-color: var(--light);

}



.feature-item {

    text-align: center;

    padding: var(--space-lg);

}



.feature-icon {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto var(--space-md);

    font-size: 2rem;

    color: var(--white);

}



.feature-title {

    font-size: 1.25rem;

    margin-bottom: var(--space-sm);

}



.feature-text {

    color: #6B7280;

}



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

   13. FOOTER

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

.footer {

    background-color: var(--dark);

    color: var(--white);

    padding: var(--space-2xl) 0 var(--space-md);

}



.footer-content {

    display: grid;

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

    gap: var(--space-xl);

    margin-bottom: var(--space-xl);

}



.footer-column h3 {

    color: var(--white);

    font-size: 1.125rem;

    margin-bottom: var(--space-md);

}



.footer-logo {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--secondary);

    margin-bottom: var(--space-md);

    display: flex;

    align-items: center;

    gap: 12px;

}



.footer-logo img {

    height: 45px;

    width: auto;

}



.footer-text {

    color: #D1D5DB;

    line-height: 1.7;

    margin-bottom: var(--space-md);

}



.footer-links {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

}



.footer-link {

    color: #D1D5DB;

    transition: color 0.3s ease;

}



.footer-link:hover {

    color: var(--secondary);

}



.footer-contact-item {

    display: flex;

    align-items: start;

    gap: 12px;

    margin-bottom: var(--space-sm);

    color: #D1D5DB;

}



.footer-contact-item i {

    color: var(--secondary);

    margin-top: 4px;

    min-width: 20px;

}



.footer-social {

    display: flex;

    gap: var(--space-md);

    margin-top: var(--space-md);

}



.social-icon {

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.social-icon:hover {

    background-color: var(--secondary);

    transform: translateY(-3px);

}



.footer-bottom {

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

    padding-top: var(--space-md);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-md);

}



.footer-legal {

    display: flex;

    gap: var(--space-md);

    flex-wrap: wrap;

}



.footer-legal a {

    color: #D1D5DB;

    font-size: 0.875rem;

}



.footer-legal a:hover {

    color: var(--secondary);

}



.copyright {

    color: #9CA3AF;

    font-size: 0.875rem;

}



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

   14. BADGE

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

.badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.875rem;

    font-weight: 600;

}



.badge-alert {

    background-color: var(--alert);

    color: var(--white);

}



.badge-success {

    background-color: var(--success);

    color: var(--white);

}



.badge-primary {

    background-color: var(--primary);

    color: var(--white);

}



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

   15. ANIMATIONS

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

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



.fade-in {

    animation: fadeIn 0.6s ease-out;

}



.fade-in-up {

    animation: fadeInUp 0.6s ease-out;

}



/* Scroll animations */

.scroll-fade-in {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.scroll-fade-in.visible {

    opacity: 1;

    transform: translateY(0);

}



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

   16. BREADCRUMB

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

.breadcrumb {

    padding: var(--space-md) 0;

    display: flex;

    gap: 12px;

    align-items: center;

    font-size: 0.875rem;

}



.breadcrumb a {

    color: #f59e0b;

}



.breadcrumb a:hover {

    color: var(--secondary);

}



.breadcrumb-separator {

    color: #9CA3AF;

}



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

   17. SCROLL TO TOP BUTTON

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

.scroll-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background-color: var(--primary);

    color: var(--white);

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: 999;

    box-shadow: var(--shadow-lg);

}



.scroll-to-top.visible {

    opacity: 1;

    visibility: visible;

}



.scroll-to-top:hover {

    background-color: var(--secondary);

    transform: translateY(-5px);

}



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

   18. LOADING SPINNER

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

.spinner {

    border: 3px solid var(--light);

    border-top: 3px solid var(--primary);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



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

   19. UTILITIES

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

.hidden {

    display: none !important;

}



.visible {

    display: block !important;

}



.mb-0 { margin-bottom: 0 !important; }

.mb-1 { margin-bottom: var(--space-xs); }

.mb-2 { margin-bottom: var(--space-sm); }

.mb-3 { margin-bottom: var(--space-md); }

.mb-4 { margin-bottom: var(--space-lg); }

.mb-5 { margin-bottom: var(--space-xl); }



.mt-0 { margin-top: 0 !important; }

.mt-1 { margin-top: var(--space-xs); }

.mt-2 { margin-top: var(--space-sm); }

.mt-3 { margin-top: var(--space-md); }

.mt-4 { margin-top: var(--space-lg); }

.mt-5 { margin-top: var(--space-xl); }



.p-0 { padding: 0 !important; }



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

   20. COOKIE BANNER

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

.cookie-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--dark);

    color: var(--white);

    padding: var(--space-md) var(--space-lg);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-lg);

    flex-wrap: wrap;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.cookie-banner.cookie-banner-hidden {

    transform: translateY(100%);

    opacity: 0;

}



.cookie-banner-text {

    flex: 1;

    min-width: 250px;

}



.cookie-banner-text p {

    margin: 0;

    font-size: 0.9375rem;

    line-height: 1.5;

}



.cookie-banner-text a {

    color: var(--secondary);

    text-decoration: underline;

}



.cookie-banner-buttons {

    display: flex;

    gap: var(--space-sm);

    flex-shrink: 0;

}



.cookie-banner .btn {

    padding: 10px 20px;

    font-size: 0.9375rem;

}



.cookie-banner .btn-outline-cookie {

    background: transparent;

    border: 2px solid rgba(255, 255, 255, 0.5);

    color: var(--white);

}



.cookie-banner .btn-outline-cookie:hover {

    border-color: var(--white);

    background: rgba(255, 255, 255, 0.1);

}

.p-1 { padding: var(--space-xs); }

.p-2 { padding: var(--space-sm); }

.p-3 { padding: var(--space-md); }

.p-4 { padding: var(--space-lg); }

.p-5 { padding: var(--space-xl); }

@media (max-width: 768px) {
    .header {
    padding-top: 15px;
    }

.nav-link::after {

    bottom: 12px;

}
}