/* innovation modules  */
   .tab-pane .row {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
       gap: 1rem;
       padding: 0rem 0rem 1rem 0rem;
       margin: 0;
       scroll-behavior: smooth;
   }

   .tab-pane .row {
       -ms-overflow-style: none;
       scrollbar-width: none;
   }

   .tab-pane .row::-webkit-scrollbar {
       display: none;
   }

   .arena-p-h{
    font-weight: 800 !important;
}

   /* ===== Columns adjustments ===== */
   .tab-pane .col-md-4 {
       flex: 0 0 auto;
       padding: 0;
   }

   .innovation-modules {
       display: flex;
       justify-content: center;
       padding: 6rem 0rem;

   }

   .left-innovation-modules h3 {
       font-family: "work sans", sans-serif;
       font-size: 32px;
       line-height: 58px;
       font-weight: 400;
       color: #131313;
   }

   .left-innovation-modules ul li {
       font-family: "work sans", sans-serif;
       font-size: 20px;
       line-height: 36px;
       font-weight: 600;
       margin: 3px;
       border-top-left-radius: 16px;
       border-bottom-left-radius: 16px;
   }

   .left-innovation-modules .nav-link {
       font-family: "work sans", sans-serif;
       font-size: 20px;
       line-height: 36px;
       font-weight: 600;
       color: #333;
       border-top-left-radius: 16px;
       border-bottom-left-radius: 16px;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       transition: all 0.3s ease;
       width: 100%;
       text-align: left;


   }

   .left-innovation-modules .nav-link:hover {
       background-color: #eaeaea;
       background: linear-gradient(to right, #022640, #5786AB);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
   }

   .left-innovation-modules .nav-link.active {
       color: #F5F5F5;
       background-color: transparent !important;
   }

   .left-innovation-modules .nav-link {
       position: relative;
       overflow: hidden;
   }

   .left-innovation-modules .nav-link::after {
       content: "";
       position: absolute;
       top: 0;
       right: 10px;
       width: 4px;
       height: 100%;
       border-radius: 2px;
       opacity: 0;
       transform: translateX(-100%);
       transition: transform 0.6s ease, background-color 0.6s ease, opacity 0.4s ease;
   }

   .left-innovation-modules .nav-link.active::after {
       left: auto;
       right: 0px;
       transform: translateX(0);
       opacity: 1;
   }

   .right-innovation-modules {
       border: 2px solid var(--Colors-Neutral-Alpha-10-B, #1313131A);
       border-radius: 24px;
       position: relative;
       min-height: 34rem;
   }

   #modules-tabContent {
       padding: 0.5rem 0rem 0rem 0rem;
   }

   .module-card {
       background: #e9e9e9aa;
       border-radius: 24px;
       margin: 1rem 0rem;
       width: 100%;
   }

   .module-detail-card {
       background: #e9e9e9;
       position: relative;
       overflow: visible;
       box-shadow: none;
       border-radius: 24px;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       cursor: pointer;
       overflow: visible !important;
   }

   .module-detail-card img {
       border-radius: 20px;
       height: 270px;
       object-fit: fill;
   }

   .module-inner-card h5 {
       font-family: "Work Sans", sans-serif;
       font-size: 22px;
       line-height: 30px;
       font-weight: 400;
       text-align: left;
   }

   .module-inner-card ul li {
       font-family: "Work Sans", sans-serif;
       font-size: 16px;
       line-height: 28px;
       font-weight: 400;
       color: #4C4C4C !important;
   }

   .module-inner-card ul {
       background: #F5F5F5;
       border-radius: 16px;
       padding: 0.2rem 1rem 0.2rem 2rem;
       ;
       margin-bottom: 0;
       text-align: left;
   }

   .module-detail-card:hover {
       transform: scaleX(0.95) scaleY(0.96);
       box-shadow: inset 0 6px 15px rgba(189, 188, 188, 0.2);
   }

  



   /* responsive for ths */

   @media only screen and (min-width: 350px) and (max-width: 600px) {

       .card-box {
           align-items: end;
       }

       .card-stack {
           width: 75%;
           max-height: 450px !important;
       }

       .card-points .point {
           padding: 6px 10px !important;
           font-size: 12px !important;
           line-height: 20px !important;
       }

       .card-points {
           margin-top: 5px;
           gap: 5px;
       }

       .section-headings h2 {
           line-height: 25px;
       }

       .bg-white {
           padding: 2rem 0;
       }

       .tab-arrow {
           width: 30px;
           height: 30px;
       }

       .main-support-card-wrap {
           width: 187px;
           height: 135px;
           padding: 7px 10px;
           font-size: 16px;
       }

       .card-feature {
           font-size: 10px;
       }

       .small-card-feature {
           font-size: 11px;
       }

       .small-info-card {
           right: 30px;
           bottom: -60px;
       }

       .contact-section {
           height: 26rem;
           padding-left: 15px !important;
           padding-right: 15px !important;
       }

       .carousel-caption.custom-caption {
           top: 111px;
           left: 0 !important;
           justify-content: center;
           display: flex;
           width: 100%;
       }

       .carousel-caption.custom-caption h2 {
           font-size: 20px;
           line-height: 40px;
       }

       .card.expanded img.card-img-top {
           height: 100px !important;
       }

       .carousel-timers {
           display: none;
       }

       .changing-sections {
           min-height: 250px;
       }

       .section-head-wrapper {
           margin: 0px;
       }

       .stats-section {
           padding: 0 !important;
       }

       .counter-box h2 {
           font-size: 28px;
       }

       .section-para p {
           width: 100%;
           line-height: 25px;
       }

       .masters-tab-title {
           font-size: 14px;
       }

       .masters-tab-sub {
           display: none;
       }

       .masters-tab {
           height: 4rem;
           padding: 1rem 2rem 1rem 0.5rem;
           border-radius: 20px;
       }

       .schools-left {
           padding-top: 145px;
       }

       .schools-left img {
           height: 250px;
           border-radius: 16px !important;
           position: absolute;
           left: 160px;
           top: -60px;
       }

       .learn-more-btn {
           height: 35px;
           width: 130px;
           min-width: 130px;
           padding-top: 5px;
           margin-top: 1rem;
           padding: 0.5rem 1rem;
       }

       .schools-right p,
       .features {
           display: none;
       }

       .main-support-card {
           top: -25px;
           left: 3px;
           height: 153px;
           width: 202px;
       }

       .worksans {
           font-size: 16px;
       }

       .tab-contents {
           margin-bottom: 5px !important;
       }

       .innovation-modules {
           display: none;
       }

       .innovation-module-mobile {
           display: block !important;
       }

       .innovation-module-mobile-sub-head {
           font-size: 16px;

       }

       .innovation-module-wrapper-mobile {
           background-color: #eaeaea;
       }

       .innovation-module-wrapper-mobile ul {
           list-style: none;
           height: 466px;
           overflow-y: auto;
           padding-left: 0;
           margin: 0;
           scrollbar-width: none;
           -ms-overflow-style: none;
           scroll-behavior: smooth;
       }

       .innovation-module-wrapper-mobile ul::-webkit-scrollbar {
           display: none;
       }

       .innovation-module-wrapper-mobile ul li {
           font-family: "Work Sans";
           font-weight: 400;
           font-size: 14px !important;
           line-height: 100%;
           color: #131313 !important;
           min-height: 32px;
           padding: 8px 16px 8px 6px;
           text-align: start;
           z-index: 1;
           border-bottom: 1px solid #ccc;
       }

       input[type="radio"] {
           display: none;
       }

       input[type="radio"]:checked+label {
           background: linear-gradient(to right, #022640, #5786AB);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           color: black;
       }

       .innovation-image-set {
           display: none;
           transition: opacity 0.4s ease-in-out;
       }

       /* Show based on which radio is checked */
       #clay-art:checked~.col-8 #clay-images,
       #building-blocks:checked~.col-8 #building-blocks-images,
       #stop-motion-animation:checked~.col-8 #stop-motion-animation-images,
       #papier-mache:checked~.col-8 #papier-mache-images,
       #origami:checked~.col-8 #origami-images,
       #audio-video-radio:checked~.col-8 #audio-video-images,
       #vr:checked~.col-8 #vr-images,
       #print-packaging:checked~.col-8 #print-packaging-images,
       #digital-fabrication:checked~.col-8 #digital-fabrication-images,
       #d-printing:checked~.col-8 #d-printing-images,
       #resin-art:checked~.col-8 #resin-art-images,
       #wood-work:checked~.col-8 #wood-work-images,
       #metal-work:checked~.col-8 #metal-work-images,
       #reverse-engineering:checked~.col-8 #reverse-engineering-images,
       #aero-modelling:checked~.col-8 #aero-modelling-images,
       #mechatronics:checked~.col-8 #mechatronics-images,
       #sublimation-printing:checked~.col-8 #sublimation-printing-images,
       #vinyl-art:checked~.col-8 #vinyl-art-images {
           display: block;
       }

       #clay-art:checked~.col-3 label[for="clay-art"],
       #building-blocks:checked~.col-3 label[for="building-blocks"],
       #stop-motion-animation:checked~.col-3 label[for="stop-motion-animation"],
       #papier-mache:checked~.col-3 label[for="papier-mache"],
       #origami:checked~.col-3 label[for="origami"],
       #audio-video-radio:checked~.col-3 label[for="audio-video-radio"],
       #vr:checked~.col-3 label[for="vr"],
       #print-packaging:checked~.col-3 label[for="print-packaging"],
       #digital-fabrication:checked~.col-3 label[for="digital-fabrication"],
       #d-printing:checked~.col-3 label[for="d-printing"],
       #resin-art:checked~.col-3 label[for="resin-art"],
       #wood-work:checked~.col-3 label[for="wood-work"],
       #metal-work:checked~.col-3 label[for="metal-work"],
       #reverse-engineering:checked~.col-3 label[for="reverse-engineering"],
       #aero-modelling:checked~.col-3 label[for="aero-modelling"],
       #mechatronics:checked~.col-3 label[for="mechatronics"],
       #sublimation-printing:checked~.col-3 label[for="sublimation-printing"],
       #vinyl-art:checked~.col-3 label[for="vinyl-art"] {
           background: linear-gradient(to right, #022640, #5786AB);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           color: black;
       }

       .innovation-modulue-image-section-mobile {
           border: 1px solid #dedede;
           border-radius: 24px;
           padding: 8px 6px 8px 6px;
           position: relative;
       }

       .innovation-image-container-mobile {
           position: relative;
           width: 100%;
           height: 93px;
           padding: 4px;
           border: 1px;
           border-radius: 20px;
           margin-bottom: 5px;
           border-color: transparent;
           border-image: initial;
           background: linear-gradient(#DFDFDF, #DFDFDF) padding-box padding-box,
               linear-gradient(90deg, #DFDFDF, #DFDFDF) border-box border-box;
       }

       .innovation-image-container-mobile img {
           height: 100%;
           object-fit: cover;
           border-radius: 16px;
           opacity: 0.8;
       }

       .module-inner-card-mobile {
           position: absolute;
           top: 0;
           left: 0;
           height: 100%;
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           text-align: center;

           background: linear-gradient(to right, rgba(223, 223, 223, 0.172) 0%, rgb(234 234 234 / 98%) 50%, rgb(234 234 234) 100%);
           border-radius: 12px;
           pointer-events: none;
       }

       .tools-list-mobile {
           gap: 0rem 1rem !important;
       }

       .stats-text p,
       ul li {
           line-height: 25px;
       }

       .module-inner-card-mobile h5 {
           color: rgba(19, 19, 19, 1);
           font-weight: 500;
           font-size: 1rem;
           margin: 0;
           font-family: "Work Sans", sans-serif;
       }


       .plus-icon-mobile {
           bottom: -4px;
           right: -3px;
           width: 45px;
           height: 45px;
           z-index: 1;
       }

       .masters-connect {
           display: none !important;
       }

       .master-connect-mobile {
           display: block !important;
       }

       .connect-mobile-img-wrapper {
           position: relative;
           border-radius: 24px;
           overflow: hidden;
           aspect-ratio: 16 / 10;
       }

       .connect-mobile-img-wrapper img {
           object-fit: contain;
           height: 100%;
           display: none;
           width: 100%;
           transition: opacity 0.5s ease;
       }

       .slide-image {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: opacity 0.4s ease-in-out;
       }

       .slide-image:not(.active) {
           opacity: 0;
       }

       .slide-content-mobile:not(.active) {
           display: none;
       }

       .connect-content-title-mobile {
           font-family: "Work Sans";
           font-weight: 400;
           font-size: 22px;
           line-height: 100%;
           color: #F5F5F5;
       }

       .connect-content-description-mobile {
           font-family: "Work Sans";
           font-weight: 400;
           font-size: 14px;
           line-height: 100%;
           color: #BDBDBD;
       }

       .connect-features-box-mobile {
           background-color: #293c4b;
           border-radius: 16px;
           padding: 24px;
           border-width: 2px;
           border-style: solid;
           border-color: transparent;
           border-image: initial;
           background: linear-gradient(rgb(28, 46, 59), rgb(28, 46, 59)) padding-box padding-box,
               linear-gradient(90deg, rgb(2, 38, 64), rgb(87, 134, 171)) border-box border-box;

       }

       .connect-features-box-mobile ul {
           list-style-position: inside;
           padding-left: 5px;
           margin: 0;
           min-height: 80px !important;
       }

       .connect-features-box-mobile li {
           font-size: 0.9rem;
           color: #c0c5d0;
           line-height: 1.7;
       }

       .connect-learn-more-btn-mobile {
           background-color: #ffffff;
           color: #1d2b3a;
           border: none;
           border-radius: 12px;
           padding: 12px 28px;
           font-size: 1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s ease;
       }

       .connect-learn-more-btn-mobile:hover {
           transform: translateY(-2px);
           box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
       }

       .arrow-btn-connect-mobile {
           width: 44px;
           height: 44px;
           border-radius: 50%;
           background-color: transparent;
           border: 1.5px solid #bdbdbd;
           color: #5a6b7c;
           display: flex;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           transition: all 0.2s ease;
           background-color: #bdbdbd;
       }

       .arrow-btn-connect-mobile:hover {
           border-color: #ffffff;
           color: #ffffff;
       }

       .arrow-btn-connect-mobile.active {
           background-color: #bdbdbd;
           color: #1d2b3a;
           opacity: 1;
       }

       .arrow-btn-connect-mobile .next-btn-connect-mobile {
           transform: rotate(270deg);
       }

       .arrow-btn-connect-mobile .prev-btn-connect-mobile {
           transform: rotate(90deg);
       }

       .connect-mobile-img-wrapper img.active {
           display: block;
           opacity: 1;
       }

       .slide-content-mobile {
           display: none;
           opacity: 0.2;
           transition: opacity 1.5s ease;
           height: auto !important;
       }

       .slide-content-mobile.active {
           display: block;
           opacity: 1;
       }

       .swiper {
           width: 100%;
           height: 100%;
       }

       /* ================================== */
       .news-insights-section {
           padding: 2rem 0 !important;
       }

       .blogs-cards {
           height: 274px !important;
       }

       .blog-text h5 {
           font-size: 14px !important;
           line-height: 15px !important;
       }

       .blog-tab-arrow {
           width: 35px !important;
           height: 35px !important;
       }

       .blog-text p {
           display: none;
       }

       .blog-tab-arrow {
           width: 35px;
           height: 35px;
       }

       #rotating-testimonial-word {
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .testimonials-section {
           padding: 2rem 0;
       }

       .testimonials {
           height: 630px;
           margin: 15px;
       }

       .testimonials p {
           font-size: 14px;
       }

       .testimonials h2 {
           line-height: 25px;
       }

       .faq-section {
           width: auto;
       }

       .faq-section .col-9 {
           width: auto;
           padding: 0px 10px 5px 20px !important;
       }

       .faq-question {
           font-size: 1rem !important;
       }

       .faq-answer {
           font-size: 0.938rem !important;
       }

       .footer-heading h2 {
           font-size: 22px;
       }

       .faq-tab-btn {
           font-size: 11px !important;
       }

       .rotating-word {
           display: flex !important;
           justify-content: flex-end;
           align-items: center;
       }

       .grid-pattern-top,
       .grid-pattern-bottom {
           display: none;
       }

       .masters-grid-pattern-top,
       .masters-grid-pattern-bottom {
           display: none;
       }

       .section-headings h3 {
           line-height: 20px;
       }

       .faq-section {
           min-height: 50rem;
       }

       .faq-answer {
           line-height: 22px;
       }

       .faq-answer ul li {
           line-height: 20px;
           font-size: 14px !important;
       }
   }



    /* This is the main sidebar container */
    .left-innovation-modules {
        display: flex;
        flex-direction: column;
        /* height: 500px;  */
        height: 460 !important;
        position: relative;
        z-index: 10;
    }

    .modules-list-container {
        flex-grow: 1;
        overflow-y: auto;
        scrollbar-width: none;

    }

    .modules-list-container::-webkit-scrollbar {
        display: none;
    }

    /* This ensures the <ul> list itself stacks vertically */
    #modules-tab {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-left: -6px !important
    }


    /* --- Styling for Individual Modules --- */

    /* Base style for all module buttons */
    .left-innovation-modules .nav-link {
        width: 100%;
        text-align: left;
        border-bottom: 4px solid transparent;
        position: relative;
        z-index: 1;
        color: #333;
        background-color: transparent;
        margin-left: 8px;
        margin-bottom: 8px !important;
    }

    /* --- Active Module Arrow --- */
    .left-innovation-modules .nav-link.active {
        background-color: #e9ecef;
        border-radius: 8px;
        /* border-bottom: 2px solid #022640;  */
        background-image: none;
        border-image: none;
        z-index: 2;
        padding-left: 35px;
        background: linear-gradient(to right, #022640, #5786AB);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Apply the SAME gradient to the ARROW so it matches */
    .left-innovation-modules .nav-link.active::before {
        content: '►';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to right, #022640, #5786AB);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* --- Side Timer Bar Styles --- */
    .side-timer-container {
        position: absolute;
        top: 80px;
        left: 0px;
        width: 4px;
        height: 90%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px 0;
        box-sizing: border-box;
    }

    /* Each of the three "track" segments */
    .timer-segment {
        height: 30%;
        background-color: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        transition: height 0.4s ease-in-out;
    }

    .timer-segment.active {
        height: 60%;
    }

    .timer-progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: linear-gradient(to top, #022640, #5786AB);
    }

    .timer-segment.active .timer-progress {
        height: 100%;
        transition: height 5s linear;
    }

    .timer-segment.visited .timer-progress {
        height: 100%;
        transition: none;
    }


    /* --- Scroll Arrow Button Styles --- */
    .scroll-controls {
        position: absolute;
        bottom: -60px;
        right: 30px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        z-index: 100;
    }

    .scroll-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #scroll-up-btn img {
        transform: rotate(180deg);
    }

    .scroll-btn:hover {
        background-color: #f5f5f5;
        transform: translateY(-2px);
    }

    .scroll-btn svg {
        fill: #555;
        width: 22px;
        height: 22px;
    }

    .scroll-btn:disabled {
        opacity: 0.5;
        /* cursor: not-allowed; */
        transform: none;
    }

 


.outer-tab-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 0;
}

.outer-tab-arena button {
    color: #4C4C4C;
    font-family: 'Work Sans';
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 28px;
    border: 1px solid #4C4C4C;
    padding: 8px 16px;
    border-radius: 16px;
}

.outer-tab-arena button.active {
    background-color: #131313;
    color: #F5F5F5;
    transition: all 0.3s ease;
}

.experience-connect-section {
    --active-tab-bg-color: #f6e2e1;
}

.outer-tab-arena {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    margin-top: -5px;
}

.tab-button-container-arena.active {
    position: relative;
    background-color: var(--active-tab-bg-color);
    padding: 10px;
    border-radius:18px 18px 0 0;
}



@media screen and (max-width:600px) {
    .outer-tab-arena button {
  
    font-size: 8px;
    padding: 4px 8px;
   
}
.tab-button-container-arena.active {
    position: relative;
    padding: 2px;
    border-radius: 18px 18px 0 0;
}
    
}


/* testimonials section css  */

.testimonial-text {
    background: #1313131c;
}

.swiper-slide p {
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-size: var(--fs-2xl);
    line-height: 40px;
    color: #131313
}

.swiper-slide-subhead {
    font-family: "work sans", sans-serif;
    font-weight: 500;
    font-size: var(--fs-md);
    line-height: 30px;
    color: #4C4C4C;
    margin-top: 1rem;
}

.slide-wrapper {
    padding: 1rem 7rem;
}

.custom-arrow {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #111 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Positioning */
.swiper-button-prev {
    left: 15px !important;
}

.swiper-button-next {
    right: 15px !important;
}

.swiper-button-prev,
.swiper-button-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Hover effect */
.custom-arrow:hover {
    background: #4C4C4C !important;
    color: #111 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
}


@media only screen and (min-width: 350px) and (max-width: 600px) {
  
    


    /* testimonial section  */
    .testimonial-section .col-9 {
        width: 90%;
    }

    .slide-wrapper {
        padding: 0rem 3rem !important;
    }

    .swiper-slide p {
        font-family: "montserrat", sans-serif !important;
        font-weight: 500 !important;
        line-height: 28px !important;
        color: #131313 !important;
        font-size: 18px !important;
    }

    .swiper-button-prev {
        left: 0px !important;
    }

    .swiper-button-next {
        right: 0px !important;
    }

    .custom-arrow {
        width: 40px !important; 
        height: 40px !important;
    }

    /* testimonial section  */
}