/*THEME COLOURS*/
:root{
    --passengerBlue: #143249;
    --passengerBlueSecondary: #062034;


    --secondaryBlue: #031729;



    --primaryYellow: #9D7804;
    --secondaryYellow: #B08500;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    cursor: pointer;
}
a:hover{
    color: var(--primaryYellow);
}

#current{
    color: var(--primaryYellow);
    font-weight: bold;
}

button{
    cursor: pointer;
}

p{
    font-size: large;
}

body{
    transform:translatez(0);
    -webkit-transform:translatez(0);
}

/* ------ HOMEPAGE ------- */

.homepageContainer{
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homepageContainerOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.9;
}

.homepage{
    position: relative;
    z-index: 5;
    overflow: hidden;
}
.homepage h2{
    text-align: center;
    padding-bottom: .9em;
    padding-top: .5em;
}
.homepage p{
    text-align: center;
    font-size: 2em;
    color: var(--secondaryBlue);
}
.slogan{
    font-family: 'Indie Flower', cursive;
}

.personContainer{
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    height: 20vw;

}

.person{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    width: 20vw;
    height: 20vw;
}
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background-color: var(--secondaryBlue);
}



.person1{
    background-image: url(/assets/images/person1.jpg);
}
.person2{
    background-image: url(/assets/images/person2.jpg);
}
.person3{
    background-image: url(/assets/images/airport.png);
}
.person4{
    background-image: url(/assets/images/person4.jpg);
}
.person5{
    background-image: url(/assets/images/person5.jpg);
}

.bookingForm{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    text-align: center;
    margin-top: -6vw;
    margin-bottom: 2em;
    height: 20em;
    position: relative;
    z-index: 20;
}

.bookingImage{
    background-color: var(--passengerBlue);
    width: 100%;
    height: 100%;
    color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: grid;
    align-content: center;
    align-self: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    justify-items: center;
}

.bookImage{
    width: 70%;
}

.bookingFCenter{
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    align-self: center;
    align-content: center;
    justify-content: center;
    justify-self: center;
    justify-items: center;
    position: relative;
    z-index: 10;
}

.bookingF{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-image: url(/assets/images/handspeople.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bookingFOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.92;
}

.bookingF a{
    background-color: var(--primaryYellow);
    color: white;
    font-size: 1.5em;
    padding: .5em;
    width: auto;
    border-radius: 20px;
    transition: ease-in-out 0.2s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bookingF a:hover{
    background-color: var(--secondaryYellow);
    color: white;
   }

.welcome{
    padding: 0.2em;
    margin: 0.2em;
}

.passengerLogo{
    width: 35%;
    transition: ease-in-out 0.2s;
}

.passengerLogo:hover{
    transform: rotate(20deg);
}

.vehicle{
    color: white !important;
    font-size: 1.5em !important;
}

@media (max-width:1000px){
    .bookingForm{
        grid-template-columns: .5fr 1fr 1fr .5fr;
    }
}

@media (max-width:700px){
    .bookingForm{
        grid-template-columns: .2fr 1fr 1fr .2fr;
    }
}

@media (max-width:500px){
    .bookingForm{
        grid-template-columns:1fr;
        padding: 0em 2em;
    }
    .one, .two{
        display: none;
    }
    .homepage h2{
        font-size: 4.5vw;
    }
    .bookImage{
        width: 45%;
    }

    .passengerLogo{
        width: 25%;
    }

    .bookingForm{
        height: 25em;
    }
}

@media (max-width:300px){
    .bookingForm{
        padding: 0em 0.5em;
    }
}

@media(min-width:1800px){
    .bookingForm{
        grid-template-columns: 1fr .5fr .5fr 1fr;
        height: 30em;
    }
}


/*--------------------- APP SECION --------------------*/
.section-gap{
    background-color: var(--passengerBlue);
    height: .5em;
}


.AppImage{
    background-image: url(/assets/images/test.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 40vh;
    position: relative;
    z-index: 2;
    display: grid;
    text-align: center;
    align-items: center;
    justify-items: center;
    transform:translatez(0);
    -webkit-transform:translatez(0);
}

.AppOverlay{
    position: absolute;
    opacity: 0.7;
    height: 100%;
    background-color: var(--passengerBlue);
    z-index: 2;
}
.AppImage .text{
    position: relative;
    padding: 1em;
    color: white;
    z-index: 2;
    width: auto;
    background-color: var(--secondaryBlue);
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: ease-in-out 0.2s;
}

.AppImage .text:hover{
    transform: scale(1.03, 1.03);
}




.appContent{
    display: grid;
    padding-top: 1em;
    grid-template-columns: 1fr;
    background-color: none;
    z-index: 2;
    background-color: #EDF4FB;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.appContentText{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}




.appGrid{
    display: grid;
    justify-items: center;
}


.appScreenshot{
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    margin-top: -10vh;
}

.appScreenshot img{
    position: relative;
    justify-self: center;
    text-align: center;
    width: 100%;

    transition: ease-in-out 0.3s;
    z-index: 5;
}

.appScreenshot img:nth-child(odd):hover{
    transform: rotate(-2deg);
}

.appScreenshot img:nth-child(even):hover{
    transform: rotate(2deg);
}



.appBenefitsBackground{
    color: var(--passengerBlue);
    padding-left: 1.7em;
    list-style-type: none;
    margin-top: 7%;
}


.appBenefitsBackground h2{
    font-size: 3.5vw;
}

.appBenefitsBackground ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.2em;
    text-align: center;
    align-items: center;
    text-transform: uppercase;

}

.appBenefitsBackground ul li{
    font-size: 1.5vw;
    list-style-type: none;
    background-color: white;
 
    padding: 0.7em 0em;
}

.appLinks{
    text-align: center;
}

.appLinks a img{
    transition: ease-in-out 0.3s;
    transition-property: transform, box-shadow;
}

.appLinks a img:hover{
    transform: scale(1.03, 1.03);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.appBenefits ul{
    list-style-type: none;
}


.android{
    width: 8em;
}
.iOS{
    width: auto;
}

@media(min-width: 1800px){
    .appContentContainer{
        padding: 0em 10%;
    }

    .appBenefitsBackground ul li{
        font-size: 1vw;
    }

    .appBenefitsBackground h2{
        font-size: 2.5vw;
    }

}

/*--------------CALLING OPTION------------*/

.phoningOption{
    background-color: var(--passengerBlue);
    color: white;
    padding: 3em 0;
    text-align: center;
}

.phoningOption a{
    color: white;
}

.phoningOption a:hover{
    color: var(--primaryYellow);
}

/*-----------------CORP-----------------*/


.corp{
    background-color: white;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    transform:translatez(0);
    -webkit-transform:translatez(0);
}


.corp .corpImg{
    background-image: url(/assets/images/corp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 40vh;
    position: relative;
    text-align: center;
    align-content: center;
    justify-content: center;
    transform:translatez(0);
    -webkit-transform:translatez(0);
}

.corp .corpOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--passengerBlue);
    opacity: 0.5;
}

.corp .corpImg h1{
    position: relative;
    z-index: 2;
    background-color: var(--secondaryBlue);
    color: white;
    width: auto;
    padding: .5em;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: ease-in-out 0.3s;
}

.corp .corpImg h1:hover{
    transform: scale(1.03, 1.03);
}

.corpGrid{
    text-align: center;
}

.appText{
    padding: 1em;
    color: var(--secondaryBlue);
}

.phoneLink{
    color: var(--secondaryBlue);
}

.phoneLink:hover{
    color: var(--primaryYellow);
}


/*---------------------------- FOOTER ------------------------*/

footer a{
    color: white;
}

.legal{
    background-color: var(--passengerBlue);
    color: white;
    text-align: center;
    position: relative;
}



.mainFooter{
    text-align: center;
    padding-top: 1em;
    background-color: var(--passengerBlue);
    color: white;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
    position: relative;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  .fa:hover {
    opacity: 1;
    color: lightgray;
  }
  .fa-facebook {
    background: #3B5998;
    color: white;
  }

.facebookLink{
    position: absolute;
    bottom: 0px;
    left: 0px;
}


.footerBookNow{
    background-image: url(/assets/images/taxi.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 5;
    background-color: var(--secondaryBlue);
    color: white;
}

.footerBookNow h3{
    padding: 1em;
}
.footerBookNow a{
    background-color: var(--primaryYellow);
    display: inline-block;
    width: auto;
    padding: 1em;
    border-radius: 10px;
    margin-bottom: 1em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: ease-in-out 0.2s;
}
.footerBookNow a:hover{
    background-color: var(--secondaryYellow);
    color: white;
    transform: scale(1.08, 1.08);

}


.footerBookNowOverlay{
    position: absolute;
    background-color: var(--passengerBlue);
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.footerBookNowContent{
    position: relative;
    z-index: 3;
    padding: 2em;
}


/*----------------------- MEDIA QUERIES -----------------------*/

@media(max-width:700px){
    .appContentText{
        display: grid;
        grid-template-columns: 1fr;
        margin-left: 0em;
    }
    .appScreenshot{
        margin-top: 0% !important;
    }
    .AppImage .text{
        font-size: 2.2vw;
    }

    .appBenefitsBackground{
        padding-left: 1em;
        padding-right: 1em;
        text-align: center;
        }

    .appBenefitsBackground h2{
        font-size: 6vh !important;
    }

    .appBenefitsBackground ul li{
        font-size: 2.5vw !important;
    }
}

@media(max-width:750px){
    .AppImage{
        background-attachment: scroll;
    }
    .text{
        left: auto;
    }
    .appAdvert{
        width: 40% !important;
        margin-bottom: -2em !important;
    }
    .mainFooter{
        grid-template-columns: 1fr !important;
    }
    .corp .corpImg{
        background-attachment: scroll !important;
    }
}

@media(max-width: 800px){
    .appBenefitsBackground{
        margin-top: 2%;
    }
}






/*-----------------Default Nav-----------------*/

.active{
    font-weight:700;
    color: var(--primaryYellow) !important;
}

.bookActive{
    background-color: var(--passengerBlue) !important;
}

.defaultNav{
    display: grid;
    grid-template-columns: 2fr 1fr;
    line-height: 40px;
    position: relative;
    z-index: 10;
}

.defaultNav a{
    color: var(--passengerBlue);
}

.defaultNav a:hover{
    opacity: 0.7;
}

.defaultLinks{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
}
.defaultLinks .bookNow{
    color: white;
}

.defaultLogo{
    margin-left: .5em;
    color: vvar(--passengerBlue);
}

.bookNow{
    background-color: var(--primaryYellow);
    border-radius: 0px 0px 0px 12px;
    color: white;
    position: relative;
    z-index: 3;
    transition: ease-in-out 0.2s;
}
    .bookNow:hover{
         background-color: var(--secondaryYellow);
         color: white;
         opacity: 1;
        }

@media(max-width: 1100px){
    .defaultNav{
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 800px){
    .defaultNav{
        grid-template-columns: 1fr 2fr;
    }
}

@media(max-width: 550px){
    .defaultNav{
        grid-template-columns: 1fr;
    }
    .defaultLogo{
        display: none;
    }

}


/*----------------------Autocab E-Booker-----------------*/

.Autocab{
    width: 100vw;
    height: 90vh;
    border: 0.1px solid white;
}

.headerTitle{
    margin-top: 1em;
    margin-bottom: 2em;
    text-align: center;
}


/*----------------------About Us-----------------*/

.aboutImage{
    background-image: url(/assets/images/Manchester.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    position: relative;
    z-index: -1;
    text-align: center;
}


.aboutImageOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--passengerBlue);
    opacity: 0.7;
}


.aboutContent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: white;
    text-align: center;
    width: 100%;
}

.aboutContent .content{
    background-color: var(--passengerBlue);
    margin-top: -10vh;
    margin-bottom: 2em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.aboutContent .content h2{
    padding: 1em;
    font-size: 4.5vh;
}

.aboutContent .content p{
    font-size: 2.5vh;
}

.companyDetails{
    padding-bottom: 1em;
}

.contentContainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 60vh;
}

.contentContainer .staffText{
    display: grid;
    background-color: var(--secondaryBlue);
    color: white;
    align-content: center;
    font-size: 3vh;
    position: relative;
    justify-items: center;
}

.contentContainer .image{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.contentContainer .imageStaff{
    background-image: url(/assets/images/staff.jpg);
}
.imageStaffOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primaryYellow);
    opacity: 0.4;
}


.contentContainer .imageTechnology{
    background-image: url(/assets/images/technology.jpg);
}
.imageStaffOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--secondaryBlue);
    opacity: 0.4;
}

.contentContainer .technologyText{
    display: grid;
    background-color: var(--secondaryBlue);
    color: white;
    align-content: center;
    font-size: 3vh;
    align-content: center;
    justify-items: center;
}

.personImage{
    width: 35%;
}

.computerImage{
    width: 35%;
}


.aboutUsText{
    text-align: left;
    padding: 1em;
    line-height: 1.5em;
}

.aboutUsText h3{
    font-size: 2em;
    padding: .5em;
    text-align: center;
}

.aboutUsText p{
    padding: .5em;
    text-align: center;
}

@media (max-width:1000px){
    .aboutContent{
        grid-template-columns: .5fr 1fr .5fr;
    }
}

@media (max-width:700px){
    .aboutContent{
        grid-template-columns: .2fr 1fr .2fr !important;
    }
}

@media (max-width:550px){
    .aboutContent{
        grid-template-columns: .05fr 1fr .05fr !important;
    }
}

@media (max-width:450px){
    .aboutContent{
        grid-template-columns: .01fr 1fr .01fr !important;
    }
}






/*----------------------Contact Us-----------------*/

.companyDetails{
    display: grid;
    justify-content: center;
    justify-items: center;
    text-align: center;
    padding-top: 2em;
}

.companyDetails a{
    color: white;
}

.companyDetails a:hover{
    color: var(--primaryYellow);
}

.passengerLogo1{
    width: 70%;
}

.contactImage{
    background-image: url(/assets/images/call.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    position: relative;
    z-index: -1;
    text-align: center;
}


.contactImageOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--passengerBlue);
    opacity: 0.7;
}


.contactContent{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: white;
    text-align: center;
}

.contactContent .content{
    background-color: var(--passengerBlue);
    margin-top: -15vh;
    margin-bottom: 2em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.contactContent .content h2{
    padding: 1em;
    font-size: 30px;
}

.contactContent .content p{
    font-size: 2.5vh;
}

.contactContent .content .companyDetails{
    padding-bottom: 1em;
}


.contactContentContainer{
    background-color: var(--passengerBlue);
    text-align: left;
}

.emailForm{
    padding: 1em;
}


input, textarea{
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 10px;
    border: 1px solid var(--passengerBlue);
}

textarea{
    height: 20vh;
}

.buttonContainer{
    display: grid;
    justify-content: right;
}

.submit{
    background-color: var(--primaryYellow);
    color: white;
    border: 1px solid var(--primaryYellow);
    font-size: 20px;
    padding: .5em;
    border-radius: 20px;
    transition: ease-in-out 0.2s;
}

.submit:hover{
    background-color: var(--secondaryYellow);
    transform: scale(1.08, 1.08);
}



.success{
    background-color: green;
    border-radius: 10px;
    margin-top: 1em;
    text-align: center;
    padding: 1em;
    display: none;
    transition: ease-in-out 0.2s;
}

@media (max-width:1000px){
    .contactContent{
        grid-template-columns: .5fr 1fr .5fr;
    }
}

@media (max-width:700px){
    .contactContent{
        grid-template-columns: .2fr 1fr .2fr;
    }
}


@media (max-width:550px){
    .contactContent{
        grid-template-columns: .05fr 1fr .05fr;
    }
}

@media (max-width:450px){
    .contactContent{
        grid-template-columns: .01fr 1fr .01fr;
    }
}



/*----------------------Privacy Policy-----------------*/

.privacyImage{
    background-image: url(/assets/images/legal.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    position: relative;
    z-index: -1;
    text-align: center;
}


.privacyImageOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--passengerBlue);
    opacity: 0.7;
}


.privacyContent{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    color: white;
    text-align: center;
    width: 100%;
}

.privacyContent .content{
    background-color: var(--passengerBlue);
    margin-top: -10vh;
    margin-bottom: 2em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.privacyContent .content h2{
    padding: 1em;
    font-size: 4.5vh;
}

.privacyContent .content p{
    font-size: 2.5vh;
}

.privacyContent .content ul{
    padding-left: 0.7em;
}



.privacyText{
    text-align: left;
    padding: 1em;
}

.privacyText h3{
    font-size: 2em;
    padding: .5em;
}

.privacyText p{
    padding: .5em;
}

@media (max-width:1000px){
    .privacyContent{
        grid-template-columns: .5fr 2fr .5fr;
    }
}

@media (max-width:700px){
    .privacyContent{
        grid-template-columns: .2fr 2fr .2fr !important;
    }
}

@media (max-width:550px){
    .privacyContent{
        grid-template-columns: .05fr 2fr .05fr !important;
    }
}

@media (max-width:450px){
    .privacyContent{
        grid-template-columns: .01fr 2fr .01fr !important;
    }
}


.oneClickLink{
    color: white !important;
}


.oneClickLink:hover{
    color: white !important;
}


    /* ---------------- CSS for Veezu Popup ----------------------*/


.popupContainerOverlay{
    width: 100%;
    height: 100vh;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 15;
    }

.popupContainerOverlayTransparent{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: black;
    opacity: 0.8;
    }

.popupContainer{
    z-index: 20;
    background-color: white;
    padding: 5px;
    position: relative;
    justify-items: center;
    }

.popupClosebtn{
    position: absolute;
    width: auto;
    padding: 0.5em;
    right: 1px;
    background-color: white;
    color: black;
    }
.popopClosebtn:hover{
    color:#F93549;
    }



.popupimg{
        width: 35em;
        height: 35em;
        background-image: url(/assets/images/VeezuManchester.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 5px;
    }

.buttonContainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    }


#popupbtns{
    background-color: #F93549;
    border-style: none;
    padding: 0.5em;
    color: white;
    cursor: pointer;
    font-size: medium;
    }
#popupbtns:hover{
        background-color: #fb6574;
    }


@media (max-width:700px){
    .popupimg{
        width: 20em;
        height: 20em;
    }
}
@media (max-width:500px){
        .buttonContainer{
        grid-template-columns: 1fr;
        gap: 0.1em;
    }
}