/*General Styles
==================*/
html {
  box-sizing: border-box;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
*::selection {
  background-color: #d6d1b1;
  color: #f8f7ff;
}
body {
  font-family: "Raleway", sans-serif;
}
h1,
h2,
h3 {
  font-family: "Cormorant Garamond", serif;
}
h2 {
  text-transform: capitalize;
}
.container {
  padding: 40px;
}
p {
  color: #666666;
  font-weight: 400;
  line-height: 25px;
  margin: 0 0 15px 0;
}
.row {
  margin: 0;
  padding: 0;
}
/*============================
    ##  Contact Navigation
=============================*/
.contact_nav {
  background-color: #fe5f55;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.contact_nav p {
  font-size: 1.5em;
  margin: 0;
  color: #fff;
}
.contact_nav a {
  color: #fff;
}
.contact_nav a:hover {
  color: #d6d1b1;
  text-decoration: none;
}
/*Header
===========*/
header {
  height: 50vh;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url(../img/fleet1.jpg) center right/cover;
}
.intro-box {
  padding: 25px;
  text-align: center;
  color: #fff;
}
.intro-box p {
  color: #fff;
  text-transform: capitalize;
}
.intro-box h1 {
  background-color: #fff;
  color: #000;
  mix-blend-mode: screen;
  padding: 10px;
  display: inline-block;
  font-weight: 900;
  font-family: "Times New Roman", Times, serif;
  font-size: 7vw;
}

/*Navigation
=================*/
nav {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #fe5f55;
}
nav .container {
  padding: 0;
}
nav .social-links {
  text-decoration: none;
  color: #fe5f55;
  display: inline-block;
}
nav i {
  display: inline-block;
  color: #fe5f55;
  font-size: 1.2em;
}
.social-links {
  margin-right: 5px;
}
nav .social-links:hover {
  color: #f0b67f;
}
/*  our vehicles
=====================*/
.our-vehicles {
  text-align: left;
}
.our-vehicles .car-img {
  width: 100%;
}
.cars {
  padding: 50px 0;
}
.cars span {
  padding: 0 0 15px;
  margin-left: 15px;
  display: inline-block;
  color: #666666;
}
.car h3 {
  padding-top: 5px;
}
.cars span:first-of-type {
  margin-left: 0;
}
.cars .car {
  margin-bottom: 20px;
}
.cars a.full-fleet {
  display: inline-block;
  padding: 15px;
  background-image: linear-gradient(to bottom right, #f0b67f, #d6d1b1);
  color: #000;
  border: 0;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.cars a.full-fleet:hover {
  text-decoration: none;
  background-color: #d6d1b1;
}
.cars a.full-fleet i {
  transition: all 0.3s ease-in-out;
}
.cars a.full-fleet:hover i {
  margin-left: 15px;
}

/*===================
    Services styles
===================*/

.services {
  background-image: linear-gradient(to bottom right, #f0b67f, #d6d1b1);
}
.carousel-item {
  height: 500px;
}
.services-text {
  color: #f8f7ff;
  padding: 40px;
  text-align: center;
}
.services-text p {
  color: #f8f7ff;
}
.services-text h2 {
  font-size: 2em;
  padding: 10px 0;
  font-weight: 600;
}
.carousel-caption h3 {
  background-color: rgba(0, 0, 0, 0.8);
  color: #d6d1b1;
  text-transform: capitalize;
}
.carousel-item.airport {
  background: url(../img/services/airport.jpg) center center/cover;
}
.carousel-item.business {
  background: url(../img/services/business.jpg) center center/cover;
}
.carousel-item.prom {
  background: url(../img/services/proms.jpg) center center/cover;
}
.carousel-item.wedding {
  background: url(../img/services/wedding.jpg) center center/cover;
}
.carousel-item.shuttle {
  background: url(../img/services/shuttle.jpg) center center/cover;
}
.carousel-item.outlet {
  background: url(../img/services/outlets.jpg) center center/cover;
}
.carousel-item.casino {
  background: url(../img/services/casino.jpg) center center/cover;
}
.carousel-item.concert {
  background: url(../img/services/concert.jpg) center center/cover;
}
.carousel-item.bachelorette {
  background: url(../img/services/bachelorette.jpg) center center/cover;
}
.carousel-item.quinceanera {
  background: url(../img/services/quin.jpg) center center/cover;
}
.carousel-item.cruise {
  background: url(../img/services/cruise.jpg) center center/cover;
}
.carousel-item.birthday {
  background: url(../img/services/birthday.jpg) center center/cover;
}
.carouselControls {
  padding: 0;
}
/*Invitation
=================*/
section.invitation {
  padding-top: 80px;
  padding-bottom: 80px;
}
.inv-text {
  text-align: center;
}
.inv-text i {
  font-size: 3em;
  color: #d6d1b1;
  padding: 15px;
}
/*request-quote
=================*/
.request-quote {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../img/road.jpg) center center/cover;
  height: 300px;
  position: relative;
}
.question-box {
  background-color: #000;
  color: #d6d1b1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 25px;
}
.question-box::after {
  position: absolute;
  left: 0;
  bottom: -24px;
  right: 0;
  height: 26px;
  width: 287px;
  background: url(../img/arrow2.png);
  content: "";
  margin: 0 auto;
}
.question-box p {
  color: #ffffffbd;
}
.question-box h2 {
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 16px 0;
}
/*  Form
=================*/
.form {
  padding: 50px 0;
}
.form form {
  width: 50vw;
  margin: 0 auto;
}
.form textarea {
  height: 200px;
}
.form input,
.form textarea {
  border: 1px solid #e1e1e1;
  color: #666;
  display: inline-block;
  padding: 15px;
}
.form form button {
  background-image: linear-gradient(to bottom right, #f0b67f, #d6d1b1);
  border: 0;
  color: #000;
  padding: 15px;
  text-align: center;
  display: inline-block;
  margin: 15px 0;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.form form button:hover {
  background-color: #d6d1b1;
}
.form form button i {
  transition: all 0.3s ease-in-out;
}
.form form button:hover i {
  margin-left: 15px;
}

/*why-us
===========*/
.why-us {
  text-align: left;
}
.features {
  margin: 30px 0;
}
.features div {
  margin: 20px 0;
  padding: 0 20px;
}
.features h3 {
  font-size: 22px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 26px;
  margin-bottom: 12px;
}
.features i {
  font-size: 3em;
  color: #d6d1b1;
}

/*  footer
===========*/
footer {
  background-color: #fe5f55;
  color: #fff;
}
footer h2 {
  font-weight: 900;
  color: #d6d1b1;
}
footer p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
footer h3 {
  color: #d6d1b1;
}
footer i {
  font-size: 1.2em;
}
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer a {
  display: inline-block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.8);
}
footer a:hover {
  color: #d6d1b1;
}
.foot {
  margin-bottom: 25px;
}
.copy-footer {
  padding: 20px 0 50px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/*=================
    contact page
==================*/
.contact-header {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url(../img/contact.jpg) center center/cover;
}
.contact-info a {
  color: #fe5f55;
}
.contact-section .contact-form {
  padding: 0;
}
.contact-section article {
  margin-bottom: 30px;
}
.contact-form textarea {
  height: 200px;
  width: 100%;
  display: block;
}
.contact-form input,
.contact-form textarea {
  border: 1px solid #e1e1e1;
  color: #666;
  padding: 15px;
  width: 70%;
}
.contact-form form button {
  background-image: linear-gradient(to bottom right, #f0b67f, #d6d1b1);
  border: none;
  border-radius: 20px;
  color: #000;
  padding: 10px;
  text-align: center;
  display: inline-block;
  margin: 15px 0;
  box-shadow: 5px 5px 5px #666;
  transition: all 0.3s ease-in-out;
}
.contact-form form button:active {
  box-shadow: 3px 3px 3px #666;
}
/*Quote and Reservation
==========================*/
.quote-header {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url(../img/quote.jpg) center center/cover;
}
.reservation-header {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url(../img/reservation.jpg) center center/cover;
}
.iframe-page {
  height: 1100px;
}
.iframe-page iframe {
  width: 100%;
  height: 100%;
}
@media (max-width: 766px) {
  .iframe-page {
    height: 1400px;
  }
}
