/* Adjusting background */


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper{
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 5px;
   
}


/* For smooth scrolling */

html {
  scroll-behavior: smooth;
} 


/* Necessary font*/


@font-face {
  font-family: 'qualy'; 
  src: url('assets/qualy.ttf') format('truetype'); 
  font-style: normal;
}


@font-face {
  font-family: 'galderglynn_titling_rg'; 
  src: url('assets/galderglynn_titling_rg.otf') format('truetype'); 
  font-style: normal;
}



@font-face {
  font-family: 'galderglynn_titling_el.otf'; 
  src: url('assets/galderglynn_titling_el.otf') format('truetype'); 
  font-style: normal;
}






/*Top menu bar */


p.home {
  position: fixed;
  top: 10px;
  left: 1%; 
  padding: 5px 15px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-family: 'qualy';
  font-size: 1rem;
  border: 2px solid rgb(41, 66, 47);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}


p.home:hover {
  
  color: rgb(192, 224, 195);
  border-color: rgb(192, 224, 195);
}




p.collection {
  position: fixed;
  top: 10px;
  left: 20%; 
  padding: 5px 15px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-family: 'qualy';
  font-size: 1rem;
  border: 2px solid rgb(41, 66, 47);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}


p.collection:hover {
  
  color: rgb(192, 224, 195);
  border-color: rgb(192, 224, 195);
}




p.discover{
  position: fixed;
  top: 10px;
  left: 45%; 
  padding: 5px 15px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-family: 'qualy';
  font-size: 1rem;
  border: 2px solid rgb(41, 66, 47);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}


p.discover:hover {
  
  color: rgb(192, 224, 195);
  border-color: rgb(192, 224, 195);
}





p.about {
  position: fixed;
  top: 10px;
  right: 20%; 
  padding: 5px 15px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-family: 'qualy';
  font-size: 1rem;
  border: 2px solid rgb(41, 66, 47);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}


p.about:hover {
  
  color: rgb(192, 224, 195);
  border-color: rgb(192, 224, 195);
}


p.sign {
  position: fixed;
  top: 10px;
  right: 1%; 
  padding: 5px 15px;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-family: 'qualy';
  font-size: 1rem;
  border: 2px solid rgb(41, 66, 47);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}


p.sign:hover {
  
  color: rgb(192, 224, 195);
  border-color: rgb(192, 224, 195);
}
 



/* Company or Shop title */

.name {
  position: absolute;
  bottom: 5rem;
  left: 3rem;
  font-size: 4rem;
  font-family: 'qualy';
  letter-spacing: 4px;
  color: rgb(220, 236, 223);
}

.name::after {
  content: ""; 
  display: block;
  width: 100%;
  height: 3px;
  background-color: #749776;
  transform-origin: center center;
  transform: scaleX(0);
  transition: 0.3s ease;
  margin-top: 10px;
}

.name:hover::after {
  transform: scaleX(1); 
}





/* Background color of collection section*/

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



/* car collection card*/

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(5. 1fr); 
  width: 100vw; 
  height: 100vh;
  gap: 20px; 
  margin-top: 2%;
  margin-bottom: 90%;
  padding: auto; 
  padding-left: 2.5%;
  box-sizing: border-box;
}




/* Supra */


.box1 {
  background-color: rgb(255, 255, 255);  
  display: flex;
  justify-content: center; 
  align-items: center; 
  border-radius: 35px; 
  width: 850px;
  height: 500px;
  transition:0.3s ease-in-out;
  border: 5px solid rgb(0, 0, 0);
  text-align: center;
 
}

.box1:hover {
  transform: scale(1.05);
  box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 

}



.car-image1 {
  position: relative; 
  left: 30px; 
  top: 10px; 
  width: 850px; 
  height: auto; 
}





.car-info1 {
  padding: 20px;
  margin-bottom: 30px;
}

.car-name1 {
  font-size: 2rem;
  font-family: 'galderglynn_titling_rg';
  letter-spacing: 15px;
  color: #000000;
}

.car-price1 {
  font-family: 'galderglynn_titling_el.otf';
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 1.2rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 10px;
}




  

    /* Button for all card */

    .btn {
 
      background-color: #000000; 
      color: #f7f7f7;
      font-size: 1rem;
      font-weight: bold;
      padding: 5px 30px;
      border: 2px solid rgb(0, 0, 0);
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s ease;
    
      }
      
      .btn:hover { 
      color: rgb(0, 0, 0);
      border-color: rgb(0, 0, 0);
      background-color: rgb(255, 255, 255);
      }

      .btn_link{
        text-decoration: none;
        color: inherit;
          }
      

/* BMW */


.box2 {
  background-color: rgb(255, 255, 255);  
  display: flex;
  justify-content: center; 
  align-items: center; 
  border-radius: 35px; 
  width: 850px;
  height: 500px;
  transition:0.3s ease-in-out;
  border: 5px solid rgb(0, 0, 0);
  text-align: center;
 
}

.box2:hover {
  transform: scale(1.05);
  box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 

}





.car-image2 {
  position: relative; 
  left: 0px; 
  top: 0px; 
  width: 500px; 
  height: auto; 
}

.car-info2 {
  padding: 0px;
  margin-bottom: 50px;
 

}


.car-name2 {
  font-size: 2rem;
  font-family: 'galderglynn_titling_rg';
  letter-spacing: 15px;
  color: #000000;
}

.car-price2 {
  font-family: 'galderglynn_titling_el.otf';
  letter-spacing: 1px;
  font-size: 1.2rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 10px;
}






    /* Ferrari */

.box3 {
  background-color: rgb(255, 255, 255);  
  display: flex;
  justify-content: center; 
  align-items: center; 
  border-radius: 35px; 
  width: 850px;
  height: 500px;
  transition:0.3s ease-in-out;
  border: 5px solid rgb(0, 0, 0);
  text-align: center;
 
}

.box3:hover {
  transform: scale(1.05);
  box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 

}




.car-image3 {
  position: relative; 
  left: 0px; 
  top: 0px; 
  width: 900px; 
  height: auto; 
}

.car-info3 {
  padding: 20px;
  margin-bottom: 50px;
}


.car-name3 {
  font-size: 2rem;
  font-family: 'galderglynn_titling_rg';
  letter-spacing: 15px;
  color: #000000;
}

.car-price3 {
  font-family: 'galderglynn_titling_el.otf';
  letter-spacing: 1px;
  word-spacing: 1px;
  font-size: 1.2rem;
  color: #000000;
  font-weight: bold;
  margin-bottom: 10px;
}




    /* Tesla*/

    .box4 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box4:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
    
    
.car-image4 {
  position: relative; 
  left: 0px; 
  top: 0px; 
  width: 450px; 
  height: auto; 
}

.car-info4 {
  padding: 15px;
  margin-bottom: 10px;
}

    
    .car-name4 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price4 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }

    
    
    
    



    /* Nissas gtr */

    .box5 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box5:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
    .car-image5 {
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: 550px; 
      height: auto; 
    }
    
    .car-info5 {
      padding: 0px;
      margin-top: 5px;
    }

    
    .car-name5 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price5 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }

   
    




    /* Bugatti */

    .box6 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box6:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
    .car-image6 {
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: 550px; 
      height: auto; 
    }
    
    .car-info6 {
      padding: 0px;
      margin-bottom: 0px;
    }


    
    .car-name6 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price6 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
   


    /*Ford */

    .box7 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box7:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
    .car-image7 {
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: 500px; 
      height: auto; 
    }
    
    
  .car-info7 {
  padding: 0px;
  margin-bottom: 45px;
}
    
    .car-name7 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price7 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }


  
   /* Mercedes */
    .box8 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box8:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
    
    .car-image8 {
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: 550px; 
      height: auto; 
    }
    
    .car-info8 {
      padding: 0px;
      margin-top: 10px;
    }


    
    .car-name8 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price8 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }






    /* Audi */


    .box9 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition: transform 0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box9:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    
        
    .car-image9 {
      position: relative; 
      left: 0px; 
      top: 20px; 
      width:  510px; 
      height: auto; 
    }

    .car-info9 {
      padding: 10px;
      margin-bottom: 50px;


    }

    
    .car-name9 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price9 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }


    /* Honda */

    .box10 {
      background-color: rgb(255, 255, 255);  
      display: flex;
      justify-content: center; 
      align-items: center; 
      border-radius: 35px; 
      width: 850px;
      height: 500px;
      transition:0.3s ease-in-out;
      border: 5px solid rgb(0, 0, 0);
      text-align: center;
     
    }
    
    .box10:hover {
      transform: scale(1.05);
      box-shadow: 10px 20px 30px rgba(0, 0, 0, .5); 
    
    }
    
    

    .car-image10 {
      position: relative; 
      left: 0px; 
      top: 0px; 
      width: 530px; 
      height: auto; 
    }
    
    .car-info10 {
      padding: 0px;
      margin-bottom: 50px;
     
    
    }
    
    
    .car-name10 {
      font-size: 2rem;
      font-family: 'galderglynn_titling_rg';
      letter-spacing: 15px;
      color: #000000;
    }
    
    .car-price10 {
      font-family: 'galderglynn_titling_el.otf';
      letter-spacing: 1px;
      word-spacing: 1px;
      font-size: 1.2rem;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }



    /* End line or footer */


    footer {
      background-color: #000000;
      position: relative; 
      color: #ffffff;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 30px;
    }


.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}



h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
}



 ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin: 15px 0;
}

 ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

ul li a:hover {
  color: #fff;
}


footer h5 {
  position: absolute;
  bottom: 40px; 
  left: 46%;
  color: rgb(220, 236, 223); 
  font-size: 20px;
}

/* ---------------------------------END---------------------------------- */