/*index.php page*/
.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
}

.pagination li {
    margin: 0 3px;
}

.pagination li a,
.pagination li span {
    padding: 8px 12px;
    display: block;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
}

.pagination li a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.post-img {
  position: relative;
  overflow: visible; /* Allow image to show completely */
  width: 100%;
}

.img-small {
  width: 100%;
  height: auto; /* Let height adjust */
  object-fit: contain; /* Fit without cropping */
}



.pagination-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: 10px 0;
    position: relative; /* Fix stacking context for touch events */
    z-index: 10; /* Ensure clickable area is on top */
    background: #fff; /* Optional: prevent overlap visual issues */
}

.pagination {
    display: flex;
    flex-wrap: nowrap; /* Keep items in one line */
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.pagination li {
    margin: 0 3px;
}

.pagination li a,
.pagination li span {
    padding: 12px 16px; /* Larger tap area for mobile */
    display: block;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    white-space: nowrap;
    cursor: pointer; /* Ensure clickable cursor */
    touch-action: auto; /* Allow normal touch behavior */
}

.pagination li a.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}



/*banner.php page*/


/* Force full viewport width */
.swiper {
  width: 100vw;
  min-height: 80vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

/* Slides */
.swiper-slide {
  position: relative;
  width: 100vw;    /* use viewport width */
  height: 80vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

/* Lazy background placeholder */
.lazy-bg {
  background-color: #f0f0f0;
  background-size: cover;
  background-position: center;
}

/* Slide content */
.swiper-slide .content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 40px;
  text-align: left;
}

.swiper-slide .content h1,
.swiper-slide .content h2 {
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.slider-btn {
  color: #fff;
  padding: 14px 30px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid #ffffff;
  border-radius: 50px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.slider-btn:hover {
  background-color: #f57a01;
  transform: translateY(-2px);
}

/* Slide image full-cover */
.swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Responsive tablets */
@media (max-width: 991px) {
  .swiper-slide {
    height: 50vh;
  }
  .swiper-slide .content h1,
  .swiper-slide .content h2 {
    font-size: 2rem;
  }
}

/* Responsive mobile devices */
@media (max-width: 576px) {
    .swiper {
  width: 100vw;
  min-height: 40vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}
  .swiper-slide {
    height: 50vh;
  }
  .swiper-slide .content h1,
  .swiper-slide .content h2 {
    font-size: 1.5rem;
  }
  .slider .swiper-button-prev:after,
  .slider .swiper-button-next:after {
    font-size: 18px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
  }
}

/* Small screen fix */
@media screen and (max-width: 600px) {
  .slider .swiper-slide {
    min-height: 400px !important;
    padding-top: 320px;
    padding-bottom: 100px;
  }
}