@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@keyframes marquee {
  to {
    left: -100%;
  }
}
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*-------------------------------------------------------
RESPONSIVENESS MIXINS
---------------------------------------------------------*/
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800px] is where our noraml styles apply
1800px + :      Big desktop
*/
/*
$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px doesn't get effected by root element's scale. it is a browser default.
*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (max-width: 36em) {
  html {
    font-size: 40%;
  }
}

body {
  box-sizing: border-box;
  font-family: "lato", sans-serif;
  line-height: 1.6;
  position: relative;
}

.heading-1 {
  font-size: 5rem;
  font-weight: 500;
}

.heading-2 {
  font-size: 4rem;
  font-weight: 600;
}

.heading-3 {
  font-size: 3rem;
  font-weight: 500;
}

.heading-4 {
  font-size: 2.5rem;
  font-weight: 400;
}
@media (min-width: 75em) and (max-width: 87.5em) {
  .heading-4 {
    font-size: calc(1.5rem + 0.5vw);
  }
}

.heading-5 {
  font-size: 2rem;
  font-weight: 350;
  width: 70%;
}

.paragraph {
  font-size: 1.8rem;
  font-weight: 400;
}

.para {
  font-size: 1.6rem;
  font-weight: 400;
}

.u-mg-btm-sm {
  margin-bottom: 2rem;
}

.u-mg-btm-md {
  margin-bottom: 4rem;
}

.u-mg-btm-lg {
  margin-bottom: 6rem;
}

.u-mg-top-sm {
  margin-top: 2rem;
}

.u-mg-top-md {
  margin-top: 4rem;
}

.u-mg-top-lg {
  margin-top: 6rem;
}

.btn-link, .btn-outline, .btn-bold, .btn-white {
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 3rem;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
}
@media (min-width: 75em) and (max-width: 87.5em) {
  .btn-link, .btn-outline, .btn-bold, .btn-white {
    font-size: 1.3rem;
    padding: 1rem 2rem;
  }
}
@media only screen and (max-width: 62em) {
  .btn-link, .btn-outline, .btn-bold, .btn-white {
    padding: 1rem 2rem;
  }
}

.btn-white {
  border: none;
  background-color: #2A2D26;
  color: #fff;
  transition: all 0.2s;
}
.btn-white:hover {
  background-color: #fff;
  color: #0A0C09;
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn-bold {
  border: none;
  background-color: #04949b;
  color: #fff;
  transition: all 0.2s;
}
.btn-bold:hover {
  background-color: #158189;
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn-outline {
  border: 2px solid #12959a;
  background-color: transparent;
  color: #fff;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #12959a;
  transform: scaleY(1);
  transform-origin: bottom;
  z-index: -1;
  transition: all 0.4s;
}
.btn-outline:hover {
  color: #04949b;
  border: 2px solid #04949b;
}
.btn-outline:hover::before {
  transform: scaleY(0);
  transform-origin: bottom;
}

.btn-link {
  border: none;
  background-color: transparent;
  color: #04949b;
  position: relative;
  z-index: 1;
  padding: 0;
}

.side-button {
  position: fixed;
  top: 40vh;
  right: 0;
  z-index: 1000;
}
.side-button__link {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  padding: 2rem 2rem 2rem 1rem;
  display: inline-block;
  text-transform: uppercase;
  border: none;
  border-radius: 0 3px 3px 0;
  color: #fff;
  position: relative;
  background: linear-gradient(270deg, #04949b, #12959a, #158189);
  background-size: 300% 300%;
  animation: gradientFlow 4s infinite linear;
  transition: all 0.3s ease-in-out;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.side-button__link:hover {
  filter: brightness(1.2);
}
.side-button__link::before, .side-button__link::after {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 0.15rem;
  background-color: #fff;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.side-button__link::after {
  left: 80%;
}

.video-btn {
  border-radius: 5px;
  font-size: 2rem;
  font-weight: 400;
  padding: 1rem 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1000;
  text-decoration: none;
  color: #0A0C09;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.4s;
}
.video-btn__icon {
  border-radius: 50%;
  padding: 0.5rem;
}
.video-btn__icon:hover {
  background-color: #04949b;
  box-shadow: 0 1rem 2rem rgba(4, 148, 155, 0.5);
}
.video-btn__icon:hover::after {
  transform: scale(1.6);
  opacity: 0;
}
.video-btn__icon:hover .video-btn--play {
  fill: #fff;
}
.video-btn--play {
  width: 4.5rem;
  height: 4.5rem;
  fill: #04949b;
}

/*-------------------------------------------------------
SVG ICONS
---------------------------------------------------------*/
.svg__icon {
  width: 4.5rem;
  height: 4.5rem;
  fill: #04949b;
  margin-bottom: 2rem;
}

.svg__icon--white {
  width: 3rem;
  height: 3rem;
  fill: #fff;
  margin-bottom: 1rem;
}

.svg__icon--primary {
  width: 3rem;
  height: 3rem;
  fill: #04949b;
  margin-bottom: 1rem;
}

.star__rating--icon {
  font-size: 1.5rem;
  color: #04949b;
}
.star__rating--icon:not(:last-child) {
  margin-right: 1px;
}

.card__icon {
  font-size: 2rem;
  color: #04949b;
}

.c-card {
  border: none;
  border-radius: 10px;
  background-color: #f7f7f7;
  box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.4s ease-out;
}
.c-card:hover {
  transform: translate(10px, -20px);
  background-color: #12959a;
  color: #fff;
}
.c-card:hover .svg__icon {
  fill: #fff;
}
.c-card:hover .btn-link {
  color: #fff;
}
.c-card:hover .star__rating--icon {
  color: #fff;
}

/*-------------------------------------------------------
CONTACT FORM SECTION
---------------------------------------------------------*/
.contact-form {
  background-color: #f7f7f7;
}
.contact-form .container {
  padding: 4rem;
}
.contact-form__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  gap: 6rem;
  justify-items: center;
}
.contact-form__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #000;
}
.contact-form__text > * {
  margin-bottom: 0.7rem;
}
.contact-form__text--link {
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #158189;
  text-decoration: none;
}
.contact-form__support {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.contact-form__support--flex h4 {
  margin-bottom: 1rem;
}
.contact-form__support--flex p {
  font-size: 1.5rem;
  font-weight: 400;
}
.contact-form__box {
  align-self: center;
  height: auto;
  width: fit-content;
  max-width: 84%;
  padding: 2rem 2rem 0.5rem 2rem;
  border: none;
  box-shadow: 0 2rem 4rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #fff;
}
.contact-form__box--row {
  margin-top: 1rem;
  font-size: 1.5rem;
}
.contact-form__box--row > * {
  margin-bottom: 1rem;
}
.contact-form__box--row .form-control {
  height: 5vh;
  font-size: 1.5rem;
}
@media only screen and (max-width: 48em) {
  .contact-form__box--row .form-control {
    height: 2vh;
  }
}
.contact-form__box--row .form-control:focus {
  border-color: #04949b;
  box-shadow: 0 0 0 0.25rem rgba(18, 149, 154, 0.4);
}
.contact-form__box--row .form-control--comments {
  height: 12vh;
  font-size: 1.5rem;
}
.contact-form__box--row > :last-child {
  text-align: center;
}

/*-------------------------------------------------------
CALL TO ACTION 1 SECTION
---------------------------------------------------------*/
.call-atn {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/car-img3.jpg);
  background-size: cover;
  background-position: top;
  height: 70vh;
  color: #fff;
  margin-top: 3rem;
}
@media only screen and (max-width: 75em) {
  .call-atn {
    height: 55vh;
  }
}
@media only screen and (max-width: 62em) {
  .call-atn {
    height: 45vh;
  }
}
.call-atn__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.call-atn__heading {
  font-weight: 600;
  margin-bottom: 2rem;
}
.call-atn__paragraph {
  margin-bottom: 2rem;
  width: 80%;
}
.call-atn__call a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}
.call-atn__call a:hover {
  color: #04949b;
}
.call-atn__or {
  position: relative;
  margin-bottom: 2rem;
  color: #12959a;
  font-size: 4.5rem;
  font-weight: 600;
  font-style: italic;
  display: inline-block;
}
.call-atn__or::before, .call-atn__or::after {
  content: "";
  width: 15rem;
  height: 3px;
  background-color: #fff;
  position: absolute;
  top: 50%;
}
.call-atn__or::before {
  right: 100%;
}

/*-------------------------------------------------------
CALL TO ACTION 2 SECTION
---------------------------------------------------------*/
.cal-act .container {
  padding: 4rem;
}
.cal-act__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/singapore-flyer.jpg);
  background-size: cover;
  background-position: 50% 40%;
  width: 100%;
  padding: 2rem;
  color: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: -1;
}
@media only screen and (max-width: 62em) {
  .cal-act__bg {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
}
.cal-act__content {
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.wrapper {
  height: auto;
  height: auto;
  display: grid;
  place-items: center;
  transition: background-color 0.8s;
  margin-top: 4rem;
}

.marquee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12vmin, 35rem));
  width: 90%;
  margin-bottom: 3%;
  margin-top: 1%;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 7%, rgb(0, 0, 0) 93%, rgba(0, 0, 0, 0));
}
.marquee .card {
  --time: 40s;
  position: relative;
  width: 110% !important;
  aspect-ratio: unset;
  grid-column: 1;
  grid-row: 1;
  object-fit: cover;
  cursor: pointer;
  left: 400%;
  animation: marquee var(--time) linear infinite;
}
.marquee .card:nth-of-type(1) {
  animation-delay: calc(var(--time) / 4 * 3 * -1);
}
.marquee .card:nth-of-type(2) {
  animation-delay: calc(var(--time) / 4 * 2 * -1);
}
.marquee .card:nth-of-type(3) {
  animation-delay: calc(var(--time) / 4 * 1 * -1);
}
.marquee .card:nth-of-type(4) {
  animation-delay: calc(var(--time) / 4 * 0 * -1);
}
.marquee.reverse {
  margin-top: 10%;
}
.marquee.reverse .card {
  animation-direction: reverse;
}

dialog {
  border: none;
  outline: none;
  margin: auto;
  border-radius: 0.25rem;
  background-color: transparent;
}
dialog::backdrop {
  display: none;
}
dialog .card {
  width: min(800px, 80vw);
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.popup:target {
  opacity: 1;
  visibility: visible;
}
.popup:target .container {
  opacity: 1;
  transform: translate(0%, -50%);
  transition: all 0.3s ease;
}
@media only screen and (max-width: 36em) {
  .popup:target .container {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
}
.popup .container {
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-28%);
  width: 30%;
  height: 100%;
  color: #000;
  font-size: 1.8rem;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
@media only screen and (max-width: 75em) {
  .popup .container {
    width: 40%;
  }
}
@media only screen and (max-width: 62em) {
  .popup .container {
    width: 50%;
  }
}
@media only screen and (max-width: 36em) {
  .popup .container {
    width: 90%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.25);
  }
}
.popup__form {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.popup__form--input {
  height: 4rem;
  width: 100%;
  font-size: 1.4rem;
}
.popup__form--input:focus {
  outline: none;
  border: none;
  border-color: none;
}
.popup__form--box {
  display: flex;
  flex-direction: column;
}
.popup__form--dropdown {
  display: flex;
}
.popup__form--dropdown button {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  outline: none;
}
.popup__form--btn {
  text-align: center;
  margin-top: 1rem;
}
.popup__close {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 0.5rem 1rem;
  padding: 1rem 0.5rem;
}
.popup__close--icon {
  text-decoration: none;
  font-size: 4rem;
  font-weight: 500;
  color: #04949b;
}

/*-------------------------------------------------------
SERVICE PAGE FAQ SECTION
---------------------------------------------------------*/
.faq {
  margin-top: 2rem;
}
.faq__container {
  padding: 4rem;
}
.faq__box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  align-items: center;
}
.faq__text > * {
  margin-bottom: 2rem;
}
.faq__questions {
  height: 100%;
}
.faq__questions--button {
  font-size: 1.8rem;
  font-weight: 400;
  padding: 2rem 2.5rem;
}
.faq__questions--button:not(.collapsed) {
  background-color: rgba(4, 148, 155, 0.7);
  color: #fff;
}
.faq__questions--button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}
.faq__questions--button:focus {
  box-shadow: 0 0 0 0.25rem rgba(18, 149, 154, 0.4);
}
.faq__questions--text {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 1px;
}
.faq__questions--text span {
  font-weight: 600;
  color: #04949b;
}

.footer {
  background-color: rgba(10, 12, 9, 0.9);
  background-size: 300% 300%;
}
.footer__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
  grid-template-rows: max-content min-content;
  column-gap: 6rem;
  padding: 2rem 3rem;
  font-weight: 400;
}
@media only screen and (max-width: 75em) {
  .footer__container {
    grid-row: row-start 5/row-end 5;
  }
}
@media only screen and (max-width: 62em) {
  .footer__container {
    grid-template-columns: none;
    grid-template-rows: repeat(3, min-content);
  }
}
@media only screen and (max-width: 62em) {
  .footer__left {
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
  }
}
.footer__left--logo {
  display: flex;
  align-items: center;
  width: 12rem;
  height: 8rem;
}
.footer__left--logo-img {
  width: 100%;
  height: 100%;
  margin-right: 1rem;
}
.footer__left--logo-name {
  font-size: 2.5rem;
  font-weight: 500;
  color: #fff;
}
.footer__left--social {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
.footer__left--social-link {
  transition: all 0.4s;
}
.footer__left--social-link:not(:last-child) {
  margin-right: 1.5rem;
}
.footer__left--social-link:hover {
  transform: scale(1.2) translateY(-3px);
}
.footer__left--social-icon {
  fill: #fff;
  width: 3rem;
  height: 3rem;
}
.footer__left--subscribe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 2rem;
  color: #fff;
}
@media only screen and (max-width: 62em) {
  .footer__left--subscribe {
    align-items: center;
  }
}
.footer__left--subscribe > * {
  margin-bottom: 2rem;
}
.footer__left--subscribe-text {
  font-size: 1.7rem;
  letter-spacing: 1px;
  width: 50rem;
}
.footer__left--subscribe-form {
  display: flex;
  border: 1px solid rgba(4, 148, 155, 0.5);
  border-radius: 5px;
}
.footer__left--subscribe-input {
  border: none;
  font-family: inherit;
  font-size: 1.7rem;
  padding: 0.5rem 1rem;
}
.footer__left--subscribe-input:focus {
  outline: none;
}
.footer__left--subscribe-btn {
  border-radius: 0;
  border: none;
  color: currentColor;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s;
  background-color: #2A2D26;
}
.footer__left--subscribe-btn:hover {
  background-color: #141713;
}
.footer__right {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  color: #fff;
}
.footer__right--about {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__right--about-list {
  list-style: none;
  margin-top: 2rem;
}
.footer__right--about-item {
  font-size: 1.7rem;
  margin-bottom: 2rem;
  transition: transform 0.4s, color 0.2s;
  color: #fff;
}
.footer__right--about-item:hover {
  transform: scale(1.2) translate(10px, -2px);
}
.footer__right--about-link {
  text-decoration: none;
  color: currentColor;
}
.footer__copyright {
  grid-column: 1/-1;
  grid-row: 2/-1;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 1.3rem;
  font-weight: light;
  color: #f7f7f7;
  margin-top: 1rem;
  justify-items: center;
  align-items: center;
}
@media only screen and (max-width: 62em) {
  .footer__copyright {
    grid-row: 3/-1;
  }
}
.footer__copyright--text {
  margin-top: 2rem;
  letter-spacing: 2px;
}

.navbar {
  font-size: 1.8rem;
  font-weight: 400;
  height: 12vh;
  background-color: transparent;
  transition: all 0.3s ease-in;
}
@media only screen and (max-width: 62em) {
  .navbar {
    background-color: #fff;
    color: #000;
    height: auto;
  }
  .navbar button {
    font-size: 3rem;
    border: none;
    border-radius: 5px;
  }
}
.navbar-brand {
  width: 13rem;
  height: 10rem;
}
.navbar-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.navbar-nav--item {
  display: flex;
  align-items: center;
}
.navbar-nav--item__dropdown {
  position: relative;
}
.navbar-nav--item:not(:last-child) {
  margin-right: 2rem;
}
@media only screen and (max-width: 62em) {
  .navbar-nav--item {
    flex-direction: column;
    align-items: flex-start;
  }
}
.navbar-nav--link {
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 62em) {
  .navbar-nav--link {
    color: #000;
  }
}
.navbar-nav--link::before {
  content: "";
  position: absolute;
  bottom: -1.2rem; /* Position at the bottom of the navbar */
  left: 0;
  width: 0;
  height: 2px;
  background-color: transparent; /* Highlight color */
  transition: width 0.3s ease-in;
}
.navbar-nav--link:hover {
  color: #158189;
}
.navbar-nav--link:hover::before {
  width: 100%; /* Extend border only under the hovered element */
}
.navbar-nav--item__dropdown:hover .navbar-nav__dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.navbar-nav__dropdown-toggle {
  color: #fff;
}
@media only screen and (max-width: 62em) {
  .navbar-nav__dropdown-toggle {
    color: #000;
  }
}
.navbar-nav__dropdown-menu {
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.3s ease-in;
}
@media only screen and (max-width: 62em) {
  .navbar-nav__dropdown-menu {
    background-color: #fff;
    margin-left: 1rem;
  }
}
.navbar-nav__dropdown-menu li {
  margin: 0.8rem 1rem;
}
.navbar-nav__dropdown-item {
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.navbar-nav__dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
}
@media only screen and (max-width: 62em) {
  .navbar-nav__dropdown-item {
    color: #000;
  }
}
.navbar.scrolled {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.navbar.scrolled .navbar-nav--link {
  color: #000;
}
.navbar.scrolled .navbar-nav--link:hover {
  color: #04949b;
}
.navbar.scrolled .navbar-nav--link:hover::before {
  width: 100%;
  background-color: #04949b;
  border-bottom: 1px solid #04949b;
}
.navbar.scrolled .navbar-nav__dropdown-toggle {
  color: #000;
}
.navbar.scrolled .navbar-nav__dropdown-menu {
  background-color: #fff;
}
.navbar.scrolled .navbar-nav__dropdown-item {
  color: #000;
  transition: all 0.2s;
}
.navbar.scrolled .navbar-nav__dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

/*-------------------------------------------------------
PRICING SECTION
---------------------------------------------------------*/
.pricing {
  background-color: #f7f7f7;
}
.pricing .container {
  padding: 4rem;
}
.pricing__row {
  padding: 2rem;
  margin-top: 2rem;
}

.slider-wrapper {
  max-width: 90vw;
  overflow: hidden;
  margin: 2rem 6rem;
  padding: 2rem;
  border: none;
  align-content: center;
}
.slider-wrapper .swiper-pagination-bullet {
  background: #141713;
  height: 1rem;
  width: 1rem;
}
.slider-wrapper .swiper-slide-button {
  color: #141713;
  transition: all 0.4s ease;
}
.slider-wrapper .swiper-slide-button:hover {
  color: #04949b;
}
@media only screen and (max-width: 62em) {
  .slider-wrapper .swiper-slide-button {
    display: none;
  }
}
.slider-card__list {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.slider-card__box {
  padding: 1rem 0.5rem;
  user-select: none;
  border-radius: 5px;
  margin-right: 0 !important;
}
.slider-card__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.slider-card__detail {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #04949b;
}
.slider-card__price {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
}
.slider-card__tbody .table-row {
  padding-bottom: 1rem;
}
.slider-card__tbody:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.slider-card__base {
  font-size: 1.5rem;
  font-weight: 600;
  color: #999;
  padding: 1rem;
}

/*-------------------------------------------------------
TESTIMONIALS SECTION
---------------------------------------------------------*/
.testimonial .container {
  padding: 4rem;
  margin-top: 2rem;
}
.testimonial__card {
  padding: 1rem 2rem;
  font-size: 1.8rem;
}
.testimonial__card-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
}
.testimonial__card-box--img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: 50%;
}
.testimonial__card-box--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*-------------------------------------------------------
HOW IT WORKS SECTION
---------------------------------------------------------*/
.work .container {
  padding: 4rem;
}
.work .container h1 {
  margin-bottom: 4rem;
}
.work__carousel1 {
  border-radius: 5px;
  overflow: hidden;
}
.work__carousel1 img {
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
}
.work__carousel2 {
  margin-left: 2rem;
}
.work__carousel2 h3 {
  margin-bottom: 2rem;
}
.work__carousel2 h4 {
  margin-bottom: 1rem;
}
.work__carousel-box {
  position: relative;
  font-size: 2rem;
  font-weight: 400;
  margin-top: 3rem;
}
.work__carousel-box .page-display {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  color: #04949b;
  padding: 1rem;
}
.work__carousel-prev, .work__carousel-next {
  color: #04949b;
}
.work__carousel-prev .svg__icon, .work__carousel-next .svg__icon {
  z-index: 2;
  fill: #04949b;
}
.work__carousel-prev .svg__icon--right, .work__carousel-next .svg__icon--right {
  transform: translate(-18rem, -1.5rem);
}
@media only screen and (max-width: 87.5em) {
  .work__carousel-prev .svg__icon--right, .work__carousel-next .svg__icon--right {
    transform: translate(-15rem, -1.5rem);
  }
}
@media only screen and (max-width: 62em) {
  .work__carousel-prev .svg__icon--right, .work__carousel-next .svg__icon--right {
    transform: translate(-25rem, -1.5rem);
  }
}
@media only screen and (max-width: 48em) {
  .work__carousel-prev .svg__icon--right, .work__carousel-next .svg__icon--right {
    transform: translate(-15rem, -1.5rem);
  }
}
.work__carousel-prev .svg__icon--left, .work__carousel-next .svg__icon--left {
  transform: translate(18rem, -1.5rem);
}
@media only screen and (max-width: 87.5em) {
  .work__carousel-prev .svg__icon--left, .work__carousel-next .svg__icon--left {
    transform: translate(15rem, -1.5rem);
  }
}
@media only screen and (max-width: 62em) {
  .work__carousel-prev .svg__icon--left, .work__carousel-next .svg__icon--left {
    transform: translate(25rem, -1.5rem);
  }
}
@media only screen and (max-width: 48em) {
  .work__carousel-prev .svg__icon--left, .work__carousel-next .svg__icon--left {
    transform: translate(15rem, -1.5rem);
  }
}

/*-------------------------------------------------------
INTRODUCTION SECTION
---------------------------------------------------------*/
.intro {
  margin-top: 4rem;
}
.intro__container {
  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), white, rgba(255, 255, 255, 0.9), white, rgba(255, 255, 255, 0.6)), url(../img/chauffeur4.jpg);
  background-size: cover;
  background-position: top;
  border: none;
  border-radius: 10px;
}
.intro__main {
  padding: 2rem;
}
.intro__main h2 {
  margin-bottom: 2rem;
}
.intro__content {
  letter-spacing: 1px;
  line-height: 1.7;
}
.intro__content--key {
  margin-top: 2rem;
}
.intro__content--key h3 {
  margin-bottom: 2rem;
}
.intro__content--list {
  list-style: none;
  font-size: 2.5rem;
  font-weight: 400;
  columns: 2;
}
@media only screen and (max-width: 48em) {
  .intro__content--list {
    columns: 1;
  }
}
.intro__content--item {
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 2rem;
}
.intro__content--item span {
  font-weight: 600;
}

/*-------------------------------------------------------
CATALOG SECTION
---------------------------------------------------------*/
.catalog {
  margin-top: 4rem;
}
.catalog .container {
  padding: 2rem;
}
.catalog h2 {
  margin-bottom: 2rem;
}
.catalog__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-gap: 2rem;
}
@media only screen and (max-width: 62em) {
  .catalog__wrapper {
    grid-template-columns: 1fr;
  }
}
.catalog__card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  transform: skew(-10deg);
  transition: all 0.3s;
}
@media only screen and (max-width: 48em) {
  .catalog__card {
    transform: skew(0);
  }
}
.catalog__card--body {
  transform: skew(10deg);
  width: 100%;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
}
@media only screen and (max-width: 48em) {
  .catalog__card--body {
    transform: skew(0);
  }
}
.catalog__card--text {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.7;
}
.catalog__card:hover {
  transform: skew(-10deg) scale(1.05);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 48em) {
  .catalog__card:hover {
    transform: none;
  }
}

/*-------------------------------------------------------
 HERO SECTION
---------------------------------------------------------*/
#service-fleet {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), url(../img/hero-1.jpg);
}

/*-------------------------------------------------------
 CAR FLEET SECTION
---------------------------------------------------------*/
.car-fleet {
  margin-top: 4rem;
}
.car-fleet .container {
  padding: 4rem;
}
.car-fleet__wrapper {
  margin-top: 2rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  justify-content: center;
  align-items: center;
}
.car-fleet__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 2rem;
  padding: 2rem 1rem 2rem 3rem;
  border: none;
  border-radius: 10px;
  box-shadow: 2px 4px 8px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.car-fleet__card--content {
  font-style: italic;
  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), white, white, white, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8)), url(../img/chauffeur1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px 0 10px 0;
  padding: 1rem;
  margin: 0.5rem;
}
.car-fleet__card--content button {
  margin-bottom: 1rem;
}
.car-fleet__card--capacity {
  margin: 2rem 0;
}
.car-fleet__card--capacity-list {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem;
}
@media only screen and (max-width: 36em) {
  .car-fleet__card--capacity-list {
    gap: 2rem;
  }
}
.car-fleet__card--capacity-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
}
.car-fleet__card--icon {
  color: #04949b;
  font-size: 3.5rem;
}
.car-fleet__card--img-reverse {
  order: -1;
}
@media only screen and (max-width: 62em) {
  .car-fleet__card--img-reverse {
    order: 0;
  }
}
.car-fleet__card--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*-------------------------------------------------------
CONTACT HERO SECTION
---------------------------------------------------------*/
#contact-hero {
  height: 75vh;
}
@media only screen and (max-width: 62em) {
  #contact-hero {
    height: 50vh;
  }
}
@media only screen and (max-width: 48em) {
  #contact-hero {
    height: 40vh;
  }
}

/*-------------------------------------------------------
CONTACT MAP SECTION
---------------------------------------------------------*/
.contact-map {
  margin-top: 4rem;
}
.contact-map__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 4rem;
  margin-top: 4rem;
  align-items: center;
}
.contact-map__box {
  width: 100%;
  height: 50rem;
  border: none;
  margin: 1rem;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.contact-map__box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-map__text > * {
  margin-bottom: 1rem;
}
.contact-map__text p {
  line-height: 1.8;
}

/*-------------------------------------------------------
HERO SECTION
---------------------------------------------------------*/
.hero {
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/chauffeur1.jpg);
  background-size: cover;
  background-position: top;
}
@media only screen and (max-width: 62em) {
  .hero {
    margin-top: 10%;
    height: 95vh;
  }
}
@media only screen and (max-width: 48em) {
  .hero {
    height: 80vh;
  }
}
.hero .container {
  width: 100%;
  height: 100%;
  position: relative;
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-content--btn-box {
  display: flex;
  gap: 2rem;
}
@media only screen and (max-width: 48em) {
  .hero-content--btn-box {
    flex-direction: column;
  }
}

/*-------------------------------------------------------
BOOKING SECTION
---------------------------------------------------------*/
.booking {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
}
.booking-custom {
  transform: translateY(-15%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
@media only screen and (max-width: 62em) {
  .booking-custom {
    flex-direction: column;
  }
}
@media only screen and (max-width: 48em) {
  .booking-custom {
    transform: translateY(-10%);
  }
}
@media only screen and (max-width: 36em) {
  .booking-custom {
    transform: translateY(0);
    margin-top: 1rem;
    padding: 1.5rem;
  }
  .booking-custom > * {
    margin-bottom: 2rem;
  }
}
.booking__trip {
  background-color: #12959a;
  border-radius: 5px;
}
.booking__trip--form {
  margin: 1rem 1.5rem;
}
.booking__trip--form-title {
  padding: 1rem 1rem;
}
.booking__trip--form fieldset {
  display: flex;
  flex-direction: column;
}
.booking__trip--form-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.booking__trip--form-box > * {
  display: block;
  width: 100%;
}
.booking__trip--form-box--1 {
  grid-column: 1/-1;
  grid-row: 1/span 1;
}
.booking__trip--form-box--2 {
  grid-column: 1/-1;
  grid-row: 2/span 1;
}
.booking__trip--form-box--3 {
  grid-column: 1/2;
  grid-row: 3/span 1;
}
.booking__trip--form-box--4 {
  grid-column: 2/-1;
  grid-row: 3/span 1;
}
.booking__trip--form-box--5 {
  grid-column: 1/-1;
  grid-row: 4/span 1;
}
.booking__trip--form-box--6 {
  grid-column: 1/-1;
  grid-row: 5/-1;
  align-items: center;
  margin-top: 1.5rem;
}
.booking__trip--form-label {
  padding: 1rem;
}
.booking__trip--form-control {
  border: none;
  background-color: #fff;
  border-radius: 3px;
  padding: 1rem;
}
.booking__trip .c-btn {
  background-color: #158189;
  color: #fff;
}
.booking__info {
  background-color: #eee;
  border-radius: 5px;
  padding: 2rem;
}
.booking__info--card-title {
  padding: 1rem 1rem;
}
.booking__info--box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  margin: 2rem;
  padding: 2rem 1rem;
}
.booking__info--text {
  font-size: 1.8rem;
}
.booking__info--btn {
  margin: 1rem;
}
.booking__info--btn-link {
  text-decoration: none;
}

/*-------------------------------------------------------
EXPLORE SECTION
---------------------------------------------------------*/
.explore .container {
  padding: 4rem;
}
@media only screen and (max-width: 48em) {
  .explore__card {
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 36em) {
  .explore__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}

/*-------------------------------------------------------
ABOUT SECTION
---------------------------------------------------------*/
.about .container {
  padding: 4rem;
}
.about__row {
  padding: 2rem;
  background-color: #eee;
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: center;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
@media only screen and (max-width: 62em) {
  .about__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}
.about__content {
  grid-column: 1/2;
}
.about__box {
  grid-column: 2/-1;
  border-radius: 5px;
  overflow: hidden;
}
.about__box--img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*-------------------------------------------------------
SERVICE SECTION
---------------------------------------------------------*/
.service .container {
  padding: 4rem;
}
.service__header {
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}
.service__row {
  padding: 1rem;
}
.service__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap: 6rem;
}
.service__rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.service__rating span {
  font-size: 1.5rem;
}

/*-------------------------------------------------------
WHY CHOOSE US SECTION
---------------------------------------------------------*/
.choose-us .container {
  padding: 4rem;
  margin-top: 2rem;
}
.choose-us__row {
  padding: 2rem;
  margin-top: 2rem;
}
.choose-us__row h4, .choose-us__row p {
  margin-bottom: 1rem;
}

/*-------------------------------------------------------
HERO SECTION
---------------------------------------------------------*/
#service-airport {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/hero-3.jpg);
}

#service-chauffeur {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/chauffeur2.jpg);
}

#service-corporate {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/car-img1.jpg);
}

#service-wedding {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/service-wedding.jpg);
}

/*-------------------------------------------------------
OVERVIEW SECTION
---------------------------------------------------------*/
.service-overview {
  margin-top: 2rem;
}
.service-overview .container {
  padding: 4rem;
}
.service-overview__box {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  grid-template-rows: 1fr 1fr;
  column-gap: 2rem;
  row-gap: 4rem;
  align-items: center;
}
@media only screen and (max-width: 62em) {
  .service-overview__box {
    display: block;
  }
  .service-overview__box > * {
    margin-bottom: 2rem;
  }
}
.service-overview__content {
  align-self: center;
}
.service-overview__content button {
  transform: translateX(120%);
}
.service-overview__content--1 {
  grid-column: 2/-1;
}
.service-overview__content--2 {
  grid-column: 1/2;
  align-self: center;
}
.service-overview__content h2 {
  margin-bottom: 2rem;
}
.service-overview__img {
  border-radius: 10px;
  overflow: hidden;
  grid-column: span 2;
}
.service-overview__img--1 {
  grid-column: 1/2;
  filter: brightness(0.7);
}
.service-overview__img--2 {
  grid-column: 2/-1;
  align-self: center;
  width: 100%;
  height: auto;
  background-image: linear-gradient(to right bottom, white, white, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url(../img/chauffeur2.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  border: none;
}
.service-overview__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-overview__list {
  list-style: none;
  margin-top: 1rem;
}
.service-overview__item {
  font-size: 1.8rem;
  font-weight: 400;
}
.service-overview__item span {
  font-weight: 600;
  margin-right: 0.5rem;
}

/*-------------------------------------------------------
HERO SECTION
---------------------------------------------------------*/
.service-hero {
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/hero-2.jpg);
  background-size: cover;
  background-position: top;
}
@media only screen and (max-width: 62em) {
  .service-hero {
    margin-top: 10%;
    height: 90vh;
  }
}
@media only screen and (max-width: 48em) {
  .service-hero {
    height: 70vh;
  }
}
.service-hero .container {
  width: 100%;
  height: 100%;
  position: relative;
}
.service-hero__row {
  height: 100%;
  width: 100% !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.service-hero__box {
  margin-top: 2rem;
  padding: 2rem;
  transform: translateY(30%);
}
.service-hero__path {
  font-size: 3rem;
  font-weight: 700;
  color: #12959a;
}
.service-hero__path--list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.service-hero__path--item:not(:last-child) {
  margin-right: 1rem;
}
.service-hero__path--item:not(:first-child)::before {
  content: ">";
  margin-right: 1rem;
  color: currentColor;
}
.service-hero__path--link {
  text-decoration: none;
  color: currentColor;
}
.service-hero__text {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}
.service-hero__text--title {
  font-size: 4.5rem;
  font-weight: 500;
}
.service-hero__text--sub-title {
  font-size: 2.2rem;
  font-weight: 400;
}
.service-hero__text > * {
  margin-bottom: 2rem;
}

/*-------------------------------------------------------
WHY CHOOSE US SECTION
---------------------------------------------------------*/
.service-choose .container {
  margin-top: 3rem;
}
.service-choose__row {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35vw, 1fr));
  gap: 3rem;
}
.service-choose__img {
  border: none;
  border-radius: 10px;
  overflow: hidden;
}
@media only screen and (max-width: 62em) {
  .service-choose__img {
    display: none;
  }
}
.service-choose__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: inline-block;
  filter: brightness(0.6);
}
.service-choose__content--list {
  list-style: none;
  margin-top: 1rem;
}
.service-choose__content--item {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.service-choose__content--item-text {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.service-choose__content--item-text span {
  font-size: 2rem;
  color: #04949b;
}

/*-------------------------------------------------------
EXPLORE SECTION
---------------------------------------------------------*/
.service-explore {
  display: block;
  margin-top: 2rem;
}
.service-explore__box {
  width: 100%;
  height: 100%;
  padding: 2rem;
}
.service-explore__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}
.service-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  gap: 4rem;
}
.service-explore__grid--item {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: all 0.4s ease-out;
}
.service-explore__grid--item::before {
  content: attr(data-title);
  color: #fff;
  font-size: 2.5rem;
  font-weight: 600;
  position: absolute;
  top: 75%;
  right: 5%;
  z-index: 2;
  transition: all 0.4s;
  display: block;
}
.service-explore__grid--item:hover {
  background: linear-gradient(bottom, #04949b, #12959a);
}
.service-explore__grid--item:hover::before {
  display: none;
}
.service-explore__grid--item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #04949b, transparent);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  z-index: 2;
}
.service-explore__grid--item:hover::after {
  opacity: 1;
}
.service-explore__grid--item:hover .service-explore__grid--content {
  display: block;
}
.service-explore__grid--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}
.service-explore__grid--img:hover {
  cursor: pointer;
}
.service-explore__grid--content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -30%);
  z-index: 3;
  width: 35rem;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 1.5rem;
  transition: all 0.4s ease-out;
  display: none;
}
.service-explore__grid--link {
  position: absolute;
  bottom: -50%;
  right: 2%;
}

/*# sourceMappingURL=style.comp.css.map */