body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #112E41;
}

.logo-container {
    text-align: center;
    padding: 10px;
}

.logo {
    height: 200px; /* Ajustez selon la taille de votre logo */
}

.navbar ul {
    list-style: none;
    background-color: #922f34;
    text-align: center;
    padding: 0;
    margin: 0;
    padding-top: 10px; /* Ajouté pour donner de l'espace au-dessus du menu */
}    

.navbar li {
    display: inline;
}

.navbar a {
    text-decoration: none;
    color: white;
    padding: 15px 20px;
    display: inline-block;
}

.hero {
    background-image: url('images/background.jpg');
    background-size: cover;
    color: white;
    text-align: center;
    padding: 100px 20px;
}


}

.hero p {
    color: #F8EED8; /* Un ton clair pour contraster avec le fond sombre */
    max-width: 600px; /* Limite la largeur du texte pour une meilleure lisibilité */
    margin: 20px auto; /* Centre le texte horizontalement */
    font-size: 18px; /* Taille de police pour une lecture confortable */
}

.cta-buttons {
    margin-top: 20px;
}

.cta-btn {
    text-decoration: none;
    background-color: #F4D03F;
    color: #112E41;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0 10px;
}

.cta-btn:hover {
    background-color: #D79251;
}


.pizza-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Espacement entre les images */
    padding: 40px 0; /* Espacement autour de la galerie */
}

.pizza-image {
    width: calc(33% - 20px); /* Ajustement pour tenir compte de l'espacement */
    height: auto; /* Pour conserver les proportions de l'image */
}



/* Footer */
footer {
    background-color: #112E41;
    color: white;
    text-align: center;
    margin-top: 20px;
    padding: 30px 0;
    background-image: url('images/background.jpg');
}

.social-icons a {
    display: inline-block;
    margin: 0 10px;
    
}

.social-icons img {
    width: 40px; /* Largeur de l'icône */
    height: 40px; /* Hauteur de l'icône */
}


.menu-page {
    max-width: auto;
    margin: auto;
    padding: 20px;
    background-image: url('images/background.jpg');
}

.menu-page h1 {
    font-family: 'Montserrat', sans-serif;
    color: #f2eaba; 
}

.pizzas {
    display: flex;
    max-width: 800px;
    margin: auto;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pizza-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Cela pousse le contenu vers le haut et le prix vers le bas */
    width: calc(33% - 20px); /* Ajustez pour l'espacement */
    margin-bottom: 20px;
    background-color: #f8eed8;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #112E41;
}

.pizza-item img {
    width: 100%; /* Ajustez la largeur de l'image */
    border-radius: 5px; /* Arrondit les coins de l'image */
    margin-bottom: 10px;
}

.pizza-item h2, .pizza-item h3 {
    margin: 10px 0; /* Ajoute un peu d'espace autour des titres */
}

.pizza-item p {
    margin: 0 0 10px; /* Assurez-vous que le paragraphe ne touche pas le prix */
    flex-grow: 1; /* Permet au paragraphe de prendre tout l'espace disponible, poussant ainsi le prix vers le bas */
}

.about-page {
    max-width: 800px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;

    background-color: #f8eed8;
    color: #112E41;
}

.founder-section {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

}

.founder-info {
    width: 30%; /* Ajuste la largeur de chaque colonne pour qu'elles s'adaptent à l'espace disponible */
    text-align: center; /* Centre le contenu de chaque colonne */
}

.about-image {
    width: 100%; /* Ajuste la largeur de l'image à celle de la colonne */
    border-radius: 5px; /* Arrondit les coins de l'image */
    margin-bottom: 10px; /* Espace entre l'image et le titre */
}

.founder-info h2 {
    margin: 10px 0; /* Ajoute un peu d'espace autour du titre */
    color: #112E41; /* Couleur du titre */
}

.founder-info p {
    font-size: 14px; /* Taille de la police pour le texte */
    color: #333; /* Couleur du texte */
    text-align: justify;
}

.reservation-page {
    max-width: 600px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #f8eed8;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #112E41;
}

.reservation-page h2{
    font-size: 16px;
    color:#922f34;
    text-align: justify;
}

.reservation-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments du formulaire */
    gap: 10px; /* Espacement entre les éléments du formulaire */
    width: 100%; /* Utilisez 100% pour que le formulaire occupe toute la largeur du conteneur .reservation-page */
    max-width: 500px; /* Ajustez la largeur maximale du formulaire selon vos besoins */
    margin: auto; /* Centrage du formulaire dans le conteneur .reservation-page */
}

.reservation-form label, 
.reservation-form input, 
.reservation-form select, /* Ajouté pour inclure les <select> dans le style */
.reservation-form input[type="submit"] {
    width: auto; /* Ajustez la largeur, en soustrayant les paddings si nécessaire */
    padding: 5px;
    margin-bottom: 5px; /* Ajustez selon l'espace désiré entre les éléments du formulaire */
}

.reservation-form input[type="submit"] {
    cursor: pointer;
    background-color: #112E41;
    color: white;
    border: none;
    padding: 5px;
    margin-top: 5px;
    border-radius: 5px;
}


.reservation-form input[type="submit"]:hover {
    background-color: #D79251;
}

.contact-page {
    max-width: 800px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #f8eed8;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #112E41;
}

.contact-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.contact-info section {
    width: 30%;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.contact-form label, 
.contact-form input, 
.contact-form textarea, 
.contact-form input[type="submit"] {
    width: 90%;
    padding: 10px;
    margin: 5px 0;
}

.contact-form input[type="submit"] {
    cursor: pointer;
    background-color: #112E41;
    color: white;
    border: none;
    border-radius: 5px;
}

.contact-form input[type="submit"]:hover {
    background-color: #D79251;
}