*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
/* navigation bar */
.navi{
    background-color: black;
    width: 100%;
}
.name{
    color: aliceblue;
    font-weight: 350;
    padding-left: 30px;
}
.name:hover{
   /* text-decoration: underline; */
   color: rgb(128, 129, 131);
}
.navbar-nav li{
    padding-left:20px ;
    padding-right: 50px;
}
.btn{
    background-color: rgb(179, 176, 9); 
}
#icon{
    font-size: 20px; 
    color: aliceblue;
}

#icon:hover{
    font-size: 20px; 
    color: rgb(90, 78, 78);
}
/*  */

.mid{
    width: 100%;
    height: 2300px;
    margin-top: 0;
    
    background-color: #000000;
  }
  .midrap {
    background-color: #000000;
  
  }
  .midrap h1{
    margin: auto;
    padding: 40px 80px 70px 80px;
    color: #6b89b0;
      font-size: 33px;
      text-shadow: 2px 2px 4px #000000;
      font-weight: 820;
      font-size: 38px;
  
  }
  /* Style the skewed container */
  .skewed-container {
    display: flex;
    width: 1500px;  /* Adjust width as needed */
    height: 700px;  /* Adjust height as needed */
    overflow: hidden; /* Hide overflowing content */
  }
  
  /* Style the image container */
  .image-container {
    flex: -1;  /* Image container occupies half the width */
    position: relative;
     /* Needed for skewing the image */
  }
  
  .skewed-image {
    width: 100%;
    height: 100%;
    margin-left: 0px ;
    object-fit: cover;  /* Ensure image fills container */
    transform: skewX(-18deg);
      /* Apply skew to the image */  
  }
  
  /* Style the text container */
  .text-container {
    flex: 1;  /* Text container occupies half the width */
    background-color:transparent; /* Semi-transparent black background */
    color: #fff; /* White text color */
    margin-left: 210px;
  
    padding-right: 60px;
    transform: skewX(0deg);  /* Apply skew to the text container */
  }
  
  .text-container h2 {
    /* font-size: 24px; */
    margin-bottom: 10px;
    padding-top: 10px;
    font-size: 43px;
    color: rgb(240, 24, 24);
      text-shadow: 2px 2px 4px #000000;
      font-weight: 320;
      font-size: 38px;
      
    
  }
  
  .text-container p {
    font-size: 16px;
    line-height: 1.5; 
    
  }
  /* Style the angled container */
  .angled-container {
    display: flex;
    width: 1500px;  /* Adjust width as needed */
    height: 700px; /* Adjust height as needed */
    overflow: hidden; /* Hide overflowing content */
  }
  
  /* Style the text wrapper */
  .text-wrapper {
    flex: 1;  /* Text wrapper occupies half the width */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: #fff; /* White text color */
    padding: 20px;
    margin-left: 30px;
  
    padding-right: 50px;
    transform: skewX(0deg);  /* Apply skew to the text container */
  }
  
  /* Style the heading */
  .text-wrapper h2 {
    font-size: 24px;
    margin-bottom: 10px;
    font-size: 43px;
    color: rgb(243, 220, 16);
      text-shadow: 2px 2px 4px #000000;
      font-weight: 320;
      font-size: 38px;
  }
  
  /* Style the paragraph */
  .text-wrapper p {
    font-size: 16px;
    line-height: 1.5; /* Adjust line spacing for better readability */
  }
  
  /* Style the image wrapper */
  .image-wrapper {
    flex: 3;  /* Image wrapper occupies half the width */
    position: relative; /* Needed for skewing the image */
  }
  
  .angled-image {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensure image fills container */
    transform: skewX(-15deg);  /* Apply skew to the image */
  }
  
  /*  */
  /* Style the content container */
  .a h2{
    font-size: 44px;
    margin-bottom: 20px;
    
    color: rgb(255, 255, 255);
      text-shadow: 2px 2px 4px #000000;
      font-weight: 600;
      
      margin-left: 120px;
  }
  .content-container {
    display: flex;
    width: 100%;  /* Adjust width as needed */
    margin: 0 auto;  /* Center the container horizontally */
  }
  
  /* Style the image */
  .content-image {
    width: 500px;  /* Adjust image width as needed */
    height: auto;
    object-fit: cover;  /* Ensure image fills container */
  }
  
  /* Style the text container */
  .content-text {
    flex: 1;  /* Text container occupies remaining space */
    padding: 20px;
  }
  
  /* Style the headings */
  .content-text h2 {
    font-size: 64px;
    margin-bottom: 10px;
  }
  
  .content-text h3{
    font-size: 44px;
    margin-bottom: 5px;
    color: #e8e0e0;
  }
  .content-text h4,
  .content-text h5 {
    font-size: 26px;
    margin-bottom: 5px;
    color: #e8e0e0;
  }
  
  /* Style the paragraph */
  .content-text p {
    font-size: 24px;
    line-height: 1.5;
    color: #ffffff; /* Adjust line spacing for better readability */
  }
  
  /* Apply font weight to specific heading */
  .f1 {
    font-weight: 300;
  }
  
  .f2{
    font-weight: 300;
  }
  
  body{background-color: #000;}
  /* footer */
  /* Style the footer */
  .lamborghini-footer {
    background-color: #141414;
    color: #fff;
    padding: 50px 0;
  }
  
  /* Style the container */
  .contaiiner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  /* Style the footer top section */
  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  /* Style the footer navigation */
  .footer-nav {
    width: 35%;
    margin-bottom: 30px;
  }
  
  .footer-nav__title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #7a912d;
  }
  
  .footer-nav__list {
    list-style: none;
    padding: 0;
    
    margin: 0;
  }
  
  .footer-copyright {
    text-align: center;
    /* margin-top: 20px; */
    padding-top: 12px;
    background-color: #191818;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .footer-copyright p {
    font-size: 24px;
    color: #7a912d;
    margin: 0;
  }