/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
  --neutral-900: #111827;
  --primary-600: #2563eb;
  --navbar-height-desktop: 75px;
  --navbar-height-tablet: 70px;
  --navbar-height-mobile: 60px;
}

/* ==========================================
   GLOBAL RESET - LEFT SIDE FIX
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ==========================================
   HERO WRAPPER - PREVENTS LEFT SHIFT
   ========================================== */
.hero-wrapper {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================
   HERO SWIPER - LEFT ALIGNMENT FIXED
   ========================================== */
.hero-swiper {
  width: 100%;
  max-width: 100vw;
  height: calc(100vh - var(--navbar-height-desktop));
  min-height: 600px;
  background: #ffffff;
  position: relative;
  margin: var(--navbar-height-desktop) auto 0;
  padding: 0;
  overflow: hidden;
}

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

.swiper-slide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 0;
}

/* Slide Content - Centered with Safe Spacing */
.slide-content {
  text-align: center;
  max-width: 900px;
  width: 100%;
  padding: 60px 20px 40px; /* Top padding increased for badge safety */
  margin: 0 auto;
}

/* Badge Spacer - Extra safety from navbar */
.badge-spacer {
  height: 30px;
  display: block;
}

/* Badge - No navbar overlap */
.badge-pill {
  display: inline-block;
  padding: 10px 24px;
  background: #ffffff;
  border: 2px solid #1e3a8a;
  border-radius: 50px;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  line-height: 1.4;
}

/* Headings - Proper spacing */
.hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1.2;
  color: #000000;
  margin-bottom: 20px;
  word-wrap: break-word;
  padding: 0 10px;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e3a8a;
  margin-bottom: 25px;
  word-wrap: break-word;
  padding: 0 10px;
}

/* Description - Safe margins */
.hero-description {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.8;
  margin: 0 auto 40px;
  max-width: 700px;
  padding: 0 15px;
}

/* Buttons - Proper gap */
.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  flex-wrap: wrap;
  padding: 0 10px;
}

.btn-dark-blue,
.btn-white {
  padding: 14px 40px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #1e3a8a;
}

.btn-dark-blue {
  background: #1e3a8a;
  color: white;
}

.btn-dark-blue:hover {
  background: #1e40af;
  border-color: #1e40af;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
  color: white;
}

.btn-white {
  background: #ffffff;
  color: #1e3a8a;
}

.btn-white:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
  color: #1e3a8a;
}

/* Stats - Safe spacing */
.stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  padding: 30px 15px 0;
  border-top: 2px solid #e5e7eb;
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.stat-box {
  text-align: center;
  min-width: 100px;
}

.stat-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #1e3a8a;
  margin-bottom: 5px;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
}

/* Swiper Navigation - Safe positioning */
.swiper-button-next,
.swiper-button-prev {
  color: #1e3a8a;
  background: #ffffff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #1e3a8a;
  transition: all 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
}

.swiper-button-next {
  right: 20px;
}

.swiper-button-prev {
  left: 20px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px;
  font-weight: 700;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #1e3a8a;
  color: #ffffff;
}

/* Swiper Pagination - Safe bottom spacing */
.swiper-pagination {
  bottom: 30px !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #d1d5db;
  opacity: 1;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
  background: #1e3a8a;
  width: 32px;
  border-radius: 6px;
}

/* ==========================================
   EXPERTISE SECTION - NO OVERLAP
   ========================================== */
.expertise-section {
  padding: 80px 20px;
  background: #f9fafb;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  overflow-x: hidden;
}

.expertise-container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
  padding: 0 15px;
}

.section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 50px;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================
   RESPONSIVE - ALL DEVICES
   NO OVERLAP GUARANTEED
   ========================================== */

/* Small Mobile - 320px to 374px */
@media (max-width: 374px) {
  :root {
    --navbar-height-mobile: 58px;
  }
  
  .hero-swiper {
    margin-top: var(--navbar-height-mobile);
    height: calc(100vh - var(--navbar-height-mobile));
    min-height: 440px;
  }
  
  .slide-content {
    padding: 45px 10px 30px;
  }
  
  .badge-spacer {
    height: 15px;
  }
  
  .badge-pill {
    font-size: 9px;
    padding: 5px 12px;
    margin-bottom: 15px;
  }
  
  .hero-title {
    font-size: 1.65rem;
    margin-bottom: 10px;
    padding: 0 5px;
  }
  
  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding: 0 5px;
  }
  
  .hero-description {
    font-size: 0.85rem;
    margin-bottom: 20px;
    line-height: 1.6;
    padding: 0 8px;
  }
  
  .hero-buttons {
    gap: 8px;
    margin-bottom: 25px;
    flex-direction: column;
    padding: 0 8px;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 9px 18px;
    font-size: 0.8rem;
    width: 100%;
  }
  
  .stats-container {
    gap: 18px;
    padding: 20px 10px 0;
    flex-direction: column;
  }
  
  .stat-number {
    font-size: 1.6rem;
  }
  
  .stat-label {
    font-size: 10px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 35px;
    height: 35px;
  }
  
  .swiper-button-next {
    right: 10px;
  }
  
  .swiper-button-prev {
    left: 10px;
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 13px;
  }
  
  .swiper-pagination {
    bottom: 20px !important;
  }
  
  .expertise-section {
    padding: 50px 12px;
  }
  
  .section-title {
    font-size: 1.55rem;
  }
  
  .section-subtitle {
    font-size: 0.825rem;
  }
}

/* Standard Mobile - 375px to 479px */
@media (min-width: 375px) and (max-width: 479px) {
  .hero-swiper {
    margin-top: var(--navbar-height-mobile);
    height: calc(100vh - var(--navbar-height-mobile));
    min-height: 460px;
  }
  
  .slide-content {
    padding: 50px 12px 35px;
  }
  
  .badge-spacer {
    height: 18px;
  }
  
  .badge-pill {
    font-size: 10px;
    padding: 6px 14px;
    margin-bottom: 18px;
  }
  
  .hero-title {
    font-size: 1.9rem;
    margin-bottom: 12px;
  }
  
  .hero-subtitle {
    font-size: 1.05rem;
    margin-bottom: 14px;
  }
  
  .hero-description {
    font-size: 0.9rem;
    margin-bottom: 22px;
  }
  
  .hero-buttons {
    gap: 10px;
    margin-bottom: 28px;
    flex-direction: column;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 10px 22px;
    font-size: 0.85rem;
    width: 100%;
  }
  
  .stats-container {
    gap: 22px;
    padding: 22px 12px 0;
    flex-direction: column;
  }
  
  .stat-number {
    font-size: 1.75rem;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    width: 38px;
    height: 38px;
  }
  
  .swiper-button-next {
    right: 12px;
  }
  
  .swiper-button-prev {
    left: 12px;
  }
  
  .swiper-pagination {
    bottom: 22px !important;
  }
  
  .expertise-section {
    padding: 55px 14px;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
}

/* Large Mobile - 480px to 575px */
@media (min-width: 480px) and (max-width: 575px) {
  .hero-swiper {
    margin-top: 62px;
    height: calc(100vh - 62px);
    min-height: 480px;
  }
  
  .slide-content {
    padding: 55px 14px 38px;
  }
  
  .badge-spacer {
    height: 20px;
  }
  
  .badge-pill {
    font-size: 11px;
    padding: 7px 16px;
    margin-bottom: 20px;
  }
  
  .hero-title {
    font-size: 2.1rem;
    margin-bottom: 14px;
  }
  
  .hero-subtitle {
    font-size: 1.15rem;
    margin-bottom: 16px;
  }
  
  .hero-description {
    font-size: 0.95rem;
    margin-bottom: 26px;
  }
  
  .hero-buttons {
    gap: 10px;
    margin-bottom: 32px;
    flex-direction: column;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 11px 24px;
    font-size: 0.875rem;
    width: 100%;
    max-width: 320px;
  }
  
  .stats-container {
    gap: 26px;
    padding: 24px 14px 0;
  }
  
  .stat-number {
    font-size: 1.85rem;
  }
  
  .swiper-button-next {
    right: 15px;
  }
  
  .swiper-button-prev {
    left: 15px;
  }
  
  .swiper-pagination {
    bottom: 25px !important;
  }
  
  .expertise-section {
    padding: 60px 16px;
  }
  
  .section-title {
    font-size: 1.85rem;
  }
}

/* Tablet Portrait - 576px to 767px */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-swiper {
    margin-top: 66px;
    height: calc(100vh - 66px);
    min-height: 500px;
  }
  
  .slide-content {
    max-width: 600px;
    padding: 58px 16px 40px;
  }
  
  .badge-spacer {
    height: 22px;
  }
  
  .badge-pill {
    font-size: 12px;
    padding: 8px 18px;
    margin-bottom: 22px;
  }
  
  .hero-title {
    font-size: 2.35rem;
    margin-bottom: 16px;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 18px;
  }
  
  .hero-description {
    font-size: 0.975rem;
    margin-bottom: 30px;
  }
  
  .hero-buttons {
    gap: 12px;
    margin-bottom: 36px;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 11px 28px;
    font-size: 0.9rem;
  }
  
  .stats-container {
    gap: 32px;
    padding: 26px 16px 0;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .expertise-section {
    padding: 65px 18px;
  }
  
  .section-title {
    font-size: 2rem;
  }
}

/* Tablet Landscape - 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-swiper {
    margin-top: var(--navbar-height-tablet);
    height: calc(100vh - var(--navbar-height-tablet));
    min-height: 520px;
  }
  
  .slide-content {
    max-width: 700px;
    padding: 62px 18px 42px;
  }
  
  .badge-spacer {
    height: 25px;
  }
  
  .badge-pill {
    font-size: 13px;
    padding: 9px 20px;
    margin-bottom: 24px;
  }
  
  .hero-title {
    font-size: 2.75rem;
    margin-bottom: 18px;
  }
  
  .hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }
  
  .hero-description {
    font-size: 1rem;
    margin-bottom: 33px;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 12px 32px;
    font-size: 0.95rem;
  }
  
  .stats-container {
    gap: 40px;
    padding: 28px 18px 0;
  }
  
  .stat-number {
    font-size: 2.15rem;
  }
  
  .expertise-section {
    padding: 70px 20px;
  }
  
  .section-title {
    font-size: 2.15rem;
  }
}

/* Laptop - 992px to 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .slide-content {
    max-width: 800px;
    padding: 65px 20px 45px;
  }
  
  .badge-spacer {
    height: 28px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.35rem;
  }
  
  .hero-description {
    font-size: 1.05rem;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 13px 36px;
  }
  
  .stat-number {
    font-size: 2.25rem;
  }
  
  .stats-container {
    gap: 48px;
  }
  
  .expertise-section {
    padding: 75px 22px;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
}

/* Desktop - 1200px to 1439px */
@media (min-width: 1200px) and (max-width: 1439px) {
  .slide-content {
    max-width: 850px;
  }
  
  .badge-spacer {
    height: 30px;
  }
}

/* Large Desktop - 1440px to 1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-title {
    font-size: 4rem;
  }
  
  .hero-subtitle {
    font-size: 1.75rem;
  }
  
  .hero-description {
    font-size: 1.25rem;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 15px 45px;
  }
}

/* 4K & Ultra Wide - 1920px+ */
@media (min-width: 1920px) {
  :root {
    --navbar-height-desktop: 80px;
  }
  
  .slide-content {
    max-width: 1100px;
    padding: 70px 30px 50px;
  }
  
  .badge-spacer {
    height: 35px;
  }
  
  .hero-title {
    font-size: 4.5rem;
  }
  
  .hero-subtitle {
    font-size: 2rem;
  }
  
  .hero-description {
    font-size: 1.35rem;
    max-width: 900px;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 16px 50px;
    font-size: 1.1rem;
  }
  
  .stat-number {
    font-size: 3rem;
  }
  
  .stat-label {
    font-size: 16px;
  }
  
  .expertise-section {
    padding: 90px 25px;
  }
  
  .section-title {
    font-size: 3rem;
  }
}

/* Ultra Wide - 2560px+ */
@media (min-width: 2560px) {
  .slide-content {
    max-width: 1400px;
  }
  
  .hero-title {
    font-size: 5.5rem;
  }
  
  .hero-subtitle {
    font-size: 2.5rem;
  }
  
  .hero-description {
    font-size: 1.5rem;
    max-width: 1100px;
  }
  
  .btn-dark-blue,
  .btn-white {
    padding: 18px 55px;
    font-size: 1.2rem;
  }
  
  .stat-number {
    font-size: 3.5rem;
  }
  
  .section-title {
    font-size: 3.5rem;
  }
}



  /* Expertise Grid - 4 COLUMNS */
  .expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* Expertise Card - COMPACT */
  .expertise-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
  }

  .expertise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  }

  /* Icon Container - COMPACT with COLORED BORDER */
  .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 28px;
    position: relative;
  }

  /* AI & ML */
  .ai-ml .icon-wrapper {
    background: #f5f3ff;
    color: #667eea;
    border: 2px solid #667eea;
  }

  /* Blockchain */
  .blockchain .icon-wrapper {
    background: #eff6ff;
    color: #2754ba;
    border: 2px solid #2754ba;
  }

  /* IoT */
  .iot .icon-wrapper {
    background: #f0fdf4;
    color: #10b981;
    border: 2px solid #10b981;
  }

  /* AR/VR */
  .arvr .icon-wrapper {
    background: #fdf2f8;
    color: #ec4899;
    border: 2px solid #ec4899;
  }

  /* Edge Computing */
  .edge .icon-wrapper {
    background: #fff7ed;
    color: #f59e0b;
    border: 2px solid #f59e0b;
  }

  /* Quantum */
  .quantum .icon-wrapper {
    background: #ecfeff;
    color: #06b6d4;
    border: 2px solid #06b6d4;
  }

  /* Microservices */
  .microservices .icon-wrapper {
    background: #fef2f2;
    color: #ef4444;
    border: 2px solid #ef4444;
  }

  /* Zero Trust */
  .zerotrust .icon-wrapper {
    background: #f8fafc;
    color: #1e293b;
    border: 2px solid #1e293b;
  }

  /* Card Content */
  .card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: #0f172a;
    margin-bottom: 10px;
  }

  .card-description {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.6;
  }

  /* Features List - COMPACT */
  .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .features-list li {
    padding: 8px 0;
    font-size: 12.5px;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
  }

  .features-list li:last-child {
    border-bottom: none;
  }

  .features-list li::before {
    content: '•';
    color: #94a3b8;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1.4;
  }

  /* TECHNOLOGIES SECTION - FIXED */
  .tech-section {
    padding: 80px 20px;
    background: #f8fafc;
  }

  .tech-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .tech-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .tech-badge {
    display: inline-block;
    padding: 6px 18px;
    background: #dbeafe;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-transform: uppercase;
    border-radius: 50px;
  }

  .tech-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 12px;
  }

  .tech-subtitle {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
  }

  .tech-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 60px;
  }

  .tech-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .tech-card:hover {
    border-color: var(--hover-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .tech-card.python { --hover-color: #fbbf24; }
  .tech-card.aws { --hover-color: #ff9900; }
  .tech-card.docker { --hover-color: #2496ed; }
  .tech-card.react { --hover-color: #61dafb; }
  .tech-card.nodejs { --hover-color: #68a063; }
  .tech-card.angular { --hover-color: #dd0031; }
  .tech-card.mongodb { --hover-color: #47a248; }
  .tech-card.azure { --hover-color: #0078d4; }
  .tech-card.java { --hover-color: #f89820; }
  .tech-card.kubernetes { --hover-color: #326ce5; }

  .tech-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .tech-card:hover .tech-icon {
    transform: scale(1.1);
  }

  .tech-icon i {
    font-size: 40px;
    color: #ffffff;
  }

  /* Icon Background Gradients */
  .python .tech-icon {
    background: linear-gradient(135deg, #3776ab 0%, #ffd43b 100%);
  }

  .aws .tech-icon {
    background: linear-gradient(135deg, #ff9900 0%, #ec7211 100%);
  }

  .docker .tech-icon {
    background: linear-gradient(135deg, #2496ed 0%, #1d8dd9 100%);
  }

  .react .tech-icon {
    background: linear-gradient(135deg, #61dafb 0%, #21a1c4 100%);
  }

  .nodejs .tech-icon {
    background: linear-gradient(135deg, #68a063 0%, #539d4e 100%);
  }

  .angular .tech-icon {
    background: linear-gradient(135deg, #dd0031 0%, #c3002f 100%);
  }

  .mongodb .tech-icon {
    background: linear-gradient(135deg, #47a248 0%, #3f8f3d 100%);
  }

  .azure .tech-icon {
    background: linear-gradient(135deg, #0078d4 0%, #006cbe 100%);
  }

  .java .tech-icon {
    background: linear-gradient(135deg, #f89820 0%, #e88613 100%);
  }

  .kubernetes .tech-icon {
    background: linear-gradient(135deg, #326ce5 0%, #2860d4 100%);
  }

  .tech-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: #1a1a1a;
    margin-bottom: 6px;
  }

  .tech-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
  }

  /* Extended Ecosystem Section */
  .ecosystem-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .ecosystem-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 32px;
  }

  .ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .ecosystem-category {
    position: relative;
  }

  .category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }

  .category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .category-dot.blue { background: #3b82f6; }
  .category-dot.green { background: #10b981; }
  .category-dot.orange { background: #f59e0b; }

  .category-title {
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
  }

  .category-list {
    list-style: none;
    padding-left: 20px;
  }

  .category-list li {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 10px;
    line-height: 1.5;
    position: relative;
  }

  .category-list li::before {
    content: '•';
    position: absolute;
    left: -12px;
    color: #9ca3af;
  }

  /* Responsive */
  @media (max-width: 1200px) {
    .expertise-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .tech-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .ecosystem-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 900px) {
    .expertise-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .hero-swiper {
      height: auto;
      min-height: 70vh;
    }

    .hero-title {
      font-size: 2.5rem;
    }

    .hero-subtitle {
      font-size: 1.25rem;
    }

    .hero-description {
      font-size: 1rem;
    }

    .hero-buttons {
      flex-direction: column;
      align-items: center;
    }

    .btn-dark-blue,
    .btn-white {
      width: 100%;
      max-width: 300px;
    }

    .stats-container {
      gap: 30px;
    }

    .stat-number {
      font-size: 2rem;
    }

    .expertise-section {
      padding: 60px 15px;
    }

    .section-title {
      font-size: 2rem;
    }

    .expertise-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .tech-section {
      padding: 60px 15px;
    }

    .tech-title {
      font-size: 2rem;
    }

    .tech-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .tech-card {
      padding: 24px 16px;
    }

    .tech-icon {
      width: 70px;
      height: 70px;
    }

    .tech-icon i {
      font-size: 32px;
    }

    .ecosystem-section {
      padding: 30px 20px;
    }

    .ecosystem-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }

  @media (max-width: 576px) {
    .hero-swiper {
      min-height: 60vh;
    }

    .hero-title {
      font-size: 2rem;
    }

    .badge-pill {
      font-size: 12px;
      padding: 8px 16px;
    }

    .stats-container {
      flex-direction: column;
      gap: 20px;
    }

    .section-title {
      font-size: 1.75rem;
    }

    .tech-title {
      font-size: 1.75rem;
    }

    .tech-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
    /* Who Should Join Section */
    .who-should-join {
      padding: 70px 20px;
      background: #f9fafb;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Header */
    .section-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .section-badge {
      display: inline-block;
      padding: 5px 14px;
      background: transparent;
      border: 1px solid #d1d5db;
      border-radius: 50px;
      color: #6b7280;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .section-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      color: #0f172a;
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .section-description {
      font-size: 1rem;
      color: #64748b;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* Card - COMPACT */
    .learner-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 24px 22px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .learner-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    /* Card Header - COMPACT */
    .card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    /* Icon Colors */
    .card-blue .card-icon {
      background: #dbeafe;
      color: #2563eb;
    }

    .card-green .card-icon {
      background: #d1fae5;
      color: #059669;
    }

    .card-orange .card-icon {
      background: #fed7aa;
      color: #ea580c;
    }

    .card-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
      line-height: 1.3;
    }

    /* Card Description - COMPACT */
    .card-description {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.55;
      margin-bottom: 18px;
    }

    /* Features List - COMPACT */
    .features-list {
      list-style: none;
      padding: 0;
      margin-bottom: 18px;
      flex-grow: 1;
    }

    .features-list li {
      padding: 7px 0;
      font-size: 13px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .features-list li::before {
      content: '✓';
      color: #10b981;
      font-size: 14px;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Recommended Path - COMPACT */
    .recommended-path {
      padding-top: 16px;
      border-top: 1px solid #e5e7eb;
      margin-top: auto;
    }

    .path-label {
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 5px;
    }

    .card-blue .path-label {
      color: #2563eb;
    }

    .card-green .path-label {
      color: #059669;
    }

    .card-orange .path-label {
      color: #ea580c;
    }

    .path-text {
      font-size: 13px;
      color: #475569;
      line-height: 1.5;
    }

    .path-text a {
      color: inherit;
      text-decoration: none;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 768px) {
      .who-should-join {
        padding: 60px 18px;
      }

      .section-heading {
        font-size: 1.875rem;
      }

      .section-description {
        font-size: 0.95rem;
      }

      .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .learner-card {
        padding: 22px 20px;
      }
    }

    @media (max-width: 480px) {
      .section-heading {
        font-size: 1.625rem;
      }

      .card-header {
        gap: 12px;
      }

      .card-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }

      .card-title {
        font-size: 1rem;
      }

      .card-description {
        font-size: 13px;
      }

      .features-list li {
        font-size: 12.5px;
        padding: 6px 0;
      }

      .path-text {
        font-size: 12.5px;
      }
    }

    /* Tech Services Section - UNIQUE CLASSES */
    .tech-services-section {
      padding: 70px 20px;
      background: #f9fafb;
    }

    .tech-services-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Header */
    .tech-services-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .tech-services-badge {
      display: inline-block;
      padding: 5px 14px;
      background: transparent;
      color: #3b82f6;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .tech-services-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .tech-services-subtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Services Grid */
    .tech-services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* Service Item - COMPACT */
    .tech-service-item {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 24px 22px;
      transition: all 0.3s ease;
    }

    .tech-service-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    /* Item Header */
    .tech-service-top {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
    }

    .tech-service-icon {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    /* Icon Colors */
    .tech-icon-blue {
      background: #3b82f6;
      color: #ffffff;
    }

    .tech-icon-cyan {
      background: #06b6d4;
      color: #ffffff;
    }

    .tech-icon-purple {
      background: #8b5cf6;
      color: #ffffff;
    }

    .tech-icon-green {
      background: #10b981;
      color: #ffffff;
    }

    .tech-icon-red {
      background: #ef4444;
      color: #ffffff;
    }

    .tech-service-info {
      flex: 1;
    }

    .tech-service-name {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
      margin-bottom: 3px;
      line-height: 1.3;
    }

    .tech-service-tag {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    /* Item Description */
    .tech-service-desc {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.55;
      margin-bottom: 16px;
    }

    /* Points List */
    .tech-service-points {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tech-service-points li {
      padding: 7px 0;
      font-size: 13px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .tech-service-points li::before {
      content: '✓';
      color: #10b981;
      font-size: 14px;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .tech-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 768px) {
      .tech-services-section {
        padding: 60px 18px;
      }

      .tech-services-title {
        font-size: 1.875rem;
      }

      .tech-services-subtitle {
        font-size: 0.95rem;
      }

      .tech-services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .tech-service-item {
        padding: 22px 20px;
      }
    }

    @media (max-width: 480px) {
      .tech-services-title {
        font-size: 1.625rem;
      }

      .tech-service-top {
        gap: 12px;
      }

      .tech-service-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }

      .tech-service-name {
        font-size: 1rem;
      }

      .tech-service-desc {
        font-size: 13px;
      }

      .tech-service-points li {
        font-size: 12.5px;
        padding: 6px 0;
      }
    }

  /* Three Pillars Section - UNIQUE CLASSES */
    .three-pillars-section {
      padding: 70px 20px;
      background: #f3f4f6;
    }

    .three-pillars-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Header */
    .three-pillars-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .three-pillars-badge {
      display: inline-block;
      padding: 5px 14px;
      background: transparent;
      color: #3b82f6;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .three-pillars-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .three-pillars-subtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Pillars Grid - 4 COLUMNS */
    .three-pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 45px;
    }

    /* Pillar Card */
    .pillar-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 26px 22px;
      transition: all 0.3s ease;
    }

    .pillar-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    /* Pillar Icon */
    .pillar-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #ffffff;
      margin-bottom: 18px;
    }

    .pillar-icon-blue {
      background: #3b82f6;
    }

    .pillar-icon-green {
      background: #10b981;
    }

    .pillar-icon-purple {
      background: #8b5cf6;
    }

    .pillar-icon-orange {
      background: #f97316;
    }

    /* Pillar Content */
    .pillar-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      color: #0f172a;
      margin-bottom: 5px;
      line-height: 1.3;
    }

    .pillar-label {
      font-size: 12.5px;
      color: #64748b;
      font-weight: 500;
      margin-bottom: 14px;
    }

    .pillar-text {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.55;
      margin-bottom: 18px;
    }

    /* Learn More Link */
    .pillar-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .pillar-link-blue {
      color: #3b82f6;
    }

    .pillar-link-green {
      color: #10b981;
    }

    .pillar-link-purple {
      color: #8b5cf6;
    }

    .pillar-link-orange {
      color: #f97316;
    }

    .pillar-link:hover {
      gap: 8px;
    }

    .pillar-link i {
      font-size: 12px;
    }

    /* Why Integration Box */
    .why-integration-box {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 40px 35px;
    }

    .why-integration-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.75rem;
      color: #0f172a;
      text-align: center;
      margin-bottom: 35px;
    }

    /* Features Grid */
    .integration-features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }

    /* Feature Item */
    .integration-feature {
      display: flex;
      gap: 16px;
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature-icon-blue {
      background: #dbeafe;
      color: #3b82f6;
    }

    .feature-icon-green {
      background: #d1fae5;
      color: #10b981;
    }

    .feature-icon-orange {
      background: #fed7aa;
      color: #f97316;
    }

    .feature-icon-purple {
      background: #ede9fe;
      color: #8b5cf6;
    }

    .feature-content {
      flex: 1;
    }

    .feature-name {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .feature-description {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.55;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .three-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }

      .integration-features {
        gap: 25px;
      }
    }

    @media (max-width: 768px) {
      .three-pillars-section {
        padding: 60px 18px;
      }

      .three-pillars-title {
        font-size: 1.875rem;
      }

      .three-pillars-subtitle {
        font-size: 0.95rem;
      }

      .three-pillars-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .pillar-card {
        padding: 24px 20px;
      }

      .why-integration-box {
        padding: 32px 24px;
      }

      .why-integration-title {
        font-size: 1.5rem;
      }

      .integration-features {
        grid-template-columns: 1fr;
        gap: 22px;
      }
    }

    @media (max-width: 480px) {
      .three-pillars-title {
        font-size: 1.625rem;
      }

      .pillar-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
      }

      .pillar-heading {
        font-size: 1.05rem;
      }

      .why-integration-title {
        font-size: 1.375rem;
      }

      .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }
    }

      /* Program Journey Section - UNIQUE CLASSES */
    .program-journey-section {
      padding: 70px 20px;
      background: #ffffff;
    }

    .program-journey-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* MCA Section */
    .mca-journey-wrapper {
      margin-bottom: 80px;
    }

    /* B.Tech Section */
    .btech-journey-wrapper {
      margin-bottom: 0;
    }

    /* Journey Header */
    .journey-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .journey-badge {
      display: inline-block;
      padding: 5px 14px;
      background: transparent;
      color: #10b981;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .btech-journey-wrapper .journey-badge {
      color: #8b5cf6;
    }

    .journey-main-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .journey-main-subtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 900px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Two Column Layout */
    .journey-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }

    /* Info Cards */
    .journey-info-card {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 24px 22px;
    }

    .info-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .info-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .mca-journey-wrapper .info-card-icon {
      background: #d1fae5;
      color: #10b981;
    }

    .btech-journey-wrapper .info-card-icon {
      background: #ede9fe;
      color: #8b5cf6;
    }

    .info-card-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
    }

    .info-card-subtitle {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    .info-card-text {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.55;
      margin-bottom: 14px;
    }

    .info-card-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .info-card-list li {
      padding: 6px 0;
      font-size: 13px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5;
    }

    .info-card-list li::before {
      content: '✓';
      color: #10b981;
      font-size: 14px;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .btech-journey-wrapper .info-card-list li::before {
      color: #8b5cf6;
    }

    /* Semester Timeline - Tree Growth Design */
    .semester-timeline {
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 30px 25px;
      margin-bottom: 30px;
    }

    .timeline-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      color: #0f172a;
      margin-bottom: 25px;
      text-align: center;
    }

    .timeline-note {
      font-size: 12px;
      color: #64748b;
      text-align: center;
      margin-bottom: 25px;
      font-style: italic;
    }

    /* Timeline Items */
    .timeline-items {
      position: relative;
      padding-left: 40px;
    }

    /* Vertical Line - Tree Trunk */
    .timeline-items::before {
      content: '';
      position: absolute;
      left: 16px;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(to bottom, #d1d5db, #10b981);
    }

    .btech-journey-wrapper .timeline-items::before {
      background: linear-gradient(to bottom, #d1d5db, #8b5cf6);
    }

    .timeline-item {
      position: relative;
      margin-bottom: 24px;
      padding-left: 20px;
    }

    .timeline-item:last-child {
      margin-bottom: 0;
    }

    /* Timeline Dot - Growing Circle */
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -27px;
      top: 6px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #10b981;
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 3px #d1fae5;
      z-index: 1;
    }

    .btech-journey-wrapper .timeline-item::before {
      background: #8b5cf6;
      box-shadow: 0 0 0 3px #ede9fe;
    }

    /* Last item - Bigger dot (fully grown) */
    .timeline-item:last-child::before {
      width: 18px;
      height: 18px;
      left: -29px;
      top: 4px;
    }

    .timeline-semester {
      font-weight: 700;
      font-size: 14px;
      color: #10b981;
      margin-bottom: 4px;
    }

    .btech-journey-wrapper .timeline-semester {
      color: #8b5cf6;
    }

    .timeline-focus {
      font-weight: 600;
      font-size: 13.5px;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .timeline-subjects {
      font-size: 12.5px;
      color: #64748b;
      margin-bottom: 4px;
      line-height: 1.4;
    }

    .timeline-outcome {
      font-size: 12.5px;
      color: #475569;
      font-style: italic;
    }

    /* Career Outcomes Table */
    .career-outcomes-table {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      overflow: hidden;
    }

    .outcomes-table-header {
      background: #10b981;
      color: #ffffff;
      padding: 18px 20px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      text-align: center;
    }

    .btech-journey-wrapper .outcomes-table-header {
      background: #8b5cf6;
    }

    .outcomes-table-body {
      padding: 24px 22px;
    }

    .outcome-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .outcome-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .outcome-icon {
      font-size: 16px;
      color: #10b981;
      margin-top: 2px;
    }

    .btech-journey-wrapper .outcome-icon {
      color: #8b5cf6;
    }

    .outcome-text {
      font-size: 13.5px;
      color: #475569;
      line-height: 1.55;
      flex: 1;
    }

    /* Why Better Section */
    .why-better-box {
      background: #1e293b;
      color: #ffffff;
      border-radius: 14px;
      padding: 30px 28px;
    }

    .why-better-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    .why-better-points {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .why-better-points li {
      padding: 10px 0;
      font-size: 13.5px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      line-height: 1.55;
    }

    .why-better-points li::before {
      content: '✓';
      color: #10b981;
      font-size: 16px;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .btech-journey-wrapper .why-better-points li::before {
      color: #8b5cf6;
    }

    .why-better-result {
      background: rgba(255, 255, 255, 0.1);
      border-left: 3px solid #10b981;
      padding: 16px 18px;
      margin-top: 20px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.6;
    }

    .btech-journey-wrapper .why-better-result {
      border-left-color: #8b5cf6;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .journey-content {
        gap: 20px;
      }
    }

    @media (max-width: 768px) {
      .program-journey-section {
        padding: 60px 18px;
      }

      .mca-journey-wrapper {
        margin-bottom: 60px;
      }

      .journey-main-title {
        font-size: 1.875rem;
      }

      .journey-main-subtitle {
        font-size: 0.95rem;
      }

      .journey-content {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .semester-timeline {
        padding: 24px 20px;
      }

      .timeline-items {
        padding-left: 35px;
      }

      .timeline-items::before {
        left: 14px;
      }

      .timeline-item::before {
        left: -24px;
      }

      .timeline-item:last-child::before {
        left: -26px;
      }
    }

    @media (max-width: 480px) {
      .journey-main-title {
        font-size: 1.625rem;
      }

      .info-card-header {
        gap: 10px;
      }

      .info-card-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }

      .timeline-title {
        font-size: 1.125rem;
      }
    }

        /* Skill Tracks Section - UNIQUE CLASSES */
    .skill-tracks-section {
      padding: 70px 20px;
      background: #ffffff;
    }

    .skill-tracks-container {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* Header */
    .skill-tracks-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .skill-tracks-badge {
      display: inline-block;
      padding: 5px 14px;
      background: transparent;
      color: #3b82f6;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .skill-tracks-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .skill-tracks-subtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 900px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Tracks Grid - 4 COLUMNS */
    .skill-tracks-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 30px;
    }

    /* Track Card */
    .skill-track-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 26px 22px;
      transition: all 0.3s ease;
      color: #ffffff;
    }

    .skill-track-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      border-color: #475569;
    }

    /* Track Icon */
    .track-icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 16px;
    }

    .track-icon-blue {
      background: #3b82f6;
      color: #ffffff;
    }

    .track-icon-purple {
      background: #8b5cf6;
      color: #ffffff;
    }

    .track-icon-cyan {
      background: #06b6d4;
      color: #ffffff;
    }

    .track-icon-pink {
      background: #ec4899;
      color: #ffffff;
    }

    .track-icon-red {
      background: #ef4444;
      color: #ffffff;
    }

    .track-icon-yellow {
      background: #f59e0b;
      color: #ffffff;
    }

    .track-icon-green {
      background: #10b981;
      color: #ffffff;
    }

    .track-icon-orange {
      background: #f97316;
      color: #ffffff;
    }

    /* Track Header */
    .track-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #ffffff;
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .track-subtitle {
      font-size: 11.5px;
      color: #94a3b8;
      font-weight: 500;
      margin-bottom: 16px;
    }

    /* Sections */
    .track-section {
      margin-bottom: 14px;
    }

    .track-section:last-child {
      margin-bottom: 0;
    }

    .track-section-title {
      font-weight: 600;
      font-size: 12px;
      color: #cbd5e1;
      margin-bottom: 8px;
    }

    .track-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .track-list li {
      padding: 4px 0;
      font-size: 12px;
      color: #cbd5e1;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }

    .track-list li::before {
      content: '•';
      color: #64748b;
      font-size: 14px;
      flex-shrink: 0;
    }

    .track-roles {
      padding-top: 12px;
      border-top: 1px solid #334155;
      margin-top: 12px;
    }

    .track-roles-title {
      font-weight: 600;
      font-size: 11.5px;
      color: #10b981;
      margin-bottom: 6px;
    }

    .track-roles-text {
      font-size: 11.5px;
      color: #94a3b8;
      line-height: 1.5;
    }

    /* Bottom Button */
    .skill-tracks-footer {
      text-align: center;
      margin-top: 35px;
    }

    .internship-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      background: #1e293b;
      color: #ffffff;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      border: 1px solid #334155;
    }

    .internship-link:hover {
      background: #334155;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .internship-link i {
      font-size: 16px;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .skill-tracks-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 900px) {
      .skill-tracks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 768px) {
      .skill-tracks-section {
        padding: 60px 18px;
      }

      .skill-tracks-title {
        font-size: 1.875rem;
      }

      .skill-tracks-subtitle {
        font-size: 0.95rem;
      }

      .skill-tracks-grid {
        gap: 16px;
      }

      .skill-track-card {
        padding: 24px 20px;
      }
    }

    @media (max-width: 600px) {
      .skill-tracks-grid {
        grid-template-columns: 1fr;
      }

      .skill-tracks-title {
        font-size: 1.625rem;
      }

      .track-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }

      .track-heading {
        font-size: 1rem;
      }
    }

   /* Internship Placement Section - UNIQUE CLASSES - COMPACT */
    .internship-placement-section {
      padding: 60px 20px;
      background: #f9fafb;
    }

    .internship-placement-container {
      max-width: 1150px;
      margin: 0 auto;
    }

    /* Header */
    .internship-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .internship-badge {
      display: inline-block;
      padding: 4px 12px;
      background: transparent;
      color: #0f172a;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .internship-main-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
      max-width: 850px;
      margin-left: auto;
      margin-right: auto;
    }

    .internship-main-subtitle {
      font-size: 0.95rem;
      color: #64748b;
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.55;
    }

    /* Phases Grid */
    .internship-phases-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 35px;
    }

    /* Phase Card - COMPACT */
    .internship-phase-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px 18px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .internship-phase-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    /* Phase Header - NUMBER AND TITLE SIDE BY SIDE */
    .phase-header-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    /* Phase Number Circle - INLINE WITH TITLE */
    .phase-number-circle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #ffffff;
      flex-shrink: 0;
    }

    .phase-circle-blue {
      background: #3b82f6;
    }

    .phase-circle-green {
      background: #10b981;
    }

    .phase-circle-purple {
      background: #8b5cf6;
    }

    .phase-circle-orange {
      background: #f97316;
    }

    /* Phase Header Text */
    .phase-header-text {
      flex: 1;
    }

    .phase-card-heading {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      color: #0f172a;
      margin-bottom: 2px;
      line-height: 1.3;
    }

    .phase-card-duration {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }

    /* Phase Content List - COMPACT */
    .phase-content-list {
      list-style: none;
      padding: 0;
      margin-bottom: 12px;
      flex-grow: 1;
    }

    .phase-content-list li {
      padding: 4px 0;
      font-size: 12px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.45;
    }

    .phase-content-list li::before {
      content: '•';
      color: #94a3b8;
      font-size: 13px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Phase Outcome Box - COMPACT */
    .phase-outcome-box {
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 11.5px;
      line-height: 1.4;
      margin-top: auto;
    }

    .outcome-box-blue {
      background: #eff6ff;
      color: #1e40af;
      border-left: 3px solid #3b82f6;
    }

    .outcome-box-green {
      background: #f0fdf4;
      color: #166534;
      border-left: 3px solid #10b981;
    }

    .outcome-box-purple {
      background: #f5f3ff;
      color: #6b21a8;
      border-left: 3px solid #8b5cf6;
    }

    .outcome-box-orange {
      background: #fff7ed;
      color: #9a3412;
      border-left: 3px solid #f97316;
    }

    .phase-outcome-label {
      font-weight: 600;
      margin-bottom: 3px;
      font-size: 11.5px;
    }

    /* Stats Grid - COMPACT */
    .internship-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    /* Stat Card - COMPACT */
    .internship-stat-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 26px 22px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .internship-stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    .stat-number {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2.5rem;
      margin-bottom: 6px;
      line-height: 1;
    }

    .stat-number-black {
      color: #0f172a;
    }

    .stat-number-green {
      color: #10b981;
    }

    .stat-number-purple {
      color: #8b5cf6;
    }

    .stat-description {
      font-size: 13px;
      color: #64748b;
      line-height: 1.45;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .internship-phases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .internship-stats-grid {
        gap: 14px;
      }
    }

    @media (max-width: 768px) {
      .internship-placement-section {
        padding: 50px 18px;
      }

      .internship-main-title {
        font-size: 1.75rem;
      }

      .internship-main-subtitle {
        font-size: 0.9rem;
      }

      .internship-phases-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .internship-phase-card {
        padding: 20px 18px;
      }

      .internship-stats-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .internship-stat-card {
        padding: 24px 20px;
      }

      .stat-number {
        font-size: 2.25rem;
      }
    }

    @media (max-width: 480px) {
      .internship-main-title {
        font-size: 1.5rem;
      }

      .phase-header-row {
        gap: 10px;
      }

      .phase-number-circle {
        width: 36px;
        height: 36px;
        font-size: 15px;
      }

      .phase-card-heading {
        font-size: 0.9rem;
      }

      .phase-content-list li {
        font-size: 11.5px;
      }

      .phase-outcome-box {
        font-size: 11px;
      }

      .stat-number {
        font-size: 2rem;
      }

      .stat-description {
        font-size: 12.5px;
      }
    }

     /* ==========================================
   REAL PRODUCTS SECTION - COMPACT
   FULLY RESPONSIVE ALL DEVICES
   ========================================== */

.real-products-section {
  padding: 60px 20px;
  background: #ffffff;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  overflow-x: hidden;
}

.real-products-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header - Compact */
.real-products-header {
  text-align: center;
  margin-bottom: 35px;
  padding: 0 15px;
}

.real-products-badge {
  display: inline-block;
  padding: 4px 12px;
  background: transparent;
  color: #0f172a;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.real-products-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.2;
}

.real-products-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Products Grid - 3 Columns */
.real-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 35px;
  width: 100%;
}

/* Product Box - Compact */
.real-product-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px 18px;
  transition: all 0.3s ease;
  width: 100%;
}

.real-product-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

/* Product Icon - Compact */
.product-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.icon-blue { background: #dbeafe; color: #3b82f6; }
.icon-cyan { background: #cffafe; color: #06b6d4; }
.icon-purple { background: #ede9fe; color: #8b5cf6; }
.icon-orange { background: #fed7aa; color: #f97316; }
.icon-teal { background: #ccfbf1; color: #14b8a6; }
.icon-pink { background: #fce7f3; color: #ec4899; }

/* Product Header - Compact */
.product-box-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.975rem;
  color: #0f172a;
  margin-bottom: 3px;
  line-height: 1.3;
}

.product-box-tag {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 12px;
}

.product-box-desc {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Product List - Compact */
.product-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-features-list li {
  padding: 4px 0;
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.product-features-list li::before {
  content: '•';
  color: #94a3b8;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Why Matters Box - Horizontal Layout */
.why-matters-box {
  background: #1e293b;
  border-radius: 16px;
  padding: 32px 36px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 40px;
}

.why-matters-left {
  flex: 1;
  min-width: 0;
}

.why-matters-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.3;
}

.why-matters-subtitle {
  font-size: 14px;
  color: #cbd5e1;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Why Points List - With Check Icons */
.why-points-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-points-list li {
  padding: 7px 0;
  font-size: 14px;
  color: #e2e8f0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}

.why-points-list li::before {
  content: '✓';
  color: #10b981;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stats Row - Right Side */
.why-stats-row {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.why-stat-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  min-width: 160px;
}

.stat-item-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 6px;
  line-height: 1;
}

.stat-number-white { color: #ffffff; }
.stat-number-green { color: #10b981; }
.stat-number-yellow { color: #fbbf24; }

.stat-item-text {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.4;
}

/* ==========================================
   RESPONSIVE - ALL DEVICES
   ========================================== */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .real-products-section {
    padding: 70px 25px;
  }
  
  .real-products-container {
    max-width: 1200px;
  }
  
  .real-products-grid {
    gap: 22px;
  }
  
  .real-product-box {
    padding: 24px 20px;
  }
  
  .product-box-title {
    font-size: 1.05rem;
  }
}

/* Desktop (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .real-products-grid {
    gap: 20px;
  }
}

/* Laptop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .real-products-section {
    padding: 55px 20px;
  }
  
  .real-products-container {
    max-width: 1000px;
  }
  
  .real-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .real-product-box {
    padding: 20px 16px;
  }
  
  .product-icon-box {
    width: 42px;
    height: 42px;
    font-size: 19px;
  }
  
  .product-box-title {
    font-size: 0.95rem;
  }
  
  .real-products-title {
    font-size: 1.9rem;
  }
  
  .why-matters-box {
    padding: 30px 32px;
    gap: 35px;
  }
  
  .why-matters-title {
    font-size: 1.4rem;
  }
  
  .why-stat-item {
    min-width: 140px;
    padding: 22px 28px;
  }
  
  .stat-item-number {
    font-size: 2.1rem;
  }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .real-products-section {
    padding: 50px 18px;
  }
  
  .real-products-container {
    padding: 0 18px;
  }
  
  .real-products-header {
    margin-bottom: 32px;
  }
  
  .real-products-title {
    font-size: 1.85rem;
  }
  
  .real-products-subtitle {
    font-size: 0.9rem;
  }
  
  .real-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 32px;
  }
  
  .real-product-box {
    padding: 18px 15px;
  }
  
  .product-icon-box {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .product-box-title {
    font-size: 0.9rem;
  }
  
  .product-box-tag {
    font-size: 10px;
  }
  
  .product-box-desc {
    font-size: 12px;
  }
  
  .product-features-list li {
    font-size: 11.5px;
  }
  
  .why-matters-box {
    padding: 28px 28px;
    gap: 28px;
  }
  
  .why-matters-title {
    font-size: 1.35rem;
  }
  
  .why-matters-subtitle {
    font-size: 13px;
  }
  
  .why-points-list li {
    font-size: 13px;
  }
  
  .stat-item-number {
    font-size: 2rem;
  }
}

/* Tablet Portrait & Large Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .real-products-section {
    padding: 45px 16px;
  }
  
  .real-products-container {
    padding: 0 16px;
  }
  
  .real-products-header {
    margin-bottom: 30px;
  }
  
  .real-products-badge {
    font-size: 8px;
    padding: 3px 10px;
  }
  
  .real-products-title {
    font-size: 1.75rem;
  }
  
  .real-products-subtitle {
    font-size: 0.875rem;
  }
  
  .real-products-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 30px;
  }
  
  .real-product-box {
    padding: 16px 14px;
  }
  
  .product-icon-box {
    width: 38px;
    height: 38px;
    font-size: 17px;
    margin-bottom: 10px;
  }
  
  .product-box-title {
    font-size: 0.875rem;
  }
  
  .product-box-tag {
    font-size: 10px;
    margin-bottom: 10px;
  }
  
  .product-box-desc {
    font-size: 11.5px;
    margin-bottom: 10px;
  }
  
  .product-features-list li {
    font-size: 11px;
    padding: 3px 0;
  }
  
  .why-matters-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    gap: 24px;
  }
  
  .why-matters-left {
    width: 100%;
  }
  
  .why-matters-title {
    font-size: 1.3rem;
  }
  
  .why-matters-subtitle {
    font-size: 12.5px;
    margin-bottom: 16px;
  }
  
  .why-points-list li {
    font-size: 12.5px;
    padding: 6px 0;
  }
  
  .why-stats-row {
    width: 100%;
    justify-content: space-between;
  }
  
  .why-stat-item {
    flex: 1;
    min-width: auto;
    padding: 20px 16px;
  }
  
  .stat-item-number {
    font-size: 1.9rem;
  }
  
  .stat-item-text {
    font-size: 12px;
  }
}

/* Large Mobile (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .real-products-section {
    padding: 42px 14px;
  }
  
  .real-products-container {
    padding: 0 14px;
  }
  
  .real-products-header {
    margin-bottom: 28px;
    padding: 0 10px;
  }
  
  .real-products-badge {
    font-size: 8px;
    padding: 3px 10px;
  }
  
  .real-products-title {
    font-size: 1.65rem;
  }
  
  .real-products-subtitle {
    font-size: 0.85rem;
  }
  
  .real-products-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  
  .real-product-box {
    padding: 16px 13px;
    border-radius: 10px;
  }
  
  .product-icon-box {
    width: 38px;
    height: 38px;
    font-size: 17px;
    margin-bottom: 10px;
    border-radius: 9px;
  }
  
  .product-box-title {
    font-size: 0.85rem;
    margin-bottom: 2px;
  }
  
  .product-box-tag {
    font-size: 9.5px;
    margin-bottom: 8px;
  }
  
  .product-box-desc {
    font-size: 11px;
    margin-bottom: 10px;
  }
  
  .product-features-list li {
    font-size: 10.5px;
    padding: 3px 0;
    gap: 6px;
  }
  
  .product-features-list li::before {
    font-size: 12px;
  }
  
  .why-matters-box {
    flex-direction: column;
    padding: 24px 20px;
    gap: 22px;
    border-radius: 14px;
  }
  
  .why-matters-title {
    font-size: 1.2rem;
  }
  
  .why-matters-subtitle {
    font-size: 12px;
    margin-bottom: 14px;
  }
  
  .why-points-list li {
    font-size: 12px;
    padding: 5px 0;
    gap: 10px;
  }
  
  .why-points-list li::before {
    font-size: 14px;
  }
  
  .why-stats-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .why-stat-item {
    width: 100%;
    padding: 18px 16px;
  }
  
  .stat-item-number {
    font-size: 1.75rem;
  }
  
  .stat-item-text {
    font-size: 11.5px;
  }
}

/* Standard Mobile (375px - 479px) */
@media (min-width: 375px) and (max-width: 479px) {
  .real-products-section {
    padding: 40px 12px;
  }
  
  .real-products-container {
    padding: 0 12px;
  }
  
  .real-products-header {
    margin-bottom: 26px;
    padding: 0 8px;
  }
  
  .real-products-badge {
    font-size: 7px;
    padding: 3px 8px;
  }
  
  .real-products-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }
  
  .real-products-subtitle {
    font-size: 0.8rem;
  }
  
  .real-products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 26px;
  }
  
  .real-product-box {
    padding: 14px 12px;
    border-radius: 10px;
  }
  
  .product-icon-box {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-bottom: 10px;
    border-radius: 8px;
  }
  
  .product-box-title {
    font-size: 0.825rem;
    margin-bottom: 2px;
  }
  
  .product-box-tag {
    font-size: 9px;
    margin-bottom: 8px;
  }
  
  .product-box-desc {
    font-size: 10.5px;
    margin-bottom: 8px;
  }
  
  .product-features-list li {
    font-size: 10px;
    padding: 3px 0;
    gap: 6px;
  }
  
  .product-features-list li::before {
    font-size: 11px;
  }
  
  .why-matters-box {
    flex-direction: column;
    padding: 22px 18px;
    gap: 20px;
    border-radius: 12px;
  }
  
  .why-matters-title {
    font-size: 1.125rem;
    margin-bottom: 12px;
  }
  
  .why-matters-subtitle {
    font-size: 11.5px;
    margin-bottom: 14px;
  }
  
  .why-points-list li {
    font-size: 11.5px;
    padding: 5px 0;
    gap: 10px;
  }
  
  .why-points-list li::before {
    font-size: 14px;
  }
  
  .why-stats-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .why-stat-item {
    padding: 16px 14px;
    border-radius: 10px;
  }
  
  .stat-item-number {
    font-size: 1.6rem;
  }
  
  .stat-item-text {
    font-size: 11px;
  }
}

/* Small Mobile (320px - 374px) */
@media (max-width: 374px) {
  .real-products-section {
    padding: 35px 10px;
  }
  
  .real-products-container {
    padding: 0 10px;
  }
  
  .real-products-header {
    margin-bottom: 24px;
    padding: 0 5px;
  }
  
  .real-products-badge {
    font-size: 7px;
    padding: 2px 7px;
  }
  
  .real-products-title {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }
  
  .real-products-subtitle {
    font-size: 0.75rem;
  }
  
  .real-products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  
  .real-product-box {
    padding: 13px 11px;
    border-radius: 9px;
  }
  
  .product-icon-box {
    width: 34px;
    height: 34px;
    font-size: 15px;
    margin-bottom: 8px;
    border-radius: 7px;
  }
  
  .product-box-title {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }
  
  .product-box-tag {
    font-size: 8.5px;
    margin-bottom: 7px;
  }
  
  .product-box-desc {
    font-size: 10px;
    margin-bottom: 8px;
  }
  
  .product-features-list li {
    font-size: 9.5px;
    padding: 2px 0;
    gap: 5px;
  }
  
  .product-features-list li::before {
    font-size: 10px;
  }
  
  .why-matters-box {
    flex-direction: column;
    padding: 20px 14px;
    gap: 18px;
    border-radius: 10px;
  }
  
  .why-matters-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }
  
  .why-matters-subtitle {
    font-size: 10.5px;
    margin-bottom: 12px;
  }
  
  .why-points-list li {
    font-size: 10.5px;
    padding: 4px 0;
    gap: 8px;
  }
  
  .why-points-list li::before {
    font-size: 13px;
  }
  
  .why-stats-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .why-stat-item {
    padding: 14px 12px;
    border-radius: 9px;
  }
  
  .stat-item-number {
    font-size: 1.5rem;
  }
  
  .stat-item-text {
    font-size: 10px;
  }
}

/* 4K & Ultra Wide (1920px+) */
@media (min-width: 1920px) {
  .real-products-section {
    padding: 80px 30px;
  }
  
  .real-products-container {
    max-width: 1400px;
  }
  
  .real-products-title {
    font-size: 2.5rem;
  }
  
  .real-products-subtitle {
    font-size: 1.1rem;
  }
  
  .real-products-grid {
    gap: 26px;
  }
  
  .real-product-box {
    padding: 26px 22px;
  }
  
  .product-icon-box {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
  
  .product-box-title {
    font-size: 1.15rem;
  }
  
  .product-box-desc {
    font-size: 14px;
  }
  
  .why-matters-box {
    padding: 40px 45px;
  }
  
  .why-matters-title {
    font-size: 1.75rem;
  }
  
  .why-matters-subtitle {
    font-size: 16px;
  }
  
  .why-points-list li {
    font-size: 15px;
  }
  
  .stat-item-number {
    font-size: 2.75rem;
  }
  
  .stat-item-text {
    font-size: 14px;
  }
}


      /* NGO Impact Section - UNIQUE CLASSES - COMPACT */
    .ngo-impact-section {
      padding: 60px 20px;
      background: #fff8ef;
    }

    .ngo-impact-container {
      max-width: 1100px;
      margin: 0 auto;
    }

    /* Header - COMPACT */
    .ngo-impact-header {
      text-align: center;
      margin-bottom: 35px;
    }

    .ngo-impact-badge {
      display: inline-block;
      padding: 4px 12px;
      background: transparent;
      color: #ea580c;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .ngo-impact-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 2rem;
      color: #0f172a;
      margin-bottom: 10px;
      line-height: 1.2;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .ngo-impact-subtitle {
      font-size: 0.95rem;
      color: #64748b;
      max-width: 750px;
      margin: 0 auto;
      line-height: 1.55;
    }

    /* Two Column Layout */
    .ngo-content-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
    }

    /* Mission Box */
    .ngo-mission-box {
      background: #ffffff;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      padding: 24px 20px;
    }

    .ngo-mission-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .ngo-mission-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #fed7aa;
      color: #ea580c;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .ngo-mission-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
    }

    .ngo-mission-text {
      font-size: 13px;
      color: #475569;
      line-height: 1.55;
      margin-bottom: 10px;
    }

    /* Impact Stats Box */
    .ngo-impact-stats-box {
      background: #ffffff;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      padding: 24px 20px;
    }

    .ngo-stats-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .ngo-stats-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #fed7aa;
      color: #ea580c;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .ngo-stats-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
    }

    /* Stats Grid - COMPACT 2x2 */
    .ngo-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .ngo-stat-item {
      background: #fef3f2;
      border: 1px solid #fed7aa;
      border-radius: 10px;
      padding: 16px 14px;
      text-align: center;
    }

    .ngo-stat-number {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.75rem;
      color: #ea580c;
      margin-bottom: 4px;
      line-height: 1;
    }

    .ngo-stat-label {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.3;
    }

    /* Scholarship Programs - COMPACT */
    .ngo-programs-section {
      margin-bottom: 30px;
    }

    .ngo-programs-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .ngo-programs-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #fed7aa;
      color: #ea580c;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .ngo-programs-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      color: #0f172a;
    }

    .ngo-programs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .ngo-program-card {
      background: #ffffff;
      border: 1px solid #fed7aa;
      border-radius: 10px;
      padding: 18px 16px;
      transition: all 0.3s ease;
    }

    .ngo-program-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(234, 88, 12, 0.15);
      border-color: #ea580c;
    }

    .ngo-program-name {
      font-weight: 700;
      font-size: 0.9rem;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .ngo-program-desc {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
    }

    /* Mentorship Section */
    .ngo-mentorship-section {
      margin-bottom: 30px;
    }

    .ngo-mentorship-box {
      background: #ffffff;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      padding: 24px 20px;
    }

    .ngo-mentorship-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .ngo-mentorship-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #fed7aa;
      color: #ea580c;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .ngo-mentorship-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
    }

    .ngo-mentorship-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .ngo-mentorship-list li {
      font-size: 12.5px;
      color: #475569;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.5;
    }

    .ngo-mentorship-list li::before {
      content: '◆';
      color: #ea580c;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Selection Process */
    .ngo-selection-box {
      background: #ffffff;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      padding: 24px 20px;
    }

    .ngo-selection-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #0f172a;
      margin-bottom: 16px;
    }

    .ngo-selection-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .ngo-selection-step {
      position: relative;
    }

    .ngo-step-number {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ea580c;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 10px;
    }

    .ngo-step-name {
      font-weight: 700;
      font-size: 0.9rem;
      color: #0f172a;
      margin-bottom: 5px;
    }

    .ngo-step-desc {
      font-size: 11.5px;
      color: #64748b;
      line-height: 1.4;
    }

    /* Apply Button */
    .ngo-apply-button {
      text-align: center;
      margin-top: 30px;
    }

    .ngo-apply-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      background: #ea580c;
      color: #ffffff;
      text-decoration: none;
      border-radius: 10px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
    }

    .ngo-apply-btn:hover {
      background: #dc2626;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(234, 88, 12, 0.3);
    }

    .ngo-apply-btn i {
      font-size: 16px;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .ngo-programs-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ngo-selection-steps {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .ngo-impact-section {
        padding: 50px 18px;
      }

      .ngo-impact-title {
        font-size: 1.75rem;
      }

      .ngo-impact-subtitle {
        font-size: 0.9rem;
      }

      .ngo-content-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .ngo-programs-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .ngo-mentorship-list {
        grid-template-columns: 1fr;
      }

      .ngo-stats-grid {
        gap: 10px;
      }
    }

    @media (max-width: 480px) {
      .ngo-impact-title {
        font-size: 1.5rem;
      }

      .ngo-mission-box,
      .ngo-impact-stats-box,
      .ngo-mentorship-box,
      .ngo-selection-box {
        padding: 20px 16px;
      }

      .ngo-stat-number {
        font-size: 1.5rem;
      }
    }
    
    /* Scholarship Types Section - UNIQUE CLASSES - COMPACT */
.scholarship-types-section {
  padding: 60px 20px;
  background: #ffffff;
}

.scholarship-types-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Scholarship Grid */
.scholarship-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

/* Scholarship Card */
.scholarship-card {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
}

.scholarship-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.2);
  border-color: #ea580c;
}

.scholarship-card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}

.scholarship-card-badge {
  font-size: 11px;
  color: #ea580c;
  margin-bottom: 8px;
  display: block;
  font-weight: 600;
}

.scholarship-card-description {
  font-size: 11px;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 8px;
}

.scholarship-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scholarship-card-features li {
  font-size: 11px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 4px;
  padding-left: 0;
}

.scholarship-card-features li:last-child {
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .scholarship-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .scholarship-types-section {
    padding: 50px 18px;
  }

  .scholarship-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .scholarship-card {
    padding: 18px 16px;
  }
}

@media (max-width: 480px) {
  .scholarship-card {
    padding: 16px 14px;
  }

  .scholarship-card-title {
    font-size: 0.8rem;
  }
}