html{overflow-x: clip;}

 body{ color: white;
  overflow-x: clip;}
 .entete{width: 100%;
  height: 550PX;
  filter: brightness(60%);
  }

  .logo{position:absolute;
    width: 30%;
  height: 40%;
  margin-top: -38%;
  margin-left: 34%;
  z-index: 1;
  }

  .textelogo {position:absolute;
    color:white;
  margin-top: -260PX;
  margin-left: 24%;
  width: 50%;
  text-align: center;
  z-index: 1;
  font-size: 18PX;
font-weight: 700;}


.buttonheader{background-color: #33ceff;
  
margin-top: -160PX;
margin-left: 44%;
position: absolute;
color: white;
width: 13%;
height: 40PX;
border-style: none;
z-index: 1;}



.numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 3%;
  margin-top: -536PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 80%;
  margin-top: -536PX;
  width: 20%;
  z-index: 2;
  }

.navbar{ 
  margin-top: -550PX;
  position: fixed;
  margin-left: 0%;
  height: 50px;
  width: 100%;
  z-index: 1;
  }

  .navbar-nav .nav-link.active{ color:#33ceff;}

.collapse{justify-content: center;
color:#33ceff;}
.navbar-nav > li > a{font-size: 20PX;
  font-weight: 600;
margin-left: 20PX;
color: white;
}


.slider{width: 50%;
  height: 53%;
  position: absolute;
  margin-left: 60%;
  margin-top: -35%;
  overflow: hidden;
  border-radius: 20PX;
  background-image: url(IMAGE/logo\ avec\ pience.PNG);
    background-position:top;
    background-size: 65%;
    background-repeat: no-repeat;
    transition: 5s;
    opacity: 1;
       
animation-name:animate;
animation-direction:normal;
animation-play-state:running;
animation-timing-function:ease-in-out;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;}


@keyframes animate {
 0%  {  background-image: url(IMAGE/AEROSOL\ TCHNIQUE.png); }
 20% { background-image: url(IMAGE/ENJOLIVER.\ DET\ SLIDE.png); }
 40% { background-image: url(IMAGE/HUILE\ MOTEUR\ SLIDE.png ) }
 60% {background-image: url(IMAGE/lave\ glace\ slide.png);}  
 80%{background-image: url(IMAGE/LIQUIDE\ DE\ REFRODISSEMENT\ SLIDE.png);}  
100%{background-image:url(IMAGE/3X\ COLLER.PNG); }}



.titre{font-size: 26px;
color:black;
background-color: white;
font-weight:700;
text-align: center;
border-radius: 3%;
opacity: 0.7;
}


h3{color: white;
margin-top: 10%;
font-weight: 700;
text-align: center;

}


p.h {color:white;
margin-top: 9%;
  font-size: 16PX;
  font-weight: 600;
  text-align: center;
  
}




.colis{width: 10%;
       height: 20%;
      margin-top: 5%;
      margin-left: 0%;
  }

.page{position: absolute;
  width: 38%;
  height: 210PX;
  text-align: center;
  margin-left: 31%;
margin-top: -50px;
color:white;
background: rgb(242,164,9);
background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); 
opacity: 1;
border-radius: 20PX;
font-size: 20PX;
font-weight: 700;
}

.accroche{margin-top: -15PX;
  text-align:center;
font-size: 24PX;
color:white;
font-weight: -600;
margin-left: 2%;}



.page1{width: 24%;
height: 150PX;
margin-left: 4%;
margin-top: -40px;
background-color: #33ceff;
position: absolute;
border-radius: 20PX;
}

.page2{width: 24%;
  height: 150PX;
  margin-left: 72%;
  margin-top: -40px;
 background-color: #33ceff;
  position: absolute;
  border-radius: 20PX;
color: white;
text-align: center;}
p.adresse2{color:white;
  margin-top: 20PX;
  font-size: 16PX;
  font-weight: 600;
  text-align: center;}

  .logo2{width: 32%;
  margin-top: 12%;
margin-left: 34%;}


.description{position: absolute;
  color: black;
font-size: 20PX;
margin-left: 28%;
margin-top: 230PX;
text-align: center;
}

  
h1{font-size: 26PX;
  margin-left: 32%;
color:black;
z-index: 1;
margin-top: 180px;
position: absolute;
font-weight: 600;
text-align: center;
}





.conteneur1{display: flex;
justify-content: space-between;
margin-top: 30%;
margin-left: 1%;
margin-right: 1%;

}


.conteneur2{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}

.conteneur3{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}
.conteneur3{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}

.pieceneuve{
  
  width: 55%;
height: 270px;
margin-bottom: 4PX;
margin-right: 4PX;
background-image: url(IMAGE/istockphoto-disque\ de\ frien\ GRIS\ BLANC.png);
background-position: 60%;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 14PX;

}

.button1{margin-top: 120PX;
width: 169PX;
margin-left: 260PX;
background-color: #33ceff;
z-index: 1;
border-style: none;
color: aliceblue;
width: 20%;
height: 32PX;
}

.pieceoccasions{
  
   width: 55%;
 height: 270PX;
 background-image: url(IMAGE/gros-plan-engrenages-metalliques-sales-GRIS.jpeg);
 background-size: 100%;
 border-radius: 2%;
margin-bottom: 4PX;
}

.button2{margin-top: 120PX;
  margin-left: 280PX;
width: 160PX;
background-color: #33ceff;
color: white;
border-style: none;
width: 20%;
height: 32PX;}


.piecetechnique
{
width: 55%;
height: 270PX;
border-radius: 2%;
background-image: url(IMAGE/TURBOGRIS.jpg);
background-size: 100%;
margin-right: 4PX;
margin-bottom: 14PX;}
.button3{background-color:#33ceff ;
margin-top: 120PX;
margin-left: 40%;
color: white;
border-style: none;
width: 20%;
height: 32PX;
}


.carrosserie{
width: 55%;
height: 270PX;
border-radius: 2%;
background-image: url(IMAGE/homme-costume-matieres-dangereuses-aide-pistolet-pour-peindre-voiture-dans-magasin_23-2149750060.JPG);
background-size:155%;
background-position: 50%;
background-repeat: no-repeat;}
.button4{margin-top: 120PX;
margin-left: 40%;
background-color: #33ceff;
border-style: none;
color: white;
width: 20%;
height: 32PX;
}

.conso{
  width: 55%;
  height: 270PX;
  border-radius: 2%;
background-image: url(IMAGE/HOMME\ QUI\ MET\ DE\ L\'HUILE\ .jpg);
background-size: cover;
background-position: 50%;
margin-right: 4PX;
margin-bottom: 14PX;}
.button5{margin-top: 120px;
margin-left:40%;
background-color:#33ceff;
color: white;
border-style: none;
width: 20%;
height: 32PX;

}


  .outillage{
 width: 55%;
height: 270PX;
border-radius: 2%;
background-image: url(IMAGE/gros-plan-touches-metalliques_23-2148796582.JPG);
background-size: 100%;
background-position: 80%;
}
.button6{margin-top: 120px;
margin-left:40%;
background-color:#33ceff;
color: white;
border-style: none;
width: 20%;
height: 32PX;

}

  




.alternateur{

  width: 30%;
  height: 250PX;
  margin-left: 5%;
  z-index: 1;}
.marque{margin-top: 10%;}

.moly{width:20%;
height: 100px;
position: absolute;
margin-top: 200px;}

.doga{width:20%;
  height: 100px;
  position: absolute;
  margin-top: 200px;
margin-left: 20%;}

  .resta{width:20%;
    height: 100px;
    position: absolute;
    margin-top: 210px;
  margin-left: 40%;}
    
    .bosch{margin-left:5%;
    margin-top:-5%;}
    .napa{margin-left: 7%;
    margin-top: -4%;}
    .gates{margin-top: -4%;
          margin-left: 2%;}
    .delphi{margin-top: -4%;
    margin-left: 2%;}
    .meca{margin-top: -4%;
    margin-left: 3%;}
    .luk{margin-top: -4%;}
    .valeo{margin-top: 5%;
      margin-left: 65%;
    width: 8%;}
    .bard{margin-top: -8%;
      margin-left: 80%;
    width: 10%;}

    .buttonfooter{margin-top:100px;
      background-color: #33ceff;
      position: absolute;
      color: white;
      width: 15%;
      height: 40PX;
      border-style: none;
      margin-left: -47%;
    z-index: 1;}


footer{width: 100%;
height: 344PX;
background: rgb(242,164,9);
background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
position: absolute;
margin-top: 250px;}

.logofooter{width: 15%;
margin-left: 43%;}

.textefooter{color: black;
  text-align: center;}
  .facebook{margin-top: 40PX;
  margin-left: -60PX;}

  .mention{position: absolute;
    color: white;
  margin-left: 35%;
margin-top: 10PX;
      text-decoration:none ;
  }

  .politique{position: absolute;
    color: white;
    margin-left: 47%;
    margin-top: -15PX;
    text-decoration:none ;
  }

    




        @media screen and (min-width: 300px) and (max-width: 650px){
          header{margin-top: -180px; }
          .entete{height: 400PX;}
          img.entete{ height:400PX;}
   .logo{margin-top: -46%;
    margin-left: 32%;
  width: 35%;
height: 70px;}
.textelogo{font-size: 10PX;
margin-top: -28%;
font-weight: bold;}

.navbar{margin-top: -210px;
  margin-left: -50%;
  position: fixed;
z-index: 2; }
.navbar-collapse{display: flex;
margin-left: 50%;
margin-top: 0%;
background-color: orange;
z-index: 1;}
.navbar-toggler{color: orange;
height: 42px;
width: 52PX;
margin-left: 50%;
z-index: 1;}
.navbar-toggler-icon{background-color: aliceblue;}

  .buttonheader{margin-top: -13%;
      width: 30%;
    height: 25PX;
  margin-left: 35%;
font-size: 10PX;}

p.h{font-size: 12PX;}
.colis{height: 15%;
width: 8%;}
.page{width: 98%;
  margin-top: 4px;
height: 120PX;
margin-left: 1%;
border-radius: 20PX;}
.description{position: absolute;
  color: black;
font-size: 15PX;
margin-left: 2%;
margin-top: 175PX;
text-align: center;}
  
h1{font-size: 15PX;
  margin-left: 17%;
color:black;
z-index: 1;
margin-top: 140px;
position: absolute;
font-weight: 600;}

.page1{display: none;}
.page2{display: none;}
    .conteneur1{flex-direction: column;
    width: 160%;
    height: 450PX;
  margin-left: 6%;
margin-top: 270PX;
margin-bottom: 20PX;
}

  .accroche{font-size: 14PX;}
 .button1{margin-left: 25%;
width: 40%;
margin-top: 30%;
margin-left: 30%;}
.button2{margin-left: 25%;
  width: 40%;
  margin-top: 30%;
  margin-left: 30%;}
  .button3{margin-left: 25%;
    width: 40%;
    margin-top: 30%;
    margin-left: 30%;}
     
    .button4{margin-left: 25%;
      width: 40%;
      margin-top: 30%;
      margin-left: 30%;}

      .button5{margin-left: 25%;
        width: 40%;
        margin-top: 30%;
        margin-left: 30%;}

        .button6{margin-left: 25%;
          width: 40%;
          margin-top: 30%;
          margin-left: 30%;}

          .button7{margin-left: 25%;
            width: 40%;
            margin-top: 30%;
            margin-left: 30%;}
      



.conteneur2{flex-direction: column;
width: 160%;
height: 450PX;
margin-left: 6%;
margin-bottom: 20PX;}
        
.conteneur3{flex-direction: column;
  width: 160%;
  height: 450PX;
  margin-left: 6%;
  margin-bottom: 20PX;
}

.conteneur4{flex-direction: column;
  width: 160%;
  height: 250PX;
  margin-left: -30%;
  margin-bottom: 20PX;
      }

 .titre{font-size: 15px;}
 
 .moly{width:20%;
  height: 100px;
  position: absolute;
  margin-top: 210px;
width: 40%;
height: 20%;}
  
  .doga{width:30%;
    height: 100px;
    position: absolute;
    margin-top: 225px;
  margin-left: 30%;}
  
    .resta{width:20%;
      height: 100px;
      position: absolute;
      margin-top: 17px;}
 
      .bosch{margin-left:5%;
        margin-top:-15px;
      width: 25%;}
        .napa{margin-left: 35%;
        margin-top: 3%;}
        .gates{margin-top: 4%;
              margin-left: 2%;}
        .delphi{margin-top: 4%;
        margin-left: 2%;}
        .meca{margin-top: 4%;
        margin-left: 3%;}
        .luk{margin-top: -330PX;
        margin-left: 60%;
      width: 40%;}
      .valeo{margin-top: -65%;
        margin-left: 65%;
      width: 18%;}
      .bard{margin-top: -40%;
        margin-left: 40%;
      width: 20%;}
      .buttonfooter{margin-top:26px;
        background-color: #33ceff;
        position: absolute;
        color: white;
        width: 50%;
        height: 40PX;
        border-style: none;
        margin-left: -35%;
      z-index: 1;}
      
      footer{width: 100%;
        height: 255PX;
        background: rgb(242,164,9);
        background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
        position: absolute;
        margin-top: 133px;}
        
        .logofooter{width: 25%;
        margin-left: 38%;} 
        
        .textefooter{color: black;
          font-size: 13PX;}
          .textefooter{font-size: 13PX;}
          .textefooter{font-size: 13PX;}
          .mention{margin-left: 25%;
            font-size: 10PX;} 
          .politique{font-size: 10px;
          margin-left: 55%;}  
        }

   
   @media(min-width:992px){
    .navbar{background: rgb(242,164,9);
      background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); }
   }

    


    @media screen and (min-width: 651px) and (max-width: 1023px){ 
      .entete{width: 100%;
        height: 400PX;
        filter: brightness(60%);
        }
      
        .logo{position:absolute;
          width: 22%;
        height: 14%;
        margin-top: -50%;
        margin-left: 40%;
        z-index: 1;
        }
      
        .textelogo {position:absolute;
          color:white;
        margin-top: -250PX;
        margin-left: 25%;
        width: 50%;
        text-align: center;
        z-index: 1;
        font-size: 14PX;
      font-weight: 700;}
      
      
      .buttonheader{background-color: #33ceff;
      margin-top: -180PX;
      margin-left: 43%;
      position: absolute;
      color: white;
      width: 18%;
      height: 30PX;
      border-style: none;
    font-size: 14PX;}

    .colis{width: 10%;
      height: 20%;
     margin-top: 5%;
     margin-left: 0%;
 }
 .slider{width: 30%;
  height: 45%;
  position: absolute;
  margin-left: 70%;
  margin-top: -60%;
  overflow: hidden;
  border-radius: 20PX;
  background-image: url(IMAGE/logo\ avec\ pience.PNG);
    background-position: center;
    background-size: 65%;
    background-repeat: no-repeat;
    transition: 5s;
    opacity: 1;
       
animation-name: animate;
animation-direction:normal;
animation-play-state:running;
animation-timing-function:ease-out;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;}


@keyframes animate {
 0%  {  background-image: url(IMAGE/DECRASANT.png); }
 20% { background-image: url(IMAGE/ENJOLIVER.\ DETpng.png); }
 40% { background-image: url(IMAGE/HUILE\ MOTEUR.png ) }
 60% {background-image: url(IMAGE/LAVE\ GLACE.png);}  
 80%{background-image: url(IMAGE/LIQUIDE\ REFROIDISSEMENT.PNG);}  
100%{background-image: url(IMAGE/logo-sofinco-3-4-fois.png);} }



.page{position: absolute;
 width: 38%;
 height: 210PX;
 text-align: center;
 margin-left: 31%;
margin-top: -80px;
color:white;
background: rgb(242,164,9);
background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); 
opacity: 1;
border-radius: 20PX;
font-size: 20PX;
font-weight: 700;
}

.accroche{margin-top: -15PX;
 text-align:center;
font-size: 20PX;
color:white;
font-weight: -600;
margin-left: 2%;}
    

      .page1{width: 24%;
        height: 160PX;
        margin-left:4%;
        margin-top: -50px;
        background-color: #33ceff;
        position: absolute;
        border-radius: 20PX;
}
.page2{width: 24%;
  height: 150PX;
  margin-left: 72%;
  margin-top: -60px;
 background-color: #33ceff;
  position: absolute;
  border-radius: 20PX;
color: white;
text-align: center;}
p.adresse2{color:white;
  margin-top: 20PX;
  font-size: 16PX;
  font-weight: 600;
  text-align: center;}

  .logo2{width: 32%;
  margin-top: 12%;
margin-left: 34%;}


.description{position: absolute;
  color: black;
font-size: 20PX;
margin-left: 15%;
margin-top: 230PX;
text-align: center;
}

  
h2{font-size: 28PX;
  margin-left: 27%;
color:black;
z-index: 1;
margin-top: 180px;
position: absolute;
font-weight: 600;
}





.conteneur1{display: flex;
justify-content: space-between;
margin-top: 45%;
margin-left: 1%;
margin-right: 1%;

}


.conteneur2{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}

.conteneur3{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}
.conteneur3{display: flex;
  justify-content: space-between;
margin-left: 1%;
margin-right: 1.5%;}

.pieceneuve{
  
  width: 55%;
height: 270px;
margin-bottom: 4PX;
margin-right: 4PX;
background-image: url(IMAGE/istockphoto-disque\ de\ frien\ GRIS\ BLANC.png);
background-position: 60%;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 14PX;

}

.button1{margin-top: 120PX;
width: 169PX;
margin-left: 260PX;
background-color: #33ceff;
z-index: 1;
border-style: none;
color: aliceblue;
width: 20%;
height: 32PX;
}

.pieceoccasions{
  
   width: 55%;
 height: 270PX;
 background-image: url(IMAGE/gros-plan-engrenages-metalliques-sales-GRIS.jpeg);
 background-size: 100%;
 border-radius: 2%;
margin-bottom: 4PX;
}


.button1{margin-top: 120PX;
  width: 169PX;
  margin-left: 130PX;
  background-color: #33ceff;
  z-index: 1;
  border-style: none;
  color: aliceblue;
  width: 35%;
  height: 32PX;
  }

  .button2{margin-top: 120PX;
    width: 169PX;
    margin-left: 130PX;
    background-color: #33ceff;
    z-index: 1;
    border-style: none;
    color: aliceblue;
    width: 35%;
    height: 32PX;
    }

    .button3{margin-top: 120PX;
      width: 169PX;
      margin-left: 130PX;
      background-color: #33ceff;
      z-index: 1;
      border-style: none;
      color: aliceblue;
      width: 35%;
      height: 32PX;
      }

      .button4{margin-top: 120PX;
        width: 169PX;
        margin-left: 130PX;
        background-color: #33ceff;
        z-index: 1;
        border-style: none;
        color: aliceblue;
        width: 35%;
        height: 32PX;
        }

        .button5{margin-top: 120PX;
          width: 169PX;
          margin-left: 130PX;
          background-color: #33ceff;
          z-index: 1;
          border-style: none;
          color: aliceblue;
          width: 35%;
          height: 32PX;
          }

          .button6{margin-top: 120PX;
            width: 169PX;
            margin-left: 130PX;
            background-color: #33ceff;
            z-index: 1;
            border-style: none;
            color: aliceblue;
            width: 35%;
            height: 32PX;}
            .bard{margin-top: -42%;
              margin-left: 0%;
            width: 20%;}
            
            .buttonfooter{margin-top:100px;
              background-color: #33ceff;
              position: absolute;
              color: white;
              width: 20%;
              height: 40PX;
              border-style: none;
              margin-left: -47%;
            z-index: 1;}

            .mention{position: absolute;
              color: white;
            margin-left: 25%;
          margin-top: 10PX;}
          .navbar{margin-top: -390px;
            margin-left: -48%;
            position: fixed;
        z-index: 1; }
          .navbar-collapse{display: flex;
          margin-left: 40%;
        margin-top: 0%;
        background-color: orange;}
          .navbar-toggler{color: orange;
          height: 42px;
        width: 52PX;
        
        margin-left: 50%;}
        .navbar-toggler-icon{background-color: aliceblue;}  
        } 
     
             
          

           

          @media screen and (min-width: 1300px) {
            .entete{
              width: 100%;
              height: 750PX;
              filter: brightness(60%);
              }
            
               .logo{position:absolute;
                width: 30%;
              height: 40%;
              margin-top: -34%;
              margin-left: 36%;
              z-index: 1;
              }
            
              .textelogo {position:absolute;
                color:white;
              margin-top: -280PX;
              margin-left: 26%;
              width: 50%;
              text-align: center;
              z-index: 1;
              font-size: 18PX;
            font-weight: 700;}

            
          
          
          .buttonheader{background-color: #33ceff;
            
          margin-top: -160PX;
          margin-left: 44%;
          position: absolute;
          color: white;
          width: 13%;
          height: 40PX;
          border-style: none;
          z-index: 1;}
          
          
          
          .numero{color: black;
            font-size: 16px;
          font-weight: 700;}
            .num{position: absolute;
            margin-left: 3%;
            margin-top: -736PX;
            width: 20%;
            z-index: 2;
            }
            .adresse{color: black;
            font-size: 16px;
          font-weight: 700;}
            .adr{position: absolute;
            color:wheat;
            font-size: 5PX;
            margin-left: 80%;
            margin-top: -736PX;
            width: 20%;
            z-index: 2;
            }
          
          .navbar{ 
            margin-top: -750PX;
            position: fixed;
            margin-left: 0%;
            height: 50px;
            width: 100%;
            z-index: 1;
            }
          
            .navbar-nav .nav-link.active{ color: rgb(6, 118, 103);}
          
          .collapse{justify-content: center;
          color:#33ceff;}
          .navbar-nav > li > a{font-size: 20PX;
            font-weight: 600;
          margin-left: 20PX;
          color: white;
          }

.page{position: absolute;
  width: 30%;
  height: 220PX;
  text-align: center;
  margin-left: 35%;
margin-top: -50px;
color:white;
background: rgb(242,164,9);
background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); 
opacity: 1;
border-radius: 20PX;
font-size: 22PX;
font-weight: 700;
}
p.adresse2{color:white;
  margin-top: 20PX;
  font-size: 20PX;
  font-weight: 600;
  text-align: center;}

p.h{font-size: 18PX;
margin-top: 14PX;
}
.page1{width: 22%;
height: 150PX;
margin-left: 7%;
margin-top: -40px;
background-color: #33ceff;
position: absolute;
border-radius: 20PX;
}

.page2{width: 24%;
  height: 150PX;
  margin-left: 71%;
  margin-top: -40px;
 background-color: #33ceff;
  position: absolute;
  border-radius: 20PX;
color: white;
text-align: center;}

h1{font-size: 26PX;
  margin-left: 38%;
color:black;
z-index: 1;
margin-top: 230px;
position: absolute;
font-weight: 600;
text-align: center;
}


          footer{width: 100%;
            height: 398PX;
            background: rgb(242,164,9);
            background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
            position: absolute;
            margin-top: 277px;}

            h2{font-size: 28PX;
              margin-left: 39%;
            color:black;
            z-index: 1;
            margin-top: 250px;
            position: absolute;
            font-weight: 600;
            }

            .description{position: absolute;
              color: black;
            font-size: 26PX;
            margin-left: 30%;
            margin-top: 300PX;
            text-align: center;
            }
            .button1{margin-top: 120PX;
              width: 169PX;
              margin-left: 400PX;
              background-color: #33ceff;
              z-index: 1;
              border-style: none;
              color: aliceblue;
              width: 20%;
              height: 32PX;
              }
              .button2{margin-top: 120PX;
                margin-left: 380PX;
              width: 160PX;
              background-color: #33ceff;
              color: white;
              border-style: none;
              width: 20%;
              height: 32PX;}
                                     

   } 
   
   @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
 


 .logo{margin-top: -42%;}

  .conteneur1{margin-top: 30%;}
h1{font-size: 26PX;
  margin-left: 35%;
color:black;
z-index: 1;
margin-top: 230px;
position: absolute;
font-weight: 600;
text-align: center;
}
.description{position: absolute;
  color: black;
font-size: 22PX;
margin-left: 30%;
margin-top: 270PX;
text-align: center;}

}