@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #7a7a7a;
}

/* global styles  edited for the booking pod*/
::selection {
  background: #d32507;
  color: #fff;
}

::-moz-selection {
  background: #d32507;
  color: #fff;
}
@media (min-width: 991px) {
.main-banner{ /*controls for items below bannner*/
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 7rem;
  background-color: #232d39;
  flex-direction: column;
}
}

@media (min-width: 375px) {
.main-banner .left-header {
  position: sticky;
  box-shadow: 0 10px 10px 0 rgba(0,0,0,.1); 
  display: flex;
  align-items: center;  /* Added to vertically center content */
  height: auto;
  width:100%;
  z-index: 4;
  border-radius: 5px;
}
.main-banner .right-header {
  position: relative;
  display: flex; /* Changed from grid to flex */
  flex-direction: column;
  border: 1px solid var(--color-grey-5);
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
  width: 100%; /* Added to make it fit inside the left header */
} 
}

.hero-content__text__btns a {
  align-items: center;
  color: #ffff;
  display: flex;
  font-weight: 100;
  text-decoration: none;
}
.hero-content__text__btns__book-ride {
  background-color: #d32507;
  border: 2px solid #d32507;
  border-radius: 0.3rem;
  box-shadow: 0 10px 15px 0 rgba(255,83,48,.35);
  padding: 1.8rem 3rem;
  transition: all .3s;
  color: #f3f0ef;
}

.book-section {
  position: relative;
  
}

.container {
  margin:  auto !important;
  max-width: 133rem !important;
  padding: 5 1.5rem !important;
}

.booking-modal {
  width: 100%;
} 
.booking-modal, .modal-overlay {
  display: none;
  opacity: 0;
  position: fixed;
}
.booking-modal__title {
  align-items: center;
  background-color: #d32507;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.booking-modal__message {
  background-color: #ffeae6;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 3rem;
}
.booking-modal__car-info {
  background-color: #fff;
  border-bottom: 1px solid hsla(0, 0%, 47%, .624);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3rem;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
* {
  scrollbar-color: #d32507 #fff;
  scrollbar-width: thin;
}
.show-scroll {
  display: flex;
}

.booking-done {
  align-items: center;
  background-color: #c3fabe;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  color: #2a6817;
  display: none;
  font-size: 1.6rem;
  font-weight: 500;
  justify-content: space-between;
  margin-bottom: 8rem;
  margin-top: 17rem;
  padding: 5rem 14rem;
}
.book-content {
  margin:  auto;
}
@media (max-width: 370px) { /*if size is messed up for phone check here*/
  .book-content__box {
    padding: auto;
    width: auto; /* Changed width to auto for mobile view */
    flex-direction: row; /* Restored flex direction to row for desktop view */
  }
}

.book-content__box {
  background-image: url(/static/media/book-bg.6f629a1….png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 34px;
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,.1);
  color: #fff;
  color: #cacaca;
  display: flex;
  flex-direction: column; /* Changed from row to column for vertical shape */
  height: auto;
  padding: 5rem; /* Adjusted padding for better spacing of elements inside car search box */
  position: relative;
  width: 100%; /* Changed from 20% to 100% for full width */
  margin: 1rem; /* Added margin for space below main banner */
  z-index: 4;
}

.book-content__box h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.7rem;
}

.book-content__box .box-form {
  grid-gap: 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 5fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.book-content__box .box-form b {
  color: #d32507;
}
.book-content__box button {
  align-self: self-end;
  background-color: #d32507;
  border: none;
  box-shadow: 0 10px 15px rgba(255,83,48,.35);
  color: #fff;
  cursor: pointer;
  font-family: Rubik, sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 1.3rem;
  transition: all .3s;
}
.age-select__text{
  display: flex;
  font-size: 1.4rem;
  font-weight: 600;
}

.book-content__box .box-form {
    grid-template-columns: 1fr;
}
.book-content__box .box-form__car-type {
  display: flex;
  flex-direction: column;
}
.book-content__box .box-form__car-type label {
  align-items: center;
  display: flex;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.book-content__box .box-form__car-type select {
  border: 1px solid #ccd7e6;
  border-radius: 3px;
  color: #ababab;
  font-family: Rubik, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  outline: none;
  padding: 1.2rem 1.3rem;
}
.book-content__box .box-form__car-time {
  display: flex;
  flex-direction: column;
  position: relative;
}
.book-content__box .box-form__car-time label {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.book-content__box .box-form__car-time input {
  border: 1px solid #ccd7e6;
  color: #878585;
  outline: none;
  padding-right: 3rem;
}

/**********************************************
Styles for the hover menu when book now is clicked on the fleet page.
***********************************************/
  /* Styles for overlay */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99; /* Ensure the overlay appears above other elements*/
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Show the overlay when it's targeted */
.overlay:target {
  display: flex;
}

.overlay-content {
    background-color: #fff;
    flex-direction: row;
    padding: 12px 13px;
    border-radius: 5px;
    width: 80%;
    max-width: 600px;
    text-align: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 15px rgba(53, 53, 53, 0.35); /* Updated box shadow */
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 55px;
    right: 25px;
    cursor: pointer;
    font-size: 54px;
    color: #d32507; /* Close button color */
}

.overlay-content img {
  width: 100%;
  border-radius: 5px;
}

.overlay-content .reservation-form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.overlay-content .phone-number-container {
  display: block;
}

.phone-number-container select {
  width: 8%;
  background-color: #fff;
}

/* Style for the phone number input field */
.phone-number-container input[type=text] {
    flex: 1;
    padding: 2px;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 0 5px 5px 0;
    border: 1px solid #ccc;
    border-left: none;
}
/* Updated button styles */
.overlay-content button {
    align-self: self-end;
    background-color: #d32507;
    border-radius: 15px;
    box-shadow: 0 10px 15px rgba(255, 83, 48, 0.35);
    color: #fff;
    cursor: pointer;
    font-family: Rubik, sans-serif;
    font-size: 1.2rem;
    font-weight: 200;
    margin: 1rem;
    padding: 1rem;
    transition: all 0.3s;
}


.overlay-content button:hover {
    background-color: #a91d00; /* Darker color on hover */
}

.error-message {
  align-items: center;
  background-color: #f8d7da;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  color: #721c24;
  display: none;
  font-size: 1.6rem;
  font-weight: 500;
  justify-content: space-between;
  margin-bottom: 1.8rem;
  margin-top: -1rem;
  padding: 1rem 1.4rem;
}

user agent stylesheet
section {
  display: block;
}
body {
  background-color: #fff;
  font-family: Poppins, sans-serif;
  position: relative;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #d32507;
  border-radius: 20px;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background: rgba(250,250,250,0.99) !important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #d32507!important;
}
.logo img {
  max-height: 70px; /* Adjust the maximum height of the logo as needed */
  max-width: 100%; /* Ensures the logo scales proportionally */
  vertical-align: middle; /* Aligns the logo vertically */
}

.background-header .main-nav .nav li:hover > a {
  color: #d32507!important;
}

.background-header .nav li a.active {
  color: #d32507!important;
}

.header-area { /*this changes color and alignment of the header*/
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px;
  background: black; 
  /* background: rgba(250,250,250,0.1); this changes color of sticky header, this was the old value*/
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: black; /*this changes color of menu block i.e logo plus text menu items. value was transparent before*/
}

.header-area .main-nav .logo {
  line-height: 50px;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  text-transform: capitalize;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo em {
  font-style: normal;
  color: #ed563b;
  font-weight: 500;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {  /*changes color of the text on the header menu*/
  color: #fff;
}

.header-area .main-nav .nav li:hover > a,
.header-area .main-nav .nav li > a.active {
  color: #d32507!important;
  opacity: 1;
}

.background-header .main-nav .nav li:hover > a,
.background-header .main-nav .nav li > a.active {
  color: #d32507!important;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #ffffff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #ffffff;  /*changes color of hamburger menu on mobile*/
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #ffffff;  /*changes color of hamburger menu on mobile after click aka. the x button*/
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #ffffff;   /*changes color of hamburger menu on mobile after click aka. the x button*/
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #d32507;
}

@media (min-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 430px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #d32507!important;
    opacity: 1;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 1px;
    margin-top: 10px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area .main-nav .nav li:last-child {
    width: 100%;
    background-color: #ed563b;
    color: #fff;
  }

  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #232d39 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ed563b!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 200%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay { /* allows for video to not pour out in the background*/
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  margin-left: 30px;
  width: 65%;
  left: 40%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 70px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #d32507;
  font-weight: 900;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

#features {
  margin-bottom: 80px;
}

.feature-item {
  display: inline-block;
  margin-bottom: 60px;
}

.feature-item .left-icon img {
  float: left;
  margin-right: 30px;
}

.feature-item .right-content {
  display: inline;
}

.feature-item .right-content h4 {
  margin-top: 0px;
  margin-bottom:  7px;
  letter-spacing: 0.25px;
  color: #232d39;
  font-size: 19px;
  font-weight: 600;
  text-transform: capitalize;
}

.feature-item .right-content a.text-button {
  margin-top: 7px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  color: #ed563b;
  font-weight: 500;
}

/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#call-to-action {
  padding: 120px 0px;
  background-image: url(../images/cta-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.cta-content h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.cta-content h2 em {
  font-style: normal;
  color: #ed563b;
}

.cta-content p {
  font-size: 16px;
  color: #fff;
  margin: 15px 0px 25px 0px;
}



/*
--------------------------------------------
Our Classes
--------------------------------------------
*/

#our-classes {
  margin-bottom: 140px;
}

#tabs ul {
  margin: 0;
  padding: 0;
}
#tabs ul li {
  margin-bottom: 30px;
  display: inline-block;
  width: 100%;
}
#tabs ul li:last-child {
  margin-bottom: 0px;
}
#tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  padding: 30px 30px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 5px;
  font-size: 19px;
  color: #232d39;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: all 0.3s;
}
#tabs .main-rounded-button a {
  text-align: center;
  padding: 20px 30px;
  width: 100%;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.5px;
  font-weight: 600;
  background-color: #ed563b;
}
#tabs .main-rounded-button a:hover {
  background-color: #f9735b;
}
#tabs ul li a .fa {
  font-size: 32px;
  height: 32px;
  color: #ed563b;
  margin-right: 15px;
  display: inline-block;
}
#tabs ul .ui-tabs-active span {
  background: #faf5b2;
  border: #faf5b2;
  line-height: 90px;
  border-bottom: none;
}
#tabs ul .ui-tabs-active a {
  color: #ed563b;
}
#tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}
.tabs-content {
  margin-left: 30px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}
.tabs-content img {
  max-width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.tabs-content h4 {
  font-size: 23px;
  font-weight: 700;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  margin-top: 30px;
}
.tabs-content p {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 28px;
}


/* 
---------------------------------------------
schedule
--------------------------------------------- 
*/

.section-bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.section-bg:before {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(35,45,57,0.8);
}

.section-bg > form,
.section-bg .container {
  position: relative;
  z-index: 2
}

#schedule {
  padding: 0px 0px 140px 0px;
}

#schedule table {
  width: 100%;
  text-align: center;
  border: 1px solid #fff;
}

#schedule table tbody {
  border-top: 1px solid #fff; 
}

#schedule table tbody tr {
  border-bottom: 1px solid #fff;
}

#schedule table tbody tr td {
  border-right: 1px solid #fff;
  height: 100px;
}

#schedule table tr td {
  color: #fff;
  font-size: 13px;
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.25px;
}

.schedule-table.filtering .ts-item {
    opacity: 0;
    transition: all 0.5s;
}

.schedule-table.filtering .ts-item.show {
    opacity: 1;
    transition: all 0.5s;
}

#schedule .filters {
  margin-bottom: 40px;
}
#schedule .filters ul {
  padding: 0;
  text-align: center;
}
#schedule .filters ul li {
  list-style: none;
  display: inline;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#schedule .filters ul li:after {
  content: "/";
  margin-left: 10px;
  color: #fff;
}
#schedule .filters ul li:last-child {
  margin-right: 0px;
}
#schedule .filters ul li:last-child::after {
  display: none;
}
#schedule .filters ul li.active,
#schedule .filters ul li:hover {
  color: #ed563b;
}
#schedule .filters-content {
  margin-top: 50px;
}
#schedule .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#schedule .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}


/* 
---------------------------------------------
trainers
--------------------------------------------- 
*/

#trainers { 
  padding-bottom: 90px; 
}

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 15px;
  margin-bottom: 30px;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #ed563b;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

ul.social-icons li {
  display: inline-block;
  margin-right: 12px;
}

ul.social-icons li:last-child {
  margin-right: 0px;
}

ul.social-icons li a {
  color: #232d39;
  transition: all .3s;
}

ul.social-icons li a:hover {
  color: #ed563b;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

#contact-us {
  margin-top: 140px;
}

#contact-us .container-fluid .col-lg-6 {
  padding: 0px;
}

#contact-us .contact-form {
  padding: 80px;
  background-image: url(../images/contact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-us .contact-form #contact {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 13px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 40px;
  outline: none;
  line-height: 40px;
  padding: 0px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
}

.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.contact-form button {
  display: inline-block;
  font-size: 13px;
  padding: 11px 17px;
  background-color: #ed563b;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
  margin-top: -8px;
}

.contact-form button:hover {
  background-color: #f9735b;
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/
footer {
  text-align: center;
  padding: 30px 0px;
}

footer p {
  color: #232d39;
  font-size: 13px;
}

footer p a {
  cursor: pointer;
  color: #ed563b;
}

footer p a:hover {
  color: #ed563b;
}



/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #232d39;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #232d39;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fff;
    border-radius: 50%;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


@media (max-width: 992px) {

  .main-banner .caption h2 {
    font-size: 60px;
  }
  #features {
    margin-bottom: 110px;
  }
  #features .feature-item {
    margin-bottom: 30px;
  }
  #our-classes .tabs-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .trainer-item {
    margin-bottom: 30px;
  }
  #contact-us #map {
    margin-bottom: -7px;
  }
  #contact-us .contact-form {
    padding: 30px;
  }
  #contact-us .contact-form #contact {
    padding: 30px;
  }

}

@media (max-width: 450px) {
  .feature-item .right-content a.text-button {
    margin-left: 130px;
  }
}

.dropdown-menu {
  background: rgba(0,0,0,0.2);
  padding: 0;
  border-radius: 0;
}

.background-header .dropdown-menu {
  background: rgba(250,250,250,0.9);
}

.dropdown-menu a {
  line-height: 1.3;
  color: #fff;
}


.background-header .main-nav .nav li a:hover,
.background-header .main-nav .nav li a.active,
.dropdown-menu a.active,
.dropdown-menu a:hover {
  background: transparent;
  color: #ed563b!important;
}

.pagination-lg .page-link {
  color: #ed563b;
}

.btn-primary {
  border-color: #ed563b;
  background-color: #ed563b;
}

.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn-primary.dropdown-toggle,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary:hover {
  background-color: #f9735b;
  border-color: #f9735b;
  outline: none;
}

.icon {
  width: 72px;
  height: 72px;
  border-radius: 5px;
  color: #fff;
  background-color: #ed563b;
  font-size: 30px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #ed563b;
}

a:focus,
a:hover {
  color: #f9735b;
}