*{
    box-sizing: border-box;
}


/* Header CSS_____________________________________________________________________________________________________________ */

#PageTitle{
    display:flex;
    font-size: 23px;
    font-weight: bold;
    flex-basis:60%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    text-shadow: 2px 2px 2px #284226;
}

#PageTitle a:hover{
    color: rgb(255, 239, 186);
    padding:0px 4px 0px 4px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(248, 217, 117));
}
#PageTitle a:active{color: rgb(228, 116, 40);}

#PageTitleLogo{
    display:flex;
    flex-basis: 20%;
    filter: drop-shadow(1px 1px #284226);
   
}

#PageTitleLogo img:hover{
    padding:4px;
    transition:padding 1s;     
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(100%);

}

#PageTitleSocialMedia{
    display:flex;
    flex-basis: 20%;
    justify-content: center;
    gap:10px;
    padding-right: 20px;
    filter: drop-shadow(1px 1px #284226);
}

#PageTitleSocialMedia img:hover{
    padding:2px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(100%);
}

#MenuDeroulant{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:105px;
    padding-right:30px;
    align-items: flex-end;
    filter: drop-shadow(1px 1px #284226);
}

#MenuDeroulant img:hover{
    padding:2px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(100%);
}

#MenuDeroulant img:hover + div{
    opacity: 1;
    visibility: visible;
}

#MenuDeroulant div:hover{
    opacity: 1;
    visibility: visible;
}

#DropDownMenu a:hover{
    opacity: 1;
    visibility: visible;
    color: orange;
}

#DropDownMenu{
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms;
    align-items: flex-end;
    padding-top: 10px;
}

#DropDownMenu a{
    height: 25px;

}






/* Home Page CSS_____________________________________________________________________________________________________________ */
#HeaderBackground {
    background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(Images/SaladBowl.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    height: auto;
}

#SecondBackground{
    background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(Images/AnanasBackground.jpg);
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
    color:black;
    height:auto;
}

#SecondBackground img:hover{
    padding:20px;
    transition:padding 1s;
}

#ThirdBackground{
    background-color:#284226;
    background-size: cover;
    height: auto;
}

#FourthBackground{
    color: white;
    background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(Images/Orange5.jpg);
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
    height: auto;
}

#ObjectifFlex{
    flex-direction: column;
    align-items: center;
    text-shadow:3px 3px 3px black;
}

#ObjectifsDetail{
    display: flex;
    font-size: 20px;
    color: black;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    padding:0% 5% 0% 5%;   
}

.DetailAndIcon{
    display:flex;
    flex-direction: column;
    gap:20px;
    border-radius: 20px;
    background-color: rgba(252, 250, 247,0.8);
    padding:25px;
    justify-content: center;
    align-items: center;
    width:20%;
    height:400px;
    border: 1px solid #cd853f;
    box-shadow: 6px 6px #cd853f;

}

.DetailAndIcon:hover{
    border: 3px solid #cd853f;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(40%);
    width:20.25%;
    transition:width 1s;
}

.DetailAndIcon img:hover {
    padding:2px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(40%);
}

#Welcome{
    flex-basis:65%;
    text-align: center;
    text-shadow: 2px 2px 2px #284226;
}

#Welcome:hover{
    color: rgb(255, 239, 186);
    padding:0px 4px 0px 4px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(248, 217, 117));
}

#InformationPP{
    flex-basis: 60%;
    text-align: center;
    font-size: 25px;
}

#SecondBackgroundPresentation{
    margin-left: 25px;
    max-width: 30%;
}



/*Page Service _______________________________________________________________________________________________________ */

#ServiceHeaderBackground {
    background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(Images/FoodTable.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    height: auto;
}

#SecondBackgroundService{
    background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url(Images/CitronBackground.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    font-size: 23px;
    color:black;
    height:auto;
}

.ServiceBackground{
    display: flex;
    color: #284226;
    gap:80px;
    padding:80px 250px 80px 250px;
    justify-content: center;

}

.ServiceBackground img{
    border-radius: 37px;
}

.ServiceDescription{
    display: flex;
    flex-direction: column;

}
.ServiceDescription p{
    line-height: 1.5;
    font-size: 18px;
    text-align: justify;
}

#SecondBackgroundService img:hover{
    padding:20px;
    transition:padding 1s;
}

#TraitNicoSteph{
    border-top: 1px solid #284226;
    width: 285px;
}






/*Page Qui sommes-nous _______________________________________________________________________________________________________ */


#QuiSommesNousHeaderBackground{
    background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(Images/Avocado_Bouchee2.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    height: auto;
}

.QuiSommesNousBackground{
    display: flex;
    color: #284226;
    gap:80px;
    padding:80px 250px 80px 250px;
    justify-content: center;
}

.QuiSommesNousBackground img{
    border-radius: 37px;
    
}

.QuiSommesNousDescription{
    display: flex;
    flex-direction: column;
}

.QuiSommesNousDescription p{
    line-height: 1.5;
    font-size: 18px;
    text-align: justify;
}

.QuiSommesNousBackground img:hover{
    padding:20px;
    transition:padding 1s;
}







/*Page Contact _______________________________________________________________________________________________________ */


#PageTitleSocialMediaContact{
    display:flex;
    flex-basis: 20%;
    justify-content: center;
    gap:10px;
    padding-right: 20px;
}

#PageTitleSocialMediaContact img:hover{
    padding:2px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(100%);
}

#ContactHeaderBackground {
    background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(Images/Food_Table2.jpg);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    height: auto;
}

#ContactOpening{
    display: flex;
    flex-basis: 50%;
    text-align: center;
    justify-content: center;
    text-shadow: 2px 2px 2px #284226;
}

#ContactOpening:hover{
    color: rgb(255, 239, 186);
    padding:0px 4px 0px 4px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(248, 217, 117));
}

#MessageContact{
    display:flex;
    flex-basis: 60%;
    gap:20px;
    justify-content: center;
    color:black;
    align-items: center;
}

#MessageContact input{
    height: 30px;
}

#MessageContact2{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap:10px;
    color:black;
    margin-top: 10px;
}

#ContactLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;

}

#ContactPicture{
    flex-basis: 20%;
}

#ContactTitle{
    display: flex;
    flex-direction: column;
}

#FormulaireMessage {
    height: auto;
    padding:0px 20px 0px 20px;
    display:flex;
    justify-content: center;
    flex-basis: 60%;

}

#FormulaireMessage input, textarea {
    border-radius:5px;
    border:1px solid #284226; 
    opacity: 0.5;
    background-color: #f5f5f5;
}

#FormulaireMessage input:hover, textarea:hover {
    border: 1px solid #cd853f;
}

#FormContact{
    padding:35px;
    border-right:1px dotted #284226; 
    border-left:1px dotted #284226;
    display:flex;
    justify-content: center;
    flex-direction: column;
}

#ContactLogo img:hover {
    padding:20px;
    transition:padding 1s;
}


#DefinitionContact{
    display: flex;
    flex-direction: column;
    flex-basis: 25%;
    color: #284226;
    padding:0px 35px 35px 35px;
}







/*Footer_____________________________________________________________________________________________________________________*/

#CoordonneesStyle{
    flex-direction: column;
    border-left: 1px solid white;
    padding-left: 50px;
}

#CoordonneesStyle p{
    font-size: 13px;
}

#CoordonneesStyle h2{
    font-size: 18px;
    font-style: italic;
}

#FooterSocialMedia{
    flex-direction: column;
    padding-right: 50px;
}

#FooterBackground{
    background-color:#284226;
    background-size: cover;
    height: auto;
}

#FooterBackground img:hover{
    padding:2px;
    transition:padding 1s;
    filter: drop-shadow(1px 1px rgb(228, 116, 40)) sepia(100%);
}

#flexContainerFooter{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis:70%;
}







/*Miscellaneous_______________________________________________________________________________________*/


.Trait{
    border-top: 1px solid #284226;
    width: 50px;
}

.Trait250{
    border-top: 1px dotted #284226;
    width: 20%;
}

.flexContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid red; */
}

.SpacingEmpty{
    margin:0px auto 0px auto;
    padding: 35px;
}

.SpacingEmptyx6{
    margin:0px auto 0px auto;
    padding: 160px;
}

.SpacingEmptyx2{
    margin:0px auto 0px auto;
    padding: 60px;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-style:normal;
    color: white;
    margin:0px;
}

/* Colors for links when clicked */
a{
    color: white;
    text-decoration: none;
}

/* a:visited{color: rgb(245, 155, 155);} */

h1{
    font-size: 45px;
    font-style:italic;
}

h2{
    font-size: 25px;
    
}

h3{
    font-size:22px;
    font-style:italic;
}

p{
    line-height: 1.8;
    font-size: 18px;
}



#SecondBackground button, #SecondBackgroundService button, #MessageContact2 button {
    border-radius: 5px 5px 5px 5px;
    font-family: 'Arial Black', sans-serif;
    font-size: 15px;
    border: 2px solid #cd853f;
    background-color:#cd853f;
    color:white;
    padding:20px 35px 20px 35px;
    
}
#SecondBackground button:hover, #SecondBackgroundService button:hover, #MessageContact2 button:hover{
    background-color:#e2c6a1;
    color:white;
    transition: all 2.2s, color 5s,padding 1s;
    padding:25px 40px 25px 40px;;
}
#SecondBackground button:active, #SecondBackgroundService button:active, #MessageContact2 button:active{
    background-color: #ffebcd;
    color:#696969;

}