/*======================== Fonts ======================*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, .text-bio .prenom-nom {
    font-family: 'Oswald', sans-serif;
}

.text-bio .domaine {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

.text-bio .paragraphe-bio {
    font-family: 'Open Sans', sans-serif;
}

.cta button {
    font-family: 'Open Sans', sans-serif;
}


/*======================== Général ======================*/

body {
    margin: auto;
    padding: 0;
    min-width: 320;
    color: black;
    max-width: 1920px;
}

body.no-scroll {
    overflow: hidden;
  }

section{
    margin: 150px auto;
}

/*======================== Header ======================*/

.site-header{
    display: block;
}

.hero{
    margin: 0;
    padding: 0;
}

.hero-wrapper {
    position: relative;
}


.hero-image{
    width: 100%;
    max-height: 597px;
    display: block;
    object-fit: cover;
    z-index: 1;
    position: relative;
}

.titre-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    z-index: 2;
    width: 300px;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    }

      @keyframes fadeIn {
        to {
          opacity: 1;
        }
      }

.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 7%;
    min-height: 80px;
    z-index: 1;
    background-color: white;
    box-shadow: 0px 4px 14px 10px #00000008;
}

.menu{
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-wp {
    display: flex;
    gap: 20px;
    list-style-type: none;
}

.menu-wp li a{
    color: black;
    text-decoration: none;
}

/* -------- The Modal -------- */

.myBtn{
    all: unset;
    cursor: pointer;
}

.modal {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 4px solid #000000;
    max-width: 550px;
    min-width: 450px;
    overflow: hidden;
    padding: 20px;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wpcf7-form p{
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    width: 263px;
}

.wpcf7-form input {
    width: 263px;
    height: 40px;
    border-radius: 8px;
    border-width: 1px;
    border-color: #B8BBC2;
}

.wpcf7-form textarea{
    width: 263px;
    border-radius: 8px;
    border-width: 1px;
    border-color: #B8BBC2;
}

input[type="submit" i]{
    border-width: 1px;
    width: 269px;
    border-radius: 2px;
    border-style: hidden;
    font-family: 'Space-Mono';
    font-weight: 400;
    font-size: 12px;
    line-height: 17.77px;
    background-color: #D8D8D8;
}

.contact-title{
    width: 150%;
    margin: 10px 0;
}

/* -------- / -------- */

.logo{
    width: 120px;
    object-fit: cover;
}

.burger-btn{
    position: relative;
    display: none;
    cursor: pointer;
}

.burger-icon{
    height: 2px;
    width: 100%;
    background-color: black;
}

.burger-icon::before {
    position: absolute;
    content: "";
    top: 7px;
    height: 2px;
    width: 100%;
    background-color: black;
}

.burger-icon::after {
    position: absolute;
    content: "";
    bottom: 7px;
    height: 2px;
    width: 100%;
    background-color: black;
}

.menu-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    background-color: #5C9392;

    /* État initial pour animation d'apparition */
    opacity: 0;
    transform: translateY(-50vh);
    visibility: hidden;
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.menu-wp-overlay {
    text-align: center;
    list-style-type: none;
    padding-left: 0;
    margin: 0;

}

.menu-wp-overlay li {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.3s ease-out 0.2s, transform 0.3s ease-out 0.2s;

}

.menu-overlay.active {
    /*Etat final pour animation d'apparition*/
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.menu-overlay.active .menu-wp-overlay li {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Animation burger-btn en croix */
.burger-btn.active .burger-icon {
    background-color: transparent;
}

.burger-btn.active .burger-icon::before {
    transform: translateY(7px) rotate(45deg);
    transition: transform 0.3s;
}

.burger-btn.active .burger-icon::after {
    transform: translateY(-7px) rotate(-45deg);
    transition: transform 0.3s;
}

/*==================== Bio =================*/
/* --- Styles Généraux de la Section --- */
.bio {
    display: flex; /* Utilise Flexbox pour aligner les enfants (photo et texte) côte à côte */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: center;

    gap: 200px; /* Espace entre la colonne photo et la colonne texte */
    padding: 50px; /* Espace à l'intérieur de la section */
    font-family: Arial, sans-serif; /* Police de caractères par défaut */
    background-color: #fff; /* Couleur de fond de la section */
}

/* --- Colonne de la Photo --- */
.photo-bio {
    position: relative; /* Nécessaire pour positionner l'élément décoratif par rapport à ce conteneur */
    flex-shrink: 0; /* Empêche l'image de rétrécir si l'espace manque */
}

.photo-bio img {
    width: 250px; /* Largeur de la photo */
    object-fit: cover; /* Assure que l'image couvre l'espace sans être déformée */
    position: relative; /* Pour s'assurer que l'image est au-dessus de l'élément décoratif */
    z-index: 2;
}

/* Élément décoratif derrière la photo */
.photo-bio .element {
    position: absolute; /* Positionné par rapport à .photo-bio */
    width: 100px; /* Largeur de l'élément */
    height: 200px; /* Hauteur de l'élément */
    background-color: #82a39a; /* Couleur de fond (vert d'eau) */
    top: -20px; /* Décalage vers le haut */
    left: -30px; /* Décalage vers la gauche */
    z-index: 1; /* Placé derrière la photo */
}

/* --- Colonne du Texte --- */
.text-bio {
    display: flex;
    flex-direction: column; /* Organise les éléments de texte en colonne */
    position: relative; /* ADDED: Crucial for positioning .element-titre relative to this parent */
}

.text-bio .domaine {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
    position: relative; /* ADDED: Ensure text is above the element-titre */
    z-index: 2; /* ADDED: Bring text to the front */
}

.text-bio .prenom-nom {
    font-size: 2.5em; /* Grande taille pour le nom */
    font-weight: bold;
    color: #333;
    /* REMOVED: background-color: #f5f5f5; */
    /* REMOVED: padding: 10px 15px; */
    margin: 0;
    display: inline-block; /* Pour que le fond ne prenne que la largeur du texte */
    position: relative; /* ADDED: Ensure text is above the element-titre */
    z-index: 2; /* ADDED: Bring text to the front */
}

/* NEW CSS FOR .element-titre */
.text-bio .element-titre {
    position: absolute; /* Position it absolutely within .text-bio */
    background-color: #eeeeee; /* The desired gray background color */
    width: 100%; /* Take full width of its parent (.text-bio) + horizontal padding */
    /* Height calculation: font-size of domaine (1.1em) + font-size of prenom-nom (2.5em) + gap (15px) + top/bottom padding (20px) */
    height: 60px ;
    top: 10px; /* Adjust as needed to overlap the 'domaine' and 'prenom-nom' */
    left: -15px; /* Adjust as needed to provide horizontal padding */
    z-index: 1; /* Place it behind the text */
}


.text-bio .paragraphe-bio {
    font-size: 1em;
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    color: #555;
    margin-top: 50px;
    max-width: 600px; /* Limite la largeur du paragraphe pour la lisibilité */
}

/* --- Section "Call to Action" (Flèches et Bouton) --- */
.cta {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px; /* Espace entre les flèches et le bouton */
    margin-top: 75px; /* Espace au-dessus du CTA */
}

.flèches {
    display: flex;
}

.flèches img {
    height: 25px; /* Hauteur des flèches */
}

.cta button {
    background-color: #f890db; /* Couleur de fond rose/violet */
    color: white; /* Texte en blanc */
    border: none; /* Pas de bordure */
    padding: 12px 25px; /* Espace intérieur du bouton */
    font-size: 1em;
    font-weight: bold;
    border-radius: 10px; /* Bords très arrondis */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s ease; /* Animation douce au survol */
}

.cta button:hover {
    background-color: #c78ab0; /* Couleur du bouton au survol */
}

/* --- Animation des Flèches --- */

/* Définition de l'animation zoom in/zoom out */
@keyframes pulseArrow {
    0% {
        transform: scale(1); /* Taille normale */
    }
    50% {
        transform: scale(1.1); /* Zoom léger */
    }
    100% {
        transform: scale(1); /* Retour à la taille normale */
    }
}

/* Appliquer l'animation de base aux flèches */
.cta .flèches img {
    height: 25px; /* Hauteur des flèches */

}

/* Styles pour les flèches quand elles sont animées */
.cta .flèches.animate img {
    animation: pulseArrow 1s infinite ease-in-out; /* Appliquer l'animation de zoom, en boucle */
}

/* Délais d'animation pour chaque flèche */
/* Ces délais ne s'appliqueront plus qu'à l'animation 'pulseArrow' */
.cta .flèches.animate img:nth-child(1) {
    animation-delay: 0.1s; /* Première flèche */
    /* REMOVED: transition-delay: 0.1s; */
}

.cta .flèches.animate img:nth-child(2) {
    animation-delay: 0.3s; /* Deuxième flèche */
    /* REMOVED: transition-delay: 0.3s; */
}

.cta .flèches.animate img:nth-child(3) {
    animation-delay: 0.5s; /* Troisième flèche */
    /* REMOVED: transition-delay: 0.5s; */
}

/* Pour le responsive, assure-toi que les flèches restent bien positionnées si le CTA change */
@media (max-width: 768px) {
    .cta .flèches {
        display: flex;
        justify-content: center;
    }
    .photo-grid{
        margin: auto !important;
    }
}


/* --- Rendu sur les petits écrans (Responsive) --- */
@media (max-width: 768px) {
    .bio {
        flex-direction: column; /* Les colonnes s'empilent verticalement */
        text-align: center; /* Centre le texte */
        gap: 30px;
    }

    .text-bio {
        align-items: center; /* Centre les éléments de texte */
    }
    
    .cta {
        flex-direction: column; /* Empile les flèches et le bouton */
        gap: 15px;
    }
}


/*======================== Modalités =======================*/

/* Styles Généraux pour la section .modalites */
.modalites {
    display: flex;
    flex-direction: column; /* Les cartes s'empilent verticalement */
    align-items: center; /* Centre les cartes horizontalement */
    gap: 25px; /* Espacement vertical entre les cartes */
    max-width: 1200px; /* Largeur maximale de la section */
    position: relative; /* Pour positionner les lignes en pointillés */
    overflow: hidden; /* Pour cacher les éléments hors écran avant l'animation */
    margin: 50px auto;
}

/* Styles de base pour toutes les cartes */
.modalites .green-card,
.modalites .blue-card,
.modalites .pink-card {
    position: relative; /* Pour le positionnement des éléments internes et pour les lignes */
    width: 60%; /* Ajuste la largeur des cartes (peut être ajusté) */
    max-width: 600px; /* Largeur maximale pour éviter qu'elles ne soient trop grandes */
    padding: 40px; /* Espacement interne */
    border-radius: 15px; /* Bords légèrement arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Légère ombre pour la profondeur */
    color: white; /* Couleur du texte par défaut pour toutes les cartes */

    /* Préparation pour l'animation */
    opacity: 0; /* Initialement invisible */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Animation fluide */
}

/* Couleurs spécifiques pour chaque carte */
.modalites .green-card {
    background-color: #82a39a; /* Vert/Gris d'eau */
    align-self: flex-start; /* Aligne cette carte à gauche */
    transform: translateX(-100%); /* Commence hors écran à gauche */
}

.modalites .blue-card {
    background-color: #4b3d8f; /* Bleu violet */
    align-self: flex-end; /* Aligne cette carte à droite */
    transform: translateX(100%); /* Commence hors écran à droite */
}

.modalites .pink-card {
    background-color: #f890db; /* Rose */
    align-self: flex-start; /* Aligne cette carte à gauche */
    transform: translateX(-100%); /* Commence hors écran à gauche */
}

/* Styles du titre (h2) dans les cartes */
.modalites h2 {
    font-family: 'Oswald', sans-serif; /* Police Oswald pour les titres */
    font-size: 2em; /* Taille du titre */
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700; /* Assure un poids de police gras */
}

/* Styles du paragraphe (p) dans les cartes */
.modalites p {
    font-family: 'Open Sans', sans-serif; /* Police Open Sans pour le paragraphe */
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Styles pour les lignes en pointillés (Utilisation de pseudo-éléments) */

/* Ligne entre la carte verte et la carte bleue */
.modalites .green-card::after {
    content: '';
    position: absolute;
    top: calc(100% + 50px); /* Positionne après la carte verte, avec un décalage */
    left: calc(100% - 100px); /* Commence à droite de la carte verte */
    width: 200px; /* Longueur de la ligne */
    height: 150px; /* Hauteur de la ligne (pour le courbé) */
    border: 2px dashed #333; /* Ligne en pointillés */
    border-color: #333 transparent transparent transparent; /* Ligne du haut seulement */
    border-radius: 0 0 100% 0; /* Pour créer la courbe */
    transform: rotate(45deg); /* Ajuste la rotation */
    z-index: 0;
    pointer-events: none; /* Empêche l'interférence avec les clics */
    opacity: 0.5; /* Légèrement transparent */
    display: none; /* Cache par défaut si pas responsive */

    /* Tu devras ajuster les positions et les rotations précisément */
    /* L'idée est de créer un chemin en pointillés qui relie les cartes. */
    /* Cela peut être assez complexe à faire avec un seul pseudo-élément */
    /* et pourrait nécessiter des ajustements précis ou plusieurs éléments. */
}

/* Ligne entre la carte bleue et la carte rose */
.modalites .blue-card::after {
    content: '';
    position: absolute;
    top: calc(100% + 50px);
    right: calc(100% - 100px);
    width: 200px;
    height: 150px;
    border: 2px dashed #333;
    border-color: transparent transparent transparent #333; /* Ligne gauche seulement */
    border-radius: 0 0 0 100%; /* Pour créer la courbe */
    transform: rotate(-45deg); /* Ajuste la rotation */
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    display: none; /* Cache par défaut */
}


/* Classes pour déclencher l'animation via JavaScript (Intersection Observer) */
.modalites .green-card.is-visible,
.modalites .blue-card.is-visible,
.modalites .pink-card.is-visible {
    opacity: 1; /* Devient visible */
    transform: translateX(0); /* Revient à sa position normale */
}


/* Rendu sur les petits écrans (Responsive) */
@media (max-width: 900px) {
    .modalites {
        gap: 80px; /* Moins d'espace sur mobile */
    }

    .modalites .green-card,
    .modalites .blue-card,
    .modalites .pink-card {
        align-self: center; /* Centre toutes les cartes */
        /* Les animations devraient venir du bas ou du centre si on les centre toutes */
        transform: translateY(50px); /* Commence légèrement en dessous */
    }

    /* Ajuster l'animation pour le mobile si toutes les cartes sont centrées */
    .modalites .green-card.is-visible,
    .modalites .blue-card.is-visible,
    .modalites .pink-card.is-visible {
        transform: translateY(0);
    }

    /* Cacher les lignes en pointillés sur mobile, car elles sont difficiles à rendre */
    .modalites .green-card::after,
    .modalites .blue-card::after {
        display: none;
    }
}

/*======================== Template Projet ======================*/

.main-projet-container{
    margin-top: 50px;
    margin-inline: 80px;
}

.upper-blocs{
    display: flex;
    align-items: end;
    gap: 30px;
}

.projet-info-container{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 50%;
    border-bottom: 2px solid black;
}

.projet-title{
    line-height: 90px;
    margin-bottom: 10px;
}

.description {
    line-height: 20px;
    text-decoration: none;
}

.description a{
    text-decoration: none;
    color: #000000;
}

.depository{
    font-weight: bold;
    text-decoration: underline !important;
}

.projet-visuel-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}


.projet-visuel-container img{
    object-fit: cover;
    max-width: 100%;
    height: 400px;
}

.interactions-container{
    height: 118px;
    border-bottom: 2px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.projet-contact-btn-container {
    display: flex;
    align-items: center;
    gap: 45px;
}

.projet-info-btn-container{
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}

.myBtn2{
    width: 272px;
    height: 50px;
    background-color: #D8D8D8;
    border-radius: 2px;
    cursor: pointer;

}

.projet-preview-container{
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-top: 20px;
}

.projet-preview{
    height: 70px;
    width: 80px;
}

.projet-preview img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.arrow-btns{
    display: flex;
    width: 80px;
    justify-content: space-around;
}

.arrow-btn:visited {
    color: inherit;
}

.arrow-btn{
    text-decoration: none;
}

.other-pics-container{
    padding: 40px 0;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 600px));
    justify-items: center;
    justify-content: center;
    gap: 25px;
    margin: 80px 200px;
}

.home-pics{
    text-align: center;
}

.filters{
    display: flex;
    padding-top: 80px;
    padding-bottom: 30px;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

#technologie{
    min-width: 260px;
    min-height: 42px !important;
}

/* ========== STYLE CUSTOM POUR SELECT2 ========== */

/* Conteneur principal */


.select2-container--default .select2-selection--single {
    font-family: 'Poppins', monospace;
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 10px;
    line-height: 18px;
    height: 42px !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-dropdown {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border: 2px solid #215AFF;
}

.select2-container--default .select2-results__option {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    padding: 0 12px;
}

.select2-results__option[aria-disabled="true"] {
    color: white !important;
}

/* Option survolée */
.select2-results__option--highlighted {
    background-color: #E00000 !important;
    color: white !important;
}

/* Option sélectionnée */
.select2-results__option[aria-selected="true"] {
    background-color: #E00000 !important;
    color: white !important;
}




#load-more-btn{
    all: initial;
    width: 272px;
    height: 40px;
    padding: 8px 15px;
    text-align: center;
    background-color: #D8D8D8;
    border-color: #D8D8D8;
    border-radius: 2px;
    margin: 30px;
}

#load-more-btn:hover {
    cursor: pointer;
    background-color: #000000;
    color: white;
}

.grid-item {
    padding: 10px;
    position: relative;
    width: 100%;
    aspect-ratio: 2/1; /* carré parfait */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.overlay{
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    position: absolute;
    z-index: 2;
    background-color: #2f1ba87d;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    border-radius: 15px;
    box-sizing: border-box;
    cursor: pointer;
}

.overlay img{
    width: auto;
    height: auto;
}

.grid-item:hover .overlay {
    opacity: 1;
}

.eyelogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px !important;
    height: auto !important;
    height: auto;
}

.overlay-category {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 14px;
    margin: 0;
}

/*======================== Footer ======================*/


.footer-menu{
    display: flex;
    justify-content: center;
    gap: 45px;
}

.footer-menu-wp{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    min-height: 20px;
    list-style-type: none;
}

.footer-menu-wp li a{
    text-decoration: none;
    color: black;
}


/*======================== Responsive ======================*/

@media (max-width: 991px){
    .projet-title{
        font-size: 45px;
    }
    .photo-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(300px, 600px));
    justify-items: center;
    justify-content: center;
    gap: 35px;
}
}

@media (max-width: 768px){


    section{
        margin: 0px;
    }

    .hero-image{
        height: 400px;
    }

    .upper-blocs{
        padding: 0 30px;
    }
    .menu{
        display: none;
    }

    .burger-btn{
        display: flex;
        align-items: center;
        opacity: 100%;
        width: 35px;
        height: 30px;
    }

    .menu-wp-overlay a, .myBtn{
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        font-size: xx-large;
        text-decoration: none;
        color: #ffffff;
        margin: 20px;
    }


    h2{
        font-size: 46px;
        line-height: 48px;     
    }

    .footer-menu-wp{
        flex-direction: column;
        padding-left: 0;
        gap: 20px;
    }

    .upper-blocs {
        flex-direction: column-reverse;
        align-items: start;
    }

    .projet-visuel-container {
        width: auto;
    }
    .projet-visuel-container img {
        width: 90vw;
        align-items: center;
        text-align: center;
    }

    .photo-bio{
        margin-top: 30px;
    }

    .photo-bio img {
        width: 175px;
    }

    .projet-info-container {
        border-bottom: none;
        width: auto !important;
    }

    .projet-info-btn-container {
        flex-direction: column;
        width: 100%;
        padding: 20px 40px;
    }

    .projet-info-btn-container p{
        width: 272px;
        margin-top: 0px;
    }
    
    .projet-preview-container {
        display: none;
    }

    .interactions-container {
        padding: 50px 0px;
        border-bottom: 0.5px solid black;
        height: auto;
        flex-direction: column;
    }

    .projet-contact-btn-container{
        flex-direction: column;
        gap: 0px;
    }

    .other-pics-container h3{
        text-align: center;
    }

    .footer-menu{
        display: block;
    }
}