@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Arimo:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,500,600,700');

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:100,200,300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,200,300,400,500,700,900');

        
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Contenitore principale con immagine di sfondo */
.hero-container {
    /* Sostituisci l'URL con la tua immagine */
    background-image: url('../../img/ibatti-hero.jpg');
    height: 100vh; /* Occupa il 100% dell'altezza della viewport */
    background-size: cover; /* Copre tutto lo spazio disponibile */
    background-position: center; /* Centra l'immagine */
    background-repeat: no-repeat;
    
    /* Flexbox per centrare e impilare il contenuto */
    display: flex;
    flex-direction: column; /* Impila i div uno sopra l'altro */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra orizzontalmente */
    text-align: center;
}

/* Stile comune per i tre div sovrapposti */
.content-box {
    background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco semi-trasparente */
    background-color: transparent;
    padding: 20px;
    margin: 10px 0; /* Spazio verticale tra i div */
    /*border-radius: 8px;*/
    width: 90%;
    max-width: 700px; /* Larghezza massima per schermi grandi */
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.2);*/
}

/* Stile specifico per il logo */
.logo-box img {
    max-height: 120px;
    width: auto;
}

h1 { margin: 0; color: #333; }
p { margin: 0; color: #666; }
    
.h1 {
    font-family: "Roboto";
    font-size: clamp(24px, 36px, 48px);
    font-size: clamp(3rem, 2vw + 1rem, 3rem);
    line-height: clamp(3rem, 2vw + 1rem, 3rem);
    letter-spacing: clamp(-1px, -3px, -5px);
}