:root {

    --primary: #0066b2;

    --dark: #1a1a1b;

    --grey: #f4f4f4;

    --text: #333;

    --white: #ffffff;

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

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

    color: var(--text);

    line-height: 1.7;

    background-color: var(--white);

}



.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }



/* Header */

header {

    background: var(--white);

    padding: 15px 0;

    position: sticky;

    top: 0;

    z-index: 100;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



header nav { display: flex; justify-content: space-between; align-items: center; }



.logo { font-weight: 800; font-size: 1.4rem; color: var(--dark); letter-spacing: -1px; }

.logo span { color: var(--primary); }



.nav-links { display: flex; list-style: none; }

.nav-links a { text-decoration: none; color: var(--dark); margin: 0 15px; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }

.nav-links a:hover { color: var(--primary); }



.btn-tel { background: var(--primary); color: white; padding: 8px 18px; border-radius: 4px; text-decoration: none; font-weight: bold; }



/* Hero */

.hero {

    height: 500px;

    background: url('images/gs1200.jpg') center/cover;

    display: flex;

    align-items: center;

    position: relative;

    color: white;

}



.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }

.hero-content { position: relative; z-index: 1; }

.hero h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1.2; margin-bottom: 20px; }

.fb-link { color: #fff; background: #3b5998; padding: 10px 20px; text-decoration: none; display: inline-block; margin-top: 20px; border-radius: 5px; }



/* About Section */

.about { padding: 80px 0; }

.section-header h2 { font-size: 2.5rem; color: var(--dark); }

.line { width: 60px; height: 4px; background: var(--primary); margin: 15px 0 40px; }

.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }

.about-text p { margin-bottom: 20px; font-size: 1.1rem; text-align: justify;padding-left: 20px; padding-right: 20px;}

.highlight-item { display: flex; align-items: center; margin-bottom: 15px; font-weight: bold; color: var(--primary); }

.highlight-item i { margin-right: 15px; font-size: 1.2rem; }



/* Modelli Section */

.models { background: var(--grey); padding: 80px 0; }

.models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; }

.model-box { background: white; padding: 30px; border-top: 4px solid var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.model-box h3 { margin-bottom: 15px; color: var(--dark); }

.model-box ul { list-style: none; }

.model-box li { font-size: 0.9rem; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px; }



/* Contact Card */

.contact { padding: 80px 0; }

.contact-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: white; border-radius: 10px; overflow: hidden; }

.contact-info { padding: 50px; }

.phones a { display: block; color: var(--primary); font-size: 1.5rem; text-decoration: none; margin: 15px 0; font-weight: 800; }

.map-placeholder { background: #333; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }



footer { background: #111; color: #777; padding: 30px 0; text-align: center; font-size: 0.8rem; }



/* Mobile */

@media (max-width: 768px) {

    .nav-links { display: none; }

    .hero h1 { font-size: 2.2rem; }

    .about-grid, .contact-card { grid-template-columns: 1fr; }

}



.contact-map {

    /* Sostituisci questo URL con la tua foto se preferisci */

    background: url('images/stefano.png') center/cover no-repeat;

    position: relative;

    min-height: 400px;

}



.map-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.3); /* Scurisce la foto per leggere il testo */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px;

    color: white;

}