* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          font-family: 'Inter', sans-serif;
          background: #ffffff;
          color: #1e293b;
          line-height: 1.5;
          overflow-x: hidden;
        }
        .page-wrapper {
          max-width: 1400px;
          margin: 0 auto;
          background: #fff;
          box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
        }
        /* ----- header (engineer at heart flavour) ----- */
        .engineer-header {
          background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
          padding: 60px 0 30px;
          border-bottom: 1px solid #e2e8f0;
        }
        .engineer-header .sub-title {
          display: inline-block;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: #e11b22;
          margin-bottom: 20px;
          padding-left: 20px;
          position: relative;
        }
        .engineer-header .sub-title::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 10px;
          height: 2px;
          background: #e11b22;
          transform: translateY(-50%);
        }
        .engineer-header h1 {
          font-size: 3.4rem;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 15px;
        }
        .heading-blue {
          color: #17479e;
        }
        .heading-red {
          color: #e11b22;
        }
        .engineer-tagline {
          font-size: 1.25rem;
          color: #475569;
          max-width: 760px;
          margin-top: 20px;
          border-left: 4px solid #e11b22;
          padding-left: 24px;
          margin-bottom: 30px;
        }
        .container-custom {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        /* ——— new vibe filter ——— */
        .vibe-strip {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin: 40px 0 20px;
          justify-content: center;
        }
        .vibe-pill {
          background: #f1f5f9;
          border: 1px solid #e2e8f0;
          color: #1e293b;
          padding: 8px 28px;
          border-radius: 40px;
          font-weight: 600;
          font-size: 1.05rem;
          cursor: pointer;
          transition: all 0.2s;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
        .vibe-pill i {
          color: #e11b22;
          font-size: 1rem;
        }
        .vibe-pill:hover,
        .vibe-pill.active-vibe {
          background: #17479e;
          color: white;
          border-color: #17479e;
          transform: translateY(-2px);
        }
        .vibe-pill.active-vibe i {
          color: white;
        }

        /* filter bar (refined) */
        .events-filter-bar {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 25px;
          background: #f8fafc;
          padding: 15px 30px;
          border-radius: 60px;
          margin: 20px 0 40px;
          border: 1px solid #e2e8f0;
        }
        .filter-label {
          font-weight: 600;
          color: #17479e;
          letter-spacing: 1px;
          font-size: 0.95rem;
        }
        .filter-label i {
          margin-right: 8px;
          color: #e11b22;
        }
        .event-dropdown {
          flex: 1;
          position: relative;
        }
        .event-select {
          width: 100%;
          padding: 12px 25px;
          border-radius: 40px;
          border: 1px solid #d1d9e6;
          background: white;
          font-family: 'Inter', sans-serif;
          font-weight: 500;
          color: #0f172a;
          appearance: none;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317479e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
          background-repeat: no-repeat;
          background-position: right 20px center;
          background-size: 16px;
        }

        /* event cards */
        .event-showcase {
          display: flex;
          flex-direction: column;
          gap: 40px;
          margin: 30px 0 50px;
        }
        .event-card {
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 32px;
          padding: 35px 30px;
          box-shadow: 0 12px 30px -12px rgba(23, 71, 158, 0.1);
          transition: all 0.25s;
        }
        .event-card:hover {
          box-shadow: 0 25px 35px -14px rgba(225, 27, 34, 0.15);
        }
        .event-title {
          font-size: 2.2rem;
          font-weight: 700;
          color: #17479e;
          margin-bottom: 20px;
          border-left: 6px solid #e11b22;
          padding-left: 20px;
        }
        .media-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          margin: 25px 0 30px;
        }
        .media-item {
          border-radius: 20px;
          overflow: hidden;
          aspect-ratio: 4/3;
          background: #eef2f6;
          border: 1px solid #e2e8f0;
        }
        .media-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.4s ease;
        }
        .media-item:hover img {
          transform: scale(1.05);
        }
        .event-description {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 30px;
          margin-top: 20px;
        }
        .desc-block {
          background: #f8fafc;
          padding: 20px 18px;
          border-radius: 18px;
          border: 1px solid #e9eef3;
        }
        .desc-block i {
          color: #e11b22;
          font-size: 1.6rem;
          margin-bottom: 12px;
        }
        .desc-block h4 {
          font-size: 1.2rem;
          font-weight: 600;
          color: #0f172a;
          margin-bottom: 8px;
        }
        .desc-block p {
          color: #475569;
          font-size: 0.95rem;
          margin: 0;
        }
        .event-note {
          background: #17479e0c;
          padding: 22px 30px;
          border-radius: 24px;
          border-left: 5px solid #e11b22;
          color: #1e293b;
          font-size: 1.05rem;
          margin: 30px 0 0;
        }

        /* alternating moments grid */
        .alternating-moments {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
          margin: 30px 0 50px;
        }
        .moment-mini {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 24px;
          padding: 24px;
          transition: 0.2s;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
          position: relative;
          overflow: hidden;
        }
        .moment-mini:hover {
          border-color: #17479e33;
        }
        .moment-mini h3 {
          color: #17479e;
          font-weight: 700;
          margin-bottom: 12px;
          font-size: 1.5rem;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .moment-mini h3 i {
          color: #e11b22;
        }
        .vibe-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 16px;
        }
        .vibe-tag {
          background: #eef2f6;
          border-radius: 30px;
          padding: 4px 14px;
          font-size: 0.8rem;
          font-weight: 600;
          color: #17479e;
          border: 1px solid #dce3ec;
          letter-spacing: 0.3px;
        }
        .vibe-tag i {
          font-size: 0.7rem;
          margin-right: 4px;
          color: #e11b22;
        }
        .mini-media {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          margin: 18px 0 12px;
        }
        .mini-thumb {
          width: 90px;
          height: 70px;
          border-radius: 16px;
          background-size: cover;
          background-position: center;
          border: 1px solid #e2e8f0;
        }
        .moment-mini p i {
          color: #e11b22;
          font-size: 0.8rem;
          margin-right: 6px;
        }

        hr.divider {
          border: 0;
          height: 1px;
          background: linear-gradient(
            90deg,
            transparent,
            #e11b22,
            #17479e,
            transparent
          );
          margin: 40px 0;
        }

        .hidden-event {
          display: none;
        }
        .small-note {
          color: #64748b;
          font-size: 0.9rem;
          margin-top: 20px;
        }

        /* ===== INNER BANNER ===== */
        .inner-banner {
          background: linear-gradient(98deg, #0b2552 0%, #14377a 100%);
          padding: 40px 0;
          margin: 30px 0 10px;
          border-radius: 48px;
          color: white;
          position: relative;
          isolation: isolate;
          box-shadow: 0 20px 30px -10px rgba(23, 71, 158, 0.3);
        }
        .inner-banner .banner-content {
          max-width: 1000px;
          margin: 0 auto;
          padding: 0 30px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 30px;
        }
        .banner-text h2 {
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 1.3;
          margin-bottom: 12px;
        }
        .banner-text h2 span {
          color: #ffb4b4;
          border-bottom: 3px solid #e11b22;
          display: inline-block;
          padding-bottom: 5px;
        }
        .banner-text p {
          font-size: 1.1rem;
          opacity: 0.9;
          margin: 0;
          max-width: 550px;
        }
        .banner-stats {
          display: flex;
          gap: 36px;
          background: rgba(255, 255, 255, 0.08);
          padding: 18px 30px;
          border-radius: 60px;
          backdrop-filter: blur(4px);
          border: 1px solid rgba(255, 255, 255, 0.15);
        }
        .stat-item {
          text-align: center;
        }
        .stat-number {
          font-size: 2.2rem;
          font-weight: 700;
          color: #ffb4b4;
          line-height: 1;
        }
        .stat-label {
          font-size: 0.9rem;
          text-transform: uppercase;
          letter-spacing: 1px;
          opacity: 0.8;
        }
        .inner-banner .banner-icon {
          position: absolute;
          right: 40px;
          bottom: 20px;
          font-size: 6rem;
          color: #ffffff10;
          transform: rotate(10deg);
          pointer-events: none;
        }

        /* ===== ATTRACTIVE SMALL SLIDER ===== */
        .highlights-slider-section {
          margin: 40px 0 30px;
          padding: 20px 0;
          position: relative;
        }

        .slider-header {
          text-align: center;
          margin-bottom: 30px;
        }

        .slider-subtitle {
          display: inline-block;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 3px;
          text-transform: uppercase;
          color: #e11b22;
          margin-bottom: 10px;
          position: relative;
          padding: 0 15px;
        }

        .slider-subtitle::before,
        .slider-subtitle::after {
          content: '';
          position: absolute;
          top: 50%;
          width: 30px;
          height: 2px;
          background: #e11b22;
          transform: translateY(-50%);
        }

        .slider-subtitle::before {
          left: -30px;
        }

        .slider-subtitle::after {
          right: -30px;
        }

        .slider-title {
          font-size: 2rem;
          font-weight: 700;
          color: #0f172a;
          margin: 0;
        }

        .highlights-slider {
          position: relative;
          overflow: hidden;
          padding: 10px 5px;
          margin: 0 -5px;
        }

        .slider-track {
          display: flex;
          gap: 20px;
          animation: scroll 30s linear infinite;
          width: fit-content;
        }

        .highlights-slider:hover .slider-track {
          animation-play-state: paused;
        }

        @keyframes scroll {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(calc(-280px * 3 - 60px));
          }
        }

        .slider-slide {
          flex: 0 0 260px;
          transition: all 0.3s ease;
        }

        .slide-card {
          background: #ffffff;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.1);
          border: 1px solid #eef2f6;
          transition: all 0.3s ease;
          height: 100%;
        }

        .slide-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 30px -12px rgba(225, 27, 34, 0.2);
          border-color: #e11b2240;
        }

        .slide-image {
          position: relative;
          height: 180px;
          overflow: hidden;
        }

        .slide-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .slide-card:hover .slide-image img {
          transform: scale(1.1);
        }

        .slide-overlay {
          position: absolute;
          top: 10px;
          left: 10px;
          right: 10px;
          display: flex;
          justify-content: flex-start;
          z-index: 2;
        }

        .slide-tag {
          background: #e11b22;
          color: white;
          padding: 4px 12px;
          border-radius: 30px;
          font-size: 0.7rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .slide-content {
          padding: 15px 15px 20px;
          text-align: center;
        }

        .slide-content h4 {
          font-size: 1.1rem;
          font-weight: 700;
          color: #17479e;
          margin: 0 0 5px;
        }

        .slide-content p {
          font-size: 0.85rem;
          color: #64748b;
          margin: 0;
        }

        /* Navigation arrows */
        .slider-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: white;
          border: 1px solid #e2e8f0;
          color: #17479e;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 10;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          opacity: 0.7;
        }

        .highlights-slider:hover .slider-nav {
          opacity: 1;
        }

        .slider-prev {
          left: 10px;
        }

        .slider-next {
          right: 10px;
        }

        .slider-nav:hover {
          background: #e11b22;
          color: white;
          border-color: #e11b22;
          transform: translateY(-50%) scale(1.1);
          opacity: 1;
        }

        /* Dots */
        .slider-dots {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 25px;
        }

        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #cbd5e1;
          transition: all 0.2s ease;
          cursor: pointer;
        }

        .dot.active {
          background: #e11b22;
          transform: scale(1.3);
          width: 10px;
          height: 10px;
        }

        /* ===== TESTIMONIALS CAROUSEL ===== */
        .testimonials-section {
          margin: 60px auto;
          background: #ffffff;
          border-radius: 48px;
          padding: 20px 20px 40px;
        }
        .testimonials-section h2 {
          font-size: 2.5rem;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 40px;
          position: relative;
          display: inline-block;
        }
        .testimonials-section h2 span {
          color: #e11b22;
          margin-right: 8px;
          animation: heartBeat 1.5s infinite;
        }
        @keyframes heartBeat {
          0%,
          100% {
            transform: scale(1);
          }
          25% {
            transform: scale(1.1);
          }
          40% {
            transform: scale(1);
          }
          60% {
            transform: scale(1.05);
          }
        }
        .testimonial-carousel .carousel-item {
          padding: 10px 20px 30px;
        }
        .testimonial-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 32px;
          padding: 35px;
          box-shadow: 0 12px 30px -12px rgba(23, 71, 158, 0.1);
          transition: all 0.3s ease;
          max-width: 900px;
          margin: 0 auto;
        }
        .testimonial-card:hover {
          box-shadow: 0 25px 40px -16px rgba(225, 27, 34, 0.2);
          border-color: #e11b2240;
          transform: translateY(-4px);
        }
        .testimonial-header {
          display: flex;
          gap: 20px;
          align-items: center;
          margin-bottom: 20px;
          flex-wrap: wrap;
        }
        .testimonial-img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
          border: 4px solid #e11b22;
          box-shadow: 0 8px 16px rgba(225, 27, 34, 0.15);
        }
        .testimonial-meta {
          flex: 1;
        }
        .testimonial-name {
          font-size: 1.8rem;
          font-weight: 700;
          color: #17479e;
          margin: 0 0 5px;
          line-height: 1.2;
        }
        .testimonial-role {
          font-size: 1.1rem;
          color: #475569;
          margin-bottom: 8px;
        }
        .tenure-badge {
          background: #e11b22;
          color: white;
          padding: 4px 16px;
          border-radius: 40px;
          font-weight: 600;
          font-size: 0.9rem;
          display: inline-block;
          letter-spacing: 0.3px;
        }
        .testimonial-quote {
          background: #f8fafc;
          padding: 25px;
          border-radius: 24px;
          border-left: 5px solid #e11b22;
          margin: 20px 0 15px;
          position: relative;
        }
        .testimonial-quote i {
          color: #e11b22;
          opacity: 0.2;
          font-size: 2.5rem;
          position: absolute;
          top: 15px;
          right: 20px;
        }
        .testimonial-quote p {
          font-size: 1.05rem;
          line-height: 1.7;
          color: #1e293b;
          font-style: italic;
          margin-bottom: 0;
          position: relative;
          z-index: 1;
        }
        .read-more {
          color: #17479e;
          font-weight: 600;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: gap 0.2s;
        }
        .read-more:hover {
          gap: 12px;
          color: #e11b22;
        }
        /* carousel controls */
        .testimonials-section .carousel-control-prev,
        .testimonials-section .carousel-control-next {
          width: 50px;
          height: 50px;
          background: #ffffff;
          border-radius: 50%;
          top: 50%;
          transform: translateY(-50%);
          opacity: 1;
          border: 1px solid #e2e8f0;
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
          transition: all 0.2s;
        }
        .testimonials-section .carousel-control-prev:hover,
        .testimonials-section .carousel-control-next:hover {
          background: #e11b22;
          border-color: #e11b22;
          transform: translateY(-50%) scale(1.1);
        }
        .testimonials-section .carousel-control-prev {
          left: -10px;
        }
        .testimonials-section .carousel-control-next {
          right: -10px;
        }
        .testimonials-section .carousel-control-prev i,
        .testimonials-section .carousel-control-next i {
          color: #17479e;
          font-size: 1.3rem;
          transition: color 0.2s;
        }
        .testimonials-section .carousel-control-prev:hover i,
        .testimonials-section .carousel-control-next:hover i {
          color: #ffffff;
        }
        .testimonials-section .carousel-indicators {
          bottom: -20px;
        }
        .testimonials-section .carousel-indicators button {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #cbd5e1;
          border: none;
          opacity: 1;
          margin: 0 5px;
          transition: all 0.2s;
        }
        .testimonials-section .carousel-indicators button.active {
          background-color: #e11b22;
          transform: scale(1.3);
          width: 12px;
          height: 12px;
        }
        .cta-careers {
          margin-top: 60px;
          text-align: center;
          background: linear-gradient(145deg, #f8fafc, #ffffff);
          padding: 40px;
          border-radius: 48px;
          border: 1px solid #e2e8f0;
        }
        .cta-careers h3 {
          font-size: 2rem;
          font-weight: 700;
          color: #17479e;
          margin-bottom: 15px;
        }
        .cta-careers p {
          font-size: 1.2rem;
          color: #475569;
          max-width: 600px;
          margin: 0 auto 25px;
        }
        .btn-careers {
          background: #e11b22;
          color: white;
          border: none;
          padding: 15px 45px;
          border-radius: 60px;
          font-weight: 600;
          font-size: 1.2rem;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          text-decoration: none;
          transition: all 0.2s;
          box-shadow: 0 8px 18px rgba(225, 27, 34, 0.2);
        }
        .btn-careers:hover {
          background: #17479e;
          transform: scale(1.02);
          box-shadow: 0 12px 24px rgba(23, 71, 158, 0.25);
        }

        /* ===== LITTLE ENGINEER AT HEART SECTION ===== */
        .little-engineer-section {
          padding: 60px 0;
          background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
          border-radius: 48px;
          margin: 40px 0;
        }

        .program-description {
          max-width: 800px;
          margin: 0 auto 40px;
          text-align: center;
          font-size: 1.15rem;
          line-height: 1.7;
          color: #475569;
          padding: 0 20px;
        }

        /* Paginated gallery */
        .pagination-gallery {
          margin: 40px 0;
        }

        .gallery-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          margin-bottom: 30px;
        }

        .gallery-item {
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          aspect-ratio: 1/1;
          cursor: pointer;
          box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
          border: 2px solid transparent;
        }

        .gallery-item:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 30px -10px rgba(225, 27, 34, 0.3);
          border-color: #e11b22;
        }

        .gallery-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.4s ease;
        }

        .gallery-item:hover img {
          transform: scale(1.05);
        }

        .gallery-caption {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
          color: white;
          padding: 15px 10px 8px;
          font-size: 0.9rem;
          display: flex;
          flex-direction: column;
          gap: 4px;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.3s ease;
        }

        .gallery-item:hover .gallery-caption {
          opacity: 1;
          transform: translateY(0);
        }

        .theme-tag {
          background: #e11b22;
          color: white;
          padding: 2px 8px;
          border-radius: 20px;
          font-size: 0.7rem;
          font-weight: 600;
          align-self: flex-start;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .pagination-controls {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          margin-top: 30px;
          flex-wrap: wrap;
        }

        .pagination-btn {
          background: white;
          border: 1px solid #e2e8f0;
          color: #17479e;
          padding: 10px 20px;
          border-radius: 40px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
        }

        .pagination-btn:hover:not(:disabled) {
          background: #17479e;
          color: white;
          border-color: #17479e;
          transform: translateY(-2px);
        }

        .pagination-btn:disabled {
          opacity: 0.4;
          cursor: not-allowed;
        }

        .page-numbers {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          justify-content: center;
        }

        .page-number {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #e2e8f0;
          background: white;
          color: #1e293b;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .page-number.active {
          background: #e11b22;
          color: white;
          border-color: #e11b22;
          transform: scale(1.1);
        }

        .page-number:hover:not(.active) {
          background: #f1f5f9;
          border-color: #17479e;
        }

        .program-highlight {
          margin-top: 50px;
          text-align: center;
          background: linear-gradient(135deg, rgba(23, 71, 158, 0.05), rgba(225, 27, 34, 0.05));
          border-radius: 40px;
          padding: 40px 30px;
          border: 1px dashed #17479e40;
        }

        .highlight-stats {
          display: flex;
          justify-content: center;
          gap: 40px;
          flex-wrap: wrap;
          margin-bottom: 25px;
        }

        .stat-bubble {
          background: white;
          border-radius: 60px;
          padding: 15px 35px;
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
          border: 1px solid #e2e8f0;
          display: flex;
          flex-direction: column;
          min-width: 140px;
        }

        .stat-bubble .stat-number {
          font-size: 2.2rem;
          font-weight: 800;
          color: #e11b22;
          line-height: 1;
        }

        .stat-bubble .stat-label {
          font-size: 1rem;
          color: #17479e;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .highlight-note {
          font-size: 1.1rem;
          color: #1e293b;
          max-width: 700px;
          margin: 0 auto;
          font-style: italic;
          background: rgba(255, 255, 255, 0.6);
          padding: 20px 30px;
          border-radius: 60px;
          border: 1px solid rgba(225, 27, 34, 0.2);
        }

        .highlight-note i {
          font-size: 1.2rem;
          margin-right: 10px;
          opacity: 0.8;
        }

        /* Lightbox */
        .lightbox-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.95);
          backdrop-filter: blur(5px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10000;
          padding: 20px;
        }

        .lightbox-content {
          position: relative;
          max-width: 900px;
          width: 100%;
          border-radius: 24px;
          overflow: hidden;
          box-shadow: 0 30px 60px rgba(0,0,0,0.5);
          animation: zoomIn 0.3s ease;
        }

        @keyframes zoomIn {
          from { transform: scale(0.9); opacity: 0; }
          to { transform: scale(1); opacity: 1; }
        }

        .lightbox-content img {
          width: 100%;
          height: auto;
          max-height: 80vh;
          object-fit: contain;
          display: block;
        }

        .lightbox-close {
          position: absolute;
          top: 15px;
          right: 15px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(255,255,255,0.2);
          color: white;
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .lightbox-close:hover {
          background: #e11b22;
          transform: rotate(90deg);
        }

        .lightbox-caption {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
          color: white;
          padding: 20px;
        }

        .lightbox-caption h4 {
          font-size: 1.3rem;
          margin-bottom: 5px;
          color: #fff;
        }

        .lightbox-caption p {
          font-size: 1rem;
          opacity: 0.9;
        }

        /* Responsive */
        @media (max-width: 992px) {
          .media-grid {
            grid-template-columns: repeat(2, 1fr);
          }
          .event-description {
            grid-template-columns: 1fr;
          }
          .alternating-moments {
            grid-template-columns: 1fr;
          }
          .engineer-header h1 {
            font-size: 2.6rem;
          }
          .testimonials-section .carousel-control-prev {
            left: -5px;
          }
          .testimonials-section .carousel-control-next {
            right: -5px;
          }
          .gallery-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .slider-track {
            animation: scroll 25s linear infinite;
          }
          
          @keyframes scroll {
            100% {
              transform: translateX(calc(-220px * 3 - 60px));
            }
          }
          
          .slider-slide {
            flex: 0 0 220px;
          }
          
          .slide-image {
            height: 150px;
          }
          
          .slider-nav {
            opacity: 1;
            width: 35px;
            height: 35px;
          }

          .events-filter-bar {
            flex-direction: column;
            align-items: stretch;
            border-radius: 40px;
          }
          .media-grid {
            grid-template-columns: 1fr;
          }
          .testimonial-header {
            flex-direction: column;
            text-align: center;
          }
          .testimonials-section .carousel-control-prev,
          .testimonials-section .carousel-control-next {
            display: none;
          }
          .gallery-grid {
            grid-template-columns: repeat(2, 1fr);
            padding: 0 10px;
          }
          .pagination-controls {
            flex-direction: column;
            gap: 15px;
          }
          .highlight-stats {
            gap: 20px;
          }
          .stat-bubble {
            padding: 12px 25px;
            min-width: 120px;
          }
          .stat-bubble .stat-number {
            font-size: 1.8rem;
          }
        }

      @media (max-width: 767px) {
        .testimonial-quote p {
          font-size:12px!important;
        }
      }

        @media (max-width: 480px) {
          .slider-slide {
            flex: 0 0 200px;
          }
          
          .slide-image {
            height: 140px;
          }
          
          .slider-subtitle::before,
          .slider-subtitle::after {
            width: 15px;
          }
          
          .slider-subtitle::before {
            left: -20px;
          }
          
          .slider-subtitle::after {
            right: -20px;
          }

          .gallery-grid {
            grid-template-columns: 1fr;
          }
        }

        /* demo images (all from pexels, rich) */
        .demo-img {
          background-size: cover;
          background-position: center;
        }

        .life-at-solipro-banner .inner-banner {
          min-height: 50vh;
        }