@import url('../fonts/font.css');

body {
  margin: 0px;
  padding: 0px;
}

/* View Parking Space Div */

.view_parking_space_div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 600px;
  height: 400px;
  border-radius: 5px;
  background-color: white;
  display: none;
}

.view_parking_space_img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.1;
}

.close_view_parking_space_div_btn {
  position: absolute;
  right: -1px;
  top: -4px;
  font-size: 25px;
  margin-right: 20px;
  font-family: Gabarito-Regular;
  cursor: pointer;
  transition: 0.5s;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: black;
  color: rgb(71, 147, 196);
}

.close_view_parking_space_div_btn:hover {
  background-color: rgb(71, 147, 196);
  color: black;
  transition: 0.5s;
}

.view_parking_space_container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.view_parking_space_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: black;;
}

.view_parking_space_txt {
  text-align: center;
  font-family: Gabarito-Regular;
  color: black;;
}

.view_parking_space_txt_key_word {
  color: rgb(71, 147, 196);
}

/*______________________*/

/* Shuttle Service Div */

.shuttle_table_div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  height: auto;
  width: 448px;
  background-color: white;
  border-radius: 5px;
  padding-top: 50px;
  padding-bottom: 50px;
  display: none;
}

.shuttle_table_img {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 647px;
  object-fit: cover;
  border-radius: 5px;
  z-index: -1;
  display: none;
}

.close_shuttle_table_btn {
  position: absolute;
  right: -1px;
  top: -4px;
  font-size: 25px;
  margin-right: 20px;
  font-family: Gabarito-Regular;
  cursor: pointer;
  transition: 0.5s;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  background-color: black;
  color: rgb(71, 147, 196);
}

.close_shuttle_table_btn:hover {
  background-color: rgb(71, 147, 196);
  color: black;
  transition: 0.5s;
}

.shuttle_table_title {
  text-align: center;
  font-family: Gabarito-Regular;
}

.shuttle_table_sub_title {
  text-align: center;
  font-family: Gabarito-Regular;
}

.shuttle_table_button_box_txt {
  text-align: center;
  font-family: Gabarito-Regular;
  margin-bottom: -23px;
}

.shuttle_table_button_box {
  width: 220px;
  margin: 35px auto;
  position: relative;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  border: 2px solid black;
  border-radius: 6px;
}

.shuttle_table_toggle_btn {
  padding: 10px 40px;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  position: relative;
  text-align: center;
  font-weight: bold;
}

.toggle_btn_one {
  color: black;
}

.toggle_btn_two {
  color: rgb(71, 147, 196);
}

#shuttle_table_btn {
  left: 0;
  top: 0;
  position: absolute;
  width: 110px;
  height: 100%;
  background-color: rgb(71, 147, 196);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.shuttle_table_sub_text_klia {
  text-align: center;
  font-family: Gabarito-Regular;
  margin-top: -22px;
}

.shuttle_table_sub_text_klia_2 {
  text-align: center;
  font-family: Gabarito-Regular;
  display: none;
  margin-top: -22px;
}

.shuttle_table_sub_text_key_mark {
  color: rgb(71, 147, 196);
  font-weight: bold;
}

.shuttle_shedule_table_div_klia {
  margin: auto; /* Center the div horizontally */
  text-align: center; /* Center the text inside the div */
  height: 300px;
  width: 301px;
  overflow: auto;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
}

.shuttle_shedule_table_klia {
  margin: auto; /* Center the div horizontally */
  text-align: center; /* Center the text inside the div */
  background-color: black;
}

.shuttle_shedule_table_klia_column_title {
  background-color: black;
  font-size: 24px;
  font-family: Gabarito-Regular;
  font-weight: bolder;
}

.shuttle_shedule_table_klia_row_title {
  background-color: rgb(71, 147, 196);
  padding: 20px;
  padding-left: 24px;
  padding-right: 34px;
}

.klia_column {
  font-family: Gabarito-Regular;
  background-color: white;
}

.klia_row {
  padding: 10px;
}

.shuttle_shedule_table_div_klia_2 {
  margin: auto; /* Center the div horizontally */
  text-align: center; /* Center the text inside the div */
  height: 300px;
  width: 301px;
  overflow: auto;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
  display: none;
}

.shuttle_shedule_table_klia_2 {
  margin: auto; /* Center the div horizontally */
  text-align: center; /* Center the text inside the div */
  background-color: black;
}

.shuttle_shedule_table_klia_2_column_title {
  background-color: black;
  font-size: 24px;
  font-family: Gabarito-Regular;
  font-weight: bolder;
}

.shuttle_shedule_table_klia_2_row_title {
  background-color: rgb(71, 147, 196);
  padding: 20px;
}

.klia_2_column {
  font-family: Gabarito-Regular;
  background-color: white;
}

.klia_2_row {
  padding: 10px;
}

/* For WebKit browsers (Chrome, Safari) */
.shuttle_shedule_table_div_klia::-webkit-scrollbar {
  width: 12px; /* Set the width of the scrollbar */
}

.shuttle_shedule_table_div_klia::-webkit-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
}

.shuttle_shedule_table_div_klia::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the color of the scrollbar track */
}

/* For Firefox */
.shuttle_shedule_table_div_klia {
  scrollbar-width: thin; /* Set the width of the scrollbar */
  scrollbar-color: #888 #f1f1f1; /* Set the color of the thumb and track */
}

/* For Edge/IE */
.shuttle_shedule_table_div_klia {
  -ms-overflow-style: none; /* Hide the default scrollbar in IE/Edge */
}

.shuttle_shedule_table_div_klia::-ms-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
}

.shuttle_shedule_table_div_klia::-ms-scrollbar-track {
  background-color: #f1f1f1; /* Set the color of the scrollbar track */
}

/* For WebKit browsers (Chrome, Safari) */
.shuttle_shedule_table_div_klia_2::-webkit-scrollbar {
  width: 12px; /* Set the width of the scrollbar */
}

.shuttle_shedule_table_div_klia_2::-webkit-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
}

.shuttle_shedule_table_div_klia_2::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Set the color of the scrollbar track */
}

/* For Firefox */
.shuttle_shedule_table_div_klia_2 {
  scrollbar-width: thin; /* Set the width of the scrollbar */
  scrollbar-color: #888 #f1f1f1; /* Set the color of the thumb and track */
}

/* For Edge/IE */
.shuttle_shedule_table_div_klia_2 {
  -ms-overflow-style: none; /* Hide the default scrollbar in IE/Edge */
}

.shuttle_shedule_table_div_klia_2::-ms-scrollbar-thumb {
  background-color: #888; /* Set the color of the scrollbar thumb */
}

.shuttle_shedule_table_div_klia_2::-ms-scrollbar-track {
  background-color: #f1f1f1; /* Set the color of the scrollbar track */
}

/* ______________________ */

.intro_div {
  margin-bottom: -260px;
}

.intro_img {
  position: relative;
  bottom: 103px;
  z-index: -1;
  width: 100%;
  height: 746px;
  object-fit: cover;
}

.parking_information {
  position: relative;
  bottom: 575px;
  left: 200px;
  width: 725px;
}

.img_introduction_title{
  font-family: Gabarito-Regular;
  font-size: 50px;
  color: white;
}

.img_introduction_title_support {
  font-family: Gabarito-Regular;
  font-weight: 900;
  font-size: 25px;
  color: white;
}

.view_parking_btn {
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  background-color: rgb(71, 147, 196);
  color: black;
  font-family: Gabarito-Regular;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.view_parking_btn:hover {
  background-color: black;
  color: rgb(71, 147, 196);
  transition: 0.5s;
}


.why_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: rgb(71, 147, 196);
}

.why_sub_title {
  text-align: center;
  font-family: Gabarito-Regular;
}

/* Scroll Solution */

.scroll_solution_description {
  font-family: Gabarito-Regular;
  color: rgb(71, 147, 196);
  text-align: center;
  margin-bottom: 10px;
  display: none;
}

.scroll_solution_container {
  display: none;
}

.scroll_solution_div {
  display: flex;
  justify-content: space-between;
  background-color: rgb(47,47,47);
  margin: 0 auto;
  padding: 6px;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 20px;
}

.shuttle_scroll {
  background-color: rgb(71, 147, 196);
  border: none;
  font-size: 20px;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

.easy_scroll {
  border: none;
  font-size: 20px;
  background-color: rgb(47,47,47);
  color: white;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

.secure_scroll {
  border: none;
  font-size: 20px;
  background-color: rgb(47,47,47);
  color: white;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

/*______________________*/

.why_div_container {
  display: flex;
  justify-content: space-around;
}

/* Smaller Screen Why Div Container Div */

.why_div_container_small_hold {
  display: none;
}

.why_div_container_small {
  display: flex;
  justify-content: space-around;
}

/* _______________________________ */

.shuttle_div {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
}

.shuttle_img {
  object-fit: cover;
  height: auto;
  width: 350px;
}

.shuttle_title {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.shuttle_description {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.shuttle_schedule_btn {
  font-weight: bold;
  padding: 10px;
  background-color: rgb(71, 147, 196);
  color: black;
  font-family: Gabarito-Regular;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
  margin-bottom: 10px;
  margin-left: 10px;
}

.shuttle_schedule_btn:hover {
  background-color: black;
  color: rgb(71, 147, 196);
  transition: 0.5s;
}

/* Smaller Screen Shuttle Div */

.shuttle_div_small {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
  display: none;
}

/* _______________________________ */

.quick_and_easy_parking_div {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
}

.quick_and_easy_parking_img {
  object-fit: cover;
  height: auto;
  width: 350px;
}

.quick_and_easy_parking_title {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.quick_and_easy_parking_description {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

/* Smaller Screen Quick And Easy Div */

.quick_and_easy_parking_div_small {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
  display: none;
}

/* _______________________________ */

.safe_and_secure_div {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
}

.safe_and_secure_img {
  object-fit: cover;
  height: auto;
  width: 350px;
}

.safe_and_secure_title {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.safe_and_secure_description {
  font-family: Gabarito-Regular;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

/* Smaller Screen Save And Secure Div */

.safe_and_secure_div_small {
  height: auto;
  width: 350px;
  border-radius: 5px;
  border: 4px solid rgb(71, 147, 196);
  display: none;
}

/* _______________________________ */

.about_location_div {
  margin-top: 40px;
  margin-bottom: -350px;
}

.about_location_img {
  width: 100%;
  height: 746px;
  object-fit: cover;
}

.about_location_div_text_container {
  position: relative;
  bottom: 670px;
}

.about_location_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: rgb(71, 147, 196);
}

.about_location_sub_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: white
}

/* Scroll Solution */

.scroll_location_description {
  font-family: Gabarito-Regular;
  color: rgb(71, 147, 196);
  text-align: center;
  margin-bottom: 10px;
  display: none;
}

.scroll_location_container {
  display: none;
}

.scroll_location_div {
  display: flex;
  justify-content: space-between;
  background-color: rgb(47,47,47);
  margin: 0 auto;
  padding: 6px;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 25px;
}

.airport_parking_scroll {
  background-color: rgb(71, 147, 196);
  border: none;
  font-size: 20px;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

.hourly_parking_scroll {
  border: none;
  font-size: 20px;
  background-color: white;
  color: black;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

.event_parking_scroll {
  border: none;
  font-size: 20px;
  background-color: white;
  color: black;
  border-radius: 5px;
  font-family: Gabarito-Regular;
  padding: 10px;
}

/*______________________*/

.about_location_div_container {
  position: relative;
  bottom: 621px;
  display: flex;
  justify-content: space-around;
}

.airport_shuttle_div {
  height: auto;
  width: 600px;
  margin-top: 30px;
}

.airport_shuttle_body_one {
  display: flex;
}

.airport_shuttle_body_one_img {
  width: auto;
  height: 70px;
}

.airport_shuttle_body_one_text {
  position: relative;
  bottom: 8px;
  margin-left: 10px;
}

.airport_shuttle_body_one_title {
  color: white;
  margin-bottom: -20px;
  font-family: Gabarito-Regular;
}

.airport_shuttle_body_one_sub_title {
  color: rgb(71, 147, 196);
  font-family: Gabarito-Regular;
}

.about_location_line {
  border: 1px solid white;
}

.airport_shuttle_body_one_description {
  color: white;
  font-family: Gabarito-Regular;
}

.airport_shuttle_btn {
  font-size: 15px;
  font-weight: bold;
  padding: 10px;
  background-color: rgb(71, 147, 196);
  color: black;
  font-family: Gabarito-Regular;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.airport_shuttle_btn:hover {
  background-color: white;
  color: rgb(71, 147, 196);
  transition: 0.5s;
}


.overnight_parking_div {
  height: auto;
  width: 300px;
  display: none;
}

.overnight_parking_body_one {
  display: flex;
}

.overnight_parking_body_one_img {
  width: auto;
  height: 60px;
}

.overnight_parking_body_one_text {
  position: relative;
  bottom: 8px;
  margin-left: 10px;
}

.overnight_parking_body_one_title {
  color: white;
  margin-bottom: -20px;
  font-family: Gabarito-Regular;
}

.overnight_parking_body_one_sub_title {
  color: rgb(71, 147, 196);
  font-family: Gabarito-Regular;
}

.overnight_parking_body_one_description {
  color: white;
  font-family: Gabarito-Regular;
}

.overnight_parking_btn {
  font-size: 15px;
  font-weight: bold;
  padding: 10px;
  background-color: rgb(71, 147, 196);
  color: black;
  font-family: Gabarito-Regular;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.overnight_parking_btn:hover {
  background-color: white;
  color: rgb(71, 147, 196);
  transition: 0.5s;
}


.event_parking_div {
  height: auto;
  width: 300px;
  display: none;
}

.event_parking_body_one {
  display: flex;
}

.event_parking_body_one_img {
  width: 60px;
  height: 60px;
}

.event_parking_body_one_text {
  position: relative;
  bottom: 8px;
  margin-left: 10px;
}

.event_parking_body_one_title {
  color: white;
  margin-bottom: -20px;
  font-family: Gabarito-Regular;
}

.event_parking_body_one_sub_title {
  color: rgb(71, 147, 196);
  font-family: Gabarito-Regular;
}

.event_parking_body_one_description {
  color: white;
  font-family: Gabarito-Regular;
}

.event_parking_btn {
  font-size: 15px;
  font-weight: bold;
  padding: 10px;
  background-color: rgb(71, 147, 196);
  color: black;
  font-family: Gabarito-Regular;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.event_parking_btn:hover {
  background-color: white;
  color: rgb(71, 147, 196);
  transition: 0.5s;
}

/* Smaller Screen Location Div */

.about_location_div_container_small_container {
  display: none;
}

.about_location_div_container_small {
  position: relative;
  bottom: 621px;
  display: flex;
  justify-content: space-around;
}

.airport_shuttle_div_small {
  height: auto;
  width: 500px;
  display: block;
}

.overnight_parking_div_small {
  height: auto;
  width: 300px;
  display: none;
}

.event_parking_div_small {
  height: auto;
  width: 300px;
  display: none;
}

/* ______________________ */

.google_maps_div {
  margin-bottom: 40px;
}

.google_maps_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: rgb(71, 147, 196);
}

.google_maps_sub_title {
  text-align: center;
  font-family: Gabarito-Regular;
  color: black;
}

.google_maps_image_1_div {
  display: flex;
  justify-content: center;
}

.google_maps_image_1_front {
  width: auto;
  height: 350px;
  margin-right: 10px;
  border-radius: 10px;
}

.google_maps_image_1_side {
  width: auto;
  height: 350px;
  margin-left: 10px;
  border-radius: 10px;
}

.google_maps_image_2_div {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.google_maps_image_2_front {
  width: auto;
  height: 350px;
  margin-right: 10px;
  border-radius: 10px;
}

.google_maps_image_2_side {
  width: auto;
  height: 350px;
  margin-left: 10px;
  border-radius: 10px;
}

.google_maps_map_div {
  display: flex;
  justify-content: center;
}

.google_maps_map {
  width: 1000px;
  height: 450px;
  border-left: 4px solid rgb(71, 147, 196);
  border-top: 4px solid rgb(71, 147, 196);
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}