@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');

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

/*****la navbar*****/

.navbar {
  justify-items: center;
  padding: 0;
}
.menu-bar .navbar-light .navbar-nav .nav-link {
  font-size: 14px;
  margin: 3px;
  color: #fff;
  font-weight: 600;
}
.menu-bar .navbar-light .navbar-nav .nav-link:hover {
  font-weight: 600;
  color:black;
}
.menu-bar .navbar-toggler {
  padding-right: 20px;
  outline: none ;
  border: none ;
}
.menu-bar .navbar-toggler:focus {
  box-shadow: none;
}
.navbar img {
  width: 60px;
  transition: all 0.5s;
}

.menu-bar {
  background-image: linear-gradient(
    90deg, rgba(69, 112, 141, 0.918), rgba(3, 62, 85, 0));
    transition: all 0.5s;
}

.menu-collapse {
  background-image: linear-gradient(
    90deg, rgba(69, 112, 141, 0.918), rgba(3, 62, 85, 0.979));
  border-bottom:1px none  rgba(3, 62, 85, 0.972);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
  box-shadow:0px 0px 10px rgba(3, 62, 85, 0.931);
}
.menu-collapse img {
  width: 100px;
}

.main{
    background-image: url('/img/superman-elliteam.jpg');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    height: 100vh;
    z-index: -2;    
}
.main-title > h1{
  position:relative;
  color: #cfcaca;
  z-index: 5;
  padding-top: 25vh;
}
.titlefont{
  color:rgb(8, 53, 95);
}
.dialog{
  background-image: url('/img/bulle.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  padding:80px;
  display: inline-flex;
  top:20vh;
  left:60vw;
  height:300px;
  width: 400px;
  font-size: larger;
  font-weight: bold;
  text-align: center;
}

.light{
  margin:15px;
  color:rgb(3, 62, 85, 0.979);
  font-size: 16px;
  padding: 12px;
  background-color: rgba(239, 244, 245, 0.739);
  border-radius: 10px;
  box-shadow:0px 0px 20px rgba(116, 114, 111, 0.301);
}
.light.l2{  
  font-size: 18px;
}

.title1{
  color: rgba(3, 62, 85, 0.979);
  font-weight: bold; 
  font-size: 2rem;
  text-align: center;
  padding:20px;
}

.title1.h1{
  font-size: 3rem;
}
.title1.t1{
  padding:0px;
}


/*****description d'une mission*****/

#description{
  background-color: rgb(248, 236, 227);
}

.tiret::before{
position: absolute;
left: 40%;
height: 60px;
content: " ";
width: 20%;
color: rgb(42, 133, 145);
border-bottom: 5px solid rgba(69, 112, 141, 0.918);
border-radius: 2px 2px;
}

/***formulaire***/

.text-footer a, .text-footer{
  font-size: 14px;
}

.contact-body{
  background: linear-gradient(60deg, rgba(69, 112, 141, 0.918), rgba(3, 62, 85, 0));
}

/* Rotation */
.animation p img {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
 
.animation p img:hover {
  -webkit-transform: rotate(-15deg) translateX(150px);
  transform: rotate(-15deg) translateX(150px);
}

.animate img{
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.animate img:hover {
  -webkit-transform: rotate(-30deg) translateX(180px);
  transform: rotate(-30deg) translateX(180px);
}


/****taille des images ****/

.img-superheros{
  width: 300px;
}

/*icones de formulaire*/
.form-icon{
  width: 25px;
}

.rouge{
  color:red;
}
#msgSent{
  color:darkgreen;
  font-size: 2rem;
  font-weight: bold;
}

.media-container{
  display: flex;
  /* padding-left:150px; */
  margin:20px 0 40px 0;
}
.media-btn{
  width:50px;
  height:50px;
  border-radius: 50%;
  background-color: #cfcaca;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;

}
.media-btn:hover{
  background-color: rgb(42, 133, 145);
  color:rgb(181, 213, 218);
}

/*section texte*/

.text-justify{
  text-align: justify;
}

/*****les liens*****/
a {
  color:rgba(3, 62, 85, 0.931);
  text-decoration: none;
}

a:hover {
  color:rgba(165, 218, 228, 0.931);
  text-decoration: none;
}

/*****les listes*****/
ul > li{
  list-style-type: none;
}
ul.equipe-list > li{
  list-style-type:disc;
}

/***les tags***/
.pillstyle{
  background-color:
  #9B4C8B;
}

/*****bouttons*****/

.btn-primary{ 
  background-color: rgba(69, 112, 141, 0.918);
  border:rgba(39, 62, 78, 0.918)
}
.btn-primary:hover{
  background-color: rgba(117, 189, 238, 0.918);
  border:rgba(89, 143, 182, 0.918)
}
.btn-success{ 
  background-color:#8B9B4C;
  border:#56612c;
}
.btn-success:hover{
  background-color:#d7eb8b;
  border:#98a859;
}


/*****partie administrateur*****/

.bg-admin{
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(93,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%236c85ff'/%3E%3Cstop offset='1' stop-color='%23ddffb4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='9' cy='9' r='9'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.11'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

.fa-handshake ,.fa-fist-raised{
  font-size: 60px;
  color:rgb(25, 116, 139);
}
.fa-arrow-circle-up{
  font-size:40px;
  color:rgb(25, 116, 139);
}

/*****affichage d'une mission*****/
.trait{
  width:300px;
  height:3px;
  background-color: #0d569b;
}

/*****card mission index*****/
.card-mission{
  height: 200px;
  overflow: hidden;
}
.mission-size{
  height:100px;
}

/*****page notre equipe*****/

.linkedin-btn{
  color:rgb(25, 116, 139);
}
.linkedin-btn:hover{
  color:rgb(61, 181, 211);
}

.img-arrondi{
  border-radius: 50%;
  width: 100px;
}
.card-equipe{
    box-sizing:content-box;
    margin:5px;
    padding-top:10px;
}

.avantage-block{
  min-height:500px;
}

/*****affichage avis*****/

.card-comment{
  min-height:350px;
 
}

/*****media queries******/

@media screen and (max-width: 1200px) {
  .avantage-block{
    min-height:580px;
  }
}

@media screen and (max-width: 1100px) {
  .dialog{
    left:50vw;
  }
  .avantage-block{
    min-height:500px;
  }
}

@media screen and (max-width: 970px) {
  .avantage-block{
    min-height:570px;
  }
}

@media screen and (max-width: 850px) {
  .dialog{
    left:10vw;
    background-image: url('/img/bulle-r2.png');
    padding:75px;
  }
 
}

@media screen and (max-width: 450px) {
  .dialog{
    left:10vw;
    background-image: url('/img/bulle-r2.png');
    font-size: medium;
    padding:67px;
    padding-top:70px;
    width: 350px;
    left:0px;
  
  }

  /****partie commentaire****/
  .card-comment{
    overflow: scroll;
    
  }

  /** image **/
  .img-smallscreen{
    width: 200px;
  }
}