body {
    margin: 0;
    padding: 0;
    font-family: "Gill Sans", sans-serif;   
  }

/* Menu */

.navbar {
    border-bottom: 1px solid #1c306e;
  }


.wrapper{
  margin: 10vh 4vh 10vh 4vh;
}   

/* Card */
.card-meta.mb-2
{
    font-size: 140%;
    font-weight: 1000;

    
}
    .card{
      border: none;
      transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
     overflow:hidden;
     border-radius:20px;
     min-height:450px;
       box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
    
    }
    
     .card-has-bg{
     transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      background-size:220%;
      background-repeat:no-repeat;
      background-position: center center;
    
    

      }
      .card-has-bg:hover {
        transform: scale(0.98);
         box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
        background-size:130%;
         transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
      }
        .card-img-overlay {
          transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
          background: rgb(35,79,109);
         background: linear-gradient(0deg, rgba(4,69,114,0.5) 0%, rgba(4,69,114,1) 800%);
         }
      
    
     
     
     .card-meta{
        color: #000000;
    
    }
     .card-body{ 
       transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    }
   
     .card-img-overlay {
      transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
     /* background: rgb(35,79,109);
    background: linear-gradient(0deg, rgba(35,79,109,0.3785889355742297) 0%, rgba(69,95,113,1) 100%);*/
    }
   
/*Footer  */

    .waves {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-bottom: -7px;
        
        min-height: 100px;
        max-height: 400px;
      }
      /* Animation */
      .parallax>use {
        animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
      }
      .parallax>use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
      }
      .parallax>use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
      }
      .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
      }
      .parallax>use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
      }
      @keyframes move-forever {
        0% {
          transform: translate3d(-90px, 0, 0);
        }
        100% {
          transform: translate3d(85px, 0, 0);
        }
      }
      /*Shrinking for mobile*/
      @media (max-width: 768px) {
        .waves {
          height: 40px;
          min-height: 40px;
        }
        .content {
          height: 30vh;
        }
      }
      
#myList {
margin: 30px 20px 20px 20px;
border-radius: 25%;

}
      
@media (max-width: 768px) {
    .list-group-horizontal {
        flex-direction: column;
        /* flex-direction: row; */
    }
    
  }

  .list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #1c306e;
    border-color: #1c306e;
}


/* Nos prestations titre  */

.servicetitle{
 margin-top: 150px;
  text-align: center;
  font-size: 60px;
  font-weight: 650;
  background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  padding-bottom: 50px ;

}

.servicetitle2{
  margin: 80px 10px 0px 10px;

   text-align: center;
   font-size: 60px;
   font-weight: 650;
   background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
   color: transparent;
   background-clip: text;
   -webkit-background-clip: text;
   padding-bottom: 50px ;
 
 }
 
 
/*Bouton nos services */


.containerservice{
 
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom: 40px;
 
}

.containerservice button{
  height:60px;
  width:340px;
  background-color:#6C5F5F;
  border:none;
  position:relative;
  overflow:hidden;
  color:#fff;
  font-size:15px;
  border-radius:3px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}

.containerservice button span{
  z-index:10;
  
}

.containerservice button:hover:after{
  position:absolute;
  content:'';
  border-radius:1px;
  background-color:#1c306e;
  height:400px;
  width:400px;
  top:-12px;
  left:-13px;

}

.containerservice button:after{
  position:absolute;
  content:'';
  border-radius:30% 70% 70% 30% / 30% 22% 78% 70%;
  background-color: #1c306e;
  height:70px;
  width:80px;
  top:-12px;
  left:-13px;
  transition:all 1s;
}



    /* Mentions légales du site */

  .Titlemls{
    text-align: center;
    font-size: 30px;
    font-weight: 650;
    background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    padding-bottom: 50px ;
  }

  .TitleConfi{
  text-align: center;
  font-size: 30px;
  font-weight: 650;
  background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  padding-bottom: 50px ;
}


.Titlepers{
  text-align: center;
  font-size: 24px;
  font-weight: 650;
  background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  padding-bottom: 50px ;

}

.Titlecomm{
  text-align: center;
  font-size: 24px;
  font-weight: 650;
  background-image: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  padding-bottom: 50px ;

}

.h7,h7{
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    /* effet de survol texte */

}
.h7:hover{
    transition: opacity 0.9s;
    opacity: 0.5;

}