


.height-33-container p{
    font-family: 'Roboto Slab', serif;
    color:white;
    font-size: 22px;
    text-shadow: 1px 1px 15px black;
}


#photo-section2{
    display:none;
}

.our-fleet-cover-button 
{
    background-color:var(--color1);
    opacity:0.9;
    padding:1vh;
    font-weight: bold;
}

.index-cover-title{
    color: white;
    padding:0;
    margin:2vw;
    background-color: rgba(53, 74, 95,0.9);
    border-radius:10px;
    padding:2vw;
}


.cover h2{
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

h2{
    color: white;
    padding:0;
    background-color: red;
    padding:2vh;
    margin:0;
    font-size: 1.2rem;
}


/*START Contact Form CSS*/
.contact-container{
    background:linear-gradient(var(--color3), var(--color1));
    display: flex;
    align-items: center;
    flex-direction: column;
}
/*Contact-Left side of container*/
.contact-left{
    display: flex;
    flex-direction: column;
    gap:1rem;
    align-items: center;
    
}
#get-in-touch{
    font-weight:600;
    color:var(--color2);
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.contact-left-title > hr{
    border:none;
    Width:13rem;
    height:0.2rem;
    background-color: var(--color2);
    border-radius: 0.9rem;
    margin-bottom: 1.8rem;
}

#dont-be-shy-text{
    color:var(--color2);
    padding-left:1rem;
    padding-right:1rem;
}

.contact-inputs{
    width: 80vw;
    height:4rem;
    border:none;
    outline:none;
    padding-left:2rem;
    font-weight: 500;
    color:#666;
    border-radius:3.5rem;
}

.contact-left textarea{
    height:10rem;
    padding-top:1.1rem;
    border-radius:1.8rem;
}
.contact-inputs:focus{
    border:0.2rem solid var(--color2);
}
.contact-inputs::placeholder{
    color:#a9a9a9;
}

.contact-left button{
    background-color: var(--color2); /*rgba(166, 59, 0, 0.7);*/
    box-shadow: 1px 1px 3px rgba(0,62,69,0.3);
    border-radius: 5px;
    border:2px solid rgba(53, 74, 95,0.9);
    text-decoration: none;
    font-size: 2.5vh;
    color:rgba(0,62,69,0.9);
    padding:1vh;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
    transition: 0.55s;
    opacity:0.7;
    margin:1rem;
}

/*END Left Side of Container*/
 /*Right Side of Container*/
 #paragraph-apology {
    padding: 0 2rem;
}

/*End Right side of container*/

/*END CONTACT FORM CSS*/


/*from old website css*/
.cover{
    background:url(../images/Responsive/Phone/earn_accelerated_instrumented_rating_san_diego.jpg) 50% no-repeat;
    background-size: cover!important;
}
.height-33-container p{
    font-family: 'Roboto Slab', serif;
    color:white;
    font-size: 22px;
    text-shadow: 1px 1px 15px black;
}





.index-cover-title, h1{
    margin:0;
}

#never-drive-boring{
    font-size: 2em;
    font-weight: 600;
    font-family: 'Roboto', serif;
    text-shadow: 1px 1px 5px rgba(0,62,69,0.5);
    margin:2vw;
    
}

#proximity-car-rental{
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    font-weight: 400;
    
    text-shadow: 1px 1px 5px rgba(0,62,69,0.5);
}

.cover h2{
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

#index-cover-button, #index-cover-button-2{
    padding:1.5vh 2vw;
}

#index-cover-button-2{
    color:var(--color2);
    border:2px solid #e6f4f1;
    font-weight: bold;
}

#index-cover-button-2:hover{
    background-color:rgba(255,0,0, 0.5);
    color:white;
    font-size: 1rem;

}

/*Your Life Section Start-------------------------------------------------------------------------------------------------------------*/
.your-life-section{
    padding-left:10vw;
    padding-right: 10vw;
    padding-top:5vh;
    padding-bottom:5vh;
}

@media all and (min-width:900px){
    .your-life-section{
        font-size: 1.5rem;
    }
       
    }

/*How is it done section below*/
.how-is-it-done-flex-section{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.flex-row-how-is-it-done{
    display: flex;
    flex-direction: column;
    align-items: center;
}


.how-it-is-done-titles{
    font-size: 1.5rem;
}

.flex-row-how-is-it-done > p{
    font-size: 1.0rem;
    padding: 2rem;
}

.how-is-it-done-flex-photo{
    border-radius: 10px;
    max-height:30vh;
}


@media all and (min-width:600px){

    .how-is-it-done-flex-section{
    flex-direction: row;
    }
    .flex-row-how-is-it-done{
    width: 33vw;
    }
    .how-is-it-done-flex-photo{
    width: 30vw;
    }

    .how-is-it-done-flex-photo{
    border-radius: 10px;
    max-height:none;
    }
    .flex-row-how-is-it-done > p{
    font-size: 1.3rem;
    }
}



/*test project------------------------------------------------------------------------------------------------------------------------*/
#cool-section{
    display:flex;
    flex-direction: column;
    
    width:100vw;
}

#cool-section-photo
{
  object-fit: cover;
  overflow: hidden;
}

#cool-section-text-side{
    color:white;
    background-color: var(--color3);
    
}

.center-items{
     display: flex;
    flex-direction: column;
    justify-content: center;  /* vertical center */
    align-items: center;      /* horizontal center */
    flex-grow: 1;  
}

#cool-section-text-area{
    padding:2rem;
}

#cool-section-text-area > h3{
    color:white;
    text-align: left;
}





@media all and (min-width:900px){
    #cool-section{
        display:flex;
        flex-direction: row;
        height: auto;
       
    }

    .cool-section-object{
    width:50vw;
    margin:0;
    height:auto;
    }

    #cool-section-text-area > ul{
    font-size: 1.3rem;
}

}
/*Test Project End*/




/*FAQ Section below ... primarily pulls from faq2.css and this adds to it specifically for the Accerated instrument page----------------*/

.photo-section-less-than-900-px{
    justify-content: space-around;
}
#faq-explained{
    padding: 2rem;
}

.faq-top-photo-responsive-instrument-page{
    width: 100vw;
}

.hide-less-than-480-px{
    display:none;
}

@media all and (min-width:480px){
    .faq-top-photo-responsive-instrument-page {
        width: 40vw;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .hide-less-than-480-px{
    display:inline;
    }
}

@media all and (min-width:900px){
    .photo-section-less-than-900-px{
        display: none;
    }
}

/*FAQ section END above*/

/*Google MAps/google review section!!!!  */

#google-maps-section{
    display:flex;
    justify-content: left;
}

#google-map-iframe{
    
    min-width: 422px;
    max-width:50vw;
    min-height:330px;
    
}

@media all and (min-width:422px){
    #google-maps-section{
    display:flex;
    justify-content: center;
    }

    #google-map-iframe{
    width:50vw;
    margin:1rem;
    }   


}


    
@media all and (min-width:480px){
    .cover{
        background:url(../images/Desktop/accelerated_instrument_san_diego.jpg) 50% no-repeat;
    }
    #get-in-touch{
        font-size: 3rem;
    }

    .contact-left-title hr{
        Width:19rem;
        height:0.35rem;
    }
   
}

@media all and (min-width:600px){
    #never-drive-boring{
        font-size:50px;
    }


}

@media all and (min-width:900px){
    #never-drive-boring{
        font-size:65px;
    }

    .width-30-desktop{
        width:35vw;
    }
}
/*end from old website CSS*/


@media all and (min-width:900px){
   
    #photo-section2{
        
        display: flex;
        align-self:stretch;
        width:30vw;
        justify-content: space-evenly;
    }
    .photo-section-photo{
        width:90%;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    /*START Contact Form (Media Query)*/
    .contact-container{
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .contact-left{
        width: 70vw;
        padding:0 2rem 2rem 2rem;
    }
    .contact-photo{
        width:80%;
    }
    .contact-inputs{
        width: 100%;
    }

    h2{
        font-size: 1.5rem;
    }
    /*End Contact Form (Media Query)*/
}









