html{overflow-x: clip;}
body{overflow-x: clip;}


.bativert{width:100%;
    height: 400px;
  background-image:url(IMAGE/IMG-20210218-WA0021.jpg);
  background-repeat: no-repeat;
  background-position:center;
background-size: 50%;}

@media(min-width:1000px){
  .mur
   {height: 600px;
       width: 200px;
   background-image: url(IMAGE/MUR\ BRIQUE.jpg);
   background-repeat: no-repeat;
   margin-top: -400px;
   }}
   @media(min-width:1000px){
   .mur2
   {height: 600px;
       width: 260px;
   background-image: url(IMAGE/MUR\ BRIQUE.jpg);
   background-repeat: no-repeat;
   margin-top: -600px;
    margin-left: 1070px;}}
    
 

@media(max-width:500px){
.bativert{margin-top: -90px;
  margin-left: 5px;
background-size: 40%;}
 }

 @media screen and (min-width: 601px) and (max-width: 1024px){
  .bativert{margin-top: -20PX;
  margin-left: 30px;}
 }


 @media(min-width:950px){
  .bativert{background-size: 35%;
    margin-left: 0PX;
       }}
 
       .navbar-nav > li > a
       {font-size:22px;
           font-weight: 600;
           color: white;
        
           margin-top: -0px;}
     
       @media screen and (min-width: 950px) {
        .nav-link{color: aliceblue;
        font-size: 22PX;
      font-weight: 500;
    margin-left: 50px;
    font-family: "Pridi", serif;
font-style: normal;
  }}
    @media screen and (min-width: 950px){
    .nav > li > a:hover{color: red; } }

      
    @media screen and (min-width:300px) and (max-width:950PX){
      .nav{display: block;
      background-color: green;
  width: 50%;} }
  
      .nav > li > a{color: white;}



     
     @media screen and (min-width: 950px){
      .navbar{  background: rgb(21,97,58);
            background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%);
      margin-top:110px;
      width: 110%;
} }   
  
      @media screen and (min-width: 950px){
      .navbar-nav > li > a{font-size: 22PX;
    margin-left: 150PX;
     }}
     @media screen and (min-width: 950px){
      li.nav-item{margin-left: -10PX;
      }
     }
   
  
     .navbar-toggler{color: red}
     .navbar-toggler-icon{color:red;
    margin-left: 0PX;}
     
 
.vert p
  {color:green;
  margin-left: 0px;
  font-size: 22px;
  font-family: "Saira Stencil One", sans-serif;
  font-weight: bold;
  font-style: normal;
 position: absolute;
  margin-top:-190PX;
  margin-left: 20px;
  width: 95%; }
 
  @media screen and (min-width:300px) and (max-width:480PX){
.vert {margin-top:-220px;
  
}}

@media screen and (max-width: 600px){
.vert p{margin-top:90px;
margin-left: -60px;
width: 80%;
font-weight:100;
font-size: 12px;
text-align: center;}} 
 @media screen and (max-width: 600px){
  .vert{margin-left: 90px;
  width:  90%;}
}
@media screen and (min-width: 601px) and (max-width: 950px) {
  .vert p {font-size:16PX;
margin-top: 175PX;
margin-left: 40PX;
text-align: center;}
}
@media screen and (min-width: 601px) and (max-width: 950px){
  .vert {margin-top: -220px;
      width: 90%;}
}

@media screen and (min-width: 950px) {
  .vert{margin-top: -40PX ;
  margin-left: 10px;
  
}
}
    
.rouge
{margin-top: -140px;
margin-left: 230px;
color: red;  
margin-left: 240px;
width: 90%; 

}
.rouge p{font-size: 21px;
font-weight: bold;
font-style: italic;

}               

@media screen and (max-width: 600px){
.rouge p{margin-top:140px;
margin-left: -200px;
text-align: center;
width: 90%;
font-weight: 800;
font-size: 9px;
}}
@media screen and (min-width: 601px) and (max-width: 950px){
  .rouge p{font-size:13PX ;
  font-weight: bold;
text-align: center;
margin-top: 200px;
}}
  
@media screen and (min-width: 601px) and (max-width: 950px){
      .rouge {width: 75% ;
      margin-left: 120px;
     
}}

@media screen and (min-width: 950px) {
  .rouge p{margin-top: -190PX ;
  margin-left: -5px;
font-weight: bold;
width: 70%;
font-size: 17PX;}
}

  
   


 
h1 {color: red;
font-size: 40px;
text-align: center;
margin-top: 40px;
font-family: "Pridi", serif;
  font-weight: 400;
  font-style: normal;}

P{ 
  text-align: center;
  margin-top: 40px;
  font-family: "Pridi", serif;
  font-weight: 400;
  font-style: normal;
font-size: 28px;
}

@media(max-width:480px){
p{font-size: 14px;}}

@media screen and (min-width: 601px) and (max-width: 950px){
  P{width: 80%;
  text-align: center;
margin-left: 60PX;}
}
@media screen and (min-width: 950px) {
P {width: 80%;
margin-left: 140PX;}
}



footer
{width: 100%;
height: 230px;
margin-top: 90px;
background: rgb(21,97,58);
            background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%); 
}
h3{color: white;
text-align: center;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 40px;
}

.mail p{ margin-top: 20px;
color: beige;
font-weight: 650;
font-family: "Pridi", serif;
font-weight: 600;
font-style: normal;
text-align: center;
font-size: 20PX;}

.tel p{margin-top: -20px;
    color: yellow;
font-weight: 700;
text-align: center;}


@media screen and (max-width: 600px) {
  footer h3 {font-size: 30px;
margin-top: -50px;
}}

@media(min-width:950px){
  footer h3{margin-left: -110px;}
}

@media screen and (max-width: 600px){
footer{margin-top: 520px;
width: 100%;
height: 170px;}}


@media(min-width :768px){
footer{margin-top: 140px;
width: 100%;}
}
@media(min-width:950px){
   footer{margin-top: 100px;
  width: 110%;}
}

@media(min-width:950px){
  .mail p{margin-left: 80px;}
}

          @media(max-width:480px){
            h1{font-size: 24px;
            margin-top: 20px;
          color: green;}
          }