* {
  margin: 0;
  padding: 0;
}
/**----en tete----*/
.topbar-nav-menu{
  color: black;
}
.col-xl-3 {
  flex: 0 0 auto;
  width: 29%;
}
.topbar-nav-menu ul li {
  text-align: left;
  color: black;
  display: inline-block;
}
.topbar-nav-menu ul li a{
  text-decoration: none;
  color: black;
}
.en-tete{
 color:blue;
 display: inline-block;
 font-size: large;
}
/*---media-top---*/
.media-top{
  display:inline-block;
  text-align: center;
  color: black;
  margin: 0px;
  padding:0px;
}
.media-top i{
  color: rgb(43, 96, 243);
  font-size:xx-large;
}
.media-bottom{
  position: absolute;

}
.media-top h3{
  color:black;
  font-size: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
/*----navigation-----*/
  #nav-bar{
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-item ul li{
width: 205px;
height: 39px;
line-height: 17px;
text-align: center;
float: left;
position: relative;
padding: 0px 0px;

}
----------------
 .nav-item ul li:hover{
background-color: rgb(238, 237, 237);

}  

.nav-item ul li:active{
background-color: rgb(238, 237, 237);
} 

.dropdown:hover>.dropdown-menu{
display: block;
background-color:rgb(86, 128, 244);
}
.navbarNav{
  text-align: left!important;
}
.container{
text-align:center;
}
---------------
 .navbar-nav li{
   padding: 0 15px;
 }
 .navbar-nav li a{
   float: right;
   text-align: left;
   
 } */
   #nav-bar ul li a:hover{
   color:black;
   background-color: rgb(238, 237, 237);
   padding: 5px 20px;
 } 
  .navbar{
   background:red;
 } 
  .navbar-toggler{
   border: none!important;
 } 
 .nav-link {
   color:black;
   font-weight: 600;
   font-size: 16px;
 }
 /****-----------banner image service----------------*/
 #back {
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 16px;
  padding-bottom: 152px;
  text-align: center;
  background-attachment: fixed;
}
#back {
background-image: linear-gradient(rgba(19, 40, 125, 0.65) ,rgba(19, 40, 125, 0.65) ),url(image/multi-service.webp);
background-size: cover;
width: 100%;
}
#titl3 {
margin-top: 80px !important;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
padding-right: 3px;
}
#lien {
font-weight: bold !important;
font-size: 18px !important;
margin: 0 0 10px;
padding: 7px 15px 5px;
list-style: none;
background: rgba(9, 3, 58, 0.8);
float: left;
border-radius: 2px;
color: #c4c2c2 !important;
}
ul {
padding: 0;
margin: 0 0 15px;
}
#lien li {
float: left;
color: #eee;
line-height: 1.5;
font-size: 13px;
font-weight: 600;
position: relative;
text-transform: uppercase;
}
*, *:before, *:after {
box-sizing: inherit;
}
#lien li a {
color: #eee;
}
a, a:hover, a:focus, a:before, a:after {
outline: none;
text-decoration: none;
}
a {
-webkit-transition: all 300ms linear 0ms;
-khtml-transition: all 300ms linear 0ms;
-moz-transition: all 300ms linear 0ms;
-ms-transition: all 300ms linear 0ms;
-o-transition: all 300ms linear 0ms;
transition: all 300ms linear 0ms;
color: #50a2cb;
}
#lien li.l1:after {
border: 4px solid transparent;
content: '';
height: 0;
width: 0;
pointer-events: none;
display: inline-block;
border-left-color: #0a9f84;
margin: 0 5px 0 10px;
}
*, *:before, *:after {
box-sizing: inherit;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
padding-right: 3px;
}
.text-center {
text-align: center!important;
}
h1 {
font-size: 70px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: bold;
color: #13287d;
clear: both;
line-height: 1.25;
margin: 0 0 15px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#l5 {
color: #c0c0c9 !important;
font-size: 40px !important;
font-weight: 800 !important;
text-align: left !important;
}
p {
margin-bottom: 15px;
}
a {
-webkit-transition: all 300ms linear 0ms;
-khtml-transition: all 300ms linear 0ms;
-moz-transition: all 300ms linear 0ms;
-ms-transition: all 300ms linear 0ms;
-o-transition: all 300ms linear 0ms;
transition: all 300ms linear 0ms;
color: #50a2cb;
}
/**-------------2eme navigation----------------*/
#narbar {
  font-weight: 700;
}
a {
color: #4f4f4f;
}
.fa, .fas {
font-weight: 900;
}
#narbar1 {
padding-right: 10px;
}
#narbar2 {
color: #150D4E;
}

/* #footerBack {
background-color: #0072bd; 
} */
#white {
color: red;
font-weight: bolder;
}
#hover_color {
height: 50px;
background: lightseagreen;
margin: 8px;
float: none;
border: 0px;
color: #fff;
box-shadow: 0 0 1px rgb(238, 237, 237);
box-shadow: 0px 0 0 #31708f inset;
} 
/*--------banner image-----*/
.main-image-Professionnels{
position: relative;
background-image: url(image/image-banner-profiessoinels.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.main-image-particuliers{
position: relative;
background-image: url(image/image-banner-particuliare.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.main-image1{
position: relative;
background-image: url(image/banner-femme-de-menage-casablanca-1250x250.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.main-image2{
position: relative;
background-image: url(image/image-slider2.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
} 


.image-Suirvellance{
position: relative;
background-image:url(image/Suirvellanceslider.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.main-image4{
position: relative;
background-image: url(image/climatisationslider.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.image-Jardinage{
position: relative;
background-image: url(image/bannerjardinage.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.image-Plomberie{
position: relative;
background-image: url(image/Plomberieslider.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.image-Electricite{
position: relative;
background-image: url(image/Electricite\ slider.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}
.image-DESINFECTION{
position: relative;
background-image: url(image/DESINFECTION\ slider.webp);
position: relative;
background-size: cover;
overflow: hidden;
height: 300px;
}

.contant-text{
position:static;
margin-top:  100px;
color: black;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
.contant-text span{
color: white;
font-weight: 00;
font-size: 20px;

}
/*------slider-------*/
#slider-header{
  width: 100%;
}
.carousel-caption span{
  color: blue;
  font-size: 40px;
  text-align: left;
}
.carousel-caption h1{
  color: black;
  font-size:  50px;
  text-align: left;
}
.carousel-caption h3{
  color: black;
  font-size: 30px;
  text-align: left ;

}
.carousel-caption p{
  color: black;
  font-size: 15px;
  text-align: left;

}

.carousel-item button{
  color: black;
  background: rgb(244, 244, 9);
  border-radius: 10px;
  margin: 20px;
  padding: 10px;
  border-radius: 15px;
}
/*---------services-------------*/

/*-----card-----*/
#centertext {
text-align: center;
}
#center {
text-align: justify;
color: #4f4f4f;
}
.d-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
grid-gap: 7px;
}
.item:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.item:nth-child(2) {
grid-column: 2;
grid-row: 0 / 3;
}
.item img {
height: 100%;
width: 100%;
object-fit: cover;
}
.item:nth-child(3) {
grid-column: 2;
grid-row: 2 / 3;
}
.item img {
height: 100%;
width: 100%;
object-fit: cover;
}
.item:nth-child(4) {
grid-column: 2;
grid-row: 3 / 3;
}
.item img {
height: 100%;
width: 100%;
object-fit: cover;
}

/*---nettayage--*/
.text-center{
text-align: center;
}
/*----------*/
#reduction {
background-color: red;
}
/*------footer-------*/
#footerBack {
background-color:#0072bd;
}
#backcolor1 {
background-color: white;
}
a {
color: black;
}
#back1 {
background-color:orange;
}
/*----------PAge 404-----------*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body{
/* background: linear-gradient(45deg,#8500ff,#5acaff); */
height: 100vh;
}
#container{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; 
background: url('image/p404.webp'),#151729;
box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
#container .content{
 max-width: 600px;
 text-align: center;
}
#container .content h2{
 font-size: 18vw;
 color: #fff;
 line-height: 1em;
}
#container .content h4{
position: relative;
font-size: 1.5em;
margin-bottom: 20px;
color: #111;
background: #fff;
font-weight: 300;
padding: 10px 20px;
display: inline-block;
}
#container .content p{
color: #fff;
font-size: 1.2rem;
}
#container .content a{
position: relative;
display: inline-block;
padding: 10px 25px;
background: #ff0562;
color: #fff;
text-decoration: none;
margin-top: 25px;
border-radius: 25px ;
/* border-bottom: 4px solid #d00d56; */
}
/*-------------------------*/
#back {
background-position: center;
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 152px;
text-align: center;
background-attachment: fixed;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
#ourtitle h1 span, #ourtitle h1 {
padding: 40px;
margin-top: 40px;
text-align: center !important;
color: white !important;
}
#bar1 .col-sm-5, #pou2 .col-6 {
background-color: white;
margin-top: 30px;
box-shadow: 0 8px 15px rgb(0 0 0 / 20%);
padding: 20px;
margin-bottom: 30px;
}
h4 {
font-size: 100px;
}
*, ::after, ::before {
box-sizing: border-box;
}
/*-----form contacte-----*/
form {
  padding: 30px;
  color: #000000;
  background-color: rgb(40 211 49);
  border-radius: 10px;
  font-weight: 600;
  display: block;
}