body {
     background-color: #000;
     /* Black background */
     color: #fff;
 }

 .banner {
     width: 100%;
     height: 100%;
     max-height: 100vh;
     background-size: cover;
     background-position: center;
 }

 .responsive-img {
     width: 100%;
     /* Make the image fill the parent container */
     height: auto;
     /* Maintain aspect ratio */
     display: block;
     /* Remove any inline spacing */
     object-fit: cover;
 }

 /* Sidebar default styles */
 .sidebar {
     position: fixed;
     top: 40px;
     left: -200px;
     /* Hidden initially */
     width: 200px;
     height: 100%;
     background-color: #111;
     padding-top: 20px;
     z-index: 1000;
     transition: left 0.3s ease-in-out;
     /* Smooth slide-in animation */

     /* Flexbox for vertical centering 
     display: flex;
     flex-direction: column;
     justify-content: center;
     Center items vertically */
 }

 .sidebar.active {
     left: 0;
     /* Slide into view */
 }

 /* When the sidebar is active, stick the button to the sidebar */
 .sidebar.active~.sidebar-toggle {
     left: 195px;
     z-index: 1000;
     /* Position next to the sidebar */
 }

 /* Sidebar Links */
 .sidebar a {
     display: block;
     color: #fff;
     padding: 10px 15px;
     text-decoration: none;
     font-size: 16px;
     text-transform: uppercase;
 }

 .sidebar a:hover {
     background-color: #444;
     color: #ff0000;
 }

 /* Sidebar download button */
 .sidebar .download-btn {
     background-color: red;
     color: white;
     font-weight: bold;
     text-align: center;
     padding: 12px;
     margin: 20px 15px;
     text-transform: uppercase;
     display: block;
     border-radius: 5px;
     text-decoration: none;
 }

 /* Toggle Button */
 .sidebar-toggle {
     position: fixed;
     top: 10px;
     left: -6px;
     background-color: #5a5959;
     color: #fff;
     border: none;
     padding: 20px 8px;
     font-size: 18px;
     cursor: pointer;
     z-index: 999;
     display: none;
     /* Default: hidden for larger screens */
 }

 /* Responsive Behavior for Smaller Screens */
 @media screen and (max-width: 1600px) {
     .sidebar {
         left: -200px;
         /* Hidden by default */
     }

     .sidebar-toggle {
         display: block;
         margin-top: 50%;
         position: fixed;
         /* Show toggle button */
     }
 }


 .content {
     margin-left: 200px;
     padding: 40px;
     display: block;
     /* Change to block */
     min-height: auto;
     /* Remove fixed height */
     box-sizing: border-box;
 }

 @media (max-width: 1600px) {
     .content {
         margin-left: 0px;
         padding: 10px;
     }
 }

 .section {
     width: 80%;
     padding: 80px 0;
     margin: 0 auto;
     transform: translateY(50px);
     transition: all 0.4s ease-out;
 }

 @media (max-width: 1600px) {
     .section {
         width: 90%;
         padding: 10px 0;
     }
 }

 .section-title {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .section-subtitle {
     font-size: 1.5rem;
     margin-bottom: 10px;
 }

 /* Image transition effect */
 .img-fluid {
     transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
 }

 h1 {
     font-size: 1.5rem;
 }

 h3 {
     font-size: 1.3rem;
     margin-top: 10px;
     font-weight: bold;
 }

 p {
     font-size: 1.15rem;
     color: #ccc;
 }

 /* For medium screens (tablets and larger smartphones) */
 @media (max-width: 768px) {
     h3 {
         font-size: 1rem;
         /* Slightly smaller font size */
     }

     p {
         font-size: 0.85rem;
         /* Adjust paragraph size */
     }
 }

 /* For small screens (mobile phones) */
 @media (max-width: 480px) {
     .section-title {
         font-size: 1.5rem;
     }

     h3 {
         font-size: 0.9rem;
         /* Smaller font size for compact screens */
         margin-top: 5px;
         /* Reduce top margin */
     }

     p {
         font-size: 0.75rem;
         /* Smaller text for readability */
     }
 }

 #color-buttons {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
     margin: 20px auto;
     text-align: center;
     max-width: 100%;
 }

 .rounded-button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     padding: 0;
     display: inline-block;
     text-align: center;
     line-height: 50px;
     position: relative;
     border: 2px solid transparent;
     /* Default border */
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
     /* Subtle shadow */
     transition: box-shadow 0.3s ease, border-color 0.3s ease;
 }

 .rounded-button.btn-dark {
     border: 1px solid #ffffff;
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
 }

 .rounded-button:hover {
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
     /* Bright glow on hover */
     border-color: #ff9900;
     /* Highlight border on hover */
 }

 #car-image {
     width: 1000px;
 }

 @media (max-width: 1600px) {
     #car-image {
         width: 800px;
     }
 }

 @media (max-width: 768px) {
     #car-image {
         width: 500px;
     }
 }

 @media (max-width: 480px) {
     #car-image {
         width: 100%;
     }

     #color-buttons {
         gap: 10px;
     }

     .rounded-button {
         width: 40px;
         height: 40px;
     }
 }

 /* 4:3 Aspect Ratio Image Container */
 .image-container {
     position: relative;
     width: 100%;
     padding-top: 75%; /* 4:3 Aspect Ratio (3/4 = 0.75 = 75%) */
     overflow: hidden;
     margin-bottom: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .feature-image {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     margin: 0 auto; /* Center horizontally */
     width: 100%;
     height: 100%;
     object-fit: cover; 
     object-position: center center; /* Explicitly center both horizontally and vertically */
 }

 /* Ensure centering on small screens */
 @media (max-width: 768px) {
     .feature-image {
         object-position: center; /* Reinforce center positioning on small screens */
     }
 }