/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap');

/* Asterisk Wildcard Selector to override default styles added by browser*/
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

/* General page styles */

    body {
        /* Use flexbox to create a full-height layout */
        min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
        display: flex;
        flex-direction: column;
        /* General font styles */
        font-family: 'Ysabeau Office', sans-serif;
        color: #3a3a3a;
    }

    .center-text-us {
        /* Center text in the main content */
        text-align: center; /* Center text */
        font-size: 1.2em;
        margin: 1rem; /* Add margin around centered text */
        margin-top: 8.5rem;
    }

    #center-text-us {
        /* Center text in the main content */
        text-align: center; /* Center text */
        font-size: 1.2em;
        margin: 1rem; /* Add margin around centered text */
        margin-top: 2.5rem;
    }

    .capitalize-text {
        /* Capitalize text */
        text-transform: capitalize; /* Capitalize text */
    }

    .enlarge-text {
        /* Enlarge text */
        font-size: 2.5rem; /* Increase font size */
        font-weight: bold; /* Make text bold */
    }

    .heading-color {
        /* Heading color */
        color: #000080; /* Dark blue color for headings */
    }

    .page-header-color {
    /* Style for the background color at the top of each page */
    background-color: #f0f0f0; /* Light background color for contrast */
    width: 100%; /* Full width for background color section */
    height: 200px; /* Full height for background color section */
}

/* Header styles */

header {
    /* look for background image to use here */
    background-color: #ffffff;
    padding: 0 1rem; /* Add padding to the header */
    position: fixed; /* Fix the header to the top of the viewport */
    z-index: 100;
    width: 100%;
    box-shadow: 0 2px 4px #000080; /* Add shadow for header */
    display:flex; 
    justify-content: space-between; /* Space between logo and menu */
    align-items: baseline; /* Center items vertically */
}

header a {
    /* Style links in the header */
    color: #3a3a3a;
    text-decoration: none;
    font-weight: 500;
    margin-right: 1rem; /* Add space between links */
}

#logo {
    /* Center the logo horizontally */
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    color: #000080;
    letter-spacing: 1px;
}

#menu {
    /* Style list items in the menu */
    list-style: none; /* Remove default list styling */
    letter-spacing: 2px;
    font-size: 110%;
}

#menu li {
    margin-bottom: 10px;
}

.menu-toggle-label {
    font-size: 2rem; /* Increase font size for the menu toggle */
}

.active {
    /* Style for active links */
    color: #000080; /* Tomato color for active link */
    font-weight: bold;
    border-bottom: 2px solid black; /* Underline effect */
}

/* Navigation dropdown styles */

nav {
    position: absolute; /* Position relative for dropdown */
    background-color: #ffffff; /* Background color for dropdown */
    width: 100%; /* Full width for dropdown */
    padding: 0 1rem; /* Add padding to the dropdown */
    display: none; /* Hide dropdown by default */
    top: 100%;
    left: 0; /* Align dropdown to the left */
    box-shadow: 0 2px 4px #000080; /* Add shadow for dropdown */
}

/* Nav-toggle styles */

#menu-toggle:checked~nav {
    display: block; /* Show dropdown when toggle is checked */
}

#menu-toggle {
    display: none; /* Hide the checkbox input */
}

/* Main content styles */
main {
    /* Make main element take up any surplus space and push footer down*/
    flex: 1 0 auto;
    margin-top: 47px; /* Offset for fixed header */
}

.welcome-text {
    /* Style for welcome text */
    font-family: 'Raleway', sans-serif;
    font-size: 2rem; /* Font size for welcome text */
    color: #f0f0f0; /* Use a white for welcome text */
    margin: 1rem; /* Add margin around welcome text */
    text-align: center; /* Center the welcome text */
    text-transform: uppercase; /* Transform text to uppercase */
    margin-top: 0px; /* Add top margin for spacing */
    position: relative; /* Position relative for welcome text */
}

#welcome-section {
    /* Style for welcome section */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 2rem; /* Add padding to the welcome section */
    background-color: rgba(0, 0, 240, 0.7); /* Light background color for contrast */
    margin-top: 20px; /* Add top margin for spacing */
    z-index: 1; /* Ensure welcome section is above other content */
    border-radius: 50px; /* Rounded corners for welcome section */
}

#welcome-section>a {
    text-decoration: none; /* Remove underline from links */
    color: #f0f0f0; /* Use a white color for links */
    font-weight: bold; /* Make links bold */
}

#welcome-section>a:hover {
    /* Style for links on hover */
    color: black; /* Text turns to black when user hovers */
    border-bottom: 2px solid #000080; /* Underline effect on hover */
}

/* Main Image Styles */

#main-image {
    width: 100%; /* Full width for header image */
    height: 400px; /* Fixed height for header image */
    background: url('../images/header-picture.jpg'); /* Background image for header */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the image */
    box-shadow: 0 2px 4px #000080; /* Add shadow for header image */
    margin-top: 0; /* Remove top margin for header image */
    z-index: -1; /* Ensure header image is behind other content */
}

.valet {
    /* Style for the main content section */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items in a column */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 2rem; /* Add padding to the main content section */
    background-color: #f0f0f0; /* Light background color for contrast */
}

/* About Us Page Styles */
#about-us {
    /* Style for the about us section */
    display: flex; /* Use flexbox for layout */
}

/* Contact us Page Styles */

#contact-us-picture {
    background-image: url(../images/contact-us-picture.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

#quote-form {
    color: #00ffff;
    background-color: rgba(60, 60, 60, 0.6);
    padding: 30px;
}

.text-input {
    background: transparent;
    color: #ffffff;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #00ffff;
    border-radius: 2px;
    padding: 0 5px;
}

option {
    color: #000000;
}

#quote-button {
    justify-items: center;
    margin-top: 10px;
    border-radius: 5px;
    padding: 15px 32px;
    font-size: 100%;
    background-color: #00ffff;
    color: #ffffff;
}

#red {
    color: red;
    margin: 15px;
}

/*Services Page Styles*/

#squeeze-me-in {
    display: flex;
}

.description {
    flex-direction: column;
    justify-items: center;
    padding: 20px 20px;
    margin: 20px 10px;
}

.background-color {
    list-style: none;
    color: #f0f0f0;
    background-color: #0000ff;
    border-radius: 10px;
}

.blue {
    color: #000080;
}

#refresh-me {
    display: flex;
}

#showroom-clean {
    display: flex;
}

/* Testimonial Page Style */

/* Footer styles */

footer {
    background-color: white;
    display: flex;
    justify-content: center; /* Center footer content */
}

div #social-icons {
    display: flex;
    justify-content: center; /* Center social icons */
    padding: 1rem; /* Add padding to the footer */
    gap: 1rem; /* Add space between social icons */
}

/* Meduia Queries for Responsive Design */

/* Responsive design for mobiles and larger screens */
@media screen and (min-width: 360px) {

    .welcome-text {
        font-size: 1.2rem; /* Adjust font size for welcome text */
        margin-top: 0; 
    }

    main {
        margin-top: 44px; /* Adjust top margin for main content */
    }

    #main-image {
        height: 300px; /* Adjust height for header image */
        display: flex; /* Use flexbox for header image */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
    }

    #valet-button {
        /* Style for the valet button */
        background-color: #000080; /* Dark blue background */
        color: white; /* White text color */
        border: none; /* Remove border */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer; /* Pointer cursor on hover */
        font-size: 1rem; /* Font size for button */
        text-transform: capitalize; /* Capitalize button text */
        display: block; /* Make button a block element */
        margin: 0 auto; /* Center the button horizontally */
        text-decoration: none;
    }

    #valet-button:hover {
        /* Style for valet button on hover */
        background-color: #0000ff; /* Lighter blue on hover */
        color: white; /* Keep text color white */
    }

    .valet {
        /* Style for the main content section */
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Arrange items in a column */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        padding: 2rem; /* Add padding to the main content section */
        background-color: #f0f0f0; /* Light background color for contrast */
}

    #lifestyles {
        display: flex; /* Use flexbox for layout */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: center; /* Center items horizontally */
        gap: 20px; /* Add space between items */
        margin-top: 20px; /* Add top margin for reasons section */
}

    #foam-picture {
        width: 300px; /* Full width for foam picture */
        height: 300px; /* Fixed height for foam picture */
        background: url('../images/foam-picture-1.jpg'); /* Background image for foam */
        background-size: cover; /* Cover the entire area */
        background-position: center; /* Center the image */
        box-shadow: 0 2px 4px #000080; /* Add shadow for foam picture */
        border-radius: 50%; /* Make the foam picture circular */
        margin: 20px; /* Add top margin for foam picture */
}

    .one-two li, .three-four li {
        /* Style for list items in the main content */
        width: 100%; /* Full width for list items */
        text-align: center; /* Center text in list items */
        font-size: 1.2rem; /* Font size for list items */
        margin-bottom: 10px; /* Add space between list items */
        list-style: none; /* Remove default list styling */
    }

    .center-text {
        /* Center text in the main content */
        text-align: center; /* Center text */
        /*margin: 1rem; /* Add margin around centered text */
        margin-top: 2.5rem;
    }

    #beginning {
        display: flex;
        position: relative;
        height: 240px;
    }

    .container {
        width: 60%;
        zoom: 60%;
    }

    #first {
        position: absolute;
        width: 75%;
        height: 250px;
        background-color: #0000ff;
        border-radius: 50px;
        text-size-adjust: 80%;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(10px,10px);
        padding: 20px;
    }

    #ste-john {
        position: relative;
        background-image: url(../images/ste-and-john.jpg);
        background-position: 50% 10%;
        background-repeat: no-repeat;
        Height: 400px;
        transform: translate(380px,10px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #present {
        display: flex;
        position: relative;
        height: 210px;
    }
    
    #second {
        position: absolute;
        width: 75%;
        height: 220px;
        background-color: #0000ff;
        border-radius: 50px;
        text-size-adjust: 80%;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(10px,10px);
        left: 70px;
        padding: 20px;
    }

    #car-image {
        position: relative;
        background-image: url(../images/foam-picture-2.jpg);
        background-repeat: no-repeat;
        background-position: 30% 65%;
        Height: 400px;
        transform: translate(10px,0px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #future {
        display: flex;
        position: relative;
        height: 350px;
    }

    #thrid {
        position: absolute;
        width: 75%;
        height: 220px;
        background-color: #0000ff;
        border-radius: 50px;
        text-size-adjust: 80%;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(10px,10px);
        padding: 20px;
    }

    #twocars-image {
        position: relative;
        background-image: url(../images/2-cars.jpg);
        background-repeat: no-repeat;
        background-position: 55% 50%;
        Height: 400px;
        transform: translate(380px,10px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #contact-us-picture {
        background-image: url(../images/contact-us-picture.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 55%;
        width: 100%;
        height: 1000px;
    }

    #quote-form {
        display: flex;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        max-width: 400px;
        height: 850px;
    }

    #quote-form>h2 {
        margin-bottom: 30px;
    }

    /* Testimonial Page Styles */

    .container-one {
        padding: 20px;
        width: 75%;
        height: 420px;
    }

    #tesla-testimonial {
        background-image: url(../images/tesla-testimonial.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 50px;
        width: 100%;
        height: 400px;
        box-shadow: 0 2px 4px #0000ff;
    }

    #volvo-testimonial {
        background-image: url(../images/volvo-testimonial.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 60%;
        border-radius: 50px;
        width: 100%;
        height: 400px;
        box-shadow: 0 2px 4px #0000ff;
    }

    .testimonial-text {
        color: #f0f0f0;
        background-color: #000080;
        border-radius: 50px;
        padding: 20px;
        margin-top: 10px;
        width: 90%;
        justify-self: center;
        margin-bottom: 20px;
    }
}

/* Responsive design for tablets and larger screens */
@media screen and (min-width: 768px) {
    /* Header */
    nav {
        display: inline-block;
        position : relative; 
        width: fit-content; 
        padding-right: 1rem; /* Add padding to the right */
        box-shadow: none; /* Remove shadow for larger screens */
        margin: auto; /* Center the nav */
    }

    #menu {
        display: flex; /* Use flexbox for horizontal layout */
        flex-direction: row; /* Arrange items in a row */
        align-items: center; /* Center items vertically */
    }

    .menu-toggle-label {
        display: none; /* Hide the menu toggle label on larger screens */
    }

    main {
        margin-top: 75px; /* Remove top margin for main content */
    }

    #logo {
        font-size: 1.8rem; /* Increase logo font size */
        line-height: 75px; /* Adjust line height for better spacing */
    }

    #foam-picture {
        width: 300px; /* Full width for foam picture */
        height: 300px; /* Fixed height for foam picture */
        background: url('../images/foam-picture-1.jpg'); /* Background image for foam */
        background-size: cover; /* Cover the entire area */
        background-position: center; /* Center the image */
        box-shadow: 0 2px 4px #000080; /* Add shadow for foam picture */
        margin: 20px; /* Add top margin for foam picture */
    }

    .center-text {
        /* Center text in the main content */
        text-align: center; /* Center text */
        margin: 1rem; /* Add margin around centered text */
        margin-top: 4.5rem;
    }

     #beginning {
        display: flex;
        position: relative;
        height: 130px;
    }

    .container {
        width: 60%;
        zoom: 60%;
    }

    #first {
        position: absolute;
        width: 75%;
        height: 130px;
        background-color: #0000ff;
        border-radius: 50px;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(10px,10px);
    }

    #ste-john {
        position: relative;
        background-image: url(../images/ste-and-john.jpg);
        background-position: 50% 10%;
        background-repeat: no-repeat;
        Height: 400px;
        transform: translate(820px,10px);
        zoom: 60%;
        z-index: -1;
        border-radius: 50px;
        box-shadow: 0 2px 4px #000080;
    }

    #present {
        display: flex;
        position: relative;
        height: 120px;
    }
    
    #second {
        position: absolute;
        width: 75%;
        height: 120px;
        background-color: #0000ff;
        border-radius: 50px;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(120px,10px);
        left: 70px;
    }

    #car-image {
        position: relative;
        background-image: url(../images/foam-picture-2.jpg);
        background-repeat: no-repeat;
        background-position: 30% 65%;
        Height: 400px;
        transform: translate(10px,0px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #future {
        display: flex;
        position: relative;
        height: 250px;
    }

    #thrid {
        position: absolute;
        width: 75%;
        height: 130px;
        background-color: #0000ff;
        border-radius: 50px;
        text-size-adjust: 80%;
        color: #f0f0f0;
        margin-top: 100px;
        transform: translate(10px,10px);
    }

    #twocars-image {
        position: relative;
        background-image: url(../images/2-cars.jpg);
        background-repeat: no-repeat;
        background-position: 55% 50%;
        Height: 400px;
        transform: translate(820px,10px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #contact-us-picture {
        background-image: url(../images/contact-us-picture.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 55%;
        width: 100%;
        height: 100vh;
    }

    #quote-form {
        display: flex;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 40px 40px;
        max-width: 400px;
        height: 800px;
        position: relative;
        left: 350px; /* Adjust position for better alignment */
    }

    #squeeze-list {
        background-image: url(../images/squeeze-me-in.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50px;
        width: 400px;
        height: 400px;
        flex: 1 0 auto;
        order: 0;
    }

    #refresh-list {
        background-image: url(../images/refresh-me.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50px;
        width: 400px;
        height: 400px;
        flex: 1 0 auto;
        order: 1;
    }

    #showroom-list {
        background-image: url(../images/showroom-clean.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50px;
        width: 400px;
        height: 400px;
        flex: 1 0 auto;
    }

    #tesla-testimonial {
        background-position-y: 60%;
    }
}

/* Responsive design for laptops and larger screens */
@media screen and (min-width: 992px) {
    /* Header */
     nav {
        display: inline-block;
        position : relative; 
        width: fit-content; 
        padding-right: 1rem; /* Add padding to the right */
        box-shadow: none; /* Remove shadow for larger screens */
    } 

    main {
        margin-top: 75px; /* Remove top margin for main content */
    }

    #logo {
        font-size: 2.5rem; /* Increase logo font size */
        line-height: 75px; /* Adjust line height for better spacing */
        margin: 0 0.5rem;
    }

    #menu a:hover {
        /* Style for links on hover */
        color: #000080; 
        border-bottom: 2px solid black; /* Underline effect on hover */
    }

    .valet {
        /* Style for the main content section */
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Arrange items in a column */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        padding: 2rem; /* Add padding to the main content section */
        background-color: #f0f0f0; /* Light background color for contrast */
    }

    #lifestyles {
        display: flex; /* Use flexbox for layout */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: center; /* Center items horizontally */
        gap: 20px; /* Add space between items */
        margin-top: 20px; /* Add top margin for reasons section */
    }

    #foam-picture {
        width: 300px; /* Full width for foam picture */
        height: 300px; /* Fixed height for foam picture */
        background: url('../images/foam-picture-1.jpg'); /* Background image for foam */
        background-size: cover; /* Cover the entire area */
        background-position: center; /* Center the image */
        box-shadow: 0 2px 4px #000080; /* Add shadow for foam picture */
        margin: 20px; /* Add top margin for foam picture */
        order: 2;
    }   

    .one-two {
        order: 1; /* Order for the first item */
    }

    .three-four {
        order: 3; /* Order for the third item */
    }
    
     #beginning {
        display: flex;
        position: relative;
        height: 200px;
    }

    .container {
        width: 60%;
        zoom: 60%;
    }

    #first {
        position: absolute;
        width: 75%;
        height: 120px;
        background-color: #0000ff;
        border-radius: 50px;
        color: #f0f0f0;
        margin-top: 180px;
        transform: translate(10px,10px);
    }

    #ste-john {
        position: relative;
        background-image: url(../images/ste-and-john.jpg);
        background-position: 50% 10%;
        background-repeat: no-repeat;
        Height: 600px;
        transform: translate(1660px,10px);
        zoom: 60%;
        z-index: -1;
        border-radius: 50px;
        box-shadow: 0 2px 4px #000080;
    }

    #present {
        display: flex;
        position: relative;
        height: 200px;
    }
    
    #second {
        position: absolute;
        width: 75%;
        height: 120px;
        background-color: #0000ff;
        border-radius: 50px;
        color: #f0f0f0;
        margin-top: 180px;
        transform: translate(300px,10px);
        left: 70px;
    }

    #car-image {
        position: relative;
        background-image: url(../images/foam-picture-2.jpg);
        background-repeat: no-repeat;
        background-position: 30% 65%;
        Height: 600px;
        transform: translate(10px,0px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #future {
        display: flex;
        position: relative;
        height: 340px;
    }

    #thrid {
        position: absolute;
        width: 75%;
        height: 110px;
        background-color: #0000ff;
        border-radius: 50px;
        text-size-adjust: 80%;
        color: #f0f0f0;
        margin-top: 180px;
        transform: translate(10px,10px);
    }

    #twocars-image {
        position: relative;
        background-image: url(../images/2-cars.jpg);
        background-repeat: no-repeat;
        background-position: 55% 50%;
        Height: 600px;
        transform: translate(1660px,10px);
        zoom: 60%;
        border-radius: 50px;
        z-index: -1;
        box-shadow: 0 2px 4px #000080;
    }

    #contact-us-picture {
        background-image: url(../images/contact-us-picture.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 55%;
        width: 100%;
        height: 1000px;
    }   
    
    #quote-form {
        display: flex;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        max-width: 400px;
        height: 900px;
        left: 1000px; /* Adjust position for better alignment */
    }

    .container-one {
        height: 800px;
    }

    #tesla-testimonial {
        height: 750px;
    }

    #volvo-testimonial {
        height: 750px;
    }
}

/* Responsive design for desktops and larger screens */
@media screen and (min-width: 1280px) {   
}