/* ======================= ELECTIVES TYPOGRAPHY SYSTEM ======================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --cloud-accent: #FFD700;
  --cloud-glass: rgba(255,255,255,0.12);
  --cloud-dark: #022b6d;
  --primary-sky-blue: #0077BE;
  --secondary-yellow: #FFD700;
  
  /* ===== UNIFIED TYPOGRAPHY SYSTEM - DESKTOP ===== */
  --body-text: 16px;
  --h1-size: 36px;
  --h2-size: 28px;
  --h3-size: 22px;
  --h4-size: 18px;
  --h5-size: 18px;
  --h6-size: 18px;
  --subheading-size: 18px;
  --nav-link-size: 16px;
  --small-text-size: 14px;
  --line-height: 1.5;
}

@media (max-width: 768px) {
  :root {
    /* ===== UNIFIED TYPOGRAPHY SYSTEM - MOBILE ===== */
    --body-text: 14px;
    --h1-size: 28px;
    --h2-size: 22px;
    --h3-size: 18px;
    --h4-size: 16px;
    --h5-size: 16px;
    --h6-size: 16px;
    --subheading-size: 16px;
    --nav-link-size: 14px;
    --small-text-size: 12px;
    --line-height: 1.4;
  }
}

/* ===== ELECTIVES TYPOGRAPHY OVERRIDES ===== */
body { 
    font-family: 'Poppins', sans-serif; 
    font-size: var(--body-text);
    line-height: var(--line-height);
}

/* ===== ABSOLUTE UNIVERSAL HEADING ENFORCEMENT FOR ELECTIVES - CATCH ALL VARIATIONS ===== */

/* ALL H1 ELEMENTS - NO EXCEPTIONS */
h1, h1[class], h1[id], 
h1.title, h1.story-title, h1.section-title, h1.main-title,
h1.hero-title, h1.page-title, h1.heading, h1.header,
h1.dsufaq-title, h1.certtitle, h1.text-black,
h1.cloudhero_title, h1.main-title .headline,
.h1, *[class*="h1"] { 
    font-size: var(--h1-size) !important; 
    font-weight: 800 !important; 
    line-height: 1.2 !important; 
}

/* ALL H2 ELEMENTS - NO EXCEPTIONS */
h2, h2[class], h2[id],
h2.title, h2.story-title, h2.section-title, h2.main-title,
h2.hero-title, h2.page-title, h2.heading, h2.header,
h2.dsufaq-title, h2.certtitle, h2.text-black,
h2.jp-section-title, h2.about-cloud,
.h2, *[class*="h2"] { 
    font-size: var(--h2-size) !important; 
    font-weight: 700 !important; 
    line-height: 1.3 !important; 
}

/* ALL H3 ELEMENTS - NO EXCEPTIONS */
h3, h3[class], h3[id],
h3.title, h3.story-title, h3.section-title, h3.main-title,
h3.hero-title, h3.page-title, h3.heading, h3.header,
h3.dsufaq-title, h3.certtitle, h3.text-black,
h3.card-title, h3.jp-item-title,
.h3, *[class*="h3"] { 
    font-size: var(--h3-size) !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
}

/* ALL H4 ELEMENTS - NO EXCEPTIONS */
h4, h4[class], h4[id],
h4.title, h4.story-title, h4.section-title, h4.main-title,
h4.hero-title, h4.page-title, h4.heading, h4.header,
h4.dsufaq-title, h4.certtitle, h4.text-black,
.h4, *[class*="h4"] { 
    font-size: var(--h4-size) !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
}

/* ALL H5 ELEMENTS - NO EXCEPTIONS */
h5, h5[class], h5[id],
h5.title, h5.story-title, h5.section-title, h5.main-title,
h5.hero-title, h5.page-title, h5.heading, h5.header,
h5.dsufaq-title, h5.certtitle, h5.text-black,
.h5, *[class*="h5"] { 
    font-size: var(--h5-size) !important; 
    font-weight: 500 !important; 
    line-height: 1.5 !important; 
}

/* ALL H6 ELEMENTS - NO EXCEPTIONS */
h6, h6[class], h6[id],
h6.title, h6.story-title, h6.section-title, h6.main-title,
h6.hero-title, h6.page-title, h6.heading, h6.header,
h6.dsufaq-title, h6.certtitle, h6.text-black,
.h6, *[class*="h6"] { 
    font-size: var(--h6-size) !important; 
    font-weight: 500 !important; 
    line-height: 1.5 !important; 
}

/* ===== CONSISTENT HEADING SIZES FOR ELECTIVES - UNIVERSAL ENFORCEMENT ===== */
h1, .h1, .cloudhero_title, .main-title .headline,
h1.dsufaq-title, h1.certtitle, h1.text-black { 
    font-size: var(--h1-size) !important; 
    font-weight: 800 !important; 
    line-height: 1.2 !important; 
}

h2, .h2, .jp-section-title, .about-cloud h2,
h2.dsufaq-title, h2.certtitle, h2.text-black { 
    font-size: var(--h2-size) !important; 
    font-weight: 700 !important; 
    line-height: 1.3 !important; 
}

h3, .h3, .card-title, .jp-item-title,
h3.dsufaq-title, h3.certtitle, h3.text-black { 
    font-size: var(--h3-size) !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
}

h4, .h4,
h4.dsufaq-title, h4.certtitle, h4.text-black { 
    font-size: var(--h4-size) !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
}

h5, .h5,
h5.dsufaq-title, h5.certtitle, h5.text-black { 
    font-size: var(--h5-size) !important; 
    font-weight: 500 !important; 
    line-height: 1.5 !important; 
}

h6, .h6,
h6.dsufaq-title, h6.certtitle, h6.text-black { 
    font-size: var(--h6-size) !important; 
    font-weight: 500 !important; 
    line-height: 1.5 !important; 
}

/* ===== CONSISTENT PARAGRAPH AND TEXT SIZES FOR ELECTIVES - UNIVERSAL ENFORCEMENT ===== */
p, .text-black, .jp-item-para, .about-cloud p,
.cloudhero_tagline, .slide-text, .glass-card .text-black,
.elective-card p, .jp-job-item p, .jp-industry-item p,
p.dsufaq-title, p.certtitle, p.text-black { 
    font-size: var(--body-text) !important; 
    line-height: var(--line-height) !important; 
    font-weight: normal !important;
}

/* ===== ELECTIVES SPECIFIC ELEMENTS - UNIVERSAL ===== */
.cloudhero_subtitle, .main-title .subheadline { 
    font-size: var(--subheading-size) !important; 
    font-weight: 600 !important; 
}

.info-box .title, .cloudhero_info_box .title { 
    font-size: var(--small-text-size) !important; 
}

.info-box .value, .cloudhero_info_box .value { 
    font-size: var(--h4-size) !important; 
    font-weight: 700 !important; 
}

.info-box .subtext, .cloudhero_info_box .subtext { 
    font-size: var(--small-text-size) !important; 
}

/* ===== OVERRIDE ANY INLINE STYLES FOR ELECTIVES - UNIVERSAL ENFORCEMENT ===== */
[style*="font-size"] h1,
.dsufaq-title h1, .certtitle h1, .text-black h1 { 
    font-size: var(--h1-size) !important; 
}

[style*="font-size"] h2,
.dsufaq-title h2, .certtitle h2, .text-black h2 { 
    font-size: var(--h2-size) !important; 
}

[style*="font-size"] h3,
.dsufaq-title h3, .certtitle h3, .text-black h3 { 
    font-size: var(--h3-size) !important; 
}

[style*="font-size"] h4,
.dsufaq-title h4, .certtitle h4, .text-black h4 { 
    font-size: var(--h4-size) !important; 
}

[style*="font-size"] h5,
.dsufaq-title h5, .certtitle h5, .text-black h5 { 
    font-size: var(--h5-size) !important; 
}

[style*="font-size"] h6,
.dsufaq-title h6, .certtitle h6, .text-black h6 { 
    font-size: var(--h6-size) !important; 
}

[style*="font-size"] p,
.dsufaq-title p, .certtitle p, .text-black p { 
    font-size: var(--body-text) !important; 
}

/* Icon styling */
.glass-card .icon {
  font-size: var(--h2-size);
  color: var(--primary-sky-blue);
  margin-bottom: 1rem;
  transition: all 0.4s ease;
}

/* Card title */
.glass-card .card-title {
  color: var(--primary-sky-blue);
  font-weight: 700;
}

/* Text */
.glass-card .text-black {
  color: #1f2933; /* readable dark neutral (not pure black) */
}

/* Hover effects */
.glass-card:hover .icon {
  color: var(--secondary-yellow);
  transform: scale(1.15);
}

.glass-card:hover .card-title {
  color: var(--secondary-yellow);
}

body { 
    font-family: 'Poppins', sans-serif; 
}

/* ======================= ELECTIVES HERO BANNER - EXACT COPY OF MBA STRUCTURE ======================= */

/* Main Hero Section - Dynamic Height */
.cloudhero_banner {
  min-height: 100vh;
  max-height: none; /* Remove max-height constraint */
  height: auto; /* Allow dynamic height */
  display: flex;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, rgba(3, 27, 122, 1), rgba(4, 91, 126, 1));
  color: #fff;
  padding: 1.5rem 1rem 1rem 1rem; /* Further reduced from 3rem to 1.5rem */
  margin-top: 95px; /* Adjusted for navbar height */
}

/* Dynamic height adjustment for the entire banner */
.cloudhero_banner.dynamic-height {
  min-height: var(--banner-height, 100vh);
  height: var(--banner-height, auto);
}

/* Mobile override - dynamic height */
@media (max-width: 992px) {
  .cloudhero_banner { 
    min-height: auto !important; 
    max-height: none !important;
    height: auto !important;
    flex-direction: column !important; 
    padding: 2rem 1rem !important;
    margin-top: 60px !important;
  }
}

/* RIGHT DYNAMIC IMAGE - MATCHES CONTENT HEIGHT */
.cloudhero_image {
  position: fixed;
  top: 95px; /* Adjusted for navbar height */
  right: 0;
  width: 50%;
  height: calc(100vh - 95px); /* Start with viewport height minus navbar */
  z-index: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dynamic height adjustment via JavaScript */
.cloudhero_image.dynamic-height {
  height: var(--content-height, calc(100vh - 95px));
}

/* Image inside the div */
.cloudhero_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Content Container - Exact Copy */
.cloudhero_wrapper {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  height: 100%;
}

.cloudhero_content {
  text-align: left;
  padding-left: 0;
  max-width: 48%; /* Reduced from 55% to accommodate larger image */
  margin-top: 10px; /* Reduced from 40px for tighter professional spacing */
  margin-left: 0; /* Removed negative margin */
}

/* TOP LOGOS - Exact Copy */
.top-logos {
  margin-top: 0px; /* Removed top margin to reduce spacing */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.logo-item {
  width: 140px;
  height: 85px;
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,119,190,.3);
  backdrop-filter: blur(4px);
  transition: all .35s ease;
  flex-shrink: 0;
}

.logo-item:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

.logo-item img {
  width: 100%;
  height: 100%;
  background: white;
  padding: 3px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 4px 15px rgba(0,119,190,.25);
  transition: all .3s ease;
}

.logo-item:hover img {
  transform: scale(1.1);
}

/* TEXT STYLES - Exact Copy */
.cloudhero_tagline {
  font-size: var(--h3-size);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  color: #FFD700;
}

.cloudhero_title {
  text-align: left;
  position: relative;
}

.cloudhero_title_line1 {
  display: block;
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.2rem;
}

.cloudhero_title_line2 {
  display: block;
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.2rem;
}

.cloudhero_subtitle {
  display: block;
  font-size: var(--h3-size);
  font-weight: 700 !important; /* Force bold font-weight */
  color: #fff;
  margin-top: 0.4rem;
}

/* SIMPLE SOLUTION: Force bullet points to separate lines on desktop */
@media (min-width: 993px) {
  .cloudhero_subtitle {
    line-height: 2.5 !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Specific fix for bullet-list within cloudhero_subtitle - REMOVED */
  
  /* Target any text containing bullet symbols */
  .cloudhero_subtitle:contains("•") {
    white-space: pre-wrap !important;
  }
}

/* Water Flow Text Effects - Exact Copy */
.water-flow-text span {
  display: inline-block;
  transition: transform 0.3s, color 0.3s;
}

.water-flow-text span:hover {
  transform: scale(1.2) translateY(-2px);
  color: #FFD700 !important;
}

/* INFO BOXES - GRID LAYOUT */
.cloudhero_info {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Desktop: 3 equal columns */
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
  padding: 0 1rem !important; /* Keep desktop padding */
}

.cloudhero_info_box {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  min-width: 130px;
  text-align: center;
  transition: all 0.4s ease;
}

.cloudhero_info_box:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

.cloudhero_info_box .title {
  font-size: var(--small-text-size);
  opacity: 0.9;
  margin-bottom: 0.2rem;
  color: white;
}

.cloudhero_info_box .value {
  font-size: var(--h5-size);
  font-weight: 700;
  color: #FFD700;
}

.cloudhero_info_box .subtext {
  font-size: 0.75rem;
  opacity: 0.85;
  color: white;
}

/* SCROLL INDICATOR - Exact Copy */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 2s infinite;
  z-index: 3;
}

@keyframes bounce {
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-10px); }
}

.mouse { 
  width: 28px; 
  height: 45px; 
  border: 2px solid #fff; 
  border-radius: 20px; 
  position: relative; 
  margin-bottom: 8px; 
}

.mouse::before { 
  content: ''; 
  width: 5px; 
  height: 8px; 
  background: #fff; 
  border-radius: 3px; 
  position: absolute; 
  top: 8px; 
  left: 50%; 
  transform: translateX(-50%); 
  animation: scrollWheel 1.5s infinite; 
}

@keyframes scrollWheel { 
  0% { opacity: 1; top: 8px; } 
  100% { opacity: 0; top: 20px; } 
}

.scroll-indicator p { 
  color: #fff; 
  font-size: var(--small-text-size); 
  font-weight: 500; 
  letter-spacing: 1px; 
  margin: 0; 
}

/* Ensure all sections after hero have higher z-index and proper background */
.cloudhero_banner ~ section,
.cloudhero_banner ~ div,
section:not(.cloudhero_banner),
.jp-industries-section,
footer,
.footer,
main,
.main-content {
  position: relative !important;
  z-index: 100 !important;
  background: white !important;
}

/* Add extra coverage for any potential gaps */
.cloudhero_banner ~ * {
  position: relative !important;
  z-index: 100 !important;
}

/* Special handling for sections with their own backgrounds */
.jp-industries-section {
  position: relative !important;
  z-index: 100 !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%) !important;
}

/* Footer sections */
footer,
.footer {
  position: relative !important;
  z-index: 100 !important;
  background: #1a365d !important;
}

/* RESPONSIVE - Image stays visible on mobile */
@media (max-width: 992px) {
  .cloudhero_banner { 
    flex-direction: column !important; 
    min-height: auto !important; 
    max-height: none !important;
    height: auto !important;
    padding: 2rem 1.5rem 2rem 1.5rem !important; /* Added more horizontal padding */
    margin-top: 60px !important; /* Smaller margin for mobile navbar */
    overflow: visible !important; /* Allow content to expand */
  }
  
  .cloudhero_content { 
    max-width: 100% !important; 
    margin-bottom: 2rem !important; 
    margin-left: 0 !important;
    margin-top: 1rem !important; /* Increased margin for proper spacing */
    text-align: left !important; /* Force left alignment with !important */
    flex: none !important; /* Don't constrain height */
    padding: 0 0.5rem !important; /* Add internal padding */
  }

  /* Specific fix for bullet-list within cloudhero_subtitle on mobile - REMOVED */

  /* Info boxes container - SIMPLE 1+2 LAYOUT for electives */
  .cloudhero_info { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    grid-template-rows: auto auto !important; /* Two rows */
    gap: 0.8rem !important;
    padding: 0 !important; /* Removed left/right padding */
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1) { 
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }
  
  /* Also apply to mba-info class - keep 2+1 layout for programs */
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    grid-template-rows: auto auto !important; /* Two rows */
    gap: 0.8rem !important;
    padding: 0 1rem !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - top left */
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }
  
  /* Second box - top right */
  .mba-info .info-box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }
  
  /* Third box - full width bottom */
  .mba-info .info-box:nth-child(3) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 2 !important;
    padding: 0.8rem 0.6rem !important;
    box-sizing: border-box !important;
  }

  /* Force left alignment for all text elements */
  .cloudhero_tagline {
    text-align: left !important;
  }

  .cloudhero_title {
    text-align: left !important;
  }

  .cloudhero_subtitle {
    text-align: left !important;
  }

  /* About section alignment */
  .cloudhero_about {
    text-align: left !important;
  }

  .cloudhero_about h2 {
    text-align: left !important;
  }

  .cloudhero_about p {
    text-align: left !important;
  }
  
  .cloudhero_image { 
    position: relative !important; /* Change to relative so it stays in document flow */
    width: 100% !important;
    height: auto !important; /* Changed from fixed height to auto */
    min-height: 300px !important; /* Minimum height but can expand */
    max-height: none !important; /* Remove max height constraint */
    top: auto !important; /* Reset top positioning */
    right: auto !important; /* Reset right positioning */
    order: 2 !important; /* Place below content */
    margin-top: 1rem !important;
    background-size: cover !important;
    /* Image will be visible and stay in place on mobile */
    display: flex !important; /* Force display */
    flex-shrink: 0 !important; /* Don't shrink */
  }
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Ensure img tag is properly displayed on mobile */
  .cloudhero_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block !important;
  }

  .cloudhero_tagline { font-size: var(--h5-size); }
  .cloudhero_title_line1, .cloudhero_title_line2 { font-size: var(--h3-size); }
  .cloudhero_subtitle { font-size: var(--h5-size); }
  .cloudhero_info { 
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Tablet: 3 equal columns */
    gap: 0.8rem !important; 
    margin: 1rem 0 !important; 
    padding: 0 1rem !important; /* Keep tablet padding */
  }
  .cloudhero_info_box { 
    min-width: 120px; 
    max-width: 120px;
    padding: 0.6rem 0.8rem;
    flex: 1 1 auto;
  }
  
  /* Also apply to mba-info class for consistency */
  .mba-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.8rem !important;
    margin: 1rem 0 !important;
    justify-content: flex-start !important;
  }
  
  .mba-info .info-box {
    min-width: 120px !important;
    max-width: 120px !important;
    padding: 0.6rem 0.8rem !important;
    flex: 1 1 auto !important;
  }
  
  /* Remove background from about-cloud section on mobile */
  .about-cloud {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
  }
  
  /* Prevent text wrapping in info box subtext */
  .cloudhero_info_box .subtext,
  .mba-info .info-box .subtext {
    white-space: nowrap !important;
    font-size: 0.7rem !important;
  }
  .logo-item { width: 110px; height: 65px; }
}

@media (max-width: 576px) {
  .cloudhero_banner {
    padding: 2rem 1.5rem !important; /* Increased horizontal padding to prevent overflow */
    margin-top: 60px !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .cloudhero_content {
    margin-top: 0.8rem !important;
    padding: 0 0.5rem !important; /* Add internal padding */
  }
  
  .cloudhero_tagline { font-size: 1.2rem; }
  .cloudhero_title_line1, .cloudhero_title_line2 { font-size: 1.6rem; }
  .cloudhero_subtitle { font-size: 1.2rem; }
  .cloudhero_image { 
    height: auto;
    min-height: 25vh;
  }
  
  /* Info boxes - SIMPLE 1+2 LAYOUT for electives */
  .cloudhero_info { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    grid-template-rows: auto auto !important; /* Two rows */
    gap: 0.6rem !important;
    padding: 0 !important; /* Removed left/right padding */
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1) { 
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Also apply to mba-info class - keep 2+1 layout for programs */
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    grid-template-rows: auto auto !important; /* Two rows */
    gap: 0.6rem !important;
    padding: 0 1rem !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - top left */
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Second box - top right */
  .mba-info .info-box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Third box - full width bottom */
  .mba-info .info-box:nth-child(3) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 2 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Remove background from about-cloud section on small mobile */
  .about-cloud {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 15px 0 !important;
  }
  
  /* Prevent text wrapping in info box subtext for small mobile */
  .cloudhero_info_box .subtext,
  .mba-info .info-box .subtext {
    white-space: nowrap !important;
    font-size: 0.6rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .cloudhero_info_box .title,
  .mba-info .info-box .title {
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .cloudhero_info_box .value,
  .mba-info .info-box .value {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Extra small screens - iPhone SE and smaller */
@media (max-width: 375px) {
  .cloudhero_info { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    grid-template-rows: auto auto !important; /* Two rows */
    gap: 0.4rem !important;
    padding: 0 !important; /* Removed left/right padding */
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - top left */
  .cloudhero_info_box:nth-child(1) { 
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  /* Second box - top right */
  .cloudhero_info_box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  /* Third box - full width bottom */
  .cloudhero_info_box:nth-child(3) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 2 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.4rem !important;
    padding: 0 0.5rem !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  .mba-info .info-box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  .mba-info .info-box:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding: 0.5rem 0.3rem !important;
    box-sizing: border-box !important;
  }
  
  .cloudhero_info_box .title,
  .mba-info .info-box .title {
    font-size: 0.6rem !important;
  }
  
  .cloudhero_info_box .value,
  .mba-info .info-box .value {
    font-size: 0.8rem !important;
  }
  
  .cloudhero_info_box .subtext,
  .mba-info .info-box .subtext {
    font-size: 0.55rem !important;
  }
}
}

/* ======================= LEARNING MODULES CARDS ======================= */
.glass-container {
  display: flex;
  justify-content: center;
  gap: 1.3rem;
  overflow-x: auto;
  padding: var(--content-padding) var(--element-margin);
  margin: var(--section-margin) auto;
  max-width: 1350px;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}

.glass-container::-webkit-scrollbar {
  display: none;
}

.glass-card {
  background: white;
  border-radius: 18px;
  padding: 1.8rem 1.3rem;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0,50,100,0.12);
  transition: 0.4s;
  min-width: 210px;
  max-width: 210px;
}

.glass-card:hover { transform: translateY(-10px); }

.icon {
  font-size: 3.8rem;
  margin-bottom: 0.7rem;
}

.card-title {
  font-size: var(--h5-size);
  font-weight: 700;
  color: #001f3f;
  margin: 1rem 0;
}

.text-black {
  color: #444;
  line-height: 1.7;
  font-size: 1.05rem;
}


.jp-industries-section {
    padding: var(--section-padding) 20px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    overflow: hidden;
    position: relative;
  }
  .jp-section-title {
    font-size: var(--h3-size);
    font-weight: 800;
    color: #001f3f;
    text-align: center;
    margin-bottom: var(--section-margin);
    position: relative;
  }
  .jp-section-title span { color: #0077be; }
  .jp-section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 6px;
    background: linear-gradient(90deg, #003366, #005a8d, #0077be);
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 51, 102, 0.3);
  }
  .jp-slider-container { max-width: 1350px; margin: 0 auto; padding: 0 10px; }
  .jp-job-slider, .jp-industry-slider { position: relative; padding: var(--element-margin) 0; margin-bottom: var(--section-margin); }
  .jp-swiper-buttons-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    pointer-events: none;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  .jp-cus-prev-btn, .jp-cus-next-btn {
    width: 48px; height: 48px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15); pointer-events: all;
    transition: all 0.3s ease; cursor: pointer; z-index: 11;
  }
  .jp-cus-prev-btn:hover, .jp-cus-next-btn:hover {
    background: #0077be; transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,119,190,0.3);
  }
  .jp-cus-prev-btn img, .jp-cus-next-btn img {
    width: 20px; height: 20px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(3000%) hue-rotate(190deg);
  }
  .jp-cus-prev-btn:hover img, .jp-cus-next-btn:hover img { filter: brightness(0) saturate(100%) invert(100%); }

  .jp-job-item, .jp-industry-item {
    background: white;
    border-radius: 20px;
    padding: 2rem 1.0rem;
    text-align: left;
    box-shadow: 0 8px 25px rgba(0,50,100,0.1);
    transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 285px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
  }
  .jp-job-item::before, .jp-industry-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--jp-gradient-bg); opacity: 0; transition: opacity 0.4s ease;
    border-radius: 20px; z-index: 0;
  }
  .jp-job-item:hover::before, .jp-industry-item:hover::before { opacity: 1; }
  .jp-job-item:hover, .jp-industry-item:hover {
    transform: translateY(-14px) scale(1.06);
    box-shadow: 0 22px 45px rgba(0,50,100,0.22);
    border-color: var(--jp-icon-color);
  }

  .jp-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 10px;
    position: relative;
    z-index: 2;
  }
  .jp-icon-wrapper {
    width: 48px; height: 48px; background: var(--jp-icon-color); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: var(--h5-size); box-shadow: 0 8px 22px rgba(0,0,0,0.2);
    transition: all 0.4s ease;
  }
  .jp-item-title {
    font-size: 1.18rem; font-weight: 700; color: #001f3f;
    margin: 0; flex: 1;
  }
  .jp-item-para {
    font-size: 0.92rem; color: #444; line-height: 1.5;
    margin: 14px 20px 0 20px; font-weight: 500;
  }

  /* Colors */
  .jp-job-1 { --jp-icon-color: #e74c3c; --jp-gradient-bg: linear-gradient(135deg, rgba(231,76,60,0.12), transparent); }
  .jp-job-2 { --jp-icon-color: #3498db; --jp-gradient-bg: linear-gradient(135deg, rgba(52,152,219,0.12), transparent); }
  .jp-job-3 { --jp-icon-color: #2ecc71; --jp-gradient-bg: linear-gradient(135deg, rgba(46,204,113,0.12), transparent); }
  .jp-job-4 { --jp-icon-color: #f39c12; --jp-gradient-bg: linear-gradient(135deg, rgba(243,156,18,0.12), transparent); }
  .jp-job-5 { --jp-icon-color: #9b59b6; --jp-gradient-bg: linear-gradient(135deg, rgba(155,89,182,0.12), transparent); }
  .jp-job-6 { --jp-icon-color: #1abc9c; --jp-gradient-bg: linear-gradient(135deg, rgba(26,188,156,0.12), transparent); }
  .jp-job-7 { --jp-icon-color: #34495e; --jp-gradient-bg: linear-gradient(135deg, rgba(52,73,94,0.12), transparent); }
  .jp-job-8 { --jp-icon-color: #e67e22; --jp-gradient-bg: linear-gradient(135deg, rgba(230,126,34,0.12), transparent); }
  .jp-job-9 { --jp-icon-color: #c0392b; --jp-gradient-bg: linear-gradient(135deg, rgba(192,57,43,0.12), transparent); }
  .jp-job-10 { --jp-icon-color: #8e44ad; --jp-gradient-bg: linear-gradient(135deg, rgba(142,68,173,0.12), transparent); }

  .jp-ind-1 { --jp-icon-color: #8e44ad; --jp-gradient-bg: linear-gradient(135deg, rgba(142,68,173,0.12), transparent); }
  .jp-ind-2 { --jp-icon-color: #27ae60; --jp-gradient-bg: linear-gradient(135deg, rgba(39,174,96,0.12), transparent); }
  .jp-ind-3 { --jp-icon-color: #2980b9; --jp-gradient-bg: linear-gradient(135deg, rgba(41,128,185,0.12), transparent); }
  .jp-ind-4 { --jp-icon-color: #e67e22; --jp-gradient-bg: linear-gradient(135deg, rgba(230,126,34,0.12), transparent); }
  .jp-ind-5 { --jp-icon-color: #e74c3c; --jp-gradient-bg: linear-gradient(135deg, rgba(231,76,60,0.12), transparent); }
  .jp-ind-6 { --jp-icon-color: #7f8c8d; --jp-gradient-bg: linear-gradient(135deg, rgba(127,140,141,0.12), transparent); }
  .jp-ind-7 { --jp-icon-color: #16a085; --jp-gradient-bg: linear-gradient(135deg, rgba(22,160,133,0.12), transparent); }
  .jp-ind-8 { --jp-icon-color: #f1c40f; --jp-gradient-bg: linear-gradient(135deg, rgba(241,196,15,0.12), transparent); }
  .jp-ind-9 { --jp-icon-color: #d35400; --jp-gradient-bg: linear-gradient(135deg, rgba(211,84,0,0.12), transparent); }
  .jp-ind-10 { --jp-icon-color: #2c3e50; --jp-gradient-bg: linear-gradient(135deg, rgba(44,62,80,0.12), transparent); }

  @media (max-width: 992px) {
    .jp-job-item, .jp-industry-item { width: 280px; height: 240px; }
  }
  @media (max-width: 576px) {
    .jp-job-item, .jp-industry-item { width: 260px; height: 230px; padding: 1.6rem; }
  }



  /* ======================= CLOUD HERO BANNER - MOBILE RESPONSIVE ======================= */
:root {
  --cloud-accent: #FFD700;
  --cloud-glass: rgba(255,255,255,0.12);
  --cloud-dark: #022b6d;
  --accent:#FFD700;
  --glass-bg:rgba(255,255,255,0.12);
  --dark-bg:#022b6d;
}

/* Main Hero Section */
.mba-banner {
  min-height: 99vh;
  background: linear-gradient(120deg, #022b6d 0%, #035b7e 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Desktop: Parallax Image */
.parallax-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: url('mba-electives-images/DSU4.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transition: transform .3s ease;
}

/* Content Wrapper */
.home-banner-cont {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.heading-content {
  margin-top:110px;
  max-width: 55%;
  width: 100%;
}

.top-logos{
  display:flex;
  gap:.6rem;
  margin-bottom:1.2rem;
}

.logo-item{
  width:120px;
  height:75px;
  padding:6px;
  background:rgba(255,255,255,.08);
  border-radius:12px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo-item img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Text Styles */
.slide-text {
  font-size: 1.25rem;
  color: var(--cloud-accent);
  margin-bottom: 0.5rem;
}

.main-title .headline {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.1;
  margin: 0.5rem 0;
}

.main-title .subheadline {
  font-size: var(--h5-size);
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 1.8rem;
}

/* HERO INFO BOXES */
.mba-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-box {
  background: var(--cloud-glass);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 0.9rem 1.4rem;
  border-radius: 12px;
  text-align: center;
}

.info-box .title { font-size: var(--h5-size); color: white; font-weight: 600; opacity: 1; }
.info-box .value { color: var(--cloud-accent); font-size: 1.2rem; font-weight: 700; }
.info-box .subtext { font-size: 0.8rem; opacity: 0.8; margin-top: 0.2rem; }

/* About Box */
.about-cloud {
  background: rgba(255,255,255,0.08);
  padding: var(--content-padding);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  margin-top: 1.5rem;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--small-text-size);
  opacity: 0.8;
}

/* ===================== INTRO SECTION ===================== */

.intro-sec{
  padding: var(--section-padding) 0;
  color: #000;
  font-size: var(--h5-size);
}

.intro-img{
  width:100%;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* ===================== GLASS CARD SECTION ===================== */

.glass-container {
  display: flex;
  justify-content: center;
  gap: 1.3rem;
  overflow-x: auto;
  padding: var(--content-padding) var(--element-margin);
  margin: var(--section-margin) auto;
  max-width: 1350px;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}

.glass-container::-webkit-scrollbar {
  display: none;
}

.glass-card {
  background: white;
  border-radius: 18px;
  padding: 1.8rem 1.3rem;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0,50,100,0.12);
  transition: 0.4s;
  min-width: 210px;
  max-width: 210px;
}

.glass-card:hover { transform: translateY(-10px); }

.icon {
  font-size: 3.8rem;
  margin-bottom: 0.7rem;
}

.card-title {
  font-size: var(--h5-size);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}

.text-black {
  margin-bottom: 12px;
  font-size: var(--body-text);
  font-weight: 400;
  color: #000;
}

/* ======================= MOBILE FIX — IMAGE BELOW CONTENT ======================= */
@media (max-width: 992px) {

  .mba-banner {
    margin-top: 0px !important;
    padding: var(--section-padding) 1rem 5rem !important;
    display: flex;
    flex-direction: column;
  }

  .home-banner-cont {
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
    width: 100%;
    max-width: none;
    order: 1 !important;
  }

  .heading-content {
    margin-left: 0px !important;
    max-width: 100%;
    width: 100%;
    order: 1 !important;
  }

  /* MOBILE FIX — IMAGE BELOW CONTENT LIKE MAIN PROGRAM PAGES */
  .parallax-image {
    position: relative !important;
    width: 100% !important;
    height: 35vh !important;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 2.5rem;
    order: 2 !important;
    background-attachment: scroll !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    z-index: 0 !important;
    top: auto !important;
    right: auto !important;
  }

  .parallax-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: relative !important;
  }

  .glass-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 2rem;
    overflow-x: visible !important;
    padding: 20px !important;
  }

  .glass-card {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
  }

  .mba-info { 
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .about-cloud {
    max-width: 100%;
    margin: 1.5rem 0 0;
  }

  .main-title .headline { font-size: var(--h3-size) !important; }
  .main-title .subheadline { font-size: 1.25rem !important; }

  .scroll-indicator { display: none; }
}

/* Desktop Parallax */
@media (min-width: 993px) {
  .parallax-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background-image: url('mba-electives-images/DSU4.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Tablet - 2 columns */
@media (max-width: 992px) and (min-width: 577px) {
  .mba-info {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small Desktop - 3 columns */
@media (max-width: 1200px) and (min-width: 993px) {
  .mba-info {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================== CAREER PATH SECTION ===================== */
.jp-industries-section {
  padding: var(--section-padding) 20px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
  overflow: hidden;
  position: relative;
}

.jp-slider-container {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 10px;
}

.jp-section-title {
  font-size: var(--h3-size);
  font-weight: 800;
  color: #001f3f;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.jp-section-title span {
  color: #0077be;
}

.jp-section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 6px;
  background: linear-gradient(90deg, #003366, #005a8d, #0077be);
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0, 51, 102, 0.3);
}

.jp-job-slider, .jp-industry-slider {
  position: relative;
  padding: var(--element-margin) 0;
  margin-bottom: var(--section-margin);
}

.jp-swiper-buttons-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  pointer-events: none;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.jp-cus-prev-btn, .jp-cus-next-btn {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  pointer-events: all;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 11;
}

.jp-cus-prev-btn:hover, .jp-cus-next-btn:hover {
  background: #0077be;
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0,119,190,0.3);
}

.jp-cus-prev-btn img, .jp-cus-next-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(3000%) hue-rotate(190deg);
}

.jp-cus-prev-btn:hover img, .jp-cus-next-btn:hover img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.jp-job-item, .jp-industry-item {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.0rem;
  text-align: left;
  box-shadow: 0 8px 25px rgba(0,50,100,0.1);
  transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  height: 300px;
  width: 285px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
}
.jp-job-item::before, .jp-industry-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--jp-gradient-bg); opacity: 0; transition: opacity 0.4s ease;
  border-radius: 20px; z-index: 0;
}
.jp-job-item:hover::before, .jp-industry-item:hover::before { opacity: 1; }
.jp-job-item:hover, .jp-industry-item:hover {
  transform: translateY(-14px) scale(1.06);
  box-shadow: 0 22px 45px rgba(0,50,100,0.22);
  border-color: var(--jp-icon-color);
}

.jp-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px;
  position: relative;
  z-index: 2;
}
.jp-icon-wrapper {
  width: 48px; height: 48px; background: var(--jp-icon-color); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--h5-size); box-shadow: 0 8px 22px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
}
.jp-item-title {
  font-size: 1.18rem; font-weight: 700; color: #001f3f;
  margin: 0; flex: 1;
}
.jp-item-para {
  font-size: 0.92rem; color: #444; line-height: 1.5;
  margin: 14px 20px 0 20px; font-weight: 500;
}

/* Colors */
.jp-job-1 { --jp-icon-color: #e74c3c; --jp-gradient-bg: linear-gradient(135deg, rgba(231,76,60,0.12), transparent); }
.jp-job-2 { --jp-icon-color: #3498db; --jp-gradient-bg: linear-gradient(135deg, rgba(52,152,219,0.12), transparent); }
.jp-job-3 { --jp-icon-color: #2ecc71; --jp-gradient-bg: linear-gradient(135deg, rgba(46,204,113,0.12), transparent); }
.jp-job-4 { --jp-icon-color: #f39c12; --jp-gradient-bg: linear-gradient(135deg, rgba(243,156,18,0.12), transparent); }
.jp-job-5 { --jp-icon-color: #9b59b6; --jp-gradient-bg: linear-gradient(135deg, rgba(155,89,182,0.12), transparent); }
.jp-job-6 { --jp-icon-color: #1abc9c; --jp-gradient-bg: linear-gradient(135deg, rgba(26,188,156,0.12), transparent); }
.jp-job-7 { --jp-icon-color: #34495e; --jp-gradient-bg: linear-gradient(135deg, rgba(52,73,94,0.12), transparent); }
.jp-job-8 { --jp-icon-color: #e67e22; --jp-gradient-bg: linear-gradient(135deg, rgba(230,126,34,0.12), transparent); }
.jp-job-9 { --jp-icon-color: #c0392b; --jp-gradient-bg: linear-gradient(135deg, rgba(192,57,43,0.12), transparent); }
.jp-job-10 { --jp-icon-color: #8e44ad; --jp-gradient-bg: linear-gradient(135deg, rgba(142,68,173,0.12), transparent); }

.jp-ind-1 { --jp-icon-color: #8e44ad; --jp-gradient-bg: linear-gradient(135deg, rgba(142,68,173,0.12), transparent); }
.jp-ind-2 { --jp-icon-color: #27ae60; --jp-gradient-bg: linear-gradient(135deg, rgba(39,174,96,0.12), transparent); }
.jp-ind-3 { --jp-icon-color: #2980b9; --jp-gradient-bg: linear-gradient(135deg, rgba(41,128,185,0.12), transparent); }
.jp-ind-4 { --jp-icon-color: #e67e22; --jp-gradient-bg: linear-gradient(135deg, rgba(230,126,34,0.12), transparent); }
.jp-ind-5 { --jp-icon-color: #e74c3c; --jp-gradient-bg: linear-gradient(135deg, rgba(231,76,60,0.12), transparent); }
.jp-ind-6 { --jp-icon-color: #7f8c8d; --jp-gradient-bg: linear-gradient(135deg, rgba(127,140,141,0.12), transparent); }
.jp-ind-7 { --jp-icon-color: #16a085; --jp-gradient-bg: linear-gradient(135deg, rgba(22,160,133,0.12), transparent); }
.jp-ind-8 { --jp-icon-color: #f1c40f; --jp-gradient-bg: linear-gradient(135deg, rgba(241,196,15,0.12), transparent); }
.jp-ind-9 { --jp-icon-color: #d35400; --jp-gradient-bg: linear-gradient(135deg, rgba(211,84,0,0.12), transparent); }
.jp-ind-10 { --jp-icon-color: #2c3e50; --jp-gradient-bg: linear-gradient(135deg, rgba(44,62,80,0.12), transparent); }

@media (max-width: 992px) {
  .jp-job-item, .jp-industry-item { width: 280px; height: 240px; }
}
@media (max-width: 576px) {
  .jp-job-item, .jp-industry-item { width: 260px; height: 230px; padding: 1.6rem; }
}



/* ===== REMOVED DUPLICATE MOBILE SECTION - USING MAIN MOBILE SECTION ABOVE ===== */

/* ===== UNIVERSAL HERO IMAGE SCROLL FIX ===== */
/* This ensures all electives hero images behave consistently */

/* Add this script to fix hero image scroll behavior */
/*
<script>
// Universal hero image scroll fix for all electives
(function() {
  'use strict';
  
  let heroImage, heroSection;
  let isScrolling = false;
  
  function initElements() {
    heroImage = document.getElementById("cloudHeroImg");
    heroSection = document.querySelector('.cloudhero_banner');
  }
  
  function handleScroll() {
    if (isScrolling || !heroImage || !heroSection) return;
    
    isScrolling = true;
    requestAnimationFrame(() => {
      const rect = heroSection.getBoundingClientRect();
      
      if (window.innerWidth > 992) {
        // Desktop: Hide image when scrolling past hero
        if (rect.bottom <= 100) {
          heroImage.style.opacity = '0';
          heroImage.style.visibility = 'hidden';
        } else if (rect.top < window.innerHeight && rect.bottom > 0) {
          heroImage.style.opacity = '1';
          heroImage.style.visibility = 'visible';
        }
      } else {
        // Mobile: Hide when completely scrolled past
        if (rect.bottom <= 0) {
          heroImage.style.opacity = '0';
          heroImage.style.visibility = 'hidden';
        } else {
          heroImage.style.opacity = '1';
          heroImage.style.visibility = 'visible';
        }
      }
      
      isScrolling = false;
    });
  }
  
  // Initialize
  document.addEventListener('DOMContentLoaded', function() {
    initElements();
    if (heroImage) {
      heroImage.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
      if (window.innerWidth <= 992) {
        heroImage.style.opacity = '1';
        heroImage.style.visibility = 'visible';
      } else if (window.scrollY > 100) {
        heroImage.style.opacity = '0';
        heroImage.style.visibility = 'hidden';
      }
    }
  });
  
  // Add optimized scroll listener
  window.addEventListener('scroll', handleScroll, { passive: true });
  
  // Handle resize
  window.addEventListener('resize', function() {
    initElements();
    handleScroll();
  });
})();
</script>
*/

/* FINAL OVERRIDE - Ensure grid layout works on ALL electives pages */
@media (max-width: 992px) {
  /* Force grid layout on all electives pages - 1+2 layout */
  .cloudhero_info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.8rem !important;
    padding: 0 !important; /* Removed left/right padding */
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  
  /* Keep mba-info as 2+1 layout for programs */
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.8rem !important;
    padding: 0 1rem !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }
  
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  .mba-info .info-box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  .mba-info .info-box:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 576px) {
  /* Force grid layout on all electives pages - 1+2 layout for smaller screens */
  .cloudhero_info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.6rem !important;
    padding: 0 !important; /* Removed left/right padding */
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  
  /* Keep mba-info as 2+1 layout for programs */
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.6rem !important;
    padding: 0 1rem !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }
  
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  .mba-info .info-box:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  .mba-info .info-box:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}
/* Desktop: Convert bullet points to separate lines */
@media (min-width: 993px) {
  .cloudhero_subtitle {
    line-height: 1.8 !important;
  }
  
  /* Target subtitle text that contains bullet points */
  .cloudhero_subtitle:contains("•") {
    white-space: pre-line !important;
  }
  
  /* Alternative approach - if subtitle has bullet class */
  .cloudhero_subtitle.bullet-points {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  /* Split bullet points into separate elements */
  .cloudhero_subtitle .bullet-point {
    display: block !important;
    margin-bottom: 0.3rem !important;
  }
  
  .cloudhero_subtitle .bullet-point::before {
    content: "• " !important;
    color: var(--secondary-yellow) !important;
    font-weight: bold !important;
  }
}
/* Force bullet points to display on separate lines - Desktop only */
@media (min-width: 993px) {
  /* Method 1: If using spans or divs for each bullet point */
  .cloudhero_subtitle span,
  .cloudhero_subtitle div {
    display: block !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* Method 2: If bullet points are in a list */
  .cloudhero_subtitle ul,
  .cloudhero_subtitle ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .cloudhero_subtitle li {
    display: block !important;
    margin-bottom: 0.4rem !important;
    padding-left: 1rem !important;
    position: relative !important;
  }
  
  .cloudhero_subtitle li::before {
    content: "•" !important;
    color: var(--secondary-yellow) !important;
    font-weight: bold !important;
    position: absolute !important;
    left: 0 !important;
  }
  
  /* Method 3: Force line breaks after bullet symbols */
  .cloudhero_subtitle {
    word-spacing: normal !important;
    line-height: 1.8 !important;
  }
}
/* JavaScript will handle bullet point splitting - CSS preparation */
@media (min-width: 993px) {
  .cloudhero_subtitle.bullet-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    line-height: 1.4 !important;
  }
  
  .cloudhero_subtitle.bullet-split .bullet-item {
    display: block !important;
    margin-bottom: 0.3rem !important;
  }
  
  .cloudhero_subtitle.bullet-split .bullet-item::before {
    content: "• " !important;
    color: var(--secondary-yellow) !important;
    font-weight: bold !important;
  }
}

/* Fallback: If no JavaScript, at least improve spacing */
@media (min-width: 993px) {
  .cloudhero_subtitle {
    line-height: 2.2 !important;
    word-spacing: 0.2em !important;
  }
}
/*
JAVASCRIPT SOLUTION - Add this script to your HTML pages:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Only apply on desktop
    if (window.innerWidth >= 993) {
        const subtitles = document.querySelectorAll('.cloudhero_subtitle');
        
        subtitles.forEach(subtitle => {
            const text = subtitle.textContent || subtitle.innerText;
            
            // Check if text contains bullet points
            if (text.includes('•')) {
                // Split by bullet points and clean up
                const parts = text.split('•').map(part => part.trim()).filter(part => part.length > 0);
                
                // Clear original content
                subtitle.innerHTML = '';
                subtitle.classList.add('bullet-split');
                
                // Create new elements for each bullet point
                parts.forEach(part => {
                    const bulletItem = document.createElement('div');
                    bulletItem.className = 'bullet-item';
                    bulletItem.textContent = part;
                    subtitle.appendChild(bulletItem);
                });
            }
        });
    }
});
</script>

ALTERNATIVE: Add this to your HTML template or header.php file
*/
/* PURE CSS SOLUTION - Force line breaks after bullet symbols */
@media (min-width: 993px) {
  .cloudhero_subtitle {
    font-size: var(--h3-size) !important;
    line-height: 1.8 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
  
  /* If subtitle contains common bullet patterns, improve display */
  .cloudhero_subtitle[data-bullets="true"],
  .cloudhero_subtitle:has-text("•") {
    display: block !important;
    white-space: pre-line !important;
  }
  
  /* Target specific elective patterns */
  .cloudhero_subtitle:contains("Corporate"),
  .cloudhero_subtitle:contains("web development"),
  .cloudhero_subtitle:contains("Investment Research") {
    white-space: pre-wrap !important;
    line-height: 2.5 !important;
  }
}
/* ENSURE ALL BCA ELECTIVES HAVE 1+2 LAYOUT - BOTH CLASS VARIATIONS */
@media (max-width: 992px) {
  /* Force 1+2 layout for ALL electives - including BCA with mba-info class */
  .cloudhero_info,
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.8rem !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1),
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2),
  .mba-info .info-box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3),
  .mba-info .info-box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 576px) {
  /* Force 1+2 layout for ALL electives - smaller screens */
  .cloudhero_info,
  .mba-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.6rem !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* First box - full width on first line */
  .cloudhero_info_box:nth-child(1),
  .mba-info .info-box:nth-child(1) {
    grid-column: 1 / -1 !important; /* Span both columns */
    grid-row: 1 !important;
  }
  
  /* Second box - left side of second line */
  .cloudhero_info_box:nth-child(2),
  .mba-info .info-box:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  /* Third box - right side of second line */
  .cloudhero_info_box:nth-child(3),
  .mba-info .info-box:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* FINAL OVERRIDE - REMOVED ALL BULLET STYLING */
/* UNIVERSAL ELECTIVES DYNAMIC HEIGHT SCRIPT - INJECT INTO ALL ELECTIVES */
/* Add this script to all elective pages for dynamic height functionality */

/*
<script>
// Universal Dynamic Height Script for All Electives
(function() {
  // Dynamic height matching content for both image and banner background - ELECTIVES
  function updateElectiveDynamicHeights() {
    const heroImage = document.getElementById('cloudHeroImg');
    const heroContent = document.querySelector('.cloudhero_content');
    const banner = document.querySelector('.cloudhero_banner');
    
    if (heroImage && heroContent && banner && window.innerWidth > 992) {
      // Calculate content height including padding and margins
      const contentRect = heroContent.getBoundingClientRect();
      const contentHeight = contentRect.height + 200; // Add padding for better spacing
      
      // Set dynamic height for both image and banner
      const dynamicHeight = `${contentHeight}px`;
      
      // Update image height
      heroImage.style.setProperty('--content-height', dynamicHeight);
      heroImage.classList.add('dynamic-height');
      heroImage.style.height = dynamicHeight;
      
      // Update banner background height
      banner.style.setProperty('--banner-height', dynamicHeight);
      banner.classList.add('dynamic-height');
      banner.style.minHeight = dynamicHeight;
      banner.style.height = dynamicHeight;
    }
  }

  // Initialize dynamic heights on page load and resize
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(() => {
      updateElectiveDynamicHeights();
    }, 100);
    
    window.addEventListener('resize', () => {
      setTimeout(updateElectiveDynamicHeights, 100);
    });
  });
})();
</script>
*/