*,::after,::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --primary: #4AC4F3;
    --blue: rgb(36, 108, 197);
    --bluep: rgba(181, 213, 253, 0.9);
    /* --blueT: rgba(36, 108, 197,0.9); */
    --dark: #202942;
    --light: #fff
}

.bg-primar{
    background-color: var(--blue);
}



 .slide-container .slide{
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    z-index: -1;
}


.slide-container .slide img{

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    object-fit: cover;

}


.slide-container .slide .content{
    min-height: 100vh;
    padding: 8em;
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-flow: column;
    background: rgba(0,0, 0, 0.7);
    text-align: center;
}


.container-fluid :where(#next,#prev){

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: #fff;
    color: #333;
    font-weight: bold;
    height: 60px;
    width: 50px;
    line-height: 55px;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
}


.container-fluid #next{

    right: 10px;
}


.container-fluid #prev{
    left: 10px;
}

/* 

.container .slide-container .slide .content .btn{
    display: inline-block;
    padding: 9px 30px;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    color: #333;
    font-weight: bold;
    font-size: 17px;
    margin-top: 10px;
    animation: animate .4s linear 1s backwards;

} */


.slide-container .slide .content h3{
    font-size: 60px;
    color: #fff;
    text-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    animation: animate .4s linear .4s backwards;

}



.slide-container .slide .content p{
    font-size: 15px;
    color: #eee;
    padding: 5px 0;
    font-weight: lighter;
    text-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    max-width: 700px;
    animation: animate .4s linear .6s backwards;

}


html{
    scroll-behavior: smooth;
}

@keyframes topbottom {
    
    to{
        transform: translateY(10%);
    }
    from{

        transform: translateY(-10%);

    }
}


@keyframes animban {
    to{

        transform: scale(1.0) translateY(0%);
        opacity: 1;

    }
}


@keyframes animban2 {
    to{

        transform:  translateY(0%);
        opacity: 1;

    }
}

.scroll_top{
    animation: topbottom 1s  infinite alternate ;
    background-color: var(--bluep);
    padding: 1.5em;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    width: 20px;
    height: 20px;
    color: #fff;
    position: fixed;
    bottom: 10px;
    right: 10px;

}

.anime{

    transform:  translateY(5%);
    opacity: 0;
    overflow: hidden;
}

img{

    background-size: contain;
    object-fit: cover;
}

.anime.active{

    animation: animban2 1s   ease-in-out forwards;
}


/*** Heading ***/
h1,
h2,
.fw-bold {
    font-weight: 700 !important;
}

h1{
    color: var(--blue);
}

h3,
h4,
.fw-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.fw-medium {
    font-weight: 500 !important;
}
.cc-navbar{
    position: sticky;
    top: 10%;
    background-color: #fff;
    z-index: 100;
    border-top: 5px solid var(--blue);
    text-transform: uppercase;
}

.c-nav{
    background-color: var(--blue);
    color: #fff;
}

.c-nav a,
.c-nav select {

color: #fff;
}
.cc-navbar .navbar-brand{
    /* position: absolute; */
    max-width: 80px;
}


.cc-navbar .navbar-brand img{
    width: 100%;
}

.cc-navbar button.rec{

    padding: 1em;
    background-color: var(--blue);
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    border-color: var(--blue);
    /* color: var(--blue); */
}


.cc-navbar button span{
    color: var(--blue);

}

.cc-navbar button:hover{

}


.cc-navbar .navbar-nav .nav-item{
    position: relative;
}


.cc-navbar .navbar-nav .nav-item.dropdown:hover > .nav{
        opacity: 1;
        visibility: visible;
        top: 100%;
}

.cc-navbar .navbar-nav .nav-item.dropdown .nav{
    background-color: #fff;
    padding: 1.5em;
    position: absolute;
    display: block;
    left: 0;
    top: 150%;
    width:300px;
    text-align: left;
    border: none;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in;
}

.cc-navbar .navbar-nav .nav-link.btn{
    background-color: var(--blue);
    padding: 0.5em;
    color: #fff;
}
.cc-navbar .navbar-nav .nav-link.active,
.cc-navbar .navbar-nav .nav-link:hover{
    color: var(--blue);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--blue);
}
.cc-navbar .navbar-nav .nav-link{
    position: relative;
    margin-right: 25px;
    font-weight: bold;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.carousel{

    height: calc(100vh - 150px);
}


.carousel .carou-btn ,
.carousel .carousel-indicators button{

/* background: transparent; */
opacity: 1;
/* color: #fff; */
}

.carousel .carou-btn ,
.carousel .carousel-indicators button:hover{
    opacity: 1;
}

.carousel .carousel-indicators button.active{
    background-color: #fff;
}
.carousel .carou-btn span{

    background: #fff !important;
    border-radius: 100%;
    width: 60px;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-weight: bold;
    /* box-shadow: unset 29px 26px 100px #fff; */
    color: var(--blue);
    /* padding: 1rem; */
    font-size: 2rem;
    z-index: 2;
}


.carousel .carou-btn span::before{

    content: '';
    background-color:;
    position: absolute;
    display: none;
   
}

.carousel::after{
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100vh - 150px);
    background-color: rgba(0, 0, 0, .3);
    top: 0;
}

.carousel .carousel-inner{
/* z-index: 1; */
position: relative;
height: 100%;
background-size: cover;
object-fit: contain;
}


.carousel .carousel-inner img{
    background-size: cover;
    object-fit: contain;
    height: 100%;
}



.carousel .carousel-inner .carousel-caption{
    position: absolute;
    /* background-color: red; */
    top: 10%;
    font-size: 3rem;
    z-index: 3;
}


.carousel .carousel-inner .carousel-caption h3{
    font-size: 60px;
    color: var(--blue);
    animation: animate .4s linear .4s backwards;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 3;
}


.carousel .carousel-inner .carousel-caption p{
    font-size: 40px;
    color: #fff;
    padding: 5px 0;
    text-center
    /* text-shadow: 0 5px 10px rgba(0, 0, 0, .3); */
    animation: animate .4s linear .6s backwards;

}
/********************************************baniere*****************************************/

.hero-header .box .col-md-8 h2, 
.hero-header .box .col-md-8 h4,
.hero-header .box .col-md-8 .btn{
    animation: animban 1.5s   ease-in-out forwards;
    transform:translateY(-50%);
    opacity: 0;
}
.hero-header{
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/bann.jpg') center center 
    repeat;
    background-size: cover;
    object-fit: cover;
    height: 100vh;
    min-height: 400px;
}



.hero-header .box{
    /* left: 30%; */
    display: flex;
    justify-content: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    /* position: absolute; */
    padding: 2em;
    color: #fff;
    /* background-color: red; */
}
.hero-header .box .btn{
    padding: 0.7em 2em;
    background-color: #fff;
    color: blue;
    /* border: 1px solid var(; */
    font-weight: bold;
    border-radius: 10px;
}



.hero-header .col-md-8 {
margin-top: 5em;

}


.hero-header .row .left button{

    border: none;
    border-radius: 20px;
    background-color: var(--light);
    padding: 0.4em;
    width: 180px;
}


.hero-header .row .left .row{
    grid-gap: 6rem;
}
.hero-header .row .left button span{
    font-size: 1.2em;
    color: var(--dark);
    font-weight: 400;
}
.hero-header .row .left button span:nth-child(1){
    background-color: var(--blue);
    border-radius: 50%;
    font-size: 1.5em;
    color: var(--light);
    line-height: 50px;
    /* padding: 0.1em; */
    width: 50px;
    height: 50px;
}

.hero-header .row .right .imgcontent{

    height: 20em;
    width: 30em;
    margin-left: auto;
}

.hero-header .row .right img{
    width: 100%;
    height: 100%;
    border-radius: 50%;

}

/***********************************************à propos***********************************************/

.about h1,
.service h1{
    color: var(--blue);
    font-weight: bold;
}

.about h2{
    color: var(--dark);
}
.about .col-md-5 img{

    width: 100%;
    height: 450px;
    border-radius: 10px;


}


.about {
    margin-top: 3em;
}

.about .row{
    position: relative;
}


.about .col-md-6 h2.mlh{
width: 350px;
 margin-left: -170px;

}


.about .col-md-6.ml{
    margin-left: -100px; 
    padding: 0 30px

}


.about .col-md-6 .card{
    padding: 1em;
    top: 5%;
    position: absolute;
    left: 30%;
    border: none;

}


.about .col-md-9 .col .icon-box{
    
    background-color: var(--blue);
    color: #fff;
    width: 80px;
    height: 80px;
    font-size: 1.5em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.about p{

    font-weight: 400;
}


.about .row .col-md-6 .numeric{

    color: #fff;
    /* width: 50px;
    height: 50px; */
    padding: 1em;
    font-weight: bold;
    border-radius: 100%;
    background-color: var(--blue);text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;


}


/*************************services************************/

.service{
    margin-top: 5em;
}


.service .row{

    position: relative;
}

.service .row .col-md-6 .card.cardfloat{


    top: 25%;
    width: 400px;
    height: 300px;
    right: 20%;
    position: absolute; 
    text-align: center;
    background-color: var(--blue);
    color: #fff;

padding: 1em;
    

    /* margin-right: 100rem; */
}
/***************************resencement**************************/

.resencement{
    width: 100%;
    min-height:105vh;
    background: url(../img/bg-bottom.png) center bottom no-repeat;
    background-color: var(--blue);
}

.resencement .rowTop{
    padding-top: 7em;
    width: 100%;
    }

    
      
.resencement .rowTop .right {

    position: relative;
    overflow: hidden;
    width: 50%;

}
 
.resencement .rowTop .right > .card.cardFom{

    /* background-color: red; */
    /* margin-left: -100%; */

    transition: 0.3s ease;
}
.resencement .rowTop .right > .card.cardecap{

    width: 500px;
    margin-bottom: 1em;
    top: 0;
    transform: translateX(150%);
    position: absolute;
    height: 31em;
    overflow-y: scroll;
    transition: transform 0.3s ease;

}
        
  
.resencement .rowTop .right > .card.cardecap::-webkit-scrollbar{
    width: 5px;
    border-radius: 50px;
}

 
.resencement .rowTop .right > .card.cardecap::-webkit-scrollbar-track{

    background-color: #f1f1f1;
}


 
.resencement .rowTop .right > .card.cardecap::-webkit-scrollbar-thumb{

    background: var(--blue);

}
.resencement .rowTop .right > .card{
    overflow: hidden;
    width: 500px;
    height: 42em;
    /* min-height: 40vh; */
    margin-bottom: 1em;
}

    
.resencement .rowTop .right .card h5{
    color: var(--blue);
    font-weight: bold;
    font-size: 1.5em;
}


  

.resencement .rowTop .right .card .card-body{
    width:100%;
    height: auto;
    padding: 1em;
}

.resencement .rowTop .right .card .card-body .title{

    color: var(--dark);
    text-align: center;
    font-weight: 400;
}


.resencement .rowTop .right .card .content-flex{
    /* background-color: #202942; */
    display: flex;
    width: 500%;
    height: auto;
    transition: margin-left 0.3s ease-in-out;
    /* margin-left: -400%; */

}


.resencement .rowTop .right .card .content-flex .card.preview-img{
    margin-left: 20px;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
}



.resencement .rowTop .right .card .content-flex .card.preview-img img{
    max-width: 490px;
    max-height: 335px;
    width: 100%;
    height: 100% ;
    object-fit: contain ;
}

.resencement .rowTop .right .card .card-body .row{
    /* grid-gap: 5px; */
    margin-top: 1em;
}



    .resencement .card-body button{
        background-color: var(--blue);
        width:100%;
        padding: 0.8em ;
        color: var(--light);
        border: none;
        text-align: center;
        font-weight: 500;
        border-radius: 10px;
    }

    
    .resencement .card-body .d-flex button{
        width:40% ;
    }

    /******************************************footer*****************************************************************/

    .footer{

        background-color: var(--blue);
    }

    .footer .nav .nav-link{
        color: #fff;
        font-weight: 400;
    }

   .footer .row .card{
    background-color: var(--bluep);
    border: none;
    color: var(--blue);
   }

  
   .footer .card-f{

    background-color: var(--bluep);
   }

   /*************************************************row***************************************/

   .conract{

    margin: 5em 0em 5em 0em;
   }
   .conract .row.row1{

    position: relative;
    margin-top: 5em;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/bann.jpg') center center fixed
    no-repeat;
    background-size: cover;
    border-radius: 10px;
    
    object-fit: cover;
    /* height: 100vh; */
    min-height: 350px;
    padding: 1em;
   }

   
   .conract .row .card h3{
    /* background-color: var(--bluep); */
    color: var(--blue);
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
   }

   .conract .row .card button{
    background-color: var(--blue);
    color: #fff;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
    border: none;
    font-weight: bold;
   }


   /************************************************************************************************* */
   .VoirPLus{

    position: relative;
   }
   .VoirPLus .row .col-md-6 .btnArticle , .about .btnArticle {  
    padding: 1em;
    background-color: #fff;
    border: 2px solid var(--blue);
    border-radius: 10px;
    color: var(--blue);
    font-weight: bold;
    box-shadow: 2px 2px 2px 1px var(--blue);
   }

  .VoirPLus :where(.Btnprev , .Btnnext){
    padding:0.5em;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    box-shadow: 2px 2px 2px 1px var(--blue);
    color: var(--blue);
    top: 50%;
   
  }

  
  .VoirPLus .Btnnext{

    right: 4%;
    transform: rotate(180deg);
  }

  .VoirPLus .Btnprev{

    left: 4%;
  }

  .VoirPLus .carousel {
    margin-left: -100%;
    /* margin-right: 50%; */
    /* margin: 0; */
  

  }

 .VoirPLus .carousel-content{
    width: 100%;
    background-color: red;
    overflow: hidden;
 }