body { font-family: Arial, sans-serif; background-color: #1a1a1a; /* Dark background similar to the image */ color: #e0e0e0; /* Light text color */ margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Ensure the body takes full viewport height */ } .container { display: flex; /* Use flexbox for side-by-side layout */ max-width: 1200px; /* Max width for the entire container */ background-color: #000; /* Black background for the container */ border-radius: 8px; overflow: hidden; /* Ensures content stays within rounded corners */ } .image-section { flex: 1; /* Allows the image section to grow and take available space */ padding: 20px; display: flex; justify-content: center; align-items: center; background-color: #0d0d0d; /* Slightly lighter black for the image section */ } .image-section img { max-width: 100%; /* Make sure the image fits within its container */ height: auto; /* Maintain aspect ratio */ display: block; /* Remove extra space below image */ border-radius: 4px; /* Optional: slight border-radius for the image itself */ } .description-section { flex: 1.5; /* Allows the description section to take more space, adjust as needed */ padding: 40px; display: flex; flex-direction: column; /* Stack features vertically */ gap: 30px; /* Space between each feature block */ } .feature { display: flex; align-items: flex-start; /* Align icon and text to the top */ gap: 20px; /* Space between icon and text */ } .feature .icon { font-size: 2.5em; /* Size of the icon */ color: #888; /* Icon color */ min-width: 40px; /* Ensure icon has a minimum width */ text-align: center; } .feature h3 { margin: 0; font-size: 1.4em; color: #f0f0f0; } .feature p { margin: 0; font-size: 0.95em; line-height: 1.6; color: #b0b0b0; } /* Optional: Font Awesome for icons */ /* You'll need to include the Font Awesome library in your HTML for icons to work */ /* Add this line in the of your HTML: */ /* */