/* Stili globali e generali */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fff; /* Sfondo bianco per tutta la pagina */
    color: #333;
    font-size: 16px; /* Base font size per il body */
}

#simple-live-clock {
    text-align: center;
    font-weight: lighter;
    color: blue;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.main-container {
    width: 90%; /* Larghezza responsiva per mobile */
    max-width: 950px; /* Larghezza massima come l'immagine del logo */
    margin: 20px auto; /* Centra il container */
    background-color: #fff; /* Sfondo bianco per il contenuto principale */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    text-align: center;
    margin-bottom: 20px;
}

.header-logo img {
    max-width: 100%; /* Assicura che l'immagine si ridimensioni su mobile */
    height: auto;
    display: block; /* Per centrare l'immagine */
    margin: 0 auto; /* Per centrare l'immagine */
}

/* Regola per il testo specifico nel header "Servizio di riparazione..." */
.header-main-text {
    font-size: 15px; /* Leggermente aumentato per una migliore leggibilità su mobile/default */
    margin-bottom: 20px;
    text-align: center; /* Assicurati che il testo sia centrato */
}

/* Stili per i link di contatto nel header */
.header-contact-links {
    line-height: 1.0; /* Compattare l'interlinea per i link di contatto */
    margin-top: 10px;
    margin-bottom: 10px;
}

.contact-link {
    display: block; /* Ogni link su una nuova riga */
    text-decoration: none;
    color: #0000FF; /* Blu come da originale */
    font-family: Arial, sans-serif;
    font-size: 22px; /* Ridotto leggermente per armonia */
    margin-bottom: 5px; /* Spazio tra i link */
}

.whatsapp-link-container {
    margin-top: 5px;
}

.whatsapp-icon {
    width: 32px; /* AUMENTATO: Icona WhatsApp più grande */
    height: 32px; /* AUMENTATO: Icona WhatsApp più grande */
    vertical-align: middle;
    margin-right: 5px;
    fill: green; /* Colore dell'icona WhatsApp */
}

.facebook-link-container {
    margin-top: 15px;
}

.facebook-logo {
    width: 240px; /* Raddoppiato per desktop */
    height: auto;
}

.header-image-promo {
    margin-top: 20px;
    margin-bottom: 20px;
}

.header-image-promo img {
    max-width: 100%;
    height: auto;
    display: block; /* Rimuove lo spazio extra sotto l'immagine */
    margin: 0 auto; /* Centra l'immagine */
}

.header-info-block {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.header-info-block h2 {
    color: #000080;
    font-size: 24px;
    margin-top: 0;
}

.header-info-block h2 span {
    display: block; /* Ogni span su una nuova riga per il titolo */
}

/* Classi per colori di testo */
.green-text {
    color: #008000;
}

.dark-blue-text {
    color: #000080;
}

.red-highlight {
    color: #FF0000;
}

.red-text {
    color: #B22222;
}

.gray-blue-text {
    color: #5A708C;
}

.dark-blue-link-text {
    color: #3033A4;
}

.green-link-text {
    color: #008000;
}

/* Testi informativi con font specifici */
.tags-info-text {
    font-size: 14px; /* MODIFICATO: Uniformato a courier-address-text */
    font-family: Verdana, sans-serif; /* MODIFICATO: Uniformato a courier-address-text */
    color: #333300;
}

.general-info-text {
    text-align: justify;
    font-family: Arial, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
}

.small-text-info {
    font-family: Verdana, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
}

.dark-blue-text-small {
    font-weight: 400;
    font-family: Arial, sans-serif;
    color: #000080;
    font-size: 15px; /* Aggiunto per coerenza */
}

.courier-address-text {
    font-family: Verdana, sans-serif;
    font-size: 14px;
}

.brand-list-text {
    font-family: Arial, sans-serif;
    color: #FFFFFF;
    font-size: 16px; /* Coerente con la base del body */
}

.call-us-text {
    font-size: 16px; /* Coerente con la base del body */
    font-family: Arial, sans-serif;
    color: #000000;
}

.weekend-hours-text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #B22222;
    margin-top: 10px; /* Aggiunto per distanziare dai link */
}

.email-text {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
}

.copyright-footer-text {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    color: #000000;
}

.manifesto-text { /* Anche se rimosso dall'HTML, mantengo la regola per coerenza */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #000000;
}

.general-text-info {
    font-family: Verdana, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
    color: #000000;
}


/* Stili per le HR */
hr {
    border: none; /* Rimuove il bordo predefinito */
    border-top: 1px solid #FF0000; /* Assicura un bordo rosso visibile */
    width: 100%; /* Larghezza quanto il contenitore principale */
    margin: 20px 0; /* Spazio sopra e sotto le linee */
}

/* Assicurati che .red-hr segua la stessa logica se usato */
.red-hr {
    border: none;
    border-top: 1px solid #FF0000;
    width: 100%;
    margin: 20px 0;
}


.main-nav {
    background-color: #BDD4DE; /* Sfondo della barra del menu (azzurrino quasi grigio) */
    padding: 10px 0;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 8px; /* Bordi arrotondati per la barra del menu */
}

.main-nav a {
    color: white; /* Colore del testo: bianco */
    text-decoration: none;
    padding: 12px 25px; /* Aumentato per un look da bottone */
    display: inline-block;
    font-size: 16px;
    background-color: #3033A4; /* Colore di sfondo del bottone (il blu scuro originale) */
    border-radius: 5px; /* Bordi arrotondati dei bottoni */
    margin: 0 8px; /* Spazio tra i bottoni */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Ombra per dare profondità */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transizione fluida */
}

.main-nav a:hover {
    background-color: #4447BD; /* Blu leggermente più chiaro al passaggio del mouse */
    transform: translateY(-2px); /* Effetto "alza" al passaggio del mouse */
}

.section-blue-bg {
    background-color: #3033A4;
    color: white;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 15px; /* Bordi più arrotondati */
    border: 10px solid #BDD4DE; /* Cornice azzurrino quasi grigio, spessore 10px */
}

.section-blue-bg h2 {
    font-size: 30px; /* Base size per h2 in questa sezione */
    margin-top: 0;
    margin-bottom: 10px;
}

.section-blue-bg h2 b {
    display: block; /* Ogni b su una nuova riga */
}

.large-text {
    font-family: Verdana, sans-serif;
    font-size: 40px; /* Convertito da 40pt (circa 53px) a 40px */
}

.medium-text {
    font-family: Verdana, sans-serif;
    font-size: 28px; /* Convertito da 26pt (circa 34px) a 28px */
}

.white-text {
    color: #FFFFFF;
}

.content-layout {
    display: flex;
    flex-wrap: wrap; /* Permette ai blocchi di andare a capo su schermi piccoli */
    gap: 20px; /* Spazio tra le colonne */
}

.main-content {
    flex: 3; /* Occupa più spazio */
    min-width: 300px; /* Per evitare che diventi troppo stretto */
}

.left-column {
    flex: 1; /* Occupa meno spazio */
    min-width: 200px; /* Per evitare che diventi troppo stretto */
    background-color: #3033A4; /* Sfondo blu come da immagine */
    padding: 20px;
    color: white;
    border-radius: 15px; /* Bordi arrotondati per la colonna laterale */
    border: 10px solid #BDD4DE; /* Cornice azzurrino quasi grigio per la colonna laterale */
}

.flex-image-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Mantieni il gap tra le immagini */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Stili specifici per le immagini dentro .flex-image-group per desktop/larger screens */
.flex-image-group img:first-child {
    width: 65%; /* La prima immagine è più grande */
    max-width: 450px; /* Larghezza massima per la prima immagine su schermi grandi */
    height: auto;
    flex-basis: 0; /* Permette a flex-grow di distribuire lo spazio in base alla proporzione */
    flex-grow: 1;
}

.flex-image-group img:nth-child(2) {
    width: 30%; /* La seconda immagine è più piccola */
    max-width: 250px; /* Larghezza massima per la seconda immagine su schermi grandi */
    height: auto;
    flex-basis: 0; /* Permette a flex-grow di distribuire lo spazio in base alla proporzione */
    flex-grow: 1;
}


.contact-info {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

.supported-brands {
    margin-top: 20px;
}

.supported-brands h2 {
    color: white;
    text-align: center;
    margin-bottom: 15px;
}

.supported-brands img {
    max-width: 80px; /* Regola la dimensione dei loghi dei marchi */
    height: auto;
    margin: 5px;
    vertical-align: middle; /* Allinea le immagini al centro verticalmente */
}

.promo-riversamenti {
    margin-top: 20px;
}

.promo-riversamenti img {
    max-width: 100%;
    height: auto;
}

/* Stili per la sezione "In quanti acquistiamo un Pc..." (ora main-content-below) */
.main-content-below {
    /* Questa sezione è dentro al main-container, quindi ne eredita la larghezza */
    padding: 20px 0; /* Padding interno, il bordo è gestito con la classe */
}

.yellow-separator {
    background-color: #FFCC00;
    height: 10px; /* O l'altezza che desideri per il separatore */
    margin: 20px 0; /* Spazio sopra e sotto */
}

.help-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid #FF5221;
    padding: 10px;
    margin-bottom: 20px; /* Spazio sotto il box */
}

.help-list-column {
    flex: 1 1 45%;
    padding: 10px;
    box-sizing: border-box;
}

.help-list-item {
    font-family: Arial, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
}

.red-arrow {
    color: #B22222;
}

.address-link {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 16px; /* Coerente con la base del body */
    text-decoration: none; /* Rimuove la sottolineatura di default */
}

.facebook-logo-bottom {
    width: 240px; /* Raddoppiato per desktop */
    height: auto;
    margin-top: 10px;
}

/* RIMOSSO: Classe .shipping-call-to-action */

.convenient-prices {
    color: #000000;
    font-size: 40px; /* Convertito da 40pt a 40px per armonia */
    font-style: italic;
    font-weight: bold;
}

.convenient-prices img {
    width: 40px; /* Dimensione dell'occhiolino, puoi regolare */
    height: auto;
    vertical-align: middle;
}

.monitor-img {
    max-width: 100%;
    height: auto;
    margin-top: 15px; /* Spazio sopra l'immagine */
}


/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
    margin-top: 20px;
}

.copyright {
    font-size: 0.9em; /* Relativo alla dimensione del body */
    margin-top: 10px;
}

.tags-text {
    font-size: 0.8em; /* Relativo alla dimensione del body */
    color: #ccc;
    display: block; /* Per far sì che occupi una nuova riga se necessario */
    margin-top: 15px;
}

/* Utility classes */
.text-center {
    text-align: center;
}

/* Media Query per desktop (schermi più grandi, ad esempio da 960px per tenere conto della larghezza dell'immagine) */
@media (min-width: 960px) {
    body {
        background-color: #fff; /* Assicura che lo sfondo sia bianco anche su desktop */
    }

    .main-container {
        width: 950px; /* Larghezza fissa come l'immagine del logo per desktop */
        max-width: 950px; /* Limita la larghezza massima a quella del logo */
    }

    .header-main-text {
        font-size: 29px; /* Diminuito di 1px per desktop (era 30px) */
    }

    .contact-link {
        font-size: 24px; /* Aumento per desktop */
    }

    .convenient-prices {
        font-size: 42px; /* Aumenta leggermente anche questa su desktop */
    }
}

/* Media Query per schermi di media dimensione, per mantenere le due immagini affiancate se possibile */
@media (min-width: 601px) and (max-width: 959px) {
    .flex-image-group img:first-child {
        width: 60%;
        max-width: 100%; /* Permette di scalare all'interno del 60% */
    }

    .flex-image-group img:nth-child(2) {
        width: 35%;
        max-width: 100%;
    }
}


/* Media Query per schermi molto piccoli (es. iPhone 5/SE o simili) */
@media (max-width: 600px) {
    .main-container {
        padding: 10px; /* Riduci il padding su schermi molto piccoli */
        margin: 10px auto;
    }
    .header-main-text {
        font-size: 14px; /* Leggermente ridotto per schermi molto piccoli */
    }
    .contact-link {
        font-size: 18px !important; /* Riduci la dimensione dei numeri di telefono se troppo grandi */
    }
    .whatsapp-icon {
        width: 28px; /* AUMENTATO per mobile */
        height: 28px; /* AUMENTATO per mobile */
    }
    .facebook-logo, .facebook-logo-bottom {
        width: 160px; /* Raddoppiato per mobile */
    }
    .section-blue-bg h2 {
        font-size: 24px;
    }
    .section-blue-bg h2 b {
        font-size: 20px;
    }
    .supported-brands img {
        max-width: 60px;
    }
    .large-text {
        font-size: 30px; /* Adattato per schermi piccoli */
    }
    .medium-text {
        font-size: 20px; /* Adattato per schermi piccoli */
    }
    .help-list-item {
        font-size: 14px;
    }
    .general-info-text, .general-text-info, .small-text-info, .dark-blue-text-small, .courier-address-text, .brand-list-text, .call-us-text, .email-text, .copyright-footer-text, .manifesto-text {
        font-size: 13px; /* Leggermente ridotto per schermi molto piccoli */
    }
    /* .tags-info-text è ora gestito globalmente */
    .convenient-prices {
        font-size: 30px; /* Adattato per schermi piccoli */
    }
    .convenient-prices img {
        width: 30px;
    }

    /* Le due immagini del notebook si impilano su schermi piccoli */
    .flex-image-group img:first-child {
        width: 50%; /* Mantenuta al 50% per mobile */
        max-width: 50%;
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 1;
        display: block;
        margin-bottom: 10px; /* Spazio tra le immagini impilate */
    }
    .flex-image-group img:nth-child(2) {
        width: 25%; /* Dimezzata a 25% solo per mobile */
        max-width: 25%;
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 1;
        display: block;
        margin-bottom: 10px; /* Spazio tra le immagini impilate */
    }

    /* Regola per i bottoni del menu su mobile */
    .main-nav a {
        display: block;
        width: 80%;
        max-width: 250px;
        margin: 8px auto;
    }
}