/* The actual timeline (the vertical ruler) */
.main-timeline {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
  content: "";
  position: absolute;
  width: 1px;
  background-color: #dbdbdb;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -10px;
  background-color: #ffffff;
  border: 5px solid #d5231a;
  top: 35px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  /* content: " "; */
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  /* content: " "; */
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -14px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after,
  .right::after {
    left: 18px;
  }

  .left::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

.sticky-custom {
  position: sticky;
  top: 0;
  z-index: 99;
}

.bg-cyan-custom {
  background-color: #2299ad;
}

.text-red {
    color: #a3191e;
}

.custom-index-card {
  display: flex;
  align-items: center !important;
  justify-content: start !important;
  flex-direction: column;
}

.counter-fix .vertical-counter,
.counter-fix .vertical-counter * {
  white-space: nowrap !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}

.counter-fix .vertical-counter span {
  display: inline-block !important;
  line-height: 1 !important;
}

.leader-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  color: #111;
  flex: 0 0 52px;
}

.leader-card {
  transition: transform 0.2s ease;
}

.leader-card:hover {
  transform: translateY(-2px);
}

.overlay {
  background-color: hsla(189, 67%, 41%, 0.8);
  border-radius: 10px;
}

.text-cyan {
  color: #2299ad !important;
}

.bg-cyan-custom {
  background-color: #c3f6ff !important;
}

.text-red {
    color: #a3191e !important;
}

.bg-red-custom {
  background-color: #d5231a !important;
}

.btn-red {
  background-color: #d5231a;
  color: white;
}

.counters sup {
  top: -1.5em !important;
}

/* Shop Sidebar Filter Styles */
.shop-sidebar .shop-filter li.active a {
  color: var(--custom-red, #d5231a) !important;
  font-weight: 700;
}

.shop-sidebar .shop-filter li.active .product-cb {
  border-color: var(--custom-red, #d5231a) !important;
}

.shop-sidebar .shop-filter li.active .product-cb:after {
  opacity: 1 !important;
  background-color: var(--custom-red, #d5231a) !important;
}

.table > :not(caption) > * > * {
  background-color: transparent !important;
}

.technical-table {
  border: 1px solid #636363 !important;
  border-collapse: collapse !important;
  min-width: 1000px !important;
  font-size: 13px !important;
}

.technical-table td,
.technical-table th {
  border: 1px solid #636363 !important;
}

.icon-box {
  background-color: #d8edf7 !important;
  display: inline-block !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  margin-bottom: 5px !important;
}

.stretched-link {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
}

/* Brand Colors (Polarix & Aura) */
.interactive-banner-style-03 figure a::before {
    background: linear-gradient(to top, rgba(45,48,145,0.9) 0%, rgba(45,48,145,0) 100%) !important;
}

.aura-card-title:hover, .polarix-card-title:hover {
    color: #2d3091 !important;
}

.bg-brand-blue {
    background-color: #2d3091 !important;
}

.text-brand-blue {
    color: #2d3091 !important;
}

.border-brand-blue {
    border: 2px solid #2d3091 !important;
}

.bg-brand-light-blue {
    background-color: #eef0f8 !important;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===================================
    RESPONSIVE MOBILE/TABLET FIXES
====================================== */

/* Interactive banner figcaption - Tablet (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .interactive-banner-style-03 figure figcaption {
        padding: 35px 20px !important;
    }
    .interactive-banner-style-03 figure figcaption a {
        font-size: 18px !important;
    }
}

/* Interactive banner figcaption - Tablet fixes */
@media (max-width: 1199px) {
    .interactive-banner-style-03 figure figcaption {
        padding: 40px 25px !important;
    }
    .interactive-banner-style-03 figure figcaption a {
        font-size: 20px !important;
    }
}

/* Interactive banner figcaption - Mobile fixes */
@media (max-width: 767px) {
    .interactive-banner-style-03 figure figcaption {
        padding: 30px 20px !important;
    }
    .interactive-banner-style-03 figure figcaption a {
        font-size: 16px !important;
        letter-spacing: 0.5px !important;
    }
}

/* Small mobile */
@media (max-width: 479px) {
    .interactive-banner-style-03 figure figcaption {
        padding: 20px 15px !important;
    }
    .interactive-banner-style-03 figure figcaption a {
        font-size: 14px !important;
    }
}

/* Shop card footer - better mobile text */
@media (max-width: 991px) {
    .shop-box .shop-footer {
        padding: 15px 12px !important;
    }
    .shop-box .shop-footer a {
        font-size: 14px !important;
    }
    .shop-box .shop-footer span {
        font-size: 13px !important;
    }
}

/* Shop card image on mobile */
@media (max-width: 767px) {
    .shop-box .shop-image {
        aspect-ratio: 1/1 !important;
    }
    .shop-box .shop-image img {
        object-fit: contain !important;
    }
}

/* Product grid gutter on tablet */
@media (max-width: 991px) {
    .gutter-large {
        --bs-gutter-y: 15px;
        --bs-gutter-x: 15px;
    }
}

/* Product grid gutter on mobile */
@media (max-width: 767px) {
    .gutter-large {
        --bs-gutter-y: 12px;
        --bs-gutter-x: 12px;
    }
}

/* Section padding adjustments for tablet */
@media (max-width: 991px) and (min-width: 768px) {
    section.big-section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

/* Section padding adjustments for mobile */
@media (max-width: 767px) {
    section.big-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* Single product page - mobile layout */
@media (max-width: 991px) {
    .product-info {
        padding-left: 0 !important;
        margin-top: 30px;
    }
    .product-info h5 {
        font-size: 20px !important;
    }
}

/* Single product page - buttons wrap on mobile */
@media (max-width: 767px) {
    .product-info .mt-20px {
        flex-direction: column !important;
    }
    .product-info .mt-20px .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Technical table - horizontal scroll on mobile */
@media (max-width: 767px) {
    .technical-table {
        font-size: 12px !important;
        min-width: 800px !important;
    }
    .technical-table th,
    .technical-table td {
        padding: 8px 10px !important;
    }
}

/* Tab navigation on mobile */
@media (max-width: 767px) {
    .tab-style-04 .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    .tab-style-04 .nav-tabs .nav-item {
        flex: 0 0 auto !important;
    }
    .tab-style-04 .nav-tabs .nav-link {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 15px !important;
    }
}

/* Page title section - mobile text size */
@media (max-width: 767px) {
    .page-title-big-typography .page-title-extra-large h1 {
        font-size: 28px !important;
        line-height: 36px !important;
    }
    .page-title-big-typography .page-title-extra-large h2 {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}

/* Page description text - mobile */
@media (max-width: 767px) {
    .extra-very-small-screen h2 {
        font-size: 14px !important;
        line-height: 22px !important;
    }
}

/* Tab content section padding on mobile */
@media (max-width: 767px) {
    section#tab {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Hero description text - mobile fixes */
@media (max-width: 767px) {
    .ipad-top-space-margin.md-pt-0.pt-0.pb-0 .extra-very-small-screen h2 {
        font-size: 13px !important;
        line-height: 20px !important;
        padding: 0 10px !important;
    }
}

/* Footer area on mobile */
@media (max-width: 767px) {
    footer {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}