@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;600&family=Roboto:wght@900&display=swap');

body
    {
        background: linear-gradient(to right, #00416a, #e4e5e6);
        font-family: 'Poppins', sans-serif;
        /*font-family: 'Roboto', sans-serif;*/
    }

/* DEGRADE SUR LES TITRES */
.gradient1{
    background: linear-gradient(to right, #00416a, #e4e5e6);
    background-clip: text;
        -moz-background-clip: text;
        -webkit-background-clip: text;
        -o-background-clip: text;
        -ms-background-clip: text;
    text-fill-color: transparent;
        -moz-text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        -o-text-fill-color: transparent;
        -ms-text-fill-color: transparent;  
}

/*COLOR Bluue*/
.bluue{
  color: #00416a;
}


/* TITRES fw-600 ls3 */
.ttr1{
  letter-spacing: 3px;
  font-weight: 600;
}


.alignxy {
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Block Menu KLEASE. */
.menusur {
        z-index: 99999;
}

/*div.dropdown-menu{
    background-color: #292b2c ;
    color : white ;
}*/



.clignote  {
   animation-duration: 4s;
        -moz-animation-duration: 4s;
        -webkit-animation-duration: 4s;
        -o-animation-duration: 4s;
        -ms-animation-duration: 4s;
   animation-name: clignoter;
        -moz-animation-name: clignoter;
        -webkit-animation-name: clignoter;
        -o-animation-name: clignoter;
        -ms-animation-name: clignoter;
   animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
   transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}





 /*-----------AREA1------------*/
.area1 {
  background-image: url('/image/IMG_9698.jpg');
  height: 100vh;
  color: white;
  background-size: cover;
  animation: noirblanc 5s forwards;
        -moz-animation: noirblanc 5s forwards;
        -webkit-animation: noirblanc 5s forwards;
        -o-animation: noirblanc 5s forwards;
        -ms-animation: noirblanc 5s forwards;
  
}

.transh1 {
  transform : translateY(-120px);
        -moz-transform : translateY(-120px);
        -webkit-transform : translateY(-120px);
        -o-transform : translateY(-120px);
        -ms-transform : translateY(-120px);
}


/* Passage .area1 en noir et blanc */
@keyframes noirblanc {
  from {
    filter: grayscale(0%);
  }

  to {
    filter: grayscale(100%);
  }

}


.area1 h1 {      
        font-weight: 800;
        font-size: 10vw;
        text-align: center;
}


@media screen and (max-width: 576px) {
  .area1 h1 {
        font-size: 60px;
  }
}


.area1 h2 {
        color: gainsboro;
        font-weight: 700;
        font-size: 4vw;
        text-align: left;
        padding-left: 100px;
}

@media screen and (max-width: 576px) {
  .area1 h2 {
        font-size: 30px;
        padding-top: 10vw;
  }
}

.area1 h3 {
        color: gainsboro;
        font-weight: 700;
        font-size: 4vw;
        text-align: left;
        padding-left: 150px;
}

@media screen and (max-width: 576px) {
  .area1 h3 {
        font-size: 30px;
        
  }
}




 /*-----AREA2 PRESENTATION----------*/
     
.area2 h2 {
    background: linear-gradient(to right, white, gainsboro);
    background-clip: text;
        -moz-background-clip: text;
        -webkit-background-clip: text;
        -o-background-clip: text;
        -ms-background-clip: text;
    text-fill-color: transparent;
        -moz-text-fill-color: transparent;
        -webkit-text-fill-color: transparent;
        -o-text-fill-color: transparent;
        -ms-text-fill-color: transparent; 
        font-weight: 500;
}

.area2 {
  text-align:center;
  margin-top: 200px;
  margin-bottom: 300px;
}



/*-----------AREA 3 - NOS SERVICES----------*/

.area3 {
    background-color: gainsboro;
}

.texdisp {
    font-weight: 600;
    text-shadow: 2px 2px 4px black;
}

.ica {
    height: 350px;
    width: 350px;
    filter: grayscale(100%);
    background-size: cover;
    text-align:center;
    padding-top: 150px;
    margin:10px;
}


.ica a {
    color : #e4e5e6;
    text-decoration: none;
}


.ica:hover {
    filter : brightness(1.0) contrast(100%) saturate(100%);
    transform : scale(1.025);
    border : solid ;
    border-width: thin;
}

.ica:hover .texdisp {
    text-shadow: 4px 4px 6px black;
}




/*-----------AREA 4 - NOS FORFAITS------------*/
/*.area4 {
    height: 100vh;
}*/

.price {
    background-color: gainsboro;
    height: 520px;
    width: 350px;
    border : solid ;
    border-radius: 15px;
    border-width: thin;
    margin: 25px;
    text-align:center;
    overflow: auto;
}

.price:hover {
    transform : scale(1.025);
        -moz-transform : scale(1.025);
        -webkit-transform : scale(1.025);
        -o-transform : scale(1.025);
        -ms-transform : scale(1.025);

    box-shadow: 10px 5px 5px gainsboro;
        -moz-box-shadow: 10px 5px 5px gainsboro;
        -webkit-box-shadow: 10px 5px 5px gainsboro;
        -o-box-shadow: 10px 5px 5px gainsboro;
        -ms-box-shadow: 10px 5px 5px gainsboro;
}


/*-----------AREA5   QUI SOMMES NOUS------*/

.area5 {
    background-color: gainsboro;
}



/*-- AREA 6 - RETROUVEZ NOS BIENS--*/

.area6 {
  padding-top: 100px;
}



/*----------------------*/
/*-- PAGE MAINFOOTER--*/
/*----------------------*/
.area7 {
    color: gainsboro;
    background-color:#252525;
}

.resosocio {
    font-size: 30px;
}
.resosocio:hover {
    color: #D36B00;
}



/*----------------------*/
/*-- TABLE COLLAPSE--*/
/*----------------------*/


/*-- AREA104 - TABLE-->*/

.area104 table {
   vertical-align: middle;
}

.bi-check2 {
    text-align:center;
    font-size: 30px;
    color: green;
}

.checkgr {
    text-align:center;
}

.cruz {
    text-align:center; 
    color:red; 
    font-size:25px; 
    font-weight:bold;
}


/* Apply to all four sides 
padding: 1em;

top and bottom | left and right
padding: 5% 10%;

top | left and right | bottom
padding: 1em 2em 2em;

top | right | bottom | left
padding: 5px 1em 0 2em;*/




/*----------------------*/
/*-- PAGE BIENS--*/
/*----------------------*/


/*-- AREA201--->*/

.area201 {
    background-color: white;
    border-radius: 25px;
    margin-bottom:250px;
}


/*#carouselExampleCapt {
    width : 50%;
    margin : auto;
}*/

.carousel-item img {
    width : 100%;
    height: auto;

}


/*----------------------*/
/*-- PAGE CONCIERGE--*/
/*----------------------*/


/*-- AREA301--->*/

.area301 {
    /*background-color: white;*/
    margin-top: 50px;
    margin-bottom: 50px;
}

/*.area301 p {
    font-size: 20px;
    text-color: white;
}*/

.chforf {
    /*border: solid;
    border-width: thin;*/
    height: 320px;
    width: 350px;
    margin:10px;
    padding-left: 10px;
    padding-right: 10px;
}


/*----------------------*/
/*-- PAGE ALL INKLEASIVE--*/
/*----------------------*/


/*-- AREA401--->*/

.area401 {
    background-color: gainsboro;
    width : 100%;
    height: 100%;
}

.area401 img {
    border-radius: 20% 30% 40% 70%;
}

.avnt {
    height: 260px;
    width: 300px;
    text-align:center;
    margin:10px;
    border : solid ;
    border-width: thin;
    border-radius: 15px;
    border-color: #00416a;
}

.kleasy {
    height: 200px;
    width: 300px;
    text-align:center;
    margin:10px;
    border : solid ;
    border-width: thin;
    border-radius: 15px;
    border-color: #00416a;
}

.area402 {
    height: 250px;
}

.area403 { 
    background-color: linear-gradient(to right, #00416a, #e4e5e6);

}

/*----------------------*/
/*-- PAGE SERVICES--*/
/*----------------------*/


/*-- AREA501--->*/

.area501 {
    /*background-color: gainsboro;*/
    height: 100vh;
}






/*----------------------*/
/*-- L_C               --*/
/*----------------------*/

.area4444 { 
    background-image: url('/image/mg.png');
    height: 100vh;
    background-size: cover;
    display: flex;
}

.tete { 
    height: 200px;
    width: 200px;
    background-image: url('/image/lin.jpg');
    border-radius: 50%;
}

.fondmodal
    {   background-color: gainsboro;
        /*background: linear-gradient(to right, #00416a, #e4e5e6);*/
        color: #00416a;
    }