/* This is the CSS file for styling the Car Showcase website. */

/* General body styling */
body {
    font-family: Arial, sans-serif; /* Sets a common, readable font for the entire page. */
    margin: 0; /* Removes default browser margins. */
    padding: 0; /* Removes default browser padding. */
    background-color: #f4f4f4; /* Sets a light gray background color for the page. */
    color: #333; /* Sets the default text color to a dark gray. */
    line-height: 1.6; /* Improves readability by setting space between lines of text. */
}

/* Header styling */
header {
    background-color: #333; /* Dark background for the header. */
    color: #fff; /* White text color for the header. */
    padding: 1rem 0; /* Adds padding above and below the header content. */
    text-align: center; /* Centers the text within the header. */
}

header h1 {
    margin: 0; /* Removes default margin for the h1 element. */
    font-size: 2.5rem; /* Sets the size of the main title. */
}

/* Navigation styling */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
}

nav ul li a:hover {
    text-decoration: underline;
}

/* Main content area styling */
main {
    padding: 1rem; /* Adds padding around the main content. */
    max-width: 1200px; /* Sets a maximum width for the main content, helps with layout on large screens. */
    margin: 0 auto; /* Centers the main content block on the page. */
}

/* Home Introduction Section Styling */
.home-intro-section {
    padding: 2rem 1rem;
    background-color: #fff; /* White background for the home intro section. */
    margin-bottom: 2rem; /* Adds space below the intro section. */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}

.home-intro-section h2 {
    color: #333;
    margin-bottom: 1rem;
}

.home-intro-section p {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Car gallery section styling */
.car-gallery {
    padding: 1rem;
    background-color: #fff; /* White background for the car gallery section. */
    margin-bottom: 1rem; /* Adds space below the gallery. */
    border-radius: 8px; /* Adds rounded corners to the gallery section. */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Adds a subtle shadow for a lifting effect. */
}

.car-gallery h2 {
    text-align: center; /* Centers the 'Featured Cars' title. */
    color: #333;
    margin-bottom: 1.5rem; /* Adds space below the title. */
}

/* Container for car items, using flexbox for layout */
.car-container {
    display: flex; /* Enables flexbox layout. */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens. */
    gap: 1rem; /* Adds space between car items. */
    justify-content: center; /* Centers car items if there's extra space. */
}

/* Individual car item styling */
.car-item {
    background-color: #f9f9f9; /* Light background for each car item. */
    border: 1px solid #ddd; /* Adds a light border around each item. */
    border-radius: 8px; /* Rounded corners for car items. */
    padding: 1rem; /* Padding inside each car item. */
    width: calc(33.333% - 2rem); /* Tries to fit 3 items per row, accounting for gap and padding. */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height. */
    text-align: center; /* Centers the content within each car item. */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Adds a very subtle shadow to car items. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for hover animation */
}

.car-item:hover {
    transform: translateY(-5px); /* Moves the item up slightly on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Enhances shadow on hover */
}

.car-item img {
    max-width: 100%; /* Ensures images are responsive and don't overflow their container. */
    height: auto; /* Maintains aspect ratio of images. */
    border-radius: 4px; /* Slightly rounded corners for images. */
    margin-bottom: 0.5rem; /* Space below the image. */
}

.car-item h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; /* Space below the car title. */
    color: #555; /* Darker gray for car titles. */
}

.car-item p {
    font-size: 0.9rem; /* Slightly smaller font for car descriptions. */
    color: #666; /* Medium gray for description text. */
}

/* Creators Section Styling */
.creators-section {
    padding: 2rem 1rem;
    background-color: #fff; /* White background for the creators section. */
    margin-top: 2rem; /* Adds space above the creators section. */
    margin-bottom: 2rem; /* Adds space below the creators section. */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.creators-section h2 {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
}

.creator-profile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.creator-profile {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    width: calc(50% - 3rem); /* Two profiles per row, accounting for gap and padding */
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for hover animation */
}

.creator-profile:hover {
    transform: translateY(-5px); /* Moves the item up slightly on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Enhances shadow on hover */
}

.creator-profile img {
    width: 120px; /* Fixed width for profile images */
    height: 120px; /* Fixed height for profile images */
    border-radius: 50%; /* Circular profile images */
    margin-bottom: 1rem;
    object-fit: cover; /* Ensures images cover the area without distortion */
}

.creator-profile h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #555;
}

.creator-profile p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

.instructor-credit {
    text-align: center;
    font-size: 1rem;
    color: #444;
    margin-top: 1rem;
}

/* Interaction section styling */
.interaction-section {
    text-align: center; /* Centers the button. */
    padding: 1rem;
    margin-top: 1rem;
}

.interaction-section button {
    background-color: #5cb85c; /* Green background for the button. */
    color: white; /* White text for the button. */
    border: none; /* Removes default button border. */
    padding: 10px 20px; /* Padding inside the button. */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px; /* Rounded corners for the button. */
    cursor: pointer; /* Changes cursor to a pointer on hover. */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect. */
}

.interaction-section button:hover {
    background-color: #4cae4c; /* Darker green on hover. */
}

/* Contact Section Styling */
.contact-section {
    padding: 2rem 1rem;
    background-color: #e9e9e9;
    margin-top: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.contact-section h2 {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
}

.contact-section form div {
    margin-bottom: 1rem;
}

.contact-section label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-section textarea {
    resize: vertical;
}

.contact-section button[type="submit"] {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-section button[type="submit"]:hover {
    background-color: #555;
}

/* Footer styling */
footer {
    text-align: center; /* Centers the footer text. */
    padding: 1rem 0; /* Adds padding above and below the footer content. */
    background-color: #333; /* Dark background for the footer. */
    color: #fff; /* White text color for the footer. */
    margin-top: 2rem; /* Adds space above the footer. */
}

footer p {
    margin: 0.25rem 0; /* Adds small vertical margin to paragraph elements in the footer. */
    font-size: 0.9rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .car-item {
        width: calc(50% - 1.5rem); /* Two items per row on medium screens. */
    }
    .creator-profile {
        width: calc(100% - 2rem); /* One profile per row on medium screens */
    }
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }
    nav ul li:last-child {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2rem; /* Smaller title on small screens. */
    }
    .car-item {
        width: calc(100% - 1rem); /* One item per row on very small screens. */
    }
    .creator-profile {
        width: calc(100% - 1rem); /* Ensure full width on very small screens */
    }
}