:root {
  --primary-color: #108DE9;
  --secondary-color: #38333F;
  --body: #f4f4f4;

  --main-font: 'Poppins', Arial;
}

body {
  font-family: var(--main-font);
  background-color: var(--body);
}

/* Navbar */
/* .navbar {
  position: sticky;
  top: 0;
} */
.btn-login {
  background-color: var(--primary-color);
  border-radius: 25px;
  display: block;
  width: 100px;
  text-align: center;
  color: white;
  transition: ease .2s;
}
.btn-login:hover {
  background-color: white;
  border: 2px var(--primary-color) solid;
}
.navbar-brand {
  font-weight: 500;
  font-size: 25px;
}
.navbar-nav .nav-link.active {
  font-weight: 500;
}
.navbar-nav .nav-link {
  margin-left: 20px;
}

.bg-hero {
  background-image: url('../img/bg-hero.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: 75%;
}
.hero {
  position: relative;
}
.hero .text {
  margin-top: 10%;
}
.hero .text h5 {
  font-size: 18px;
}
.hero .text h4 {
  line-height: 40px;
  font-size: 30px;
}
.btn-haji {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: black;
  transition: ease .2s;
}
.btn-umrah:hover {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: black;
}

p.lead {
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  .bg-hero {
    background-size: 100%;
  }
}

/* ===== PUBLIC PAGINATION — consistent with admin data table style ===== */
.lyr-pagination .pagination {
  gap: 2px;
  margin: 0;
}
.lyr-pagination .pagination .page-link {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #45464d !important;
  border: 1.5px solid #e0d4d4 !important;
  border-radius: 0.5rem !important;
  padding: 0.3rem 0.65rem !important;
  margin: 0 2px !important;
  transition: background-color .2s, border-color .2s, color .2s !important;
  line-height: 1.4;
}
.lyr-pagination .pagination .page-item.active .page-link {
  background-color: #7d2b2d !important;
  border-color: #7d2b2d !important;
  color: #fff !important;
}
.lyr-pagination .pagination .page-link:hover:not([aria-disabled]) {
  background-color: #fdecea !important;
  border-color: #7d2b2d !important;
  color: #7d2b2d !important;
}
.lyr-pagination .pagination .page-item.disabled .page-link {
  color: #b8a8a8 !important;
  border-color: #ede8e8 !important;
  background-color: transparent !important;
}
/* info text above pagination */
.lyr-pagination-wrap {
  border-top: 1px solid #ede0e0;
  padding-top: .875rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.lyr-pagination-info {
  font-size: .8125rem;
  color: #666;
  font-weight: 500;
}