/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby,
section, summary, time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline; 
}
/* body */
body{
    background-color: #101010;
}

/* header img section */
#header{
    display: flex;
    position: relative;
    width: 100%;
    height: 25vw;
}

#header_img{
    min-width: 100%;
}

#header_welcome_div{
    position: absolute;
    bottom: 25%;
    right :10%;
}

/* main section */
#main{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
}

form{
    display: flex;
    flex-direction: column;
}

.h{
    display: flex;
}

.button_div{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 3rem;
}

/* vehicle option section */
#vehicle_options{
    background-color: #272727;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

#grid-container{
    display: grid;
    height: 100%;
    grid-template-rows: repeat(2, autopx);
    grid-template-columns: repeat(2, auto);
    gap: 2.5rem 5rem;
    margin: 1rem 0 2rem 0;
}

#car_container {
    margin-top: 2rem;
}

.grid_div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    transition: 0.5s ease-in-out;
}

.car_details{
    display: flex;
    justify-content: space-between;
}

.car_img{
    background-color: #fff;
    border-radius: 1rem;
    width: 100%;
    height: auto;
}

/* font_styles */
h1{
    font-family: 'Open Sans', sans-serif;
    font-size: 4vw;
    color: #fff;
    font-weight: 600;
}

h2{
    font-family: 'Open Sans', sans-serif;
    font-size: 3rem;
    color: #D0FF6B;
    font-weight: 500;
    text-align: center;
}
h3, h4, h5, label, input, button{
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 500;
    margin-top: 1rem;
}

#to{
    margin-left: 1rem;
}

h5{
    font-weight: 400;
}

input{
    color: black;
    font-weight: 400;
    width: 15rem;
    border-radius: 2pt;
    border: none;
    padding: .2rem;
}

button{
    color: #fff;
    background-color: #272727;
    border-radius: 2pt;
    border: solid .25rem #D0FF6B;
    width: 12rem;
}

#secondDate{
    margin-left: 1rem ;
}

h4{
    font-weight: 700;
}

/* hidden */
.hidden{
    display: none;
    transition: 0.5s ease-in-out;
}