@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Monoton&family=Righteous&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Monoton&family=Righteous&family=Tilt+Warp&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');


*{
  margin: 0;
  padding: 0;
  transition: 0.8s;
  
}
.phonenumber{
    display: none;
    background-color: rgb(0, 0, 0);

}

#phonenumber1{
    display: none;
}

  .hero-bg {
    background-image: url('../images/freepik__the-style-is-candid-image-photography-with-natural__20305.png'); /* path to your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:32rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    position: relative;
    
  }

  
  .hero-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.523); /* dark overlay */
    z-index: 0;
  }
  
  .text-content {
    position: relative;
    width: 100%;
    top: -2rem;
  }

  
  .text-content p {
    font-size: 1.5rem;
    color: #ebf1ef;
    line-height: 1.6;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 12px;
  }

  .textbox{
    color: aliceblue;
    position: absolute;
    bottom: 2%;
}

.text-content h1{
    font-size: 190px;
    line-height: 160px;
    color: transparent;
    -webkit-text-stroke: 3px rgb(255, 255, 255);
    background: url(back.png) repeat;
    -webkit-background-clip: text;
    background-position: 0 0;
    animation:back 60s linear infinite ;
    font-family: "Fugaz One", sans-serif;
    font-weight: 89400;
    font-style: normal;
} 

@keyframes back{
    100%{
        background-position: 2000px 0;
    }
}

.middlebody{
    background-color: none;
    color: #000000;
    position: relative;
    width: 100%;
    text-align: center;
    transition: 1s;   
}

.middlebody h2{
    color: #1a1a1a;
    font-family: "Playfair", serif;
    font-weight: 800;
    font-size: 37px;
    position: relative;
    width: 100%;
    text-align: center;
    transition: 1s;   
    top: 0.6rem;
}

.imgwithdis1 b{
    text-align: justify;
    color: #fff200f5;
    font-family: "Tilt Warp", serif;
    width: 70%;
    font-size: 2rem;
    top: -6rem;
    position: relative;

}
.imgwithdis1{
    background-color: rgb(0, 0, 0);
    position: relative;
    top: 3rem;
}
.imgwithdis1col{
    width: 60%;
}
.imgwithdis1 img{
    width: 80%;
    max-height: 1200px;
    opacity: 0.5;
    padding: 2%;
}

.imgwithdis1 p{
    text-align: justify;
    position: relative;
    top: -3rem;
    color: #fefef0;
    padding-right:24px;
}

.brands{
    width: 100%;
    position: relative;
    text-align: center;
    top: 5rem;
}


.middlebody .brands{
     font-family: "Playfair", serif;
    font-weight: 800;
    font-size: 37px;
    top: 5rem;
    text-align: center;
    position: relative;
}

.vehicallogo{
    width: 100%;
    background-color: rgba(239, 237, 237, 0.146);
    position: relative;
    top: 8.5rem;
}
.vehicallogo img{
     width: 10%;    
     left: 10%;
     height: 15vh;
     display: inline-flex;
     padding: 10px 25px;
     left: 30%;
     opacity: 0.8;
     position: relative;
}

.vehicallogo img:hover{
    opacity: 10;
}
.custormer_reviews{
    width: 100%;
    position: relative;
    top: 12rem;
}


.custormer_reviews th h1{
    font-size: 2rem;
    text-align: center;
    top: -3rem;
    position: relative;
}

.footerplacement{
    position: relative;
    top: 11rem;
}

@media screen and (min-width: 2000px){
    
    .imgwithdis1 b{
        font-size: 5rem;
        top: -6rem;    
    }

    .imgwithdis1 p{
        top: -3rem;
        padding-right:24px;
        font-size: 30px;
    }
}

@media screen and (min-width: 1500px){
    
    .textbox{
        color: aliceblue;
        top: -10rem;
        position: relative;
        display: block;
        padding: 12px 12px;
    
      }
    
      .part1{
        padding: 15px 0px;
      }
    
      .part1 p{
        font-size: 35px;
      }
      
      .textbox h1{
        font-size:9rem;
        left: 50%;
      } 
}
  
@media screen and (min-width: 1000px){
    
    .textbox{
        color: aliceblue;
        top: -10rem;
        position: relative;
        display: block;
        padding: 12px 12px;
      }
    
      .part1{
        padding: 15px 0px;
      }
    
      .part1 p{
        font-size: 25px;
      }
      
      .textbox h1{
        font-size:7rem;
        left: 50%;
      } 
}

    @media screen and (max-width: 2000px){
       .vehicallogo img{
        height: 12vh;
           }
           .text-content h1{
            top: 2rem;
            position: relative;
           }


    }

    @media screen and (max-width: 1400px){
        .vehicallogo img{
            width:15%;
            left: 21%;
            }
        .imgwithdis1 b{
            top: -3rem;
        }

        .imgwithdis1 p{
            font-size: 14px;
        }

        .text-content h1{
            font-size: 5rem;
           }
           #phonenumber1{
            display: none;
        }
       

     }




     @media screen and (max-width: 1000px){

        .text-content h1{
            font-size: 5rem;
           }
           thead, tbody, td, tr {
           
        }
    }

         @media screen and (max-width: 991.6px){

        #phonenumber1{
            display: none;
            text-align: center;
            position: relative;
            left: -3%;
            top: 1rem;
        }

        #phonenumber2{
            display: none;
        }
     }




    @media screen and (max-width: 900px){
        thead, tbody, td, tr {
            display: block; /* Make everything block elements */
        }
    
        .vehicallogo img{
            width:15%;
            left: 18%;
            height: 10vb;
               }
        .brands h1{
         text-align: center;
        }

       .imgwithdis1 b{
        position: relative;
        top: 0rem;
        font-size: 1.5rem;
        padding: 0px 5px;

       }
       .imgwithdis1 p{
        position: relative;
        top: -0.5rem;
        padding: 0px 5px;
       }
       .imgwithdis1col{
        width: 100%;
       }
       .imgwithdis1 img{
        position: relative;
        align-items: center;
       }
       
    }

@media screen and (max-width: 779px){
    .slider-container, .slide img{
        height: 40vh;
    }
    .detail, .shortdescription p{
    font-size: 12px;
}
    
    .commenthead h1,.middlebody h1,.imgwithdis1 h1,.custormer_reviews h1,.brands h1{
        font-size: 26px;
        text-align: center;
    }
    .commentsp p{
        text-align: justify;
        font-size: 20px;
    }
    .open-button {
        padding: 7px 30px;
      }
      
    .imgwithdis1 p{
        font-size: 15px;
        bottom: 2rem;
        position: relative;
    }
    .vehicallogo img{
        width: 16%;    
        padding: 10px 15px;
        position: relative;
        left: 15%;
   }

   .text-content h1{
  line-height: 4rem;
  font-size: 3.5rem;
}
.text-content p{
    top:1rem;
    font-size: 1rem;
    position: relative;
   }

   .middlebody h2, .middlebody .brands{
    font-size: 25px;
   }

}

@media screen and (max-width: 601px){
.shortdescription p{
  display: none;
   
}
.detail{
    font-size: 13px;
    width: 100%;
    text-align: center;
}

.slider{
    height: 30vh;
}
.slider-container, .slide img{
    height: 30vh;
}
nav a img{
    width: 20%;
   margin: 2px 10px;
   background: none;
}

.imgwithdis1 b{
    font-size: 23px;
}

.imgwithdis1 p{
    font-size: 12px;
}

}

@media (max-width: 490px) {
    .text-content h1 {
      font-size: 2.1rem;
    }
    .text-content p {
      font-size: 0.8rem;
      top: -0.1rem;
      position: relative;
    }
    

}
@media screen and (max-width: 450px){

    .commenthead h1,.middlebody h1,.imgwithdis1 h1,.custormer_reviews h1,.brands h1{
        font-size: 22px;
    }
    .open-button {
        padding: 4px 10px;
      }
      
    .commentsp p{
        text-align: justify;
        font-size: 17px;
    }
    .imgwithdis1 p{
        font-size: 15px;
        bottom: 2rem;
        position: relative;
    }
    .vehicallogo img{
        width: 16%;    
        padding: 10px 10px;
        position: relative;
   }
   .imgwithdis1 b{
    font-size: 16px;
}

.imgwithdis1 p{
    font-size: 8px;
}

.text-content h1 {
    font-size: 2.1rem;
  }
  .text-content p {
    font-size: 0.6rem;
    top: -0.1rem;
    position: relative;
  }
  
 #phonenumber1{
            display: initial;
            left: -7%;
            position: relative;
        }

}

@media (max-width: 300px) {
    .text-content h1 {
      font-size: 1.7rem;
    }
    .text-content p {
      font-size: 0.5rem;
      top: -0.1rem;
      position: relative;
    }
    

}