/* ==========================================================
   Ziaratt.com - Custom Styles for r=125 Version
   ==========================================================
   Author: Adib Group & AI Assistant
   Version: 1.0 Final
   ----------------------------------------------------------
   TABLE OF CONTENTS
   1.  HEADER STYLES
       - Slogan Bar
       - Main Header Container
       - Logo & Slogan
       - Right Side & Options
       - Currency Dropdown
       - Mobile Controls & Menu
   2.  FOOTER STYLES
       - Main Footer Container
       - Widgets (About, Links, Contact)
       - Social Links & Location
       - Bottom Bar
   3.  RESPONSIVE QUERIES
       - Tablet & Mobile Adjustments
/* ========================================================== */

/* ==========================================================
   1. HEADER STYLES
/* ========================================================== */

/* --- Slogan Bar --- */
.slogan-bar {
  background-color: #f8f9fa;
  color: #555;
  text-align: center;
  display: none; /* Hidden by default, shown in responsive */
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid #e9ecef;
  font-family: "Vazir-Regular-FD", sans-serif;
}

.desktop-slogan {
  padding-inline-start: 20px; /* Logical property */
  border-inline-start: 1px solid #e0e0e0; /* Logical property */
  color: #777;
  font-size: 14px;
  font-weight: 500;
  font-family: "Vazir-Regular-FD", sans-serif;
}

/* --- Main Header Container --- */
.new-header-placeholder {
  height: 80px;
}

.navbar-area.is-sticky .new-header-container {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.new-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 80px;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
  transition: all 0.3s ease;
  width: 100%;
  position: relative;
  z-index: 999;
}

/* --- Logo & Slogan --- */
.new-header-logo-area {
  align-items: center;
  height: 100%;
  display: flex;
}

.new-header-logo-area .navbar-brand {
  height: 100%;
  display: flex;
  align-items: center;
}

.new-header-logo-area .navbar-brand img {
  transition: all 0.3s ease;
  padding-block: 0.5rem;
  object-fit: contain;
  height: 80%;
  max-width: 150px;
}

/* --- Right Side & Options --- */
.new-header-right-side {
  display: flex;
  align-items: center;
  gap: 20px;
}

.new-header-nav-options,
.new-header-options-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-item {
  display: flex;
  align-items: center;
  justify-content: center; /* Center content for icon-only buttons */
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}

.option-item i {
  color: #888;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}

.option-item:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
  color: #3eab3e;
}

.option-item:hover i {
  color: #3eab3e;
}

/* --- Currency Dropdown --- */
.dropdown-wrapper {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.dropdown-wrapper .dropdown-menu {
  position: absolute;
  top: calc(100% - 10px);
  inset-inline-start: 0; /* Logical property */
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  padding: 0;
  min-width: 200px;
  display: block;
  z-index: 1000;
  list-style: none;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-wrapper:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu .dropdown-item {
  padding: 10px 20px;
  font-size: 12px;
  color: #333;
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f5f5f5;
  color: #3eab3e;
}

/* --- Mobile Controls & Menu --- */
.contact-button .desktop-text-only {
  display: inline;
}

.mobile-controls {
  display: none;
  align-items: center;
  gap: 10px;
}

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 40px;
  background: transparent;
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  height: 40px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.mobile-menu-toggle:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.mobile-menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: #888;
  border-radius: 10px;
  transition: all 0.3s linear;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  inset-inline-end: -100%; /* Logical property */
  width: 300px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: inset-inline-end 0.4s ease;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.mobile-nav-panel.open {
  inset-inline-end: 0; /* Logical property */
}

.mobile-nav-panel .panel-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid #eee;
}

.mobile-nav-panel .panel-header img {
  max-width: 120px;
}

.mobile-nav-panel .panel-links {
  list-style: none;
  padding: 20px 0;
  margin: 0;
  flex-grow: 1;
}

.mobile-nav-panel .panel-links a {
  display: block;
  padding: 15px 30px;
  color: #333;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f5f5f5;
}

.mobile-nav-panel .panel-links a:hover {
  background-color: #f5f5f5;
  color: #3eab3e;
  padding-inline-start: 35px; /* Logical property */
}

.mobile-nav-panel .panel-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  inset-inline-start: 0; /* Logical property */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.mobile-nav-overlay.open {
  display: block;
}

/* ==========================================================
   2. FOOTER STYLES
/* ========================================================== */

.new-footer-section {
  position: relative;
  z-index: 1;
  background-image: url(../footer.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 70px;
  font-family: "Vazir-Regular-FD", sans-serif;
}

.new-footer-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.85);
  z-index: -1;
}

.footer-widget h4 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.footer-widget h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 45px;
  height: 3px;
  background-color: #3eab3e;
  border-radius: 2px;
}

/* --- Widgets --- */
.footer-about-widget .footer-logo img {
  max-width: 150px;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}

.footer-about-widget p {
  color: #d1d1d1;
  font-size: 14px;
  line-height: 26px;
}

.footer-social-links {
  padding: 0;
  margin-top: 25px;
  list-style: none;
}

.footer-social-links li {
  display: inline-block;
  margin-inline-end: 10px;
}

.footer-social-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #555;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer-social-links li a:hover {
  background-color: #3eab3e;
  border-color: #3eab3e;
  transform: scale(1.1);
}

.footer-links-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-widget ul li {
  margin-bottom: 15px;
}

.footer-links-widget ul li a {
  color: #d1d1d1;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
}

.footer-links-widget ul li a:hover {
  color: #3eab3e;
  padding-inline-start: 8px;
}

.footer-contact-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact-widget ul li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 14px;
  color: #d1d1d1;
}

.footer-contact-widget ul li i {
  color: #3eab3e;
  font-size: 18px;
  margin-inline-end: 15px;
  margin-top: 3px;
  width: 20px;
}

.footer-contact-widget ul li a {
  color: #d1d1d1;
  text-decoration: none;
}

.footer-contact-widget ul li a:hover {
  color: #3eab3e;
}

.location-widget iframe {
  border-radius: 6px;
  height: 170px;
}

/* --- Bottom Bar --- */
.footer-bottom-bar {
  padding: 25px 0;
  margin-top: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
}

.footer-bottom-bar p {
  margin: 0;
  color: #aaa;
  font-size: 14px;
}

.footer-bottom-bar p a {
  color: #3eab3e;
  text-decoration: none;
  font-weight: 500;
}

.footer-bottom-bar p a:hover {
  color: #fff;
}

/* ==========================================================
   3. RESPONSIVE QUERIES
/* ========================================================== */

@media only screen and (max-width: 991px) {
  /* --- Header Responsive --- */
  .desktop-slogan {
    display: none;
  }
  .slogan-bar {
    display: block;
  }
  .new-header-container {
    padding: 0 20px;
    height: 70px;
  }
  .new-header-placeholder {
    height: 70px;
  }
  .new-header-nav-options {
    display: none;
  }
  .mobile-controls {
    display: flex;
  }
  .contact-button .desktop-text-only {
    display: none;
  }
  .option-item {
    padding: 8px 12px;
    height: 40px;
  }
  .mobile-controls .option-item {
    width: 40px; /* Make mobile icons square */
  }
}

/* ==========================================================
   8. HERO & SEARCH SECTION (Final Refined Version)
/* ========================================================== */

/* --- Main Hero Container --- */
.hero-section {
  position: relative;
  height: 75vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
}

/* --- Main Search Module --- */
.search-module {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  padding: 15px;
}

/* --- Service Tabs --- */
.service-tabs {
  display: flex;
  margin-bottom: 15px;
  padding: 5px;
  position: relative;
  overflow-x: auto;
  gap: 0.5rem;
}

.service-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

.service-tab i {
  font-size: 18px;
  color: #555;
  transition: color 0.4s ease;
}

.service-tab.active {
  color: #fff;
  background-image: linear-gradient(45deg, #328a32, #3eab3e);
  transform: translateY(-2px);
}
.service-tab.active i {
  color: #fff;
}

/* --- Search Form Grid --- */
.search-form {
  display: grid;
  grid-template-columns: 2fr 1.7fr 1.5fr auto;
  gap: 10px;
}

.date-picker-wrapper {
  z-index: 10 !important;
}
.input-group {
  position: relative;
  background: #fff;
  border-radius: 12px;
}
.input-group .ts-wrapper,
.input-group > input {
  border-radius: 12px !important;
  width: 100%;
  margin: 0 !important;
}
/* Styling for TomSelect */
.input-group .ts-wrapper .ts-control {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  height: 54px;
  padding-inline-start: 48px;
  font-size: 15px;
  transition: all 0.3s ease;
}
.input-group .ts-wrapper.focus .ts-control {
  border-color: #3eab3e;
  box-shadow: 0 0 0 3px rgba(62, 171, 62, 0.1);
}
.input-group .ts-wrapper.focus .ts-control > .item {
  transform: translateY(-16px);
}

.input-group .ts-wrapper .ts-control > .item {
  transition: all ease-in-out 300ms;
  inset-inline-start: 48px;
  align-items: center;
  position: absolute;
  inset-block: 0;
  line-height: 1;
  display: flex;
  height: 100%;
  margin: auto;
}

/* Styling for other inputs */
.form-control-new {
  width: 100%;
  height: 54px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding-inline-start: 48px;
  padding-inline-end: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
}
.form-control-new:focus {
  outline: none;
  border-color: #3eab3e;
  box-shadow: 0 0 0 3px rgba(62, 171, 62, 0.1);
}
.form-control-new::placeholder {
  color: #888;
}

.input-group .icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 18px;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 16px;
  z-index: 2;
}

/* --- Search Button --- */
.search-button {
  height: 54px;
  border: none;
  background-color: #3eab3e;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  padding: 0 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.search-button:hover {
  background-color: #328a32;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Passenger Dropdown --- */
.user_box_select {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
  padding: 20px;
  z-index: 100;
}
.passenger-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.passenger-count {
  display: flex;
  align-items: center;
  gap: 8px;
}
.passenger-count button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  color: #333;
  background: #f7f7f7;
  border-radius: 50%;
  font-size: 1.125rem;
  cursor: pointer;
}
.passenger-input {
  width: 30px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 16px;
}

/* --- Hide/Show Forms --- */
.search-form-panel {
  display: none;
}
.search-form-panel.active {
  display: block;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .search-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hero-section {
    height: auto;
    min-height: 100vh;
    padding: 60px 15px;
  }
}
/* ==========================================================
   9. HOME PAGE CONTENT SECTIONS (FINAL & OPTIMIZED)
   ----------------------------------------------------------
   TABLE OF CONTENTS
   1.  General Section Styles
   2.  Why Choose Us Section
   3.  Content Slider Section (Abouts)
   4.  Featured Hotels Section
   5.  Video Section
   6.  Statistics Section (Parallax)
   7.  Partners Section
   8.  Content Sections Responsive
/* ========================================================== */

/* --- 1. General Section Styles --- */
.section-new {
  padding: 80px 0;
}
.section-new.bg-light {
  background-color: #f8f9fa;
}
.section-title-new {
  text-align: center;
  margin-bottom: 50px;
}
.section-title-new span {
  font-size: 14px;
  color: #3eab3e;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}
.section-title-new h2 {
  font-size: 34px;
  font-weight: 700;
  color: #222;
}

/* --- 2. Why Choose Us Section (3D Card Design) --- */
.why-choose-us-section {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.feature-card-3d {
  background: #fff;
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  border: 1px solid #eee;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feature-card-3d:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.feature-card-3d .icon {
  font-size: 40px;
  color: #3eab3e;
  margin-bottom: 20px;
}
.feature-card-3d h4 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}
.feature-card-3d p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
}

/* --- 3. Content Slider Section (Abouts) --- */
.content-slider-section {
  padding: 0;
}
.content-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.content-slider .swiper-wrapper .swiper-slide {
  height: auto;
}
.about-section-premium {
  padding: 2rem;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.about-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease; /* For potential hover effects */
}
.about-overlay-content {
  position: relative;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.about-section-premium.mirrored .container .row {
  justify-content: flex-end; /* Pushes content to the right */
}
.about-overlay-content span {
  font-size: 14px;
  color: #3eab3e;
  font-weight: 700;
  text-transform: uppercase;
}
.about-overlay-content h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 10px 0 20px;
  color: #222;
}
.about-overlay-content p {
  color: #555;
  line-height: 1.8;
}
.content-slider .swiper-pagination-bullet {
  transition: all ease-in-out 300ms;
  background: #fff !important;
  border-radius: 3rem;
  opacity: 0.75;
}
.content-slider .swiper-pagination-bullet-active {
  transition: all ease-in-out 300ms;
  background: #3eab3e !important;
  width: 2rem;
}

/* --- 4. Featured Hotels Section --- */
.hotel-card-new {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 5px; /* Added margin for swiper */
}
.hotel-card-new:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.card-image {
  position: relative;
  height: 220px;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-price {
  position: absolute;
  bottom: 15px;
  inset-inline-start: 15px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.card-content {
  padding: 20px;
}
.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-location {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}
.card-location i {
  margin-inline-end: 5px;
}
.card-rating {
  color: #f5b301;
}
.swiper-button-next,
.swiper-button-prev {
  color: #3eab3e !important;
}

/* --- 5. Video Section (Polished) --- */
.video-section-premium {
  position: relative;
  padding: 200px 0;
  border-radius: 2rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.video-section-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.video-play-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #fff;
  color: #3eab3e;
  font-size: 32px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulse 1.5s infinite;
  transition: all 0.3s ease;
  text-decoration: none;
}
.video-play-button a:hover {
  transform: scale(1.1);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.video-title-premium h3 {
  margin-top: 25px;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- 6. Stats Section (PARALLAX-ENABLED) --- */
.stats-section-parallax {
  padding: 100px 0;
  background-image: url("../img/counter.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* THE PARALLAX EFFECT */
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
}
.stats-section-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(30, 30, 30, 0.75);
  z-index: -1;
}
.counter-item-premium img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(218deg) brightness(105%) contrast(101%);
  object-fit: contain;
  aspect-ratio: 1/1;
  width: 60px;
}
.counter-item-premium h3 {
  font-size: 48px;
  font-weight: 700;
  margin-block: 0.5rem;
}
.counter-item-premium p {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
  text-transform: uppercase;
  color: #f0f0f0;
}

/* --- 7. Partners Section --- */
.partners-section-new .partner-item img {
  max-height: 60px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
  margin: 0 auto;
}
.partners-section-new .partner-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- 8. Content Sections Responsive --- */
@media (max-width: 991px) {
  .about-section-premium {
    height: auto;
    padding: 50px 1rem;
    display: block;
  }
  .about-background {
    position: absolute;
    height: 100%;
    top: 0;
  }
  .about-section-premium .container {
    padding-top: 200px; /* Push content below the image top */
  }
  .about-overlay-content {
    background: rgba(255, 255, 255, 0.5);
    max-width: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
  }
  .about-section-premium.mirrored .container .row,
  .about-section-premium .container .row {
    justify-content: center !important;
  }
  .content-slider {
    padding-bottom: 40px; /* Space for pagination */
  }
}