/*  General styles
===================*/
html{
    box-sizing: border-box;
    scroll-behavior: smooth;
}
*, *::after, *::before{
    box-sizing: inherit;
}
body{
    font-family: 'Raleway', sans-serif;
    position: relative;
}
h1, h2, h3{
    font-family: 'Cormorant Garamond', serif;
    text-transform: capitalize;
}
h1{
    font-size: 6vw;
}
h2{
    font-size: 3em;
    padding: 20px 0;
}
.container{
    padding-top: 40px;
    padding-bottom: 40px;
}
/*  Contact nav
=================*/
.contact-nav{
    position: fixed;
    top: 60%;
    left: 0%;
    z-index: 1;
}
.contact-nav ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.contact-nav a{
    display: inline-block;
    padding: 10px 10px 10px 2px;
    background-color: #747880;
    color: #F6F6F6;
    transition: all .3s ease-in-out;
}
.contact-nav a:hover{
    background-color: #4A4D52;
    padding-left: 10px;
    color: #FFF;
}
/*  Main nav
================*/
.main-navy{
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 3;
}
.main-navy .container{
    padding: 0;
}
/*  Header
==============*/
header{
    background: linear-gradient(rgba(0,0,0, .4), rgba(0,0,0, .4)), url(../img/header.jpg) center center/cover;
    height: 60vh;
    color: #F6f6f6;
}
.header-box{
    padding: 0 40px;
}
.header-box span{
    font-weight: 900;
}
.header-box h1{
    font-weight: 700;
}
.header-box a{
    display: inline-block;
    padding: 10px;
    background-color: #747880;
    color: #f6f6f6;
    border-radius: 5px;
    margin: 10px 0;
    font-weight: 600;
    transition: all .3s ease-in-out;
}
.header-box a:hover{
    background-color: #4A4D52;
    color: #FFF;
    text-decoration: none;
}

/*  Services
==============*/
.services h2{
    text-align: center;
}
.service{
    width: 300px;
    text-align: justify;
    margin: 0 auto;
    margin-bottom: 25px;
}
.service img{
    width: 100%;
}
.service p,
.why-us p{
    opacity: .8;
}
/*  Why-us
=============*/
.why-us{
    background:  linear-gradient(rgba(0,0,0, .8), rgba(0,0,0, .8)), url(../img//fleet/why_us.jpg) bottom center/cover;
    color: #f6f6f6;
}
.why-us h2{
    text-align: center;
    color: #FFF;
}
.why-us h3{
    font-weight: 600;
    color: #FFF;
}
.feature{
    align-items: center;
}
.feature i{
    font-size: 2em;
    padding: 10px 20px;
}
/*  our-vehicles 
==================*/
.our-vehicles{
    text-align: center;
}
.vehicles{
    justify-content: space-around;
}
.vehicle{
    border: 1px solid #eee;
}
.vehicle h3{
    text-align: left;
    font-weight: 700;
    text-transform: capitalize;
    padding: 10px 0;
}
.our-vehicles img{
    width: 100%;
}
.our-vehicles span{
    display: block;
    text-align: left;
    color: rgb(90, 90, 90);
}
.our-vehicles span i{
    font-size: 1.2em;
    margin-right: 5px;
    width: 30px;
    color: #000;
}
.our-vehicles a.full-fleet{
    background-color: rgb(116, 120, 128);
    color: #F6F6F6;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    font-weight: 600;
    transition: all .3s ease-in-out;
}
.our-vehicles a.full-fleet:hover{
    background-color: #4A4D52;
    color: #FFF;
    text-decoration: none;
}
/*  testimonial
==================*/
.testimonial{
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(../img/testimonial3.jpg) center center/cover;
    height: 500px;
    color: #FFF;
    text-align: center;
}
.testimonial-box{
    background-color: rgba(172, 171, 171, 0.69);
    padding: 40px;
    position: relative;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}
.testimonial-box p{
    letter-spacing: 1px;
    text-transform: capitalize;
}
.testimonial-box i{
    font-size: 3em;
    padding: 10px;
}
/*  have-questions
===================*/
.have-questions{
    text-align: center;
}
.have-questions h2{
    padding-bottom: 0;
}
.have-questions input,
.have-questions textarea{
    padding: 10px;
    border: 1px solid #c0c0c0;
    width: 100%;
}
.have-questions .send-request{
    background-color: #747880;
    border: none;
    color: #FFF;
    padding: 10px;
    margin: 25px 0;
    border: 1px solid #747880;
    transition: all .3s ease-in-out;
}
.have-questions .send-request:hover{
    background: #fff;
    color: #747880;
    border: 1px solid #747880;
}
/*  Upper-footer
====================*/
footer{
    background: linear-gradient(rgba(0, 0, 0, .6),rgba(0, 0, 0, .6)), url(../img/footer.jpg) center center/cover;
    position: relative;
}
footer h3{
    font-weight: 600;
    color: #fff;
}
footer p{
    color: rgba(255, 255, 255, 0.808);
}
footer i{
    font-size: 1.2em;
    padding-right: 5px;
    width: 30px;
}
footer a{
    color: #f6f6f6;
    text-decoration: underline;
    font-weight: 500;
}
footer a:hover{
    color: #747880;
}
.go-up{
    position: absolute;
    bottom: 100px;
    right: 30px;
    font-size: 1.5em;
    display: inline-block;
    padding: 10px;
}
footer ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/*  copyright footer
======================*/
.copy-footer{
    text-align: center;
    color: #F6F6F6;
    border-top: 1px solid rgb(168, 168, 168);
    padding: 10px 0 50px;
    background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6));
}


/*  quote, reservation, contact Pages
=========================================*/
.quote-header{
    background: linear-gradient(rgba(0,0,0, .6), rgba(0,0,0, .6)), url(../img/quote.jpg) center center/cover;
}
.reservation-header{
    background: linear-gradient(rgba(0,0,0, .3), rgba(0,0,0, .3)), url(../img/reservation.jpg) center center/cover;
}
.iframe-page{
    height: 1200px;
}
.iframe-page iframe{
    width: 100%;
    height: 100%;
}
@media(max-width:766px){
    .iframe-page{
      height: 1300px;
    }
}


/*  Contact Page
===================*/
.contact-header{
    background: linear-gradient(rgba(0,0,0, .3), rgba(0,0,0, .3)), url(../img/contact.jpg) center center/cover;
}
.contact-page .contact-info a{
    color: #747880;
    font-size: 1.2em;
}
.contact-page .qform{
    background-image: linear-gradient(to bottom right, #000, #acababb0);
    padding: 20px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
}
.contact-page .qform input,
.contact-page .qform textarea{
    padding: 10px;
    border: 1px solid #000;
    border-radius: 5px;
    display: block;
    margin: 10px 0;
    width: 100%;
}
.contact-page .qform textarea{
    height: 150px;
}
.contact-page .qform button{
    padding: 10px;
    background-color: #000;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    font-weight: bold;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .1em;
    transition: all .3s ease-in-out;
}
.contact-page .qform button:hover{
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}



/*Response page
------------------*/
header.response{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.4)),url(../img/success.png)center center/cover;
    padding: 60px 0;
    color: #FFF;
}
header.response p{
    color: #FFF;
}