*{ 
    margin: 0;
    padding: 0;
    font-family: 'Alegreya', serif;
    
}
body {
    overflow-x: hidden; /* Prevent horizontal scroll*/     
    margin: 0;
    background-color: rgb(10, 20, 48);
}

.blocpage{
    margin:0 auto;
    position:relative;
    overflow-x: hidden;
    min-height: 110vh; /* 100% of the viewport height */
    background-color: rgb(10, 20, 48);
}

.header{
    width: 100%;
    background-color: rgb(10, 20, 48);
    background-position: center;
    background-size: cover;
    position: fixed;
    z-index: 1000; 
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2% 6%;
}

nav img{
    width: 170px;
}

.nav-links{
    flex: 1;
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
}

.nav-links ul li a{
    color:rgba(255, 196, 0, 0.8);
    text-decoration: none;
    font-size: 23px;
}

.nav-links ul li::after {
    --c:linear-gradient(#e20000 0 0); /* update the color here */
    content: '';
    width: 100%;
    height: 2px;
    padding-bottom: .15em;
    background: var(--c), var(--c);
    display:block;
    margin: auto;
    background-size: 1.2em .15em;
    background-position:50% 100%;
    background-repeat: no-repeat;
    transition: .3s linear, background-size .3s .2s linear;
  }
.nav-links ul li:hover::after {
    width:100%;
    background-size: 40% .15em;
    background-position: 10% 100%, 90% 100%;
  }

.index{
    background-color: rgb(10, 20, 48); 
    background-size:cover;
    margin-top: 15%;
}

.text-box{
    
    text-align: center;
}

  .text-box h1{  
    margin-left: 5%;  
    text-align: center;
    width: 90%;
    color: rgba(255, 196, 0, 0.8);
    font-size: 50px;
  }
  .text-box p{
    
    margin-left: 5%;
    color:rgba(255, 196, 0, 0.8);
    width: 90%;
    text-align: center;
    margin-top: 3%;
    font-style: italic;
    font-size: 40px;
  }

.text-box .hero-btn{
    
    margin-top: 4%;
    display: inline-block;
    text-decoration: none;
    color: rgba(255, 196, 0, 0.8);
    border: 1px solid rgba(255, 196, 0, 0.4);
    padding: 12px 34px;
    font-size: 17px;
    background: transparent;
    cursor: pointer;
  }

  .text-box .hero-btn:hover{
    border: 1px solid rgba(255, 196, 0, 0.4);
    background: #e20000;
    transition: 0.2s;
  }*

  
nav .fa-solid{
    display: none;
}

#block2{
    left:0;
    text-align: left;
    border: 4px solid rgba(255, 196, 0, 0.4);
    color: rgba(255, 196, 0, 0.8);
}

#block2 .fa-solid{
    color: rgba(255, 196, 0, 0.8);    
    font-size: 30px; 
}

.info-index{
    align-items: top;
    flex-basis: 100%;
    margin-top: 1%;
    margin-bottom: 1%;
    
}


.index .row{
    margin:5%;
    display: flex;
    justify-content: space-between;
}


#carouselExample{
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
}

.hero-container{
    height: auto;
    background-size: cover;
    background-color: antiquewhite; 
    position: relative; /* Nécessaire pour le positionnement absolu du bouton */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    
}
.hero-container h1{
    
    color: #333;
margin-bottom: 1%;
font-size: 28px; /* Taille de police augmentée */
color: #2c3e50; /* Couleur sombre pour le texte */
margin-bottom: 20px; /* Espace entre le titre et le paragraphe */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
font-weight: 700; /* Gras pour accentuer le titre */
}
.hero-container p {
    color: #333;
    font-size: 18px;
    text-align: left;
    text-align: justify;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 7%;
}

.hero-container .hero-btn {
    position: absolute; /* Positionnement absolu par rapport au conteneur parent */
    bottom: 0px; /* Distance depuis le bas du conteneur */
    right: 0px; /* Distance depuis le côté gauche du conteneur */
    display: inline-block;
    padding: 8px 5px;
    color: antiquewhite;
    background-color:#2c3e50; 
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.hero-container .hero-btn:hover {
    background-color: #34495e; /* Couleur du bouton au survol */
}

.hero-container .hero-btn:active {
    opacity: 0.6; /* Effet transparent lors du clic */
}


.hero-container .hero-btn .icon {
    margin-left: 10px; /* Espace entre le texte et l'icône */
    vertical-align: middle; /* Alignement vertical de l'icône */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition pour l'animation */
}

.hero-container .hero-btn .circle {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.hero-container .hero-btn .arrow {
    transform: translateX(-30px);
    transition: transform 0.3s ease;
}

.hero-container .hero-btn:hover .circle {
    transform: scale(1);
}

.hero-container .hero-btn:hover .arrow {
    transform: translateX(0);
}


.hero-container-2{
    height: 710px;
    background-size: cover; 
    background-color: #d0e0f0; 
    position: relative; /* Nécessaire pour le positionnement absolu du bouton */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
}
.hero-container-2 h1{
    
color: #333;
margin-bottom: 1%;
font-size: 28px; /* Taille de police augmentée */
color: #2c3e50; /* Couleur sombre pour le texte */
margin-bottom: 20px; /* Espace entre le titre et le paragraphe */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
font-weight: 700; /* Gras pour accentuer le titre */
}

.hero-container-2 p {
    color: #333;
    font-size: 18px;
    text-align: left;
    text-align: justify;    
    margin-left: 3%;
    margin-right: 3%;
margin-bottom: 1%;
}

.hero-container-2 .hero-btn {
    position: absolute; /* Positionnement absolu par rapport au conteneur parent */
    bottom: 0px; /* Distance depuis le bas du conteneur */
    right: 0px; /* Distance depuis le côté gauche du conteneur */
    display: inline-block;
    padding: 8px 5px;
    color: antiquewhite;
    background-color:#4a5d81; 
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.hero-container-2 .hero-btn:hover {
    background-color: #5a6e8e; /* Couleur du bouton au survol */
}

.hero-container-2 .hero-btn:active {
    opacity: 0.6; /* Effet transparent lors du clic */
}


.hero-container-2 .hero-btn .icon {
    margin-left: 10px; /* Espace entre le texte et l'icône */
    vertical-align: middle; /* Alignement vertical de l'icône */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition pour l'animation */
}

.hero-container-2 .hero-btn .circle {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.hero-container-2 .hero-btn .arrow {
    transform: translateX(-30px);
    transition: transform 0.3s ease;
}

.hero-container-2 .hero-btn:hover .circle {
    transform: scale(1);
}

.hero-container-2 .hero-btn:hover .arrow {
    transform: translateX(0);
}
.hero-container-3{
    height: 710px;
    background-size: cover;
    background-color: #aab7b8; 
    position: relative; /* Nécessaire pour le positionnement absolu du bouton */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
}
.hero-container-3 h1{
    
    color: #333;
margin-bottom: 1%;
font-size: 28px; /* Taille de police augmentée */
color: #2c3e50; /* Couleur sombre pour le texte */
margin-bottom: 20px; /* Espace entre le titre et le paragraphe */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
font-weight: 700; /* Gras pour accentuer le titre */
}
.hero-container-3 p {
    color: #333;
    font-size: 18px;
    text-align: left;
    text-align: justify;
    margin-left: 3%;
    margin-right: 3%;
margin-bottom: 2%;
}

.hero-container-3 .hero-btn {
    position: absolute; /* Positionnement absolu par rapport au conteneur parent */
    bottom: 0px; /* Distance depuis le bas du conteneur */
    right: 0px; /* Distance depuis le côté gauche du conteneur */
    display: inline-block;
    padding: 8px 5px;
    color: antiquewhite;
    background-color: #2c3e50; 
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.hero-container-3 .hero-btn:hover {
    background-color: #3a4a60; /* Couleur du bouton au survol */
}

.hero-container-3 .hero-btn:active {
    opacity: 0.6; /* Effet transparent lors du clic */
}


.hero-container-3 .hero-btn .icon {
    margin-left: 10px; /* Espace entre le texte et l'icône */
    vertical-align: middle; /* Alignement vertical de l'icône */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Transition pour l'animation */
}

.hero-container-3 .hero-btn .circle {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.hero-container-3 .hero-btn .arrow {
    transform: translateX(-30px);
    transition: transform 0.3s ease;
}

.hero-container-3 .hero-btn:hover .circle {
    transform: scale(1);
}

.hero-container-3 .hero-btn:hover .arrow {
    transform: translateX(0);
}


.contact-badge {
    position: fixed; /* Fixe la pastille par rapport à la fenêtre */
    bottom: 20px; /* Distance du bas de la fenêtre */
    left: 10px; /* Distance de la gauche de la fenêtre */
    background-color: rgb(10, 20, 48); /* Couleur bleu marine */
    color: white; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne */
    border-radius: 30px; /* Bords arrondis */
    border: 2px solid rgba(255, 196, 0, 0.5);; /* Contour de bord épais */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Ombre pour un effet de relief */
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.3s; /* Transition pour l'effet au survol */
}

.contact-badge a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
}

.contact-badge:hover {
    background-color: rgb(5, 10, 24); /* Légère variation de couleur au survol */
}

@media screen and (max-width: 700px){
    .hero-container{
    min-height: 800px;
    min-width: 380px;
    margin-left: -10%;
    }
    .hero-container-2{
    max-height: 510px;
    min-width: 380px;
    margin-left: -10%;
    }
    .hero-container-3{
    max-height: 510px;
    min-width: 380px;
    margin-left: -10%;
    }

    .hero-container .hero-btn {
        bottom: -38px;
        left:0px;
        text-align: center;
    }

    .hero-container-2 .hero-btn {
        bottom: -38px;
        left:0px;
        text-align: center;
    }

    .hero-container-3 .hero-btn {
        bottom: -38px;
        left:0px;
        text-align: center;
    }
    

    nav img{
        width: 100px;
    }
    
    .nav-links ul li{
        display:block;
    }

    .nav-links{
        position:absolute;
        background: floralwhite;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 0.3s;
    }

    nav .fa-solid{
        display: block;
        color:rgba(255, 192, 0);
        margin:10px;
        font-size:22px;
    }
    
    
.nav-links ul li a{
    color: rgb(10, 20, 48);
    text-decoration: none;
    font-size: 15px;
}
    .nav-links ul li::after {
        display: none;      
    }
    .nav-links ul li:hover::after {
        display: none;      
    }

    .index{
        margin-top: 26%;
    }
    .text-box{
        margin: auto;
        width: 100%;
        color: antiquewhite;
        text-align: center;
      }
    
    .text-box h1{
        font-size: 35px;
    }
    
    .text-box p{
        font-size: 22px;
        font-style: italic;
        color:rgba(255, 196, 0, 0.8);
        margin-bottom: 5%;
      }
      .hero-btn{
        
        margin-bottom: 10%;
        display: inline-block;
        text-decoration: none;
        color: antiquewhite;
        border: 1px solid antiquewhite;
        padding: 8px 20px;
        font-size: 8px;
        background: transparent;
        cursor: pointer;
      }
    
      .info-index{
    
        width: 100%;
        margin: auto;
        flex-basis: 100%;
        margin-bottom: 5%;
        margin-right: 5%;
    
    }
    
    #carouselExample{
        max-width: 100%;
        width: auto;
        object-fit: cover; /* Ajuster l'image pour remplir le conteneur sans distorsion */
        display: block;
    }
    .image .responsive-img {
        max-width: 100%;
        min-height: 250px; 
        width: auto;
        height: auto;
        display: block;
    }
    
    #block2{
        border: 1px solid rgba(255, 196, 0, 0.4);
        margin-left: 10%;
        margin-right: 10%;
        
    }
    
    .info-index h5{
        font-size: 16px;
        color: rgba(255, 196, 0, 0.8);
        text-align: center;
        width: 100%;
        
        
        
    }
    .info-index p{
        font-size: 14px;
        color: rgba(255, 196, 0, 0.8);
        width: 100%;
        text-align: center;
        text-align: justify;

    }
    #block2 .fa-solid{
    
        color: rgba(255, 196, 0, 0.8);
        font-size: 18px;
        margin-top: 2.5%;
        margin-left: 16px;
        
    }
    
    
    
  }


#footer{
    background-color: rgba(255, 196, 0, 0.8);
    background-size: cover;
    text-align: center;
    bottom:0;
    margin-top: 3%;
}


.custom-link, .custom-phone-link, .custom-whatsapp-link {
    color: antiquewhite; /* Couleur du texte */
    text-decoration:underline; 
    transition: color 0.3s; /* Transition pour changement de couleur */
}

.custom-link:hover, .custom-phone-link:hover, .custom-whatsapp-link:hover {
    color: #d3cbb8; /* Légère variation de couleur au survol */
}


























.lettre{
    margin-top: 15%;
    background-color: rgb(10, 20, 48);
    width: 100%;
    text-align:center;
}

.entete_lettre{
    background-image: url('images/old-letters-436501_1920.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 150px;
    z-index: -1; /* Placer derrière le contenu de l'élément */

}

.lettre-col{
    margin-top: 5%;
}
.lettre h1{
    font-size: 35px;
    color: antiquewhite;
    margin-bottom: 5%;
}

.lettre h2{
    margin-bottom: 3%;
    font-size: 20px;
}

.lettre-col{
    
    color: antiquewhite;
    margin-left: 5%;
    margin-right: 5%;
    text-align: left;
    text-align: justify;
}

.sign-col{
    margin-right: 10%;
    text-align: right;
    margin-bottom: 5%;
    color: antiquewhite;
}


.lettre .row{
    margin:5%;
    display: flex;
    justify-content: space-between;
    
}

@media(max-width:700px){
    .lettre{
    margin-top: 25%;
}

.lettre h1{
    font-size: 35px;

    margin-bottom: 15%;

}

    .lettre h2{
        font-size: 16px;

    }

    .sign-col{
        margin-left: 20%;
    }
    
    
}























.cours{
    background-color: rgb(10, 20, 48);
    margin-top: 15%;
    text-align:center;
}



.cours h1{
    color: floralwhite;
    font-size: 35px;
}
.cours-2{
    
    background-color: rgb(10, 20, 48);
    color: floralwhite;
    text-align: justify;
    text-align: center;
    
}
.info-cours{
    
    margin-bottom: 8%;
}
.cours-2 h2{
    color: antiquewhite;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px;
    padding: 10px;
    position: static;
}

.cours-2 h3{
    color:ivory;
    text-align: center;
    font-weight: 600;
    font-size: 35px;
    opacity: 1;
}
.cours-col p{
    color: floralwhite;
    font-size: 20px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
    opacity: 1;
    text-align: left;
    text-align: justify;
    
}

.cours .row{
    margin:5%;
    display: flex;
    justify-content: space-between;
    
}

.cours-col{
    flex-basis: 90%;
    background: rgb(220, 199, 11);
    border-radius: 10px;
    padding: 20px 12px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 5%;
    
}

#college_info{
    background-image: url('images/salle_paysage.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}


#premiere{
    background-image: url('images/entree_paysage.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#terminale{
    background-image: url('images/couloir_paysage.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#medecine{
    background-image: url('images/salle_paysage_eleve_tableau.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#medecine_para{
background-image: url('images/salle_paysage.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}



@media(max-width:700px){
    
    .row{
        flex-direction: column;
    }
    
.cours{
    margin-top: 25%;
}   
    .cours-2 h3{
        font-size: 25px;
    }
    
    .cours-2 h2{
        font-size: 18px;
    
    }
    .cours-col p{
        font-size: 18px;
    }
    
#college_info{
    background-image: url('images/entree_portrait.jpeg');
}
    
#premiere{
    background-image: url('images/couloir_portrait.jpeg');
}   
#terminale{
  background-image: url('images/salle_vide_entree.jpeg');
}   
#medecine{
  background-image: url('images/salle_tableau_portrait.jpg');
}
#medecine_para{
    background-image: url('images/salle_vide_entree.jpeg'); 
}   
}
 
.dropbtn {
    background-color: rgba(255, 196, 0, 0.7);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    border-radius: 12px;
    width: 100%;
    cursor:pointer;
    
  }
  
  .dropdown {
    margin: auto;   
    margin-top: 3%;
    display:inline-block;
    
  }
  
  .dropdown-content {
    background-color: rgba(255, 196, 0, 0.65);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
    z-index: 1;
    transition: all 0.25s ease-in; /* here */
    transform: translateY(-10px); /* here */
    border-radius: 12px;
    opacity: 0; 
         
  }
  
  .dropdown-content a {
    color: antiquewhite;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 12px;
  }
  
  .dropdown-content a:hover {background-color:  #e20000;}
  
  .dropdown:hover .dropdown-content {display: block;
    transform: translateY(0);
    opacity: 1;
}
  
  .dropdown:hover .dropbtn {background-color:  #e20000;}







  


.formation_intro{
    margin-top: 15%;
    background-color: rgb(10, 20, 48);
    width: 100%;
    text-align: center;
}

.formation_intro .row{
    margin:5%;
    display: flex;
    justify-content: space-between;
    
}
.formation_intro h1{
    color: antiquewhite;
    font-size: 35px;
    margin-bottom: 5%;
}


.formation_intro h4{
    color: antiquewhite;
    font-size: 20px;
}

.info-form p{
    font-size: 20px;
    color: rgba(255, 196, 0, 0.8);
    text-align: left;
    text-align: justify;
    margin-top: 5%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 5%;
    
}


.btn-links{
    font-size: 20px;
    color: rgba(255, 196, 0, 0.8);    
   
}

.btn-outline-primary {
    color:  rgba(255, 196, 0, 0.8);
    background-color: transparent;
    background-image: none;

}

#block_formation{
    border: 3px solid rgba(255, 196, 0, 0.4);

    margin-left:10% ;
    margin-right:10% ;
}

.conseil_gauche h3{
    color:antiquewhite;
    margin-top: 10%; 
    font-size: 35px;
}

.conseil_gauche p{
    font-size: 18px;
    color:antiquewhite;
    margin-top: 5%; 
    margin-right: 3%;
    margin-left: 3%; 
    text-align: center;
    text-align: justify;
}




.conseil_droite {
    margin-top: 7%; 
}

.partenariat-centre h3{
    font-size: 35px;
    margin-top: 5%; 
    color:antiquewhite;
    margin-bottom: 5%;
}
.partenariat-centre p{
    font-size: 18px;
    color:antiquewhite;
    margin-top: 2%; 
    margin-right: 5%;
    margin-left: 5%; 
    text-align: center;
    text-align: justify;
}

.part_gauche p{
    font-size: 18px;
    color:antiquewhite;
    text-align: center;
}

.part_droite p{
    font-size: 18px;
    color:antiquewhite; 
    text-align: center;
}

.part_gauche h2{
    font-size: 24px; 
    color:antiquewhite;
}
.part_droite h2{
    font-size: 24px; 
    color:antiquewhite;
}




.formation_centre h3{
    
    font-size: 35px;
    margin-top: 5%; 
    color:antiquewhite;
    margin-bottom: 5%;
}
.formation_centre p{
    font-size: 18px;
    color:antiquewhite;
    margin-top: 2%; 
    margin-right: 5%;
    margin-left: 5%; 
    text-align: center;
    text-align: justify;
}


.form_centre{
    
    border: 3px dashed;
    color:antiquewhite;
    margin-left: 2%;
    margin-right: 2%;
}

.form_gauche{
    
    border: 3px dashed;
    color:antiquewhite;
    margin-left: 2%;
    margin-right: 2%;
}

.form_droite{
    
    border: 3px dashed;
    color:antiquewhite;
    margin-left: 2%;
    margin-right: 2%;
}
.form_gauche h2{
    
    font-size: 24px;
    color:antiquewhite;
}
.form_centre h2{
    
    font-size: 24px;
    color: antiquewhite;
}
.form_droite h2{
    
    font-size: 24px;
    color:antiquewhite;
}
.form_gauche p{
    
    font-size: 18px;
    color:antiquewhite;
    margin-top: 5%; 
    margin-right: 10%;
    margin-left: 10%; 
    text-align: center;
    text-align: justify;
}

.form_centre p{
    
    font-size: 18px;
    color:antiquewhite;
    margin-top: 5%; 
    margin-right: 10%;
    margin-left: 10%; 
    text-align: center;
    text-align: justify;
}

.form_droite p{
    font-size: 18px;
    color:antiquewhite;
    margin-top: 5%; 
    margin-right: 10%;
    margin-left: 10%; 
    text-align: center;
    text-align: justify;
}

.hr{
    color:  rgba(255, 196, 0, 0.8);  
}


@media(max-width:700px){
        
.formation_intro{
    margin-top: 25%;
}
       
.formation_intro h4{
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 5%;
    font-size: 20px;
    width: 90%;
    text-align: justify;
    
}

.partenariat-centre h3{
    margin-top: 10%;
    margin-bottom: 10%;
}

.formation_centre h3{
    margin-top: 10%;
    margin-bottom: 10%;
}


.info-form p{
    margin-right: 2%;
    margin-left: 2%;   
}
}

















.contact{
    background-color: rgb(10, 20, 48);
    width: 100%;
    text-align:center;
    margin-top:15%;

}

.contact .row{
    margin:5%;
    display: flex;
    justify-content: space-between;
    
}

.contact h1{
    color: antiquewhite;
    font-size: 35px;
}
.contact-col{
    margin-top: 5%;
    text-align: center;
    color: antiquewhite;    
}
.contact-col h1{
    text-align: center;   
}
.contact-col h2{
    text-align: center;
    margin: auto;
    margin-left: 5%;
    margin-right: 10%;
    margin-top: 5%;
    text-align: justify;
    font-size: 20px;
}



.comment-box{
    border: 1px solid antiquewhite;
    margin: auto;
    padding: 10px 20px;
    
    margin-left: 33%;
    margin-right: 33%;
    margin-bottom: -5%;
}

.comment-form input, .comment-form textarea{
    width: 100%;
    padding: 10px;
    margin: 15px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: #f0f0f0;

}

.comment-form button{
    margin: auto;
    margin-top: 3%;
    margin-bottom: 5%;
}


.fa-solid{
    font-size: 30px;
    color: antiquewhite;
    
}


/*.fa-regular{
    font-size: 30px;
    color:  rgba(255, 196, 0, 0.8);
    
}*/

.fab{
    font-size: 30px;
    color: antiquewhite;
    
}

.info-col{
    margin: auto;
    margin-top: 5%;
    text-align: center;

}

.info-col h5{
    font-size: 20px;
    color: antiquewhite;
    
}
.info-col p{
    font-size: 20px;
    color: antiquewhite;
    text-align: center;
    
}

.contact .hero-btn{
    display: inline-block;
    text-decoration: none;
    color:antiquewhite;
    border: 1px solid antiquewhite;
    padding: 12px 34px;
    font-size: 17px;
    background: transparent;
    position: relative;
    cursor: pointer;
  }
 

#block3{
    margin-top: 10%;
}


  @media(max-width:700px){
    

    .contact{
        margin-top: 25%;
    }
    
    #block4 .contact-col{
        margin: auto;
    }

    #block4 .contact-col h1{
        font-size: 25px;
        text-align: center;
        
    }
    .contact-col h2{
        text-align: left;
        margin: auto;
        margin-top: 10%;
        margin-bottom: 5%;
        text-align: justify;
    }
    
    .comment-box{
    margin: auto;
    margin-left: 7%;
    margin-right: 7%;

    }
    .fa-solid{
        font-size: 30px;
        color: antiquewhite;
        
    }
    .fab{
        font-size: 30px;
        color: antiquewhite;
        
    }
    .info-col h5{
        font-size: 15px;
    }
    .info-col p{
        font-size: 15px;
    }
    
    .comment-box h1{
        font-size: 25px;
    }
    .contact-col h1{
        font-size: 20px;
    }
    .contact-col h2{
        font-size: 18px;
    }
    .contact .hero-btn{
        font-size: 16px;
    }
    

    .form_centre{
        margin-top:5%;
        margin-bottom: 5%;
    }
    
    .form_gauche{
        margin-top:5%;
        margin-bottom: 5%;
    }
    
    .form_droite{
        margin-top:5%;
        margin-bottom: 5%;
    }
    
    
    .part_droite {
        margin-top:5%;
        margin-bottom: 5%;
    }
    
    .part_gauche {
        margin-top:5%;
        margin-bottom: 5%;
    }

    .conseil_droite img{
        height: 100%;
        width: 100%;
    }
    .location {
        width: 100%;
        overflow: hidden;
        margin-top: 10%;
        margin-bottom: 10%;
    } 
    

}




















.sub-header{
    margin-top: -15%;
    width: 100%;
    background-color: rgb(10, 20, 48);
    background-position: center;
    background-size: cover;
    position: fixed;
    
}

@media screen and (max-width: 700px){
.sub-header{
    margin-top: -25%;
}
}