html { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial }
  :root{
    --brand-dark:#1F2937;         /* charcoal (≈ slate-800) */
    --brand-orange:#F38B00;       /* SIRE orange */
    --brand-orange-600:#E67F00;   /* hover */
  }
  .bg-brand-dark{ background-color: var(--brand-dark); }
  .text-brand-orange{ color: var(--brand-orange); }
  .bg-brand-orange{ background-color: var(--brand-orange); }
  .btn{ border-radius: 0.75rem; padding: .5rem 1rem; font-weight: 600; }
  .btn-primary{ background: var(--brand-orange); color: #fff; }
  .btn-primary:hover{ background: var(--brand-orange-600); }
 .container {
    position: relative;
    z-index: 1; }

    /* -----------------Logo--------------- */
    .logo { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; 
          text-transform: uppercase; letter-spacing: .5px; line-height: 1; }
    .logo .eta  { color: #1F2937; }  /* dark */
    .logo .stem { color: #F38B00; }  /* orange */
    .logo-wrap { display:flex; align-items:center; gap: .6rem; }
    .chev { display:inline-block; width: 22px; height: 14px; }

    /* -------------------Logo ends--------------------- */

    /* ------------------Slider------------------------- */
    .progress-slide-carousel .swiper-wrapper {
    width: 100%;
    height: max-content !important;
    padding-bottom: 64px !important;
    /* transition-timing-function: linear !important;  */
    }

    /* Optional: better image fit */
    .progress-slide-carousel .swiper-slide img{
    width: 100%;
    height: 24rem;          /* matches your h-96 */
    object-fit: cover;      /* crop nicely */
    display: block;
    }

/* Keep your progressbar color */
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #1e3a8a !important;
  border: 1px solid #F38B00;
}
.progress-slide-carousel .swiper-slide img{
  width:100%; height:24rem; object-fit:cover; display:block;
  animation: kb 6s ease-in-out forwards;
}
@keyframes kb { from{ transform:scale(1); } to{ transform:scale(1.06); } }

    /* .swiper-wrapper {
    width: 100%;
    height: max-content !important;
    padding-bottom: 64px !important;
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
    }
    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #4F46E5 !important;
    } */
    /* -----------------Slider ends------------------- */
    /*--------------Platforms------------------------*/
    .stem-labs {
        padding: 0;
        margin: 0;
        overflow: auto;
        background-color: #292924;
    }
/*--------------------------------------*/

.stem-labs li {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

/*--------------------------------------*/
.stem-labs li:nth-child(2n) a {
    background-color: #f47938
}

.stem-labs li:nth-child(2n) svg {
    top: -50px;
    bottom: auto
}

.stem-labs li:nth-child(2n) svg path {
    fill: #1b4381
}

.stem-labs li a {
    position: relative;
    display: block;
    padding: 1em 1.5em;
    overflow: hidden;
    font-family: avenirnext-bold, sans-serif;
    font-size: 1.3em;
    line-height: 1.1em;
    color: rgba(255, 255, 255, .4);
    text-decoration: none;
    text-transform: uppercase;
    background-color: #1b4381;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.stem-labs li svg {
    position: absolute;
    right: 15px;
    bottom: -50px;
    z-index: 2;
    width: 78.78358150161506px;
    height: 100px
}

.stem-labs li svg path {
    fill: #f47938
  }

@media only screen and (min-width:1000px) {
    .stem-labs li {
        width: 33.33%
    }
    .stem-labs li a {
        padding: 2em 3em
    }
    .stem-labs li a:hover {
        color: #fff;
        background-color: transparent
    }
    .stem-labs li a:hover svg path {
        fill: #fff
    }
    .stem-labs li a:hover:after {
        width: 100%
    }
    .stem-labs li a:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 0;
        height: 100%;
        /*background-color: #574ea9, .60;*//*
        background-color: rgba(154, 46, 54, .75);*/
        content: "";
        -webkit-transition: width .3s;
        -moz-transition: width .3s;
        -ms-transition: width .3s;
        -o-transition: width .3s;
        transition: width .3s
    }
    .stem-labs li a .title {
        position: relative;
        z-index: 3
    }
    .stem-labs li svg {
        position: absolute;
        bottom: -100px;
        z-index: 2;
        width: 157.56716300323012px;
        height: 200px
    }
    .stem-labs li svg path {
        fill: #f47938/*#75d4f2*//*#066282*//*#292929*/
    }
    .stem-labs li:nth-child(2n) svg {
        top: -100px
    }
}


.stat-card {
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-5px);
}

#statModal {
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}