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: 40%;}

@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;}}
   
  
    .vert
    {color:green;
        width: 500px;;
    margin-left: 0px;
    font-size: 34px;
    font-family: "Saira Stencil One", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    margin-top:-280PX;
    margin-left: 270px;
}
.vert p{
font-family: "Saira Stencil One", sans-serif;
font-weight: bold;
font-style: normal;}
 

.rouge
{margin-top: -160px;
margin-left: 200px;
font-size: 12px;
font-style: italic;
color: red;  
margin-left: 250px;
width: 800px;  
}
.rouge p{font-size: 21px;
font: bold;
font-style: italic;}               
.navbar-nav > li > a
    {font-size:22px;
        font-weight: 600;
        background-color: red;
        color: white;
        margin-top: 0px;
    margin-left: 30px;}
  
 @media(min-width:1000px){
.navbar{ background: rgb(21,97,58);
            background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%);
margin-top: 140px;
width: 110%;}}

@media(max-width:480px)
{.navbar-nav > li > a {font-size: 16PX;
font-weight: 600;}}


@media screen and (min-width: 950px) {
  .nav-link{color: aliceblue;
  font-size: 22PX;
font-weight: 500;
margin-left: 40px;
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;}


.navbar-toggler{color: red}
.navbar-toggler-icon{color:red;}

 p{margin-left: 70px;
  font-family: "Pridi", serif;
  font-weight: 400;
  font-style: normal;
font-size: 22PX;
margin-left: 10PX;
margin-top: 20px;
text-align: center; 
}
@media(max-width:480px){
  p{font-size: 14PX;}
}
@media(min-width:950px){
  P{width: 85%;
  margin-left: 90px;}
}

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


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

@media screen and (min-width: 601px) and (max-width: 950px){
  footer{width: 110%;}
}
@media(max-width:480px){
  footer{margin-top: 590px;}
}
@media screen and (min-width: 601px) and (max-width: 950px){
  footer{width: 125%;}
}

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: 22PX;}

.tel p{margin-top: -20px;
    color: yellow;
font-weight: 700;
text-align: center;}
@media screen and (min-width: 601px) and (max-width: 950px){
  .mail p{margin-left: -20%;}
  .tel P {margin-left: -20%;}
  }

  @media screen and (min-width: 601px) and (max-width: 950px){
    h3{margin-left: -20%;}
  }


@media(max-width:480px){

    .bativert{margin-top: -90px;
    margin-left: 0px;
  background-size: 60%;}
   }

   @media(min-width:760PX){
    .bativert{background-size: 60%;}
   }
   @media(min-width:1000px){
    .bativert{background-size: 35%;
    margin-left: 20px;}
   }
   @media screen and (min-width:300px) and (max-width:480PX){
    .vert {margin-top:-290px;}}
    
     @media screen and (max-width: 600px){
      .vert p{margin-top:170px;
      margin-left: -10px;
      width: 98%;
      font-weight:bold;
      font-size: 12px;
    text-align: center;}} 
       @media screen and (max-width: 600px){
        .vert{margin-left: 30px;   
        width: 90%;
       
      
      }}

     @media screen and (min-width: 601px) and (max-width: 950px) {
        .vert p {font-size:18PX;
    margin-top: 165PX;
    margin-left: -480PX;
    text-align: center;
  font-weight: bold;}
     }
     @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: -260PX ;
        margin-left: 60px;
        width: 90%;
     }}
     @media screen and (min-width: 950px){
      .vert p{font-weight: bold;
        font-size: 20px;
      }
     }





     @media screen and (max-width: 600px){
      .rouge p{margin-top:70px;
      margin-left: -200px;
      text-align: center;
      width: 90%;
      font-weight: 800;
      font-size: 9px;
     }}

     @media screen and (min-width:300px) and (max-width:480PX){
      .rouge{margin-top:-150px;
      margin-left: 250px;
      width: 80%;
      
    }}

     @media screen and (min-width: 601px) and (max-width: 950px){
        .rouge p{font-size:13PX ;
        font-weight: bold;
    text-align: center;
    margin-top: 130px;
    }}
        
    @media screen and (min-width: 601px) and (max-width: 950px){
            .rouge {width: 75% ;
            margin-left: 80px;
           
     }}
    
     @media screen and (min-width: 950px) {
        .rouge p{margin-top: -210PX ;
        margin-left: 60px;
      font-weight: bold;
    font-style: italic;
  font-size: 15PX;}
     }
     @media screen and (min-width: 950px){
      .rouge{margin-top: -50PX;}
     }
        
        
       

          @media(max-width:480px){
            img{width: 250px;
            height: 250px;
          margin-left: 65px;}
          }
          @media screen and (min-width: 601px) and (max-width: 950px){
            img{width: 50%;
            height: 30%;
          margin-left: 10%;}
          }

          @media(min-width:760PX){
            img{width: 400px;
              height: 400px;
            margin-left: 220px;
          }}
          @media(min-width:1000PX){
            img{margin-left: 380px;
              width: 40%;
              height: 30%;
              }
          }