/* Responsive CSS per Il Gioiello */

/* Media Query per dispositivi mobili */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }

    /* Header responsive */
    header {
        padding: 10px;
    }

    .nav-menu {
        flex-direction: column;
    }

    /* Sezioni Chi Siamo responsive */
    .storia-section,
    .missione-section,
    .valori-section {
        padding: 20px;
    }

    .storia-content,
    .missione-content,
    .valori-content {
        flex-direction: column;
    }

    .storia-image,
    .missione-image,
    .valori-image {
        width: 100%;
        margin: 20px 0;
    }

    .storia-text,
    .missione-text,
    .valori-text {
        width: 100%;
        padding: 20px 0;
    }

    /* Testo responsive */
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    p {
        font-size: 1em;
        line-height: 1.6;
    }
}

/* Media Query per tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 90%;
    }

    .storia-image,
    .missione-image,
    .valori-image {
        width: 45%;
    }

    .storia-text,
    .missione-text,
    .valori-text {
        width: 55%;
    }
}

/* Media Query per schermi grandi */
@media screen and (min-width: 1025px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}