*{
   margin: 0;
   padding: 0;
}

body{
   background-color: rgb(255, 255, 255);
}

.header{
   height: 50px;
   width: -webkit-fill-available;
   background-color: rgb(255, 255, 255);
   padding: 0px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: fixed;
   top:18px;
   z-index: 1;
   box-shadow: 0 2px 4px 0 rgb( 0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 10%);
}


.logo{
   font-size: x-large;
   font-family: sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;

}

.top_contact{
    width: -webkit-fill-available;
}

.title {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}


.sellmine{
   padding: 9px;
   background-color: #FF9800;
   color: #fff;
   font-size: medium;
   white-space: nowrap;
   font-family: sans-serif;
   border-radius: 8px;
}

.callme{
   padding: 10px;
   border: 3px solid #4CAF50;
   height: 30px;
   background-color: #54e65986;
   width: 30px;
   border-radius: 100px;
}

.whatsapp-button{
   border: 2px solid black;
   height: 13px;
   width: 76px;
   display: flex;
   padding: 8px;
   align-items: center;
   justify-content: center;
   border-radius: 20px;
}

.logocontainer{
    display: flex;
}
.logocontainer button{
    display: none;
}
.logo img{
   width: 78px;
}

.cars-content{
   /* display: grid;
   grid-template-columns: repeat(auto-fill,minmax(411px, 420px));*/
   gap: 29px;  
   justify-content: center;  
   justify-items: center;
}


.photo{
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 72%; 
   background-color: #fff;
   border-bottom: 2px solid #dedede;
}

.post-car{
  
   background-color: #ffffff;
   border-radius: 10px;
   overflow: hidden;
   box-shadow:  0px 2px 20px 0px #80808054;
  
}

.photo img{
  /** height: 267px; **/
   width: 100%;
} 

.price{
   display: flex;
   justify-content: flex-end;
   font-weight: bold;
}

.text-content{
   padding: 10px 10px;
   font-family: sans-serif;
   
   display: flex;
   gap: 9px;
   flex-direction: column;
}

.notice{
   background-color: #54e659;
   color: white;
   font-family: sans-serif;
   display: flex;
   align-items: center;
   position: absolute;
   margin: 10px;
   padding: 3px 24px;
   border-radius: 14px;
}

.foot{
   text-decoration: none;
   list-style: none;
   height: 115px;
   background-color: #d0b5ff;
   font-family: sans-serif;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
}

.descriptions{
   overflow: hidden;
}

a{
   text-decoration: none;
   color: black;
}
.cars-content{
            display: flex;
   flex-wrap: wrap;
   justify-content: center;
   
         }
         
                       .corp{
   padding: 120px 20px 80px 20px;
}
         
          

         
         @media screen and (max-width: 320px) {
      
            .corp{
   padding: 75px 20px 80px 20px;
}

            .cars-content a{
               width: 100%;
            }
            }
      


   @media screen and (min-width: 320px)and (max-width:380px) {
      
      .post-car{
         height: 362px;
      }
              .corp{
   padding: 75px 20px 80px 20px;
}
      .cars-content a{
         width: calc(100% - 10px);
      }

   
      
      .text-content{
         font-size: large;
         padding: 10px;
      }


   }
    @media screen and (min-width: 380px)and (max-width:864px) {
                      .corp{
   padding: 75px 20px 80px 20px;
}
    }

      @media screen and (min-width: 380px)and (max-width:500px) {
         
         #titlev,.available{
            font-size: 19px;
            }

         .post-car{
            height: 370px;
         }

        .cars-content a{
         width: calc(100% - 20px);
      }

         
         .text-content{
            padding: 10px 15px;
            font-family: sans-serif;
            font-size: x-large;
            display: flex;
            gap: 9px;
            flex-direction: column;
         }
   
         }

         

         @media screen and (min-width: 500px) and (max-width:620px) {
      
               .post-car{
                 
                  height: 350px;
               }

               .cars-content a{
                  width: calc(70% - 20px);
               }

               #titlev,.available{
                  font-size: 18px;
                  }

               .text-content{
                  padding: 10px 15px;
                  font-family: sans-serif;
                  font-size: x-large;
                  display: flex;
                  gap: 9px;
                  flex-direction: column;
               }
   
              
               }
                @media screen and (min-width: 620px) and (max-width:980px) {
      
               .post-car{
                 
                  height: 350px;
               }

               .cars-content a{
                  width: calc(50% - 20px);
               }

               #titlev,.available{
                  font-size: 18px;
                  }

               .text-content{
                  padding: 10px 15px;
                  font-family: sans-serif;
                  font-size: x-large;
                  display: flex;
                  gap: 9px;
                  flex-direction: column;
               }
   
              
               }
               @media screen and (min-width: 980px)and (max-width: 1440px) {
      
                     .post-car{
                        height: 350px;
                
                     }

                     #titlev,.available{
                        font-size: 18px;
                        }

                     .cars-content a{
                        width: calc(33% - 20px);
                     }


                     .text-content{
                        padding: 10px 15px;
                        font-family: sans-serif;
                        font-size: x-large;
                        display: flex;
                        gap: 9px;
                        flex-direction: column;
                     }
         
                     /* .cars-content{
                        display: grid;
                        grid-template-columns: repeat(auto-fill,minmax(129px, 334px));
                        gap: 25px;
                        justify-content: center;  
                     } */
                     }

                     @media screen and (min-width: 1440px) {
      
                        .post-car{
                          height: 350px;
               
                        }

                        #titlev{
                           font-size: 19px;
                           }
                            
                        .available{
                           font-size: 19px;
                           }
                        .cars-content a{
                           width: calc(22% + 11px);
                        }
                       

                        .text-content{
                           padding: 10px 15px;
                           font-family: sans-serif;
                           font-size: x-large;
                           display: flex;
                           gap: 9px;
                           flex-direction: column;
                        }
            
                        /* .cars-content{
                           display: grid;
                           grid-template-columns: repeat(auto-fill,minmax(129px, 445px));
                           gap: 25px;
                           justify-content: center;  
                        } 
                      
                        .cars-content{
                           display: grid;
                           grid-template-columns: repeat(auto-fill,minmax(255px, 464px));
                           gap: 25px;
                           justify-content: center;  
                        } */
                        }


/* css for item details */
.copylink{
   position: absolute;
   top: 3px;
   right: 5px;
}

.image-de-sujet{
   position: relative;
   overflow-x: scroll;
}

.image-de-sujet::-webkit-scrollbar {
   height: 0px;
   background-color: #fff;
 }

 .image-de-sujet::-webkit-scrollbar-track {
   background: #000000; 
   height: 0px;
   padding: 2px;
 }

 .image-de-sujet::-webkit-scrollbar-thumb {
   border-radius: 50px;
   background-color: #bcbcbc;

 }



.suggestions::-webkit-scrollbar {
   height: 6px;
   background-color: #e1e1e1;
 }

 .suggestions::-webkit-scrollbar-track {
   background: #ffffff; 
   height: 5px;
   padding: 2px;
 }

 .suggestions::-webkit-scrollbar-thumb {
   height: 9px;
   border-radius: 50px;
   background-color: #bcbcbc;

 }


.contacts{
   height: 42px;
   background-color: #54e659;
   font-family: sans-serif;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   z-index: 1;
   padding: 0px 20px;
   width: -webkit-fill-available;
   bottom: 0;
}

.contacts .phonelink{
   border-radius: 84px;
   padding: 0 6px;
   border: 2px solid black;
   width: 118px;
   display: flex;
   height: 29px;
   gap: 7px;
   font-size: 12px;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   cursor: pointer;
}

.modal-content{
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: white;
   border-radius: 14px;
   justify-content: center;
   font-family: sans-serif;
}

.phonelink img{
   width: 26px;
}

.phone-details{
   margin: 18px;
   gap: 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.phone-details a{
   background-color: #2dff169c;
   padding: 8px;
   border-radius: 10px;
   border: 1px solid #2cb450;
}


.row-of-img{
  /** width: 100%;**/
   gap: 2px;
   overflow-y: hidden;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
}

.row-of-img::-webkit-scrollbar {
   height: 0px;
   background-color: #fff;
 }

 .row-of-img::-webkit-scrollbar-track {
   background: #ffffff; 
   height: 0px;
   padding: 2px;
 }

 .row-of-img::-webkit-scrollbar-thumb {
   border-radius: 50px;
   background-color: #bcbcbc;

 }

.img-outside{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
}
.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-family: sans-serif;
   color: #010101;
   white-space: nowrap;
}

.image-de-sujet .cona{
   width: 100%;
 }


 .options_titre{
   padding-bottom: 8px;
   font-size: 17px;
   font-weight: 600;
}

.infosofpost{
   font-size: 14px;
   margin-top: 4px;
   margin-bottom: 4px;
}

.cardetails{
   list-style: none;
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
}

.cardetails li{
   background-color: #d6d6d6;
   padding: 1px 5px;
   border-radius: 5px;
   color: #000000;
}


@media screen and (min-width: 1300px) {
 
.item{
   
 
   display: flex;
   flex-direction: row;
   overflow: hidden;
   border-radius: 10px;
   align-items: flex-start;
   gap: 30px;
  
}

.image-de-sujet{
 
   background-color: #5858586a;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
   overflow-x: scroll;
   border-radius: 13px;
   width: 50%;
} 

.row-of-img{
   height: 390px;
}

.image-de-sujet.fullscrn{
   background-color: #000000;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
   overflow-x: scroll;
   position: fixed;
   border-radius: 0;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 9;
}

.row-of-img.fullscrn{
   height: 500px;
}

.modal-content{
   width: calc(50% - 40px);
   height: 336px;
}



 .image-de-sujet .cona{
   width: inherit;
   height: 100%;
}

.image-border{
   height: 65px;
   width: 65px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.details-de-sujet{
   gap: 17px;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   width: 50%;
   height: 100%;
}

.lamarque{
   font-size: 35px;
   font-weight: 500;
   display: flex;
   flex-direction: column;

}

.lemodel{
   font-size: 24px;
}

.descriptions{
   font-size: 17px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}



.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: xxx-large;
   font-family: sans-serif;
   margin-top: 0px;
   white-space: nowrap;
   color: #010101;
}
.details-container{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.details{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
   gap: 20px 29px;
   align-items: center;
   width: 100%;
   border-top: 1px solid #8080804d;
   padding-top: 17px;
}

.details .font{
   font-size: 17px;
}

.details img{
   width: 41px;
}

}

@media screen and (max-width: 293px) {
   .lamarque{
      font-size: 20px;
      display: flex;
      justify-content: space-between;
   }
   
   .lemodel{
      font-size: 17px;
   }

   .modal-content{
      width: calc(90% - 20px);
      height: 336px;
   }
   
   
   .details .font{
      font-size: 13px;
   }
   .details-de-sujet{
      padding: 10px 0px;
   }

   .prix-prin{
      font-size: 18px;
   } 

   body{
      background-color: #fff;
   }

   .details img{
      width: 31px;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center;
   }
   
   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
   }
   
   

   .row-of-img{
      width: 100%;
      height: 160px;
      gap: 2px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }

   .image-de-sujet .cona{
      width: 100%; 
   /*   height: 100%;*/
  }
  

   .details-de-sujet{
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }


.image-border{
   height: 50px;
   width: 50px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.descriptions{
   font-size: 13px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: grid;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap: 18px 1px;
   grid-template-columns: repeat(auto-fill,minmax(86px,80px)); 
   border-top: 1px solid #8080804d;
   padding-top: 17px;
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}

}

@media screen and (min-width:293px) and (max-width: 376px) {

 

   body{
      background-color: #fff;
   }

   .details img{
      width: 31px;
   }

   #titlev{
   font-size: 16px;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center;
   }

   .modal-content{
      width: calc(95% - 40px);
      height: 336px;
   }

   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
   }
   
   

   .row-of-img{
      width: 100%;
      height: 180px;
      gap: 2px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }
   

 .image-de-sujet .cona{
   max-width: 260px;
   max-height: 180px;
 }


   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }
  

   .details-de-sujet{
    padding: 12px 9px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }
.lamarque{
   font-size: 18px;
   display: flex;
   justify-content: space-between;
}

.lemodel{
   font-size: 15px;
}

.details .font{
   font-size: 13px;
}

.image-border{
   height: 50px;
   width: 50px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.descriptions{
   font-size: 13px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: grid;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap: 18px 1px;
   grid-template-columns: repeat(auto-fill,minmax(86px,80px)); 
   border-top: 1px solid #8080804d;
   padding-top: 17px;

   
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: 20px;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}


}



@media screen and (min-width: 376px) and (max-width: 565px) {

 
   body{
      background-color: #fff;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center; 
    
   }

   .modal-content{
      width: calc(100% - 50px);
      height: 270px;
   }

  

   .details img{
      width: 36px;
   }

   .row-of-img{
      width: 100%;
      gap: 2px;
      display: flex;
      height: 242px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }

   .details .font{
      font-size: 15px;
   }

   img.acc{
      width: 30px;
   }

   img.fuel{
      width: 30px;
   }

   .image-border{
      height: 55px;
      width: 55px;
      background-color: aliceblue;
      display: flex;
      align-items: center;
      border-radius: 63px;
      justify-content: center;
   }
   
   .image-de-sujet{
    
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
      border: 2px solid #00000040;
   }

   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }
   
    .image-de-sujet img{
      width: 100%;
      max-height: 242px;
   } 
   
   .details-de-sujet{
    padding: 12px 9px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }
.lamarque{
   font-size: 22px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lemodel{
   font-size: 18px;
}

.descriptions{
   font-size: 15px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap:  20px 23px;
   border-top: 1px solid #8080804d;
   padding-top: 17px;

   
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: x-large;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}



}

@media screen and (min-width: 565px) and (max-width: 600px) {

 
   body{
      background-color: #fff;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center; 
    
   }

   .modal-content{
      width: calc(100% - 160px);
      height: 270px;
   }

  

   .details img{
      width: 36px;
   }

   .row-of-img{
      width: 100%;
      gap: 2px;
      display: flex;
      height: 205px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }

   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }

   .details .font{
      font-size: 15px;
   }

   img.acc{
      width: 30px;
   }

   img.fuel{
      width: 30px;
   }

   .image-border{
      height: 55px;
      width: 55px;
      background-color: aliceblue;
      display: flex;
      align-items: center;
      border-radius: 63px;
      justify-content: center;
   }
   
   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
   }
   
   .cona{
      width: 100%;
      max-height: 205px;
   } 

   .cona.bigcona{
      width: 100%;
      max-height: 2005px;
   }
   
   .details-de-sujet{
    padding: 12px 9px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }
.lamarque{
   font-size: 22px;
   display: flex;
   justify-content: space-between;
}

.lemodel{
   font-size: 18px;
}

.descriptions{
   font-size: 15px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: grid;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap:  20px 1px;
   grid-template-columns: repeat(auto-fill,minmax(86px,146px)); 
   border-top: 1px solid #8080804d;
   padding-top: 17px;

   
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: x-large;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}



}


@media screen and (min-width: 600px) and (max-width: 866px) {

   

   body{
      background-color: #fff;
   }

   .details img{
      width: 31px;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center;
   }

   .modal-content{
      width: calc(100% - 200px);
      height: 260px;
   }
   
   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
   }
   
  .image-de-sujet .cona{
      height: 100%;
   } 

   .row-of-img{
      width: 100%;
      gap: 2px;
      display: flex;
      height: 300px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }
  

   .details-de-sujet{
    padding: 12px 9px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }

   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }
.lamarque{
   font-size: 27px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lemodel{
   font-size: 20px;
}

.details .font{
   font-size: 15px;
}

.image-border{
   height: 50px;
   width: 50px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.descriptions{
   font-size: 17px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap: 18px 27px;
   border-top: 1px solid #8080804d;
   padding-top: 17px;

   
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: xx-large;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}


}


@media screen and (min-width:866px) and (max-width: 1190px) {

   

   body{
      background-color: #fff;
   }

   .details img{
      width: 44px;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 10px;
      align-items: center;
   }

   .modal-content{
      width: calc(80% - 160px);
      height: 280px;
   }
   
   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
   }
   
   .image-de-sujet .cona{
      
      max-height: 300px;
   } 

   .row-of-img{
      width: 100%;
      gap: 2px;
      display: flex;
      height: 300px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }
  

   .details-de-sujet{
    padding: 12px 9px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }

   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }
.lamarque{
   font-size: 37px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lemodel{
   font-size: 24px;
   position: relative;
}

.details .font{
   font-size: 19px;
}

.image-border{
   height: 69px;
   width: 69px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.descriptions{
   font-size: 17px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap: 18px 45px;
   border-top: 1px solid #8080804d;
   padding-top: 17px;

   
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: xx-large;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}


}

@media screen and (min-width:1190px) and (max-width: 1300px) {

   

   body{
      background-color: #fff;
   }

   .details img{
      width: 44px;
   }
 
   .item{
      
      background-color: rgb(255, 255, 255);
      display: flex;
      flex-direction: row;
      overflow: hidden;
      border-radius: 10px;
      align-items: flex-start;
   }

   .modal-content{
      width: calc(50% - 20px);
      height: 336px;
   }
   
   .image-de-sujet{
    
      border: 2px solid #00000040;
      display: flex;
      border-radius: 10px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
      height: fit-content;
      width: 110%;
   }
   
   .image-de-sujet .cona{
      width: 100%;
      height: 100%;
   } 

   .row-of-img{
      width: 100%;
      gap: 2px;
      height: 362px;
      display: flex;
      border-radius: 10px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
   }
  

   .details-de-sujet{
    padding: 3px 27px;
      gap: 6px;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      width: 100%;
   }
   .image-de-sujet.fullscrn{
      background-color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      overflow-x: scroll;
      position: fixed;
      border-radius: 0;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9;
   }
   
   .row-of-img.fullscrn{
      height: 500px;
   }
.lamarque{
   font-size: 37px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.lemodel{
   font-size: 24px;
   position: relative;
}

.details .font{
   font-size: 14px;
}

.image-border{
   height: 69px;
   width: 69px;
   background-color: aliceblue;
   display: flex;
   align-items: center;
   border-radius: 63px;
   justify-content: center;
}

.descriptions{
   font-size: 17px;
   padding-top: 14px;
   margin-top: 10px;
   border-top: 1px solid #8080804d;
}

.details{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   align-content: center;
   font-size: small;
   justify-items: center;
   gap: 18px 45px;
   border-top: 1px solid #8080804d;
   padding-top: 17px;
}

.prix-prin{
   display: flex;
   font-weight: 600;
   flex-direction: row;
   justify-content: flex-end;
   font-size: xx-large;
   font-family: sans-serif;
   margin-top: 0px;
   color: #010101;
}


}


.navigator{
   position: fixed;
   background-color: rgb(255, 255, 255);
   height: 45px;
   top: 68px;
   left: 0;
   transition: ease-in-out 0.4s;
   z-index: 1;
   width: -webkit-fill-available;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 10px 9px 4px rgb(0 0 0 / 18%), 0 1px 0 0 rgb(0 0 0 / 10%);
}

.navigator form{
      display: flex;
      gap: 8px;
      align-items: center;
  }

  .keys,.gearboxsearch,.fueltype,.minprice,.maxprice {
   border-radius: 6px;
   PADDING: 0PX 10PX;
   background: #ececec4f;
   border: 1px solid #b8b8b8;
   height: 24px;
}

.submitbtnsearch {
   background: #274ab0;
   border: 0;
   color: white;
   display: flex;
   height: 30px;
   width: 30px;
   border-radius: 30px;
   padding: 2px;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

@media screen and (max-width:865px) { 
   .navigator{
      position: fixed;
      background-color: rgb(255, 255, 255);
      height: -webkit-fill-available;
      top: 68px;
      left: -1000px;
      z-index: 1;
      width: calc(100% + 0px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      box-shadow: 0px 10px 9px 4px rgb(0 0 0 / 18%), 0 1px 0 0 rgb(0 0 0 / 10%);
   }

   .navigator.hide{
      position: fixed;
      background-color: rgb(255, 255, 255);
      height: -webkit-fill-available;
      left: 0px;
      top: 68px;
      transition: ease-in-out 0.5s;
      transition: ease-out 0.4px;
      z-index: 1;
      width: calc(100% + 0px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      box-shadow: 0px 10px 9px 4px rgb(0 0 0 / 18%), 0 1px 0 0 rgb(0 0 0 / 10%);
   }
   
   
   .navigator form{
         display: flex;
         gap: 8px;
         align-items: center;
         flex-direction: column;
         width: -webkit-fill-available;
         padding: 20px;
     }
   
   .keys,.gearboxsearch,.fueltype,.minprice,.maxprice {
      border-radius: 6px;
      width: -webkit-fill-available;
      PADDING: 0PX 10PX;
      background: #ececec4f;
      border: 1px solid #b8b8b8;
      height: 24px;
   }
   
   .submitbtnsearch {
      background:  #274ab0;
      border: 0;
      color: white;
      display: flex;
      height: 30px;
      width: 167px;
      border-radius: 5px;
      padding: 2px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
   }
   
}