body{overflow-x: clip;}




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

@media screen and (min-width: 300px) and (max-width: 576px){
  .bativert{width: 100%;
  margin-left: 10PX;
margin-top: -70PX;}
}
@media screen and (min-width: 577px) and (max-width: 759px){
  .bativert{width:100%;
  margin-top: -50px;
margin-left: 90px;}
}
@media(min-width:1000px){
  .bativert{background-size: 45%;
  margin-left: 5%;}
}

@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: 250px;
   background-image: url(IMAGE/MUR\ BRIQUE.jpg);
   background-repeat: no-repeat;
   margin-top: -600px;
    margin-left: 1070px;}}
   


.vert
{color:green;

font-size: 26px;
font-family: "Saira Stencil One", sans-serif;
font-weight: 400;
font-style: normal;
 position: absolute;
margin-top:-200PX;
margin-left: 230px;
width: 800px; }
  
.rouge
{margin-top: -160px;
margin-left: 200px;
font-size: 12px;
color: red;  
margin-left: 250px;
width: 800px; }

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

.navbar-nav > li > a
    {font-size:22px;
        font-weight: 600;
        background-color: red;
        color: white;
        margin-top: -0px;
    margin-left: 40px;}
  
 @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: 120px;
width: 112%;
}}

@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;}

@media screen and (min-width: 577px) and (max-width: 759px){
  .navbar-toggler{margin-top:80PX;}}



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

@media screen and (min-width: 577px) and (max-width: 759px){
  h1{margin-left: 150px;}
}

.img1
{height: 250px;
width: 400px;
margin-top: 60px;
margin-left: 30PX;
border-radius: 40px;
border: solid;
border-width: 5px;
border-color: white;}

.img2
{height: 250px;
width: 400px;
margin-top: 60px;
border-radius: 40px;
border: solid;
border-width: 5px;
border-color: white
}

.img3
{height: 250px;
width: 400px;
margin-top: 60px;
border-radius: 40PX;
border: solid;
border-width: 5px;
border-color:white;
}

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

@media screen and (min-width: 577px) and (max-width: 759px){
  footer{width: 130%;}
}



h3{color: white;
text-align: center;
font-size: 40px;
}

.mail p{ margin-top: 20px;
color: beige;
font-weight: 650;
text-align: center;
font-size: 18PX;}

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


   
@media screen and (min-width: 300px) and (max-width: 576px){
    .vert p{margin-top:70px;
    font-weight: 100;
    font-size: 11px;
  }} 
    @media screen and (min-width: 300px) and (max-width: 576px){
      .vert{width: 80%;
        margin-left: 40px; 
      text-align: center;}
    }
    @media screen and (min-width: 577px) and (max-width: 759px){
      .vert{
      margin-top: -90px;
    margin-left: 150px;}
    }

    @media screen and (min-width: 577px) and (max-width: 759px){
      .vert{font-size:18PX ;
    } }

    @media(min-width:760PX){
        .vert  {margin-top: -70px;
        margin-left: 110px;}}
    
        @media(min-width:760PX){
        .vert p{font-size: 18px;}}
  
  
        @media(min-width:1000px){
            .vert{margin-top: -230px;
            margin-left: 320px;}
            .vert p {font-size: 20px;}
        }
  
        @media screen and (min-width: 300px) and (max-width: 576px){
          .rouge p{margin-top:60px;
          font-weight: 800;
          font-size: 9px;
          text-align: center; 
          font-style: italic;
        }}

        @media screen and (min-width: 300px) and (max-width: 576px){
        .rouge{width:80%;
        margin-left: 40PX;}}
        @media screen and (min-width: 577px) and (max-width: 759px){
          .rouge{margin-top: -60px;
            margin-left: 160px;}}
            @media screen and (min-width: 577px) and (max-width: 759px){
              .rouge p{font-size: 14px;}
            }

          @media(min-width:760PX){
              .rouge{margin-top: -30px;
              margin-left: 120px;}
              .rouge p {font-size: 14px;}
          }
        
          @media(min-width:1000PX){
              .rouge{margin-top: -180px;
              margin-left: 340px;}
          }
          @media(min-width:1000PX){
              .rouge p{font-size: 15PX;}
          }
         
        

          @media(max-width:480px){
          .img1{width: 280px;
          margin-left: 50px; }
          .img2{width: 280px;
          margin-left: 50px; }
          .img3{width: 280px;
          margin-left: 50px; }
          }
          @media screen and (min-width: 480px) and (max-width: 759px){
            .img1{width: 50%;
              margin-left: 280px; }
              .img2{width: 50%;
              margin-left: 280px; }
              .img3{width: 50%;
              margin-left: 280px; }
          }


          @media screen and (min-width: 480px) and (max-width: 759px) {
            .img1{width: 50%;
            margin-left: 190PX;}

            .img2{width: 50%;
            margin-left: 190px;}
             
            .img3{width: 50%;
            margin-left: 190px;}}

            
              
              @media screen and (min-width: 760px) and (max-width: 1000px){
                .img1{width: 50%;
                  margin-left: 200PX;}
      
                  .img2{width: 50%;
                  margin-left: 200px;}
                   
                  .img3{width: 50%;
                  margin-left: 200px;}}
              


              @media(min-width:1000px){
                .img3{margin-left: 0PX;
                }

              .photos1 {margin-left: 0px;
              width: 100%;
            display:flex;
          justify-content: space-around;
         
        }
             
          .photos2 {margin-left: 0px;
            width: 100%;
          display:flex;
        justify-content:space-around}

        .photos3 {margin-left: 0px;
          width: 100%;
        display:flex;
      justify-content: space-around;}

      .photos4 {margin-left: 0px;
        width: 100%;
      display:flex;
    justify-content: space-around;}
          
            
            }