@media (min-width: 1440px) {
  .history-carousel .fl-post-slider-thumb .fl-post-slider-content {
      padding-right: 120px;
      padding-left: 40px;
  }

  .history-carousel .fl-post-slider-thumb {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

@media (max-width: 1024px) {
  .history-carousel .fl-post-slider-thumb .fl-post-slider-content {
    padding-right: 40px;
    padding-left: 40px;
  }
  
  /* More specific selectors based on actual HTML structure */
  .fl-module.history-carousel .fl-post-slider .fl-post-slider-post .fl-post-slider-title,
  .fl-module.history-carousel .fl-post-slider .fl-post-slider-post .fl-post-slider-title a {
    font-size: 28px !important;
  }
  
  .fl-module.history-carousel .fl-post-slider .fl-post-slider-post .fl-post-slider-tags {
    font-size: 20px !important;
  }
  
  /* Ensure the navigation container is positioned below the content */
  .history-carousel .bx-controls {
    position: relative;
    clear: both;
    margin-top: 40px; /* Increase space between slider and controls */
    padding-bottom: 40px; /* Space below controls */
  }
  
  /* Two-row navigation for more than 10 items */
  .history-carousel .bx-pager.two-rows {
    flex-wrap: wrap;
    padding-bottom: 60px; /* Extra space for two rows */
    position: relative;
    top: auto; /* Ensure it's not positioned over content */
  }
  
  .history-carousel .bx-pager.two-rows .bx-pager-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 0; /* Reset margin */
  }
  
  .history-carousel .bx-pager.two-rows .bx-pager-row:first-child {
    margin-bottom: 60px; /* Space between rows */
  }
  
  .history-carousel .bx-pager.two-rows .bx-pager-row:last-child {
    margin-bottom: 0;
  }
  
  /* Fix dot title indicators position */
  .history-carousel .dot-title-indicator {
    margin-top: 15px; /* Reduce top margin slightly */
  }

  .history-carousel .bx-pager.two-rows .bx-pager-row:last-child {
    margin-bottom: 0;
  }
  
  /* Adjust the container to prevent overlap with content below */
  .history-carousel .bx-controls {
    margin-bottom: 40px;
  }
}

.history-carousel .fl-post-slider .fl-post-slider-post .fl-post-slider-title a {
  font-size: 28px !important;
}
  
.history-carousel .fl-post-slider .fl-post-slider-post .fl-post-slider-tags {
  font-size: 20px !important;
}

@media (max-width: 768px) {
  .history-carousel .fl-post-slider-thumb .fl-post-slider-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .history-carousel .fl-post-slider-title a {
    font-size: 36px;
  }

  .history-carousel .fl-post-slider-tags {
    font-size: 20px;
    margin-bottom: 40px;
  }
}

/*
 * Mobile view styles for slightly larger phones (442px max width)
 * Updated from 425px to accommodate more device sizes
 */
@media (max-width: 442px) {
  .history-carousel .fl-post-slider-thumb {
    padding: 20px;
  }
  
  /* Ensure content is fully visible */
  .history-carousel .fl-post-slider-content {
    position: relative;
    overflow: visible;
  }
  
  /* Better spacing for longer content */
  .history-carousel .fl-post-slider-feed-content {
    margin-bottom: 20px;
  }
  
  /* Allow the post to expand to fit its content */
  .history-carousel .fl-post-slider-post {
    height: auto !important;
    position: relative !important;
  }
}

/* Disable links in history carousel to ensure they're not clickable */
.history-carousel .fl-post-slider-post a,
.history-carousel .fl-post-slider-title a,
.history-carousel .fl-post-slider-img a {
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}

/* History carousel navigation button styling */
.history-carousel .fl-post-slider-navigation .slider-prev .fl-post-slider-svg-container,
.history-carousel .fl-post-slider-navigation .slider-next .fl-post-slider-svg-container {
  /* Hide the inline SVG */
  font-size: 0;
  line-height: 0;
}

.history-carousel .fl-post-slider-navigation .slider-prev .fl-post-slider-svg-container {
  background-image: url('/wp-content/uploads/2025/03/left-arrow-carousel-tech.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  width: 50px;
  height: 50px;
  display: block;
}

.history-carousel .fl-post-slider-navigation .slider-next .fl-post-slider-svg-container {
  background-image: url('/wp-content/uploads/2025/03/right-arrow-carousel-tech.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  width: 50px;
  height: 50px;
  display: block;
}

/* Hide the inline SVG */
.history-carousel .fl-post-slider-navigation .fl-post-slider-svg-container svg {
  display: none;
}

/* Ensure title text maintains styling without the link behavior */
.history-carousel .fl-post-slider-title {
  color: #001966 !important;
}

/* Styling for the post slider tags */
.fl-post-slider-tags {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
  display: block;
  font-weight: 400;
  line-height: 1.4;
}

/* Specific styling for history carousel tags */
.history-carousel .fl-post-slider-tags {
  margin-bottom: 60px;
  color: #001966;
  font-family: "LINESeedSansTH", Verdana, Arial, sans-serif !important;
  font-size: 28px;
  font-weight: 700;
  padding-right: 40px;
}

/* Styling for line navigation with title indicators */
.history-carousel .bx-pager {
  position: relative;
  padding-bottom: 30px; /* Add space for the title indicators */
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  transition: none !important;
  animation: none !important;
}

/* Add responsive padding to the navigation container */
.history-carousel .bx-controls {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  clear: both;
  margin-top: 20px; /* Space between slider and controls */
}

@media (min-width: 1024px) {
  .history-carousel .bx-controls {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1440px) {
  .history-carousel .bx-controls {
    padding-left: 80px;
    padding-right: 80px;
  }
}

.history-carousel .bx-pager-item {
  position: relative;
  margin: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}

/* Change dots to solid lines */
.history-carousel .bx-pager-link {
  height: 2px !important;
  width: 100% !important;
  border-radius: 0 !important;
  background-color: white !important;
  border: none !important;
  transition: none !important; /* Remove transition */
  pointer-events: none !important; /* Disable click events on the lines */
  cursor: default !important; /* Change cursor to default */
}

.history-carousel .bx-pager-link.active {
  background: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%) !important;
  transition: none !important; /* Remove transition */
}

.history-carousel .dot-title-indicator {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #8080808C;
  white-space: nowrap;
  margin-top: 20px;
  opacity: 1;
  font-family: "LINESeedSansTH", Verdana, Arial, sans-serif;
  font-weight: 400;
  cursor: pointer; /* Make it clear this is clickable */
  transition: none !important; /* Remove transition */
  animation: none !important; /* Remove any animations */
  -webkit-transition: none !important; /* Safari/Chrome */
  -moz-transition: none !important; /* Firefox */
  -o-transition: none !important; /* Opera */
  pointer-events: auto !important; /* Ensure title indicators remain clickable */
  z-index: 10; /* Ensure title indicators are above other elements */
}

.history-carousel .dot-title-indicator.active {
  color: #1B1B1B;
  opacity: 1;
  font-weight: 700;
  font-size: 16px;
  transition: none !important; /* Remove transition */
  animation: none !important; /* Remove any animations */
  -webkit-transition: none !important; /* Safari/Chrome */
  -moz-transition: none !important; /* Firefox */
  -o-transition: none !important; /* Opera */
}

/* Adjust spacing and alignment for mobile */
@media (max-width: 768px) {
  .history-carousel .bx-pager {
    padding-bottom: 40px; /* More space on mobile */
  }
  
  .history-carousel .dot-title-indicator {
    font-size: 12px;
    transition: none !important; /* Remove transition */
  }
  
  .history-carousel .bx-pager-item {
    margin: 0 6px;
  }
  
  /* Remove any transitions in mobile view */
  .history-carousel .bx-pager-link,
  .history-carousel .bx-pager-link.active,
  .history-carousel .dot-title-indicator,
  .history-carousel .dot-title-indicator.active {
    transition: none !important;
  }
  
  /* Specific fixes for mobile */
  .history-carousel .bx-controls {
    margin-top: 30px; /* More space on mobile between slider and controls */
    padding-bottom: 30px; /* More space below on mobile */
  }
  
  .history-carousel .bx-pager.two-rows .bx-pager-row:first-child {
    margin-bottom: 50px; /* Slightly less space between rows on mobile */
  }
}

/* Three-row layout for small mobile screens - updated to 442px breakpoint */
@media (max-width: 442px) {
  /* Three-row layout styling */
  .history-carousel .bx-pager.three-rows {
    flex-wrap: wrap;
    padding-bottom: 80px; /* Extra space for three rows */
    position: relative;
    top: auto; /* Ensure it's not positioned over content */
  }
  
  .history-carousel .bx-pager.three-rows .bx-pager-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 0; /* Reset margin */
  }
  
  .history-carousel .bx-pager.three-rows .bx-pager-row:first-child {
    margin-bottom: 40px; /* Space between first and second rows */
  }
  
  .history-carousel .bx-pager.three-rows .bx-pager-row.second-row {
    margin-bottom: 40px; /* Space between second and third rows */
  }
  
  .history-carousel .bx-pager.three-rows .bx-pager-row.third-row {
    margin-bottom: 0; /* No margin below last row */
  }
  
  /* Make title indicators smaller on mobile */
  .history-carousel .bx-pager.three-rows .dot-title-indicator {
    font-size: 11px;
    margin-top: 15px;
  }
  
  .history-carousel .bx-pager.three-rows .dot-title-indicator.active {
    font-size: 13px;
  }
  
  /* Ensure the dots are equally distributed in each row */
  .history-carousel .bx-pager.three-rows .bx-pager-item {
    padding-left: 2px;
    padding-right: 2px;
  }
  
  /* Add extra space below the controls for three rows */
  .history-carousel .bx-controls {
    margin-bottom: 60px;
  }

  .history-carousel .bx-viewport {
    min-height: 560px;
    /* height: auto !important; */
    padding-bottom: 40px;
    transition: min-height 0.3s ease-out;
  }
}