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: 60%;}
@media screen and (min-width: 491px) and (max-width: 760px){
.bativert{margin-top: -40PX;
margin-left: 220px;}}
@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: 1060px;}}
   


.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: 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: 120px;
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: 400;
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: 491px) and (max-width: 760px){
.navbar-toggler {margin-top: 120PX;}}





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

@media screen and (min-width: 491px) and (max-width: 760px){
  h1{margin-top:-80px ;
    margin-left: 300px;
  width: 90%;}
  
}
.para1
{width: 480px;
height: 140px;
margin-top: 90px;
margin-left: 40px;
text-align: center;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 23px;
}


.para2
{width: 1080px;
height: 140px;
position: absolute;
margin-left: 100px;
margin-top: 580px;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 23px;}


.para3
{width: 450px;
height: 140px;
background-color: red;
margin-top:400px ;
margin-left: 40px;
font-family: "Pridi", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;}


.photos1
{width: 550px;
height: 250px;
border-radius: 40px;}
.img1
{position: absolute;
margin-top: -160px;
margin-left: 640px;}

.photos2
{width: 340px;
height: 340px;
border-radius: 40px;}
.img2
{position: absolute;
margin-top: 170px;
margin-left: 480px;}

.photos3
{width: 420px;
height: 210px;
border-radius: 40px;}
.img3
{position: absolute;
margin-top: 220px;
margin-left: 850px;}

.photos4
{width: 420PX;
height: 210px;
border-radius: 40px;}

.img4{position: absolute;
margin-top: 220px;
margin-left: 30px;}

footer
{width: 100%;
  height: 200px;
  margin-top: 1050px;
  background: rgb(21,97,58);
            background: linear-gradient(0deg, rgba(21,97,58,1) 0%, rgba(72,189,65,1) 100%);
}
  h3{color: aliceblue;
  margin-left: 35%;
  font-family: "Pridi", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;}
  @media screen and (min-width: 491px) and (max-width: 758px){
    footer{width: 190%;}
  }
  
  

  
  .mail p{ margin-top: 20px;
    color: beige;
    font-family: "Pridi", serif;
    font-weight: 400;
    font-style: normal;
    font-weight: 650;
    margin-left: -20%;
    font-size: 22PX;
  }
    
    .tel p{margin-top: -20px;
        color: yellow;
    font-weight: 700;}



    @media(max-width:480px){

      .bativert{margin-top: -70px;
      margin-left: 0px;}
     }
     
/*------------------------------------MAX WIDTH 480 PX---------------------------------------*/
    @media(max-width:490px){
      .vert p{margin-top:70px;
      margin-left: -190px;
      width: 110%;
      font-weight:100;
      font-size: 14px;
      text-align: center;
   }} 

   @media(max-width:490px){
    .vert{ width: 70%;}
   }


      @media screen and (min-width: 491px) and (max-width: 760px){
.vert{margin-top: -60PX;
margin-left: 280px;
font-size: 20PX;
width: 110%;}
      }
      @media(max-width:480px){
        .rouge p{margin-top:80px;
        margin-left: -240px;
        width: 360px;
        font-weight: 800;
        font-size: 9px;
      text-align: center; }}
      @media screen and (min-width: 491px) and (max-width: 760px){
        .rouge{margin-top: -5PX;
        margin-left: 290PX;
      font-weight: bold;}}   
      @media screen and (min-width: 491px) and (max-width: 760px){
        .rouge p{font-size: 15PX;}
      }
        @media(max-width:480px){
          .para1{width: 290PX;
            font-size: 18px;
          margin-left: 46px;
        font-size: 14px;
      margin-top: 40px;}
        } 

        @media(max-width:480px){
          .para2{width: 290PX;
            font-size: 18px;
          margin-left: 50px;
        font-size: 14px;
      margin-top: 310px;}
        }

        @media(max-width:480px){
          .photos1{width: 290PX;
            font-size: 18px;
          margin-left: -590px;
        margin-top: 200PX;}
        }

        @media(max-width:480px){
          .photos2{width: 240PX;
            height: 240PX;
            font-size: 18px;
          margin-left: -410px;
        margin-top: 380PX;
      }
        }

        @media(max-width:480px){
          .photos3{width: 290PX;
            font-size: 18px;
          margin-left: -810px;
        margin-top: 590PX;}
        }

       
        @media(max-width:480px){
          .photos4{width: 290PX;
            font-size: 18px;
          margin-left: 10px;
        margin-top: 865PX;}
        }


        @media(max-width:480px){
          footer{margin-top:1400PX;
          width: 100%;}}
          @media(max-width:480px){
            h3{font-size: 30px;
           }
          }

          @media screen and (min-width: 300px) and (max-width: 550px) {
            .mail p{font-size:18px;
              margin-left: 18px;
            }}
        
            
/*-----------------------------------------min 760px---------------------------------------------*/


      @media(min-width:760PX){
          .vert  {margin-top: -50px;
          margin-left: 110px;}}
      
          @media(min-width:760PX){
          .vert p{font-size: 19px;}}
    
          @media(min-width:760PX){
            .rouge{margin-top: -30px;
            margin-left: 110px;}
            .rouge p {font-size: 15px;
            font-weight: bold;}}

            @media(min-width:760px){
              .para1{width: 80%;
              margin-left: 80px;
            margin-top: 20PX;}
              .para2 {width: 70%;
              margin-top: 400px;
            text-align: center;}
            }
            @media screen and (min-width: 491px) and (max-width: 760px){
              .para2{width: 110%;
              text-align: center;
            margin-left: 280PX;}
            }

            @media(min-width:760px){
              .photos1{margin-top: 1290px;
              margin-left:-530PX;
              width: 550px;
                height: 260px;}
              .photos2{margin-top: 570PX;
              margin-left: -270PX;}
              .img3{
                margin-top: 120PX;
              margin-left: 400px;
            }
            .photos3{width: 350px;
            margin-left: 5PX;}
              .img4{margin-top: 120PX;
            margin-left: 30px;
          }
          .photos4{ width: 350px;}
            
            }
           
            
            @media(min-width:760px){
              footer{margin-top:1600PX;
              width: 120%;}
            } 


/*-----------------------------------------------min width 1000px---------------------------------*/
@media(min-width:1000px){
  .bativert {background-size: 40%;
    margin-left: 0px;
  }
}
          @media(min-width:1000px){
              .vert{margin-top: -210px;
              margin-left: 320px;}
              .vert p {font-size: 21px;}
          }
           @media(min-width:1000PX){
                .rouge{margin-top: -170px;
                margin-left: 340px;}
            }
            @media(min-width:1000PX){
                .rouge p{font-size: 16PX;
                font-style: italic;
            font-weight: bold;}}

            @media(min-width:1000PX){
          .para1{width: 55%;
                height: 140px;
                 margin-top: 90px;
                 margin-left: 40px;
                 text-align: center;
                    font-size: 23px;}
          .para2 p{width: 60%;
                height: 140px;
                position: absolute;
                margin-top: -290px;
                 font-size: 23px;
               margin-left: 240PX;}
                      }

@media(min-width:1000PX){
  .photos1{margin-top: -15PX;
  margin-left: 130px;
width: 100%;}
  .photos2{width: 300px;
  height: 270px;
margin-top: -60px;
margin-left: -465px;}
 .photos3{width: 120%;
height: 350px;
margin-left: -20px;
margin-top: 320PX;}
.photos4{width: 25%;
height: 280PX;
margin-top: -10PX;
margin-left: 900PX;}}

@media(min-width:1000px){
  footer{margin-top:800px;}
}          
         
@media screen and (min-width: 491px) and (max-width: 760px){
  .mail p{text-align: center;}
}
        

.mail p{ margin-top: 20px;
color: beige;
font-weight: 650;
margin-left: -10%;
text-align: center;}


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

@media(min-width:1000px){
  .mail p{margin-left: -20%;} 
}