/* ==========================================================================
   TECHNOLOGY CAROUSEL CUSTOMIZATION
   Styling for the technology carousel component
   ========================================================================== */

/* Make sure links in carousel don't appear clickable */
.technology-carousel .fl-post-slider-post a,
.technology-carousel-col .fl-post-slider-post a {
    cursor: default !important;
    pointer-events: none;
    text-decoration: none !important;
}

/* Ensure title text maintains styling without the link behavior */
.technology-carousel .fl-post-slider-title a,
.technology-carousel-col .fl-post-slider-title a {
    color: inherit !important;
}

/* Removes padding from slider thumb */
.fl-node-qvp8akgi19rc .fl-post-slider-thumb {
    padding: 0 !important;
}

/* Positions custom navigation container */
.technology-carousel .combined-nav-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 5px 10px;
    border-radius: 4px;
}

/* Styles navigation arrows with flex layout */
.technology-carousel .combined-nav-container .custom-carousel-prev,
.technology-carousel .combined-nav-container .custom-carousel-next {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Disabled state for navigation buttons */
.technology-carousel .combined-nav-container .custom-carousel-prev.disabled,
.technology-carousel .combined-nav-container .custom-carousel-next.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Custom color for disabled state buttons and images */
.technology-carousel .combined-nav-container .custom-carousel-prev.disabled img,
.technology-carousel .combined-nav-container .custom-carousel-next.disabled img {
    filter: opacity(0.5) brightness(1.5);
    color: #8080808C;
}

/* Sets size for SVG container in navigation */
.technology-carousel .combined-nav-container .fl-post-carousel-svg-container {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensures navigation images fit correctly */
.technology-carousel .combined-nav-container .fl-post-carousel-svg-container img {
    width: 15px;
    height: 15px;
    display: block;
}

/* Styles numeric pagination */
.technology-carousel .combined-nav-container .custom-numeric-pager {
    position: static;
    display: flex;
    align-items: center;
    margin: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* Hides the default carousel controls */
.technology-carousel .fl-post-slider .bx-controls,
.technology-carousel .fl-post-slider .fl-post-slider-navigation,
.technology-carousel .fl-post-slider .bx-pager {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.technology-carousel-col .fl-post-slider-content {
  padding-top: 40px;
  padding-right: 20px;
}

.technology-carousel .fl-post-slider-thumb, .technology-carousel-col .fl-post-slider-thumb {
  padding: 0 !important;
}

/* Adjusts navigation position on smaller screens */
@media (max-width: 1024px) {
  .technology-carousel-col .bx-viewport {
    height: 476px !important;
  }
}

@media (max-width: 768px) {
    .technology-carousel .combined-nav-container {
        bottom: 10px;
        right: 10px;
    }

    /* Slightly smaller navigation icons on mobile */
    .technology-carousel .combined-nav-container .fl-post-carousel-svg-container,
    .technology-carousel .combined-nav-container .fl-post-carousel-svg-container img {
        width: 14px;
        height: 14px;
    }

    /* Slightly smaller font for numeric pagination on mobile */
    .technology-carousel .combined-nav-container .custom-numeric-pager {
        font-size: 12px;
    }
    
    .technology-carousel-col .bx-viewport {
      height: 347px !important;
    }

    .technology-carousel-col .fl-post-slider-title a {
      font-size: 22px !important;
    }

    .technology-carousel-col .fl-post-slider-feed-content {
      font-size: 14px !important;
    }

    .technology-carousel-col .fl-post-slider-content {
      padding-right: 20px !important;
    }
}

@media (max-width: 442px) {
  .technology-carousel-col .extended-technology-carousel .bx-viewport {
    height: 800px !important;
    padding-bottom: 40px;
    background-color: #F6F6F6 !important;
  }
}

@media (max-width: 442px) {
  .technology-carousel-col .bx-viewport {
    height: 700px !important;
    padding-bottom: 40px;
    background-color: #F6F6F6 !important;
  }
  
  .technology-carousel-col .fl-post-slider-content {
    padding-bottom: 0px !important;
    padding-left: 20px !important;
    padding-top: 0px !important;
  }
}