@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

*{
    margin: 0;
    padding: 0;
}

boby {
    font-family: 'Roboto',Verdana, Tahoma, sans-serif;
    line-height: 1.7;
    color: #516171;

}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700!important;
    color: #274284;
	font-family:'Roboto';
}

/*   NAVBAR  */




.navbar {
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}


.nav-link:active {
 color: red;
}

.navbar-brand {
    line-height: 1;
  }
  
  .navbar-brand img {
    max-height: 80px;
    margin-right: 10px;
  }


  .navbar-nav li{
    margin-right: 5px;
    padding-right: 5px;
  }
  .navbar-nav li a{
    font-size: 16px;
    color: #274284;
    position: relative;
    font-family: 'Roboto','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 500!important;
    text-transform: uppercase ;
  }

  .navbar-nav li a:hover{
    color: #d42d35;
    font-weight: 800!important;
  }


  .dropdown_menu{
    display: none;

}
   
.collapse ul li:hover .dropdown_menu{
    display: block;
    position: absolute;background-color: white;
    top: 60%;
    

}


.dropdown_menu ul {
    display: block;
    margin: 10px; 
}

.dropdown_menu ul li {
    width: 150px;
    padding: 10px; 
    list-style: none;
    
}



/*   CAROUSEL */

.main-carousel{
    height: 30rem;
    
  }
  
  .carousel-item{
   height: 30rem;
    background: #777;
    color: white;
    position: relative;
  }
  
  
.container-carousel{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 150px;
    
  }
  
  .carousel-inner .carousel-item{
    background-color: rgba(14, 2, 70, 2.5);
  
   }

   .overlay-image img{
    height: 100%;
  }

  
  .overlay-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    opacity:0.5;
  }


  /*text carousel*/
  .containertext{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .containertext span{
    font-family: 'Roboto';
    
    display: block;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
  .text1{
   font-family: 'Roboto' serif;
   color: white;
   font-size: 50px;
   font-weight: 1000;
   margin-bottom: -2px;
   background: transparent;
   position: relative;
   animation: text 3s 1;
  
  
  }
  
  .text2{
   font-size: 30px;
   color: white;
   font-weight: 1000;
   margin-top: -15px;
   text-transform: uppercase;
  }
  
  @keyframes text{
    0%{
      color: transparent;
      margin-bottom: -30px;
    }
    30%{
      letter-spacing: 15px;
      margin-bottom: -30px;
    }
    85%{
      letter-spacing: 5px;
      margin-bottom: -30px;
    }
  }


  
.list .item .content{
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translate(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}
.list .item .content .title,
.list .item .content .type{
  font-size: 50px;
  font-weight: bold;
  line-height: 1.3em;
  font-family: 'Roboto', sans-serif;
}

.list .item .content .title{
font-size: 40px;
text-transform: uppercase;
}
.list .item .content .type{
color: #14ff72cd;
font-size: 30px;
text-transform: none;

}

.list .item .content .description{
font-size: 20px;

}

.list .item .content .button{
margin-top: 2px;
}

.list .item .content .button button{
 border: none;
 color: black;
 background-color: #eee;
 padding: 7px 14px;
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
 cursor: pointer;
 letter-spacing: 2px;
 transition: 0.4s;
 border-radius: 5px;
}

.list .item .content .button button:hover{
  background-color: #14ff72cd;
  color: #eee;
}

.list .item:nth-child(1){
  z-index: 1;
}

.list .item:nth-child(1) .content .title,
.list .item:nth-child(1) .content .type,
.list .item:nth-child(1) .content .description,
.list .item:nth-child(1) .content .button{
  transform: translateY(50px);
  filter:blur(20px);
  opacity:(0);
  animation: showContent 0.5s 1s linear 1 forwards;

}

@keyframes showContent {
  to{
    transform: translateY(0);
    filter: blur(00px);
    opacity: 1;
  }
}

.list .item:nth-child(1) .content .title{
  animation-delay: 0.4s;
}
.list .item:nth-child(1) .content .type{
  animation-delay: 0.6s;
}
.list .item:nth-child(1) .content .description{
  animation-delay: 0.8s;
}
.containertext2:nth-child(1) .content .button{
  animation-delay: 1s;
}


@media screen  and (max-width:678px){

  .list .item{
    max-width: 80%;
  }
  .list .item .content{
    padding-right: 0;
  }
  .list .item .content .title{
    font-size: 30px;
    max-width: 100%;
  }

  .list .item .content .type{
    font-size: 16px;
  
  }
  .list .item .content .description{
    font-size: 12px;
 
  }
    
}



/* mission */

.mission .container {
 
    margin-top: 25px;
    min-height: 25px;
    font-family: 'Roboto'; 
    align-items: center;  
    justify-content: center;  
  }
  
  .mission .container .titre h4 span{
   
    font-family:'Roboto' ;     
  }
  
  
  .mission .container .sous-titre h3 {
    color: #274284;
    font-family:'Roboto' ;     
  }
  
  .mission .container .texte-1 p{
    color: #363738; 
    font-size: 18px;
    font-family:'Roboto' ;
    text-align: center;  
   
  }

  /* service */

.card {
    z-index: 1;
    overflow: hidden;
    transition: .5s;
    margin-top: 5px;
  }
  
  .card:hover{
    color:#fff;
  }
  
  .card p:hover{
    color:#fff;
  }
  
  .card i:hover{
    color:#fff;
  }
    .card a:hover{
    color:#fff;
  }
  
  
  
  .card p{
    font-family: 'Roboto';
    color: #363738;
  }
  
  
  .card::before{
    content: "";
    position: absolute;
    left: -100%;
    top: 0%;
    background: #274284;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    z-index: -1;
  }
  
  .card:hover::before{
    left: 0%;
  }
  
  .icone{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  
  }
  
  .bnt-valide button {
  display: inline-block;
  margin-top: 35px;
  background-color:#dd0808cd;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  border-radius: 10px;
  
  }
  
  
  
  .bnt-valide button:hover {
  background-color:#dd0808cd;
  color: #fff;
  }
  
  .bnt-valide{
  display: flex;
  justify-content: center;
  align-items: center;
  }

    
 /*barre  de pub*/


 .container-barre{
  margin-top: 55px;
  position: relative;
  background-color: #274284;
  font-family: 'Roboto';
  font-size: 15px;
}
.livre img{
    height: 250px;
    width: 250px; 
   
}


.bnt-valide-1{
display: flex;
}

.container-barre .container {
 font-size: 24px;
}

.container-barre button {
  display: inline-block;
  margin-top: 35px;
  background-color:#dd0808cd;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 20px;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  border-radius: 10px;
  
  }
  
  
  
  .container-barre button:hover {
  background-color:#dd0808cd;
  color: #fff;
  }



  /* menu actualite*/

  
  .container-menu{
  
    display: flex;
    align-items: center;
    justify-content:space-between;
  
  }

  .box{                         
    height: fit-content;
    width: fit-content;
    font-family: "Roboto"; 
  }

  .container-menu button {
    display: inline-block;
    margin-top: 35px;
    background-color:#dd0808cd;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 20px;
    text-transform: uppercase;
    transition: all .3s;
    border: none;
    outline: none;
    border-radius: 10px;
    
    }
    
    
    
    .container-menu button:hover {
    background-color:#dd0808cd;
    color: #fff;
    }

          /* a la une */
          #blog 

          .blog-post {
          position: relative;
          }
      
          
          .blog-post img {
          margin-bottom: 12px;
          }
      
          .blog-post h4 {
          margin-top: 12px;
          margin-bottom: 12px;
          }


          

        /*auto slider  partenaire*/

        .slider{
          height: 250x;
          margin-top: 15px;
          position: relative;
          width: 90%;
          display: grid;
          place-items: center;
          overflow: hidden;
  
  
         
      }
      .slider-track{
          display: flex;
          width: calc(250px * 18);
          animation: scroll 40s linear infinite; 
      }
  
      .slider-track:hover{
          animation-play-state: paused;
         
      }
  
      @keyframes scroll {
          0%{
              transform: translateX(0)
          }
          100%{
              transform : translateX(calc(-250px * 9));
          }
      }
  
      .img_slider{
          height: 180px;
          width: 250px;
          display: flex;
          align-items: center;
          padding: 15px;
          perspective: 100px;
      }
  
  
  
      .container .titre-1 h6{
          font-family: 'Roboto';
          font-size: 18px;
          color: #c91717;
          padding-left: 5px;
      }
  
      .container .titre-1 h2{
          font-family: 'Roboto';
          font-size: 32px;
          font-weight: 800;
          color: rgb(37, 36, 36);
          padding-left: 5px;
          margin-top: 10px;
      }
  
      img{
          width: 100%;
          transition: transform  1s;
      }
      img:hover{
          transform: translateZ(20px);
      }
  
      .slider::before,
      .slider::after{
          background:linear-gradient(to right, rgba(255,255,255,1)0%,
          rgba(255,255,255,0) 100%);
          content: '';
          height: 100%;
          position: absolute;
          width: 15%;
          z-index: 2;
      }
      .slider::before{
          left :0;
          top :0;
      }
      .slider::after{
          left :0;
          top :0;
          transform: rotateZ(180deg'angle');
      }





       /*sous banner*/

.heading-page {
	padding-top: 3px;
}

.page-heading {
  height: 40px;
	margin: 0px 10px;
	padding: 120px 0px;
	text-align: left;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
  /*background:  linear-gradient(rgba(0, 10, 17, 0.4), rgba(9,32,50,0.4)), url(../img/fondsous.jpg); */
  background-image:  url(../img/fond.jpg);  
  
}

.page-heading .text-content h4 {
	color:  #fff;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.5px;
	margin-bottom: 15px;
}

.page-heading .text-content h2 {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.5px;
}


 /*reserve*/

.wrapper{
  min-height : 100vh;
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 20px;
  font-family: 'Roboto';
}




.wrapper img{
 width: 320px;
  border: 3px solid #777373;
  border-radius: 10px;
  float: left;
}
.wrapper p{
   text-align: justify;
}


  /*footer*/

footer{
  font-family: 'Roboto';
  color: white;
  margin-top: 100px;
  position: relative;
  background-image: url(../img/fond.jpg);
}

.logo-footer a{
  background-color: red;
  width: 200px;
  height: 400px;
}



.container-footer h5{
  color: white;
}




.Copyright{
  color: #fff;
}


/* Contact Form */

.contact-us .down-contact,
.contact-us #map {
	margin-top: 80px;
}

.contact-us .sidebar-heading h2 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 0.5px;
	color: #20232e;
	border-bottom: 1px solid #eee;
	padding-bottom: 15px;
	margin-bottom: 25px;
}

.contact-us .contact-form input {
	width: 100%;
	height: 46px;
	border: 1px solid #949292;
	font-size: 13px;
	
	font-weight: 500;
	color: #7a7a7a;
	outline: none;
	padding: 0px 15px;
	margin-bottom: 30px;
}

.contact-us .contact-form textarea {
	width: 100%;
	height: 46px;
	border: 1px solid #afadad;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 500;
	color: #7a7a7a;
	outline: none;
	padding: 10px 15px;
	margin-bottom: 30px;
	height: 180px;
	max-height: 220px;
	max-width: 100%;
	min-width: 160px;
}

.contact-us .contact-form input::placeholder,
.contact-us .contact-form textarea::placeholder {
	color: #aaa;
}

.contact-us .contact-form button {
	display: inline-block;
	background-color:  rgb(180, 18, 18);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 12px 20px;
	text-transform: uppercase;
	transition: all .3s;
	border: none;
	outline: none;
}

.contact-us .contact-form button:hover {
	background-color:  rgb(180, 18, 18);
}

.contact-us .contact-information {
	margin-left: 30px;
}

.contact-us .contact-information ul li {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.contact-us .contact-information ul li:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.contact-us .contact-information ul li h5 {
	font-size: 19px;
	font-weight: 900;
	color: #20232e;
	line-height: 30px;
}

.contact-us .contact-information ul li span {
	display: block;
	font-size: 14px;
	color: #aaa;
	margin-top: 8px;
}