body{
    background-color: #eeeded !important;
}

.nav-link{
    color: rgb(254, 244, 244) !important;
   padding: 15px !important;

}
.nav-link:hover{
    transition: 0.3s;
    text-decoration: underline;
    color: rgb(11, 11, 11) !important;
    

}
h2{
    font-family: sans-serif ;
    color: #6E6E6E ;
    letter-spacing: 1px;
    color: #4b4a4a!important;
    
}
p{
    font-family: serif;
    color: #2E2E2E;
    font-size: 20px;
}
h4{
    font-family: serif;
    color: #2E2E2E;
    font-size: 20px
}
.Accueil{
    text-align: center;
    padding: 3%;
    color: #ddd;
   
}
.Accueil P{

    padding: 3%;
}
.Accueil{
    animation: fadeIn 1.5s ease-in-out;

}
@keyframes fadeIn{
    
    from{opacity: 0; transform: translateY(20px);}
    to{opacity: 2; transform: translateY(0);}
}


.box1{
    align-items: center;
    margin: 3%;
    display: flex;
    padding: 20px;
    gap: 40px;
    border: 1px solid #bcbaba;
    border-radius: 3%;
    background-color:#bcbaba;
    color: #ddd;
}
.box1 img{
  width: 190px;
  height: 170px;
border-radius: 25%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow:  0 0 10px rgb(0,0,0,0.15);
  margin: 2%;
}

button{
    border: 1px solid #1677d6 ;
    border-radius: 6% !important;
    padding: 5px;
    text-decoration: none;
}

.submit{
    background-color:#1677d6;
    color: white;
   transition :transform 0.6s;
}
.submit:hover{
   transform: translateY(-6px);
    background-color: rgb(255, 255, 255);
    color: blue;
    box-shadow: 3px 3px 5px rgb(137, 137, 255);
}

 .submit a{
    color: rgb(172, 172, 172) ;
    text-decoration: none;
 }
 .submit a:hover{
    transform: 0.3s translateY(-6px);
    background-color: #6E6E6E;
    color: blue;
    box-shadow: 3px 3px 5px rgb(137, 137, 255);
}
.ctn{
    background-color: blue;
    color: white;

}
.ctn:hover{
    transition: 0.3s;
    box-shadow: 6px 6px 8px rgb(74, 74, 242);
}
.box3{
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 15px;
    margin: 2%;
}

.sec-3{
    border: 1px solid black;
    border-radius: 3%;
    margin: 25px;
    padding: 15px;
    translate: 0.7s;
}
.sec-3:hover{
  transform: scaleX(1.05) translateY(-6px);

  box-shadow: 5px 5px 7px rgb(123, 121, 121);

}
.sec-3 img{
   padding: 10px 10px 20px ;
   margin: 15px;
    width: 350px;
    height: 250px;

}
.sec-3{
    animation: fadeIn 1.5s ease-in-out;

}
@keyframes fadeIn{
    from{opacity: 0; transform: translateY(20px);}
    to{opacity: 1; transform: translateY(0);}
}
.sec-4{
    border: 1px solid black;
    border-radius: 3%;
    margin: 25px;
    padding: 15px;
    translate: 0.7s;
}
.sec-4:hover{
  transform: scaleX(1.05) translateY(-6px);

  box-shadow: 5px 5px 7px rgb(123, 121, 121);

}
.sec-4 img{
   padding: 10px 10px 20px ;
   margin: 15px;
    width: 350px;
    height: 250px;

}
.sec-4{
    animation: fadeIn 3.5s ease-in-out;

}
@keyframes fadeIn{
    
    from{opacity: 0; transform: translateY(20px);}
    to{opacity: 2; transform: translateY(0);}
}
.sec-5{
    border: 1px solid black;
    border-radius: 3%;
    margin: 25px;
    padding: 15px;
    translate: 0.7s;
}
.sec-5:hover{
  transform: scaleX(1.05) translateY(-6px);

  box-shadow: 5px 5px 7px rgb(123, 121, 121);

}
.sec-5 img{
   padding: 10px 10px 20px ;
   margin: 15px;
    width: 350px;
    height: 250px;

}
.sec-5{
    animation: fadeIn 6s ease-in-out;

}
@keyframes fadeIn{
    
    from{opacity: 0; transform: translateY(20px);}
    to{opacity: 2; transform: translateY(0);}
}
.show{
    border: 1px solid blue;
    border-radius: 5%;
    background-color: rgb(26, 26, 173);
    color: white;
    padding: 8px;
    margin: 2%;
    translate: transform 0.5s;

}
.show:hover{
  transform: translatex(5px);
    background-color: blue;
    box-shadow: 3px 3px 5px blue;
}

.text-dark{
    border: 1px solid black !important;
    border-radius: 5%;
    background-color: #ddd;
    margin: 5%;
    padding: 40px;
}
.btn{
    border: 1px solid blue !important;
    border-radius: 5% !important;
    background-color: rgb(26, 26, 173) !important;
    color: white !important;
    padding: 10px;
    margin: 3%;
    translate: transform 0.5s;

}
.btn:hover{
  transform: translatex(5px) !important;
    background-color: blue !important;
    box-shadow: 3px 3px 5px blue;
}




.copyright{
    text-align: center;
    justify-content: center;
  
    padding: 10px;
}

.social-med a{
  
    padding: 5px;
    margin: 15px 10px;
    font-size: 25px;
    text-decoration: none;
    color: rgb(22, 9, 199);
}

.social-med a:hover{
  color: #1677d6;
}

input [type="Email"]{
    border: 1px solid white;
}  
input[type="email"]:valid{ 
    border-color: rgb(37, 187, 37);
}
input[type="email"]:invalid{
    border-color: rgb(255, 0, 0);
}