html {
  height: 100%;
}

body {
  font-family: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;
  height: 100%;
}

@keyframes blink {
  50% { opacity: 0; }
}
.blink {
  animation: blink 1s step-start infinite;
}

#whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
  color: var(--bs-danger);
}

/* Home page */

#showcase {
  background: url('../images/showcase.jpg') no-repeat bottom;
  background-size: cover;
}

#services-container .service:hover {
  background-color: var(--bs-danger);
  color: #ffffff;
  border-radius: 0.25rem;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
}

#services-container .service .icon {
  background-color: var(--bs-white);
  color: var(--bs-danger);
  transition: all ease-in-out 0.5s;
}

#services-container .service:hover .icon {
  background-color: var(--bs-white);
  color: var(--bs-danger);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}

#about-container {
  padding: 80px 0;
}

#contact-container {
  background: url('../images/contact-container.jpg') center no-repeat;
  background-size: cover;
  height: 800px;
}

/*  */

.about-header {
  background: url('../images/src/about_us.jpg') bottom no-repeat;
  background-blend-mode: difference;
  background-size: cover;
  padding-bottom: 25px;
  text-shadow: 2px 2px rgb(75, 73, 73);
}

.service-header {
  background: url('../images/src/service.jpg') top no-repeat;
  background-blend-mode: difference;
  background-size: cover;
  padding-bottom: 25px;
  text-shadow: 2px 2px rgb(75, 73, 73);
}

.contact-header {
  background: url('../images/src/contact.jpg') center no-repeat;
  background-blend-mode: difference;
  background-size: cover;
  padding-bottom: 25px;
  text-shadow: 2px 2px rgb(75, 73, 73);
}

.contact-info {
  color: #fab9d7;
}

.contact-field {
  background-color: #f9f8fc;
}

#login,
#register,
#faqs,
#booking,
#verification,
#trips,
#trip,
#sitemap,
#feedbacks {
  flex: 1;
}

#pills-tabContent:hover {
  cursor: pointer;
}

#map {
  height: 600px;
}

#airport {
  padding: 200px 0;
  background: #fff;
  text-align: justify;
}

#wedding {
  padding: 200px 0;
  background: #f9f8fc;
  text-align: justify;
}

#seaport {
  padding: 200px 0;
  background: #fff;
  text-align: justify;
}

#road {
  padding: 200px 0;
  background: #f9f8fc;
  text-align: justify;
}

#meet {
  padding: 200px 0;
  background: #fff;
  text-align: justify;
}

#day {
  padding: 200px 0;
  background: #f9f8fc;
  text-align: justify;
}

#corporate {
  padding: 200px 0;
  background: #fff;
  text-align: justify;
}

#tours {
  padding: 200px 0;
  background: #f9f8fc;
  text-align: justify;
}

#why-bittacy {
  padding: 200px 0;
  background: #fff;
  text-align: justify;
}

.service-icon {
  font-size: 192px;
  opacity: 0.25;
}

.service-icon-us {
  font-size: 112px;
}

.ui-menu {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ui-front {
  z-index: 2048 !important;
}

#booking .form-control:focus {
  border-color: #cbc8d0 !important;
}

#booking .input-group button {
  border-color: #cbc8d0 !important;
}

#vehicle-types,
#vehicle-type {
  text-transform: capitalize;
}

.list-group-checkable {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
}

.list-group-checkable .list-group-item {
  cursor: pointer;
}

.list-group-item-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.list-group-item {
  color: var(--bs-dark);
  background-color: var(--bs-white);
  border: 1px #cbc8d0 solid;
}

.list-group-item-check:hover+.list-group-item {
  color: var(--bs-dark);
  background-color: var(--bs-light);
  border: 1px #cbc8d0 solid;
}

.list-group-item-check:checked+.list-group-item {
  color: var(--bs-white);
  background-color: var(--bs-dark);
  border: 1px var(--bs-dark) solid;
}

.divider {
  width: 40%;
  height: 4px;
  background-color: var(--bs-danger);
  margin: 0 auto 40px auto;
}

.dropdown-menu,
.dropdown-item {
  background-color: var(--bs-dark);
  color: var(--bs-light);
  border: 1px var(--bs-dark) solid;
}

.dropdown-item:hover {
  background-color: var(--bs-danger);
  color: var(--bs-light);
  border: 1px var(--bs-dark) solid;
}

#trips .card,
#trip .card {
  text-transform: uppercase;
  transition: 0.5s;
}

#trips .card:hover {
  background-color: var(--bs-light);
}

#trips .route-divider {
  height: 20px;
  border-left: 1px dashed var(--bs-dark);
  margin: 0 7px;
}