/*General Styles
==================*/
html {
  box-sizing: border-box;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
body {
  font-family: "Noto Sans JP", sans-serif;
}
h1,
h2,
h3 {
  font-family: "Merriweather", serif;
  letter-spacing: 2px;
  text-transform: capitalize;
  font-weight: 900;
}
.container-fluid {
  padding: 7% 15%;
}
.row {
  margin: 0;
  padding: 0;
}
*::selection {
  background-color: #293241;
  color: #fff;
}
.btn {
  margin: 1rem 1rem 1rem 0;
}
.qq img {
  width: 100%;
}
hr.separator {
  margin: 5rem auto;
  border: none;
  border-bottom: 15px dotted #ddd;
  width: 30%;
}
/*Navigation
=================*/
nav {
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 10;
}
nav a {
  color: #fff;
}
nav .container {
  padding: 0;
}
nav .social-links {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
  color: #000;
}
nav .social-links:hover {
  color: #333;
}
.navbar {
  position: sticky;
  top: 0;
}
/*Header
===========*/
header {
  background: #d5f8efcc;
}
.intro-box {
  padding: 25px;
  width: 70%;
}
.intro-box span {
  color: #14b789;
  display: block;
  margin-bottom: 1rem;
}
.intro-box h1 {
  color: #14b789;
  font-size: 4rem;
}

/*  our vehicles
=====================*/
.our-vehicles {
  text-align: center;
}
.our-vehicles .car-img {
  width: 100%;
}
.cars {
  padding: 50px 0;
}
.cars span {
  padding: 15px 0;
  margin-left: 15px;
  display: inline-block;
}
.cars .car {
  margin-bottom: 20px;
}

/*why-us
===========*/
.why-us {
  text-align: center;
  background: linear-gradient(to top left, #d5f8efcc, #d5f8efcc),
    url(../img/pattern.png) repeat center center/cover;
}
.features i {
  font-size: 2.5em;
  color: #14b789;
  margin: 1rem 0;
}

.features h3 {
  font-size: 3rem;
  color: #14b789;
  text-transform: uppercase;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.features p {
  color: #555;
}
/*============================
    ##  services Section
=============================*/

.carousel-item {
  height: 50vh;
}

.carousel-caption h3 {
  background-color: rgba(39, 39, 41, 0.8);
  color: rgb(255, 255, 255);
  opacity: 1;
  display: inline-block;
  text-transform: capitalize;
  padding: 10px 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.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/prom.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) top 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) 50% 30% / 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;
}

/*Invitation
=================*/
.inv-text {
  margin: 50px 0;
}
.inv-text i {
  font-size: 1.5em;
  margin: 1rem 0;
  color: #000000;
}

/*request-quote
=================*/
.request-quote {
  background-color: #d5f8ef;
}
.request-quote .container-fluid,
.form .container-fluid {
  padding: 3% 15%;
}
.question-box {
  background-color: #f6f6f6;
  color: #14b789;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding: 25px;
  box-shadow: 10px 10px 0 #14b789;
}
.question-box h2 {
  color: #14b789;
  text-transform: uppercase;
  margin: 16px 0;
  font-size: 3rem;
  padding: 3rem 0;
}

/*  footer
===========*/
footer {
  background: linear-gradient(to top left, #d5f8efce, #d5f8efd0),
    url(../img/road.jpg) center center/cover;
  color: #555;
}
footer h2 {
  color: #14b789;
}
footer h3 {
  color: #14b789;
}
footer p {
  margin-top: 20px;
}
footer p {
  color: #14b789;
}
footer i {
  font-size: 1.2em;
}
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer a {
  display: inline-block;
  padding: 5px 0;
  color: #14b789;
}
footer a:hover {
  color: #0c926c;
}
.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-section .contact-form {
  padding: 0;
}
.contact-section article {
  margin-bottom: 30px;
}
.contact-section a:hover {
  color: #333;
}
.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-info a {
  color: #14b789;
}
.contact-info a:hover {
  color: #118a67;
}
/*  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: #000000;
  display: inline-block;
  padding: 15px;
}

/*  Responsive Styles
==========================*/
@media (max-width: 1024px) {
  .intro-box {
    padding: 25px;
    width: 100%;
  }
  .intro-box h1 {
    font-size: 2rem;
  }
  .btn {
    margin: 1rem 0.5rem 0.5rem 0;
  }
  .features h3 {
    font-size: 1.5rem;
  }
  .question-box {
    width: 100%;
    box-shadow: 5px 5px 0 #ebe952;
    padding: 15px;
  }
  .question-box h2 {
    font-size: 1.5rem;
  }
  .our_services {
    padding: 0;
    margin-top: 3rem;
  }
  nav .social-links {
    margin: 0.5rem 0.5rem 0.5rem 0;
  }
  .contact-section article {
    margin: 2rem 0;
  }
}
