* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

      font-family: "Inria Sans", sans-serif;
}

body {
    background-color: black;
        color: white;
        margin-bottom: 0!important;
}
/* Scrollbar track */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.google-icon{
    width: 16px;
    height: 16px;
    padding-top: 3px;
    
}
.skill-chip img.skill-icon {
  width: 22px;
  height: 22px;
  margin-right: 7px;
  flex-shrink: 0;
  filter: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.skills-meta{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fixed Bottom FOMO Bar Styles */
.fixed-fomo-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: black;
    z-index: 9999;
    border-top: 2px solid #9f00d4;
    overflow: hidden;
}

.fixed-fomo-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.fomo-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.fomo-timer-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.fomo-text {
    color: white;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    animation: textGlow 2s infinite;
}

.fomo-timer-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 14px;
    border-radius: 25px;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: timerPulse 1s infinite;
}

.fomo-time {
    color: #ffff00;
    font-size: 18px;
    font-weight: 900;
    min-width: 22px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    animation: numberBlink 1.5s infinite;
}

.fomo-seats-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.fomo-seats-text {
    color: white;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.fomo-seats-count {
    color: #ffff00;
    font-size: 22px;
    font-weight: 900;
    padding: 6px 6px;
    border-radius: 20px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
}

.fomo-bottom-cta {
    background: black;
    background-size: 200% 200%;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 900;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 20px rgba(191, 0, 255, 0.4);
    animation: buttonPulse 2s infinite;
    position: relative;
    overflow: hidden;
}

.fomo-bottom-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.fomo-bottom-cta:hover::before {
    left: 100%;
}

.fomo-bottom-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(191, 0, 255, 0.7);
    background-position: 100% 100%;
}

/* Animations */
@keyframes bottomPulse {
    0% { 
        box-shadow: 0 -8px 30px rgba(191, 0, 255, 0.6), 0 -4px 15px rgba(255, 0, 128, 0.4);
    }
    50% { 
        box-shadow: 0 -12px 40px rgba(191, 0, 255, 0.9), 0 -6px 25px rgba(255, 0, 128, 0.7);
    }
    100% { 
        box-shadow: 0 -8px 30px rgba(191, 0, 255, 0.6), 0 -4px 15px rgba(255, 0, 128, 0.4);
    }
}

@keyframes gradientShift {
    0% { background: linear-gradient(135deg, #bf00ff 0%, #e600ff 50%, #ff0080 100%); }
    33% { background: linear-gradient(135deg, #e600ff 0%, #ff0080 50%, #bf00ff 100%); }
    66% { background: linear-gradient(135deg, #ff0080 0%, #bf00ff 50%, #e600ff 100%); }
    100% { background: linear-gradient(135deg, #bf00ff 0%, #e600ff 50%, #ff0080 100%); }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
    50% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.8); }
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes numberBlink {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 255, 0, 0.8); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 30px rgba(255, 255, 0, 0.8); }
}

@keyframes seatsGlow {
    0%, 100% { 
        text-shadow: 0 0 15px rgba(255, 255, 0, 1);
        border-color: rgba(255, 255, 0, 0.6);
    }
    50% { 
        text-shadow: 0 0 25px rgba(255, 255, 0, 1), 0 0 35px rgba(255, 255, 0, 0.8);
        border-color: rgba(255, 255, 0, 1);
    }
}

@keyframes buttonPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Mobile Responsive for Fixed Bottom Bar */
@media (max-width: 768px) {
    .fomo-bar-content {
        flex-direction: row;
        gap: 10px;
        padding: 0 15px;
        justify-content: space-between;
    }
    
    .fomo-timer-section {
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    
    .fomo-text {
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
    }
    
    .fomo-timer-display {
        padding: 8px 12px;
    }
    
    .fomo-time {
        font-size: 16px;
        min-width: 20px;
    }
    
    .fomo-seats-section {
        display: none; /* Hide seats section on mobile */
    }
    
    .fomo-bottom-cta {
        padding: 10px 16px;
        font-size: 12px;
        border-radius: 25px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .fomo-bar-content {
        gap: 8px;
        padding: 0 10px;
    }
    
    .fomo-text {
        font-size: 10px;
    }
    
    .fomo-timer-display {
        padding: 6px 10px;
    }
    
    .fomo-time {
        font-size: 14px;
        min-width: 18px;
    }
    
    .fomo-bottom-cta {
        padding: 8px 12px;
        font-size: 11px;
        border-radius: 20px;
    }
}

@media (max-width: 408px) {
    .fomo-text {
        font-size: 9px;
    }
    
    .fomo-timer-display {
        padding: 5px 8px;
    }
    
    .fomo-time {
        font-size: 12px;
        min-width: 16px;
    }
    
    .fomo-bottom-cta {
        padding: 6px 10px;
        font-size: 10px;
    }
}
@media(max-width:375px){
    .fomo-timer-section {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
}

/* Add bottom margin to body to prevent content overlap */
body {
    margin-bottom: 60px;
}
/* Track (background) */
::-webkit-scrollbar-track {
  background: black;
  border-radius: 10px;
}

/* Scrollbar thumb (handle) */
::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
  border: 2px solid #f0f0f0; /* For spacing */
}

/* On hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.linksNav{
    display: flex;
    z-index: 100000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    flex-direction: column;
}
.career-outcome {
  background-color: #0d1117;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
  color: #d3d7de;
  text-align: center;
  padding: 60px 20px;
  border-top: 1px solid #2a2f3a;
}

.why-choose-section {
    background: #0e1117;
    background-image:
        radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
        radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
    padding: 55px 20px;
    border-top: 1px solid #2a2f3a;
}

.why-choose-container {
    max-width: 1400px;
    margin: 0 auto;
}

.why-choose-container h2 {
    color: #ffffff;
    font-size: 2.1rem;
    margin-bottom: 26px;
    font-weight: 700;
}

.diamond-mark {
    color: #8dc6ff;
    margin-right: 8px;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.benefits-card,
.highlights-card {
    background: #161b22;
    border: 1px solid #2a2f3a;
    border-radius: 10px;
    padding: 24px;
    color: #d3d7de;
}

.benefits-title {
    width: fit-content;
    margin: 0 auto 22px;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 0;
}

.benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #d3d7de;
    border: 1.5px solid #2d3c50;
    border-radius: 8px;
    padding: 8px 10px;
    background: #0d1117;
}

.benefit-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.92rem;
    font-weight: 700;
    background: #bf00ff82;
    color: #fff;
}

.highlights-card h3 {
    color: #8dc6ff;
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.highlights-card ul {
    padding-left: 24px;
    color: #d3d7de;
}

.highlights-card li {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 1.03rem;
}

.highlight-contact-btn {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(90deg, #bf00ff82 0%, #8dc6ff 100%);
    padding: 10px 36px;
    border-radius: 6px;
}

.highlight-contact-btn:hover {
    opacity: 0.92;
}

/* Placements Section */
.placements-section {
  background: #0a0a0f;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
  padding: 60px 20px;
  border-top: 1px solid #1e1e2e;
  border-bottom: 1px solid #1e1e2e;
}

.placements-container {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.placements-eyebrow {
  display: inline-block;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 7px 20px;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border-radius: 50px;
  box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.15);
}

.placements-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.5rem;
  color: #f7c700;
  text-shadow: 0 0 10px rgba(247,199,0,0.9), 0 0 22px rgba(247,199,0,0.5);
  margin-bottom: 12px;
  letter-spacing: 3px;
}
.placements-stars span {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
  text-shadow: none;
}

.placements-heading {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.2;
}

.placements-desc {
  color: rgba(255,255,255,0.65);
  max-width: 700px;
  margin: 0 auto 36px;
  font-size: 1rem;
  line-height: 1.7;
}

.placements-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}

.stat-block {
  padding: 22px 10px;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-block span {
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.92;
}

.placement-companies-carousel {
  overflow: hidden;
  margin-bottom: 36px;
  -webkit-mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
  mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}

.companies-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: scrollCompanies 32s linear infinite;
}

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

@keyframes scrollCompanies {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.company-card {
  background: #111218;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 170px;
  flex-shrink: 0;
  transition: border-color 0.3s, transform 0.2s;
}

.company-card:hover {
  border-color: #bf00ff82;
  transform: translateY(-4px);
}

.company-name {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.company-ctc-label {
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
}

.company-ctc {
  color: #CC22E0;
  font-size: 1rem;
  font-weight: 700;
}

.placements-cta {
  display: inline-block;
  background: linear-gradient(135deg, #CC22E0, #AA00CC);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 36px;
  border-radius: 30px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
  box-shadow: 0 4px 18px rgba(204,34,224,0.4);
}

.placements-cta:hover {
  background: linear-gradient(135deg, #AA00CC, #AA00CC);
  box-shadow: 0 6px 28px rgba(204,34,224,0.6);
  transform: translateY(-2px);
}

/* Digital Marketing Skills Section */
.dm-skills-section {
  background: #0d1117;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
  padding: 64px 20px;
  border-top: 1px solid #2a2f3a;
  border-bottom: 1px solid #2a2f3a;
}

.dm-skills-container {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.dm-skills-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.dm-skills-underline {
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #bf00ff, #8dc6ff);
  border-radius: 4px;
  margin: 0 auto 44px;
}

.dm-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  text-align: left;
}

.dm-skills-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dm-skill-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #1e2633;
  color: #c9d8f0;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s;
}

.dm-skill-item:first-child {
  border-top: 1px solid #1e2633;
}

.dm-skill-item:hover {
  color: #bf00ff;
}

.dm-skill-item:hover .dm-skill-icon {
  border-color: #bf00ff;
  color: #bf00ff;
  background: rgba(191,0,255,0.12);
}

.dm-skill-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #2d3c50;
  background: #0a0f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8dc6ff;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.dm-skill-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.dm-skill-icon--ai {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #bf00ff;
  border-color: #bf00ff52;
  background: rgba(191,0,255,0.08);
}

@media (max-width: 900px) {
  .dm-skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
  }
}

@media (max-width: 560px) {
  .dm-skills-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dm-skills-heading {
    font-size: 1.5rem;
  }
  .dm-skill-item {
    font-size: 0.95rem;
  }
}

@media (max-width: 700px) {
  .placements-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .placements-heading {
    font-size: 1.6rem;
  }
  .company-card {
    min-width: 140px;
  }
}

.career-outcome h2 {
  font-size: 2em;
  margin-bottom: 16px;
  color: #ffffff;
}

.career-outcome p {
  font-size: 1em;
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.career-outcome .disclaimer {
  font-size: 0.75em;
  color: #777;
  margin-top: 12px;
}

.company-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.company-logo-grid img {
  max-height: 60px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: grayscale(100%);
}

.company-logo-grid img:hover {
  opacity: 1;
  filter: grayscale(0%);
}


.skills-container-monthly {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.key-points-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.key-points-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 1.05rem;
  color: rgb(220, 220, 220); /* light text for dark theme */
  font-weight: 500;
}

.key-points-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #CC22E0;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(204,34,224,0.7);
}

.skills-tag {
  background-color: #1e2633;       /* Dark background chip */
  color: #8dc6ff;                  /* Light blue text for contrast */
  padding: 6px 14px;
  font-size: 0.85em;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid #2d3c50;
  transition: background-color 0.3s, transform 0.2s;
  cursor: default;
}

.skills-tag:hover {
  background-color: #29405a;
  transform: translateY(-2px);
}

.aiCard H2{
    font-weight: 700;
    text-decoration: lowercase;
    text-transform: capitalize;
}
.testimonial-section {
  background-color: #0d1117;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
  color: #c9d1d9;
  padding: 60px 20px;
  text-align: center;
  border-top: 1px solid #2a2f3a;
  border-bottom: 1px solid #2a2f3a;
}

.testimonial-section h2 {
  font-size: 2em;
  margin-bottom: 40px;
  color: #ffffff;
}

.testimonial-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.testimonial-card {
  background-color: #161b22;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  flex: 1;
  min-width: 260px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: #58a6ff;
}

.testimonial-card p {
  font-size: 1em;
  line-height: 1.6;
  color: #b1bac4;
}

.testimonial-card .author {
  margin-top: 15px;
  font-size: 0.9em;
  font-weight: bold;
  color: #8b949e;
}

/* Responsive */
@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }

    .why-choose-container h2 {
        font-size: 1.4rem;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
    }

    .benefits-title {
        font-size: 1.5rem;
    }

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

.dark-theme {
  background-color: #0e1117;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
  color: #d3d7de;
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid #2a2f3a;
}

.dark-theme .skills-meta {
  font-size: 0.95em;
  color: #88919d;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #1e222b;
  padding-bottom: 10px;
}

.dark-theme .skills-meta strong {
  background: linear-gradient(90deg, #CC22E0, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.dark-theme h2 {
  font-size: 2em;
  margin: 20px 0;
  color: #ffffff;
}
.dark-theme .skills-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.dark-theme .skill-chip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(135deg, #1a0630 0%, #0d1117 100%);
  color: #e2d6ff;
  border: 1px solid rgba(204,34,224,0.45);
  font-size: 0.95em;
  font-weight: 500;
  border-radius: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  cursor: default;
  box-shadow: 0 2px 10px rgba(204,34,224,0.15), inset 0 0 0 1px rgba(204,34,224,0.08);
  position: relative;
  overflow: hidden;
}

.dark-theme .skill-chip:hover {
  transform: translateY(-3px) scale(1.04);
  background: linear-gradient(135deg, #2a0845 0%, #130220 100%);
  border-color: #CC22E0;
  box-shadow: 0 0 0 1px rgba(204,34,224,0.6), 0 6px 24px rgba(204,34,224,0.45), 0 0 40px rgba(204,34,224,0.2);
  color: #ffffff;
}

.dark-theme .skill-chip img.skill-icon {
  filter: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.dark-theme .skill-chip:hover img.skill-icon {
  filter: none;
  transform: scale(1.2);
}

@media (max-width: 600px) {
  .dark-theme .skills-meta {
    font-size: 0.85em;
    flex-direction: column;
    align-items: center;
  }

  .dark-theme .skill-chip {
    font-size: 0.85em;
    padding: 6px 12px;
  }
}

.moduleInstruction{
 border: 1px solid #f39531; 
 width: fit-content;
 padding: 10px;
 border-radius: 50px;
 font-size: 15px;
 
}
.linksNav img{
    width: 30px;
    height: 30px;
    margin: auto;
}
.imgLink{
    background: black;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 1px solid #bf00ff99;
      box-shadow: 0 0 10px #bf00ff99;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 10px;
}
.linksNav a:nth-child(3) {
    display: none;
}
#closeForm{
    display: none;
    color: white;
                 
             border-radius: 5px;
                         background:linear-gradient(180deg, black, #bf00ff82);
            background-size: 100% 200%;
                        transition: 0.5s all ease-in-out;
            background-position: top;
            transition: 0.2s all ease-in-out;
            margin-top: 10px;
            width: 100%;
            margin-bottom: 20px;
            background-color: #33333358;
            border: 1px solid #bf00ff82;
            padding: 10px 20px;
            color: white;
            font-size: 16px;
}
.container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    padding: 3rem 2rem;
}
/*HeroBanner*/
.MainContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: top;
    width: 100%;
    aspect-ratio: 16/7.3;
    background:
        radial-gradient(circle at 50% -60%, #bf00ff82 3%, transparent 60%),
        radial-gradient(circle at 50% 120%, #e600ff40 1%, transparent 30%);
}
.containerMain{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 460px;
    grid-gap: 20px;

}
.topmentor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #CC22E0, #7c3aed);
    color: #ffffff;
    max-width: fit-content;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 18px rgba(204,34,224,0.35);
}
.topmentor p,
.topmentor .texttop {
    color: #ffffff !important;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
}
.scholarIcon{
    margin-right: 10px;
    filter: brightness(0) invert(1);
}
.buttonHeroBanner{
    text-decoration: none;
    border-radius: 20px;
            border: none;
            border: 1px solid #bf00ff82;
            display: flex;
            font-size: 16px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            background:linear-gradient(180deg, black, #bf00ff82);
            background-size: 100% 200%;
            transition: 0.2s all ease-in-out;
            background-position: top;
            transition: 1s all ease-in-out;
            color:white
}
            .buttonHeroBanner img{
            width: 20px;
            height: 20px;
            transition: 0.4s all ease-in-out;
        }
        .buttonText{
            margin-right: 10px;
            color: white;
            padding:10px 10px 10px 20px;
        }
        .buttonHeroBanner:hover{

background-position: bottom;
        }
        .buttonHeroBanner:hover img{
            transform: rotate(-40deg);
        }
.buttonHeroBanner:hover .buttonHeroBanner img{
            rotate: 90deg;
        }
                .arrorSection{
            width: 50px;
            height: 40px;
                        background-color: white;
                                    border: 1px solid #00c8ff80;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dataContainer{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .courses {
            padding: 3rem;
            background-color: rgb(252, 252, 252);
                        background: 
            radial-gradient(circle at bottom right, #a9fffb 2%, transparent 10%);
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 16/6;
        }
        .mainHeader{
            font-size: clamp(1.8rem, 3.2vw, 2.4rem);
            margin: 10px 0;
            color: #ffffff;
        }
        .details{
            font-size: 16px;
            width: 100%;
            max-width: 80%;
            color: rgba(255, 255, 255, 0.872);
        }
        .formContainer{
            width: fit-content;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: black;
            padding: 2rem;
            border: 1px solid #e600ffb8;
            border-radius: 10px;
        }
       form p{
    font-size: 15px;
}
        form{
            width: 100%;
            margin: auto;
            max-width: fit-content;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .containerFormFields{
            width: 100%;
            max-width: 300px;
            margin: auto;
        }
        form input{
            width: 100%;
            margin-bottom: 20px;
            background-color: #ffffff;
            border: none;
            padding: 10px 20px;
            border-left: 2px solid #e600ffb8;
            color: #000000;
            font-size: 16px;
        }
        form input::placeholder,
        form textarea::placeholder { color: rgba(0,0,0,0.45); }
        .scrollProgressBar {
  width: 60%;
  height: 4px;
  background-color: #ddd;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin: auto;
}

.scrollProgress {
  height: 100%;
  width: 0%;
  background-color: purple;
  transition: width 0.1s ease-out;
}

           form select{
            width: 100%;
            margin-bottom: 20px;
            background-color: #ffffff;
            border: none;
            padding: 10px 20px;
            border-left: 2px solid #e600ffb8;
            color: #000000;
            font-size: 16px;
        }
        form option{
            background-color: white;
            color: black;
        }
        form h2{
            margin-bottom: 20px;
            text-align: center;
        }
        .checkboxSection{
            width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: capitalize;
        }
        .checkboxInput{
            width: 20px;
            padding: 0;
            margin: auto;
        }
        .submitButton{
             border: 1px solid #bf00ff82;
             border-radius: 5px;
                         background:linear-gradient(180deg, black, #bf00ff82);
            background-size: 100% 200%;
                        transition: 0.5s all ease-in-out;
            background-position: top;
            transition: 0.2s all ease-in-out;
            margin-top: 20px;
            margin-bottom: 0px;
            cursor: pointer;
        }
        .submitButton:hover{
            background-position: bottom;
        }
        .lineContainer{
                        width: 100%;
            display: grid;
            grid-template-columns: 1fr 0.5fr 0.3fr;


        }
        .solid{
            border-top: 2px solid #bf00ff82;
        }
        .dashed{
            border-top: 2px dashed #bf00ff82;
        }

/*FAQ's*/
.faqs{
            width: 100%;
            padding: 3rem;
      background-color: #0e1117;
      background-image:
        radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
        radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
            min-width:800px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .faq-grid{
            width: 100%;
            max-width: 1440px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }
        .faq-grid details{
            width: 100%;
            max-width: 100%;
            margin: 0;
        }
        .faqs h2{
            margin-bottom: 10px;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
        details{
            width: 100%;
            max-width: 70%;
            margin: auto;
            transition: 1s all ease-in-out;
            border: 1.5px dotted #bf00ff82;
            border-radius: 15px;
            background-color: black;
            margin-bottom: 18px;
            font-family: Arial, Helvetica, sans-serif;
            
        }
        summary{
            position: relative;
            padding: 1rem;
            padding-right: 30px;
            font-size: 1.2rem;
            font-weight: 500;

            cursor: pointer;
            display: flex;
            justify-content: space-between;

        }
        summary::after {
            content: "+";
            position: absolute;
            right: 20px;
        }
        details p{
            padding: 1rem;
            font-size: 16px;
                        color: rgba(255, 255, 255, 0.715);
        }
        details[open] summary::after{
            content: "-";
        }
        .faqDetails{
            width: 60%;
            line-height: 25px;
            text-align: center;
            margin-bottom: 25px;
            color: rgba(255, 255, 255, 0.715);
        }

        /*secondContainer*/
.CardContainer{
    position: relative;
    width: 100%;
    aspect-ratio: 16/7.3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  background-color: #0d1117;
  background-image:
    radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
    radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
}
.CardContainer h2{
    font-size: 3rem;
    text-align: center;
    margin-top: 2rem;
    margin: 2rem 2rem 0 2rem;
}
 .imgContainer{
    width: 100%;
            object-fit: cover;
            margin-top: -50px;
            padding: 20px;
        }
        .introDataContainer{
            display: flex;
            flex-direction: column;

        }
        .graphicsContainer{
            width: 100%;
            display: flex;
            padding: 20px 0 20px auto;
        }
        .circle{
            width: 80px;
            height: 80px;
            border: 3px solid #f39531;
            border-radius: 50%;
            margin-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: rgba(255,255,255,0.05);
            flex-shrink: 0;
        }
        .circle img {
            width: 52px;
            height: 52px;
            object-fit: contain;
        }
        .InfoContainer{
            display: grid;
            grid-template-columns: 0.5fr 1fr;
            grid-gap: 20px;
            max-width: 1400px;
        }
        .introDataContainer{
            padding-right: 20px;
        }
.InfoContainer li{
    background-color: transparent;
    border-left: 3px solid #e600ffb8;
    list-style:none;
    padding: 1rem;
    border-radius: 5px; 
    margin-bottom: 15px;
}
.InfoContainer li:nth-child(2){
margin-left: 30px;
}
.InfoContainer li:nth-child(3){
margin-left: 60px;
}
.CardContainer .container{
    padding: 3rem 2rem 0 2rem;
}
.lineContainer1{
    width: 100%;
            display: grid;
            grid-template-columns:  0.7fr 0.5fr  1fr;
            margin: 20px 0;
}
.additionalContainer{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
justify-content: center;
align-items: center;
padding: 3rem 2rem 3rem 2rem;
}
.AdditionalSection{
    width: 100%;
    display: flex;
max-width: 1400px;
flex-direction: column;
}
.AdditionalSection h2{
    font-size: 3rem;
    font-weight: 100;
}
.AdditionalSection p{
    font-size: 18px;
    margin: 20px 0;
    line-height: 30px;
}
.aiCards {
  display: flex;
  width: 100%;
  max-width: 1440px;
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  text-transform: capitalize;
  cursor: grab;
}

.aiCards::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.aiCards.dragging {
  cursor: grabbing;
  user-select: none;
}
.aiCard {
    display: flex;
    flex-direction: column;
  width: 450px;
  min-width: 450px;
  padding: 20px;
  margin: 20px 10px 20px 20px;
  border: 1px solid #e600ffb8; /* teal-ish glow border */
  border-radius: 5px;
  background: #1e1e1e;
  color: #d1d5db; /* light gray text */
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.aiCard:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 25px rgba(45, 212, 191, 0.2);
  background: #2a2a2a;
  border-color: #e600ffcf;
}

.aiCard ul {
  padding-left: 20px;
  margin-top: 20px;
}

.aiCard li {
  list-style: none;
  padding: 10px 10px 10px 25px; /* left padding for space for tick */
  position: relative;
  color: white;
}

.aiCard ul li::before {
  content: "\2713";
  position: absolute;
  left: 5px;
  color: #CC22E0;
  font-weight: 700;
  font-size: 0.9em;
}









.moduleInstruction{
 border: 1px solid #f39531; 
 width: fit-content;
 padding: 0px;
 padding: 0 10px;
 color: #f39531;
 border-radius: 50px;
 font-size: 13px !important;
 margin-top: -10px !important;
 
}

/*Media*/
@media(max-width:1177px){
.containerMain{
    grid-template-columns: 1fr 350px;
}
form h2{
            
            font-size: 20px;
        }
form p{
    font-size: 13px;
}
.container {

    padding: 6rem 2rem;
}
   .details{
            max-width: 100%;
        }
       .imgContainer{
        position: absolute;
        opacity: 0.2;
        height: 400px;
        bottom: 0;
        object-fit: contain;
        transform: translateX(-45%);

        z-index: -100;
        } 
        .InfoContainer{
            grid-template-columns: 1fr;
        }
        .InfoContainer li{
    background: transparent;
    border: 1px dotted #e600ffb8;
    border-left: 3px solid #e600ffb8;
    color: #111111 !important;
}
}
@media(max-width:832px){
    .containerMain{
    grid-template-columns: 1fr;
}
.linksNav a:nth-child(3) {
    display: flex;
}
#closeForm{
    display: block;
}
.formContainer{
        z-index: 50000000;
    display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            padding-top: 0;
            padding: 0;
            border-radius: 0px;
            bottom: 0px;
            right: 0px;
        }
        form input{
            font-size: 15px;
        }
           form select{
            font-size: 15px;
        }
        form h2{
            margin-bottom: 20px;
        }
}
     @media(max-width:938px){
  details{
            width: 100%;
            max-width: 90%;
           
        }
          .faqDetails{
            width: 80%;
            line-height: 25px;
            text-align: center;
            margin-bottom: 25px;
        }
}
   @media(max-width:584px){
            .container {
    padding: 4rem 1rem;
}
.mainHeader{
            font-size: 2rem;
            margin: 10px 0;
        }
        .details{
            font-size: 15px;
        }

        .CardContainer h2{
    font-size: 2.5rem;
    margin: 1rem 1rem 0 1rem;
}
        .introDataContainer{
            padding-right: 0px;
        }
.CardContainer .container{
    padding: 1rem 1rem 0 1rem;
}
.additionalContainer{
padding: 2rem 1rem 3rem 1rem;
}
.AdditionalSection h2{
    font-size: 2.5rem;
}
        .circle{
            width: 30px;
            height: 30px;
            border: 3px solid #f39531;
            border-radius: 50%;
            margin-left: 20px;
        }
        .AdditionalSection p{
            text-align: justify;
}
.InfoContainer li:nth-child(2){
margin-left: 0px;
}
.InfoContainer li:nth-child(3){
margin-left: 0;
}
        .galleryContainer h2{
        font-size: 2.5rem;
    }
        }
            .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 60px 20px;
      max-width: 1400px;
      margin: auto;
    }

    .card {
      width: 180px;
      height: 250px;
      background-size: cover;
      background-position: center;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.169);
      transition: all 0.4s ease;
      cursor: pointer;
      opacity: 0.85;
      border: 1.5px solid rgb(43, 43, 43);
    }

    .card:hover {
      transform: scale(1.2) rotate(0deg) !important;
      z-index: 999;
      opacity: 1;
      box-shadow: 0 20px 50px rgba(255, 255, 255, 0.2);
    }

    /* Add randomness using nth-child */
    .card:nth-child(odd) {
      transform: rotate(-5deg) translateY(10px);
    }

    .card:nth-child(even) {
      transform: rotate(4deg) translateY(-10px);
    }

    .card:nth-child(3n) {
      transform: rotate(-2deg) translateX(5px);
    }

    .card:nth-child(5n) {
      transform: rotate(6deg) translateY(15px);
    }
    .gallerySection{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 60px 20px;
      background-color: #0d1117;
      background-image:
        radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
        radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
    }
    .galleryContainer{
        width: 100%;
        max-width: 1440px;
    }
    .galleryContainer h2{
        font-size: 2.6rem;
        margin-bottom: 2rem;
        text-align: center;
        font-weight: 700;
    }
    .campus-highlight{
        color: #bf00ff;
    }
    .campus-layout{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
    .campus-photos{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .campus-photo-card{
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 4/3;
        border: 1.5px solid #2a2a2a;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .campus-photo-card:hover{
        transform: scale(1.04);
        box-shadow: 0 8px 24px rgba(191,0,255,0.25);
    }
    .campus-photo{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        z-index: 1;
    }
    .photo-label{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        text-align: center;
        padding: 30px 6px 10px;
        letter-spacing: 0.05em;
        text-shadow: 0 2px 6px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,1);
    }
    .campus-info{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .campus-desc{
        font-size: 1rem;
        color: rgba(255,255,255,0.82);
        line-height: 1.7;
    }
    .campus-features{
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .campus-feature-card{
        display: flex;
        align-items: center;
        gap: 16px;
        background: #0d1117;
        border: 1px solid #1e2633;
        border-radius: 12px;
        padding: 16px 20px;
        transition: border-color 0.3s;
    }
    .campus-feature-card:hover{
        border-color: #bf00ff82;
    }
    .feature-icon{
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        background: #160d1f;
        border: 1px solid #bf00ff82;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #bf00ff;
    }
    .feature-icon svg{
        width: 22px;
        height: 22px;
        stroke: #bf00ff;
    }
    .feature-text strong{
        display: block;
        color: #ffffff;
        font-size: 1rem;
        margin-bottom: 4px;
    }
    .feature-text p{
        color: rgba(255,255,255,0.6);
        font-size: 0.88rem;
        margin: 0;
    }
    .campus-cta{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #bf00ff;
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
        padding: 14px 32px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        letter-spacing: 0.04em;
        border: none;
        transition: background 0.3s, box-shadow 0.3s;
        box-shadow: 0 4px 20px rgba(191,0,255,0.35);
        white-space: nowrap;
    }
    .campus-cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .campus-cta:hover{
        background: #a000d4;
        box-shadow: 0 6px 28px rgba(191,0,255,0.55);
    }
    .campus-gallery-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #CC22E0;
        font-weight: 700;
        font-size: 1rem;
        padding: 12px 28px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        letter-spacing: 0.04em;
        border: 2px solid #CC22E0;
        transition: background 0.3s, color 0.3s, box-shadow 0.3s;
        white-space: nowrap;
    }
    .campus-gallery-btn:hover {
        background: #CC22E0;
        color: #fff;
        box-shadow: 0 4px 18px rgba(204,34,224,0.4);
    }
    .campus-gallery-btn svg {
        flex-shrink: 0;
        transition: stroke 0.3s;
    }
    .campus-social {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .campus-social-label {
        font-size: 0.82rem;
        font-weight: 600;
        color: rgba(0,0,0,0.45);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .campus-social-icons {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .campus-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(204,34,224,0.07);
        border: 1.5px solid rgba(204,34,224,0.2);
        color: #CC22E0;
        transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
        text-decoration: none;
    }
    .campus-social-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(204,34,224,0.3);
    }
    .campus-social-instagram:hover { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; color: #fff; }
    .campus-social-facebook:hover  { background: #1877f2; border-color: transparent; color: #fff; }
    .campus-social-youtube:hover   { background: #ff0000; border-color: transparent; color: #fff; }
    .campus-social-linkedin:hover  { background: #0a66c2; border-color: transparent; color: #fff; }
    @media(max-width:900px){
        .campus-layout{
            grid-template-columns: 1fr;
        }
        .campus-photos{
            grid-template-columns: repeat(3,1fr);
        }
        .campus-cta{
            text-align: center;
        }
        .campus-cta-row {
            flex-direction: column;
        }
        .campus-cta,
        .campus-gallery-btn {
            width: 100%;
            justify-content: center;
        }
    }
    @media(max-width:480px){
        .campus-photos{
            grid-template-columns: repeat(2,1fr);
        }
        .galleryContainer h2{
            font-size: 1.8rem;
        }
    }
    @media(max-width:862px){
    }
@media (max-width:819px){
    .moduleInstruction{
display: none;
}
    .faq-grid{
                        grid-template-columns: 1fr;
                }
  details{
            width: 100%;
            max-width: 100%;
           
        }
          .faqDetails{
            width: 100%;
        }
        .faqs{
            min-width:100%;
            padding: 1rem;

        }

.aiCard {
  width: 400px;
  min-width: 400px;
  padding: 15px;
}
.aiCard ul {
  padding-left: 10px;
  margin-top: 10px;
}
}

/* ============================================================
   Styles moved from expert-digital-marketing-course.php
   ============================================================ */

      .programs-section {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
        padding: 64px 20px;
        border-top: 1px solid #2a2f3a;
        border-bottom: 1px solid #2a2f3a;
      }
      .programs-inner {
        max-width: 1000px;
        margin: 0 auto;
      }
      .programs-header {
        max-width: 680px;
        margin-bottom: 28px;
      }
      .programs-heading {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: clamp(1.9rem, 2.8vw, 3rem);
        line-height: 1.1;
        font-weight: 800;
      }
      .programs-heading span {
        background: linear-gradient(90deg, #CC22E0, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .programs-copy {
        margin: 0;
        color: rgba(220, 228, 239, 0.72);
        font-size: 1rem;
        line-height: 1.7;
      }
      .programs-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
      }
      .program-card {
        position: relative;
        min-height: 340px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 22px 26px 26px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(18, 16, 36, 0.82) 0%, rgba(13, 11, 28, 0.97) 48%, rgba(10, 9, 22, 1) 100%);
        border: 1px solid #2d2d50;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
        overflow: hidden;
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      }
      .program-card-img {
        position: relative;
        width: calc(100% + 52px);
        margin: -22px -26px 16px;
        height: 200px;
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        flex-shrink: 0;
      }
      .program-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
      }
      .program-card:hover .program-card-img img {
        transform: scale(1.05);
      }
      .program-card-img-overlay {
        display: none;
      }
      .program-card::before {
        content: none;
      }
      .program-card:hover {
        transform: translateY(-5px);
        border-color: #AA00CC;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
      }
      /* .program-ribbon {
        position: absolute;
        top: 14px;
        right: -36px;
        width: 132px;
        text-align: center;
        background: linear-gradient(90deg, #f3ff00 0%, #ccff00 100%);
        color: #203100;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        padding: 7px 0;
        transform: rotate(45deg);
        box-shadow: 0 0 20px rgba(197, 255, 0, 0.3);
        z-index: 2;
      } */
      .program-meta,
      .program-body {
        position: relative;
        z-index: 1;
      }
      .program-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
      }
      .program-chip {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid #3d2d60;
        background: rgba(30, 20, 60, 0.7);
        color: #e0d0ff;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .program-rating {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        color: #cfd8e7;
        font-size: 0.9rem;
      }
      .program-rating strong {
        color: #ffffff;
      }
      .program-star {
        color: #CC22E0;
      }
      .program-type {
        color: rgba(220, 228, 239, 0.62);
        font-size: 0.84rem;
        margin-bottom: 8px;
      }
      .program-title {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: 1.22rem;
        line-height: 1.25;
        font-weight: 800;
      }
      .program-description {
        margin: 0 0 16px;
        color: rgba(220, 228, 239, 0.72);
        font-size: 0.93rem;
        line-height: 1.6;
      }
      .program-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #CC22E0;
        text-decoration: none;
        font-size: 0.94rem;
        font-weight: 700;
      }
      .program-link:hover {
        color: #CC22E0;
      }
      @media (max-width: 860px) {
        .programs-grid {
          grid-template-columns: repeat(2, minmax(0, 340px));
          justify-content: center;
        }
      }
      @media (max-width: 540px) {
        .programs-section {
          padding: 40px 14px;
        }
        .programs-grid {
          grid-template-columns: minmax(0, 420px);
          justify-content: center;
        }
        .program-card {
          min-height: auto;
        }
      }

      .course-comparison {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
        padding: 70px 20px;
        border-top: 1px solid #2a2f3a;
        border-bottom: 1px solid #2a2f3a;
      }
      .course-comparison .comparison-header {
        text-align: center;
        max-width: 680px;
        margin: 0 auto 44px;
      }
      .course-comparison .comparison-header h2 {
        margin: 0 0 12px;
        color: #ffffff;
        font-size: clamp(1.8rem, 2.6vw, 2.6rem);
        font-weight: 800;
        line-height: 1.2;
      }
      .cc-highlight,
      .course-comparison .comparison-header h2 .cc-highlight,
      .course-comparison .comparison-header p .cc-highlight {
        background: linear-gradient(90deg, #CC22E0, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .course-comparison .comparison-header p {
        margin: 0;
        color: rgba(220, 228, 239, 0.65);
        font-size: 1rem;
        line-height: 1.7;
      }
      .course-comparison .comparison-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        max-width: 1440px;
        margin: 0 auto;
      }
      .course-comparison .comparison-card {
        background: #12111e;
        border: 1px solid #2d2d50;
        border-radius: 18px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      }
      /* Colored top accent strip per card */
      .course-comparison .comparison-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        border-radius: 18px 18px 0 0;
        z-index: 2;
      }
      .course-comparison .comparison-card.expert::after    { background: linear-gradient(90deg, #CC22E0, #9b12c4); }
      .course-comparison .comparison-card.advanced::after  { background: linear-gradient(90deg, #3b82f6, #2563eb); }
      .course-comparison .comparison-card.professional::after { background: linear-gradient(90deg, #10b981, #059669); }
      .course-comparison .comparison-card.beginner::after  { background: linear-gradient(90deg, #fbbf24, #d97706); }
      .course-comparison .comparison-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 18px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 0;
      }
      .course-comparison .comparison-card > * { position: relative; z-index: 1; }
      .course-comparison .comparison-card:hover { transform: translateY(-6px); }
      /* Expert – purple glow */
      .course-comparison .comparison-card.expert:hover {
        border-color: rgba(204,34,224,0.7);
        box-shadow: 0 0 0 1px rgba(204,34,224,0.25), 0 8px 20px rgba(204,34,224,0.18), 0 20px 50px rgba(204,34,224,0.28);
      }
      .course-comparison .comparison-card.expert::before {
        background: radial-gradient(ellipse at 50% 0%, rgba(204,34,224,0.18) 0%, transparent 70%);
      }
      .course-comparison .comparison-card.expert:hover::before { opacity: 1; }
      /* Advanced – blue glow */
      .course-comparison .comparison-card.advanced:hover {
        border-color: rgba(59,130,246,0.65);
        box-shadow: 0 0 0 1px rgba(59,130,246,0.22), 0 8px 20px rgba(59,130,246,0.18), 0 20px 50px rgba(59,130,246,0.26);
      }
      .course-comparison .comparison-card.advanced::before {
        background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.16) 0%, transparent 70%);
      }
      .course-comparison .comparison-card.advanced:hover::before { opacity: 1; }
      /* Professional – green glow */
      .course-comparison .comparison-card.professional:hover {
        border-color: rgba(16,185,129,0.6);
        box-shadow: 0 0 0 1px rgba(16,185,129,0.2), 0 8px 20px rgba(16,185,129,0.16), 0 20px 50px rgba(16,185,129,0.24);
      }
      .course-comparison .comparison-card.professional::before {
        background: radial-gradient(ellipse at 50% 0%, rgba(16,185,129,0.15) 0%, transparent 70%);
      }
      .course-comparison .comparison-card.professional:hover::before { opacity: 1; }
      /* Beginner – amber glow */
      .course-comparison .comparison-card.beginner:hover {
        border-color: rgba(251,191,36,0.6);
        box-shadow: 0 0 0 1px rgba(251,191,36,0.2), 0 8px 20px rgba(251,191,36,0.16), 0 20px 50px rgba(251,191,36,0.22);
      }
      .course-comparison .comparison-card.beginner::before {
        background: radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.14) 0%, transparent 70%);
      }
      .course-comparison .comparison-card.beginner:hover::before { opacity: 1; }
      .course-comparison .card-header {
        padding: 26px 22px 20px;
        border-bottom: 1px solid #2a2f3a;
      }
      .course-comparison .card-header h3 {
        margin: 10px 0 6px;
        color: #ffffff;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1.3;
      }
      .course-comparison .card-header .duration {
        margin: 0;
        color: rgba(220, 228, 239, 0.55);
        font-size: 0.88rem;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .course-comparison .card-header .duration::before {
        content: '⏱';
        font-size: 0.85rem;
        line-height: 1;
      }
      .course-comparison .level-tag {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .course-comparison .comparison-card.expert    .level-tag { background: rgba(204,34,224,0.18); color: #CC22E0; border: 1px solid #AA00CC; }
      .course-comparison .comparison-card.advanced  .level-tag { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid #3b5fd9; }
      .course-comparison .comparison-card.professional .level-tag { background: rgba(16,185,129,0.14); color: #6ee7b7; border: 1px solid #059669; }
      .course-comparison .comparison-card.beginner  .level-tag { background: rgba(251,191,36,0.14); color: #fcd34d; border: 1px solid #b45309; }
      .course-comparison .comparison-card.expert    .card-header { border-bottom-color: rgba(204,34,224,0.25); }
      .course-comparison .comparison-card.advanced  .card-header { border-bottom-color: rgba(59,130,246,0.22); }
      .course-comparison .comparison-card.professional .card-header { border-bottom-color: rgba(16,185,129,0.22); }
      .course-comparison .comparison-card.beginner  .card-header { border-bottom-color: rgba(251,191,36,0.2); }
      .course-comparison .card-body {
        padding: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .course-comparison .features-list {
        list-style: none;
        margin: 0 0 20px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
      }
      .course-comparison .features-list li {
        color: rgba(220, 228, 239, 0.78);
        font-size: 0.91rem;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .course-comparison .features-list li:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .course-comparison .features-list li::before {
        content: '✓';
        font-size: 0.72rem;
        font-weight: 900;
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .course-comparison .comparison-card.expert    .features-list li::before { color: #CC22E0; background: rgba(204,34,224,0.15); }
      .course-comparison .comparison-card.advanced  .features-list li::before { color: #93c5fd; background: rgba(59,130,246,0.14); }
      .course-comparison .comparison-card.professional .features-list li::before { color: #6ee7b7; background: rgba(16,185,129,0.13); }
      .course-comparison .comparison-card.beginner  .features-list li::before { color: #fcd34d; background: rgba(251,191,36,0.13); }
      .course-comparison .features-list .highlight {
        font-weight: 800;
        color: #ffffff;
      }
      .course-comparison .ideal-for {
        border-radius: 10px;
        padding: 12px 14px;
        margin-top: auto;
      }
      .course-comparison .comparison-card.expert    .ideal-for { background: rgba(204,34,224,0.1);  border: 1px solid rgba(204,34,224,0.2); }
      .course-comparison .comparison-card.advanced  .ideal-for { background: rgba(59,130,246,0.09); border: 1px solid rgba(59,130,246,0.2); }
      .course-comparison .comparison-card.professional .ideal-for { background: rgba(16,185,129,0.09); border: 1px solid rgba(16,185,129,0.2); }
      .course-comparison .comparison-card.beginner  .ideal-for { background: rgba(251,191,36,0.09); border: 1px solid rgba(251,191,36,0.2); }
      .course-comparison .ideal-for h4 {
        margin: 0 0 4px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .course-comparison .comparison-card.expert    .ideal-for h4 { color: #CC22E0; }
      .course-comparison .comparison-card.advanced  .ideal-for h4 { color: #93c5fd; }
      .course-comparison .comparison-card.professional .ideal-for h4 { color: #6ee7b7; }
      .course-comparison .comparison-card.beginner  .ideal-for h4 { color: #fcd34d; }
      .course-comparison .ideal-for p {
        margin: 0;
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.4;
      }
      @media (max-width: 1100px) {
        .course-comparison .comparison-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 600px) {
        .course-comparison { padding: 50px 14px; }
        .course-comparison .comparison-grid {
          grid-template-columns: 1fr;
        }
      }

      /* -- Journey Section ----------------------------- */
      .journey-section {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117,34,126,0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117,34,126,0.1) 1%, transparent 26%);
        padding: 80px 20px;
        border-top: 1px solid #2a2f3a;
        border-bottom: 1px solid #2a2f3a;
        overflow: hidden;
      }
      .journey-inner {
        max-width: 1440px;
        margin: 0 auto;
      }

      /* Header */
      .journey-header {
        text-align: center;
        margin-bottom: 64px;
      }
      .journey-eyebrow {
        display: inline-block;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 14px;
        padding: 7px 20px;
        border-radius: 50px;
        background: linear-gradient(90deg, #CC22E0, #AA00CC);
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
      }
      .journey-title {
        margin: 0 0 12px;
        color: #ffffff;
        font-size: clamp(1.9rem, 2.8vw, 2.8rem);
        font-weight: 800;
        line-height: 1.15;
      }
      .journey-title span {
        background: linear-gradient(90deg, #CC22E0, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .journey-subtitle {
        margin: 0 auto;
        max-width: 560px;
        color: rgba(220,228,239,0.6);
        font-size: 1rem;
        line-height: 1.7;
      }

      /* -- Stepper row -- */
      .journey-stepper {
        display: flex;
        align-items: stretch;
        gap: 0;
        position: relative;
      }

      /* connector line between steps */
      .journey-stepper-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        gap: 0;
      }

      /* horizontal dashed line */
      .journey-stepper-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 36px; /* centre of the bubble */
        left: calc(50% + 36px);
        right: calc(-50% + 36px);
        height: 2px;
        background: linear-gradient(90deg,
          rgba(204,34,224,0.55),
          rgba(99,102,241,0.4) 40%,
          rgba(59,130,246,0.3) 70%,
          rgba(59,130,246,0.15)
        );
        background-size: 12px 2px;
      }

      /* -- Bubble -- */
      .js-bubble {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        transition: transform 0.28s ease, box-shadow 0.28s ease;
        cursor: default;
      }
      .journey-stepper-item:hover .js-bubble {
        transform: scale(1.12);
      }
      .js-bubble-icon  { display: flex; align-items: center; justify-content: center; line-height: 1; }
      .js-bubble-icon svg { width: 24px; height: 24px; stroke: currentColor; }
      .js-bubble-num   {
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-top: 3px;
        opacity: 0.85;
      }

      /* per-step bubble colours */
      .journey-stepper-item:nth-child(1) .js-bubble { background: rgba(204,34,224,0.15); border: 2px solid rgba(204,34,224,0.55); color: #CC22E0; box-shadow: 0 0 0 6px rgba(204,34,224,0.06); }
      .journey-stepper-item:nth-child(2) .js-bubble { background: rgba(99,102,241,0.15);  border: 2px solid rgba(99,102,241,0.55);  color: #a5b4fc; box-shadow: 0 0 0 6px rgba(99,102,241,0.06); }
      .journey-stepper-item:nth-child(3) .js-bubble { background: rgba(59,130,246,0.14);  border: 2px solid rgba(59,130,246,0.5);   color: #93c5fd; box-shadow: 0 0 0 6px rgba(59,130,246,0.06); }
      .journey-stepper-item:nth-child(4) .js-bubble { background: rgba(16,185,129,0.13);  border: 2px solid rgba(16,185,129,0.45);  color: #6ee7b7; box-shadow: 0 0 0 6px rgba(16,185,129,0.06); }
      .journey-stepper-item:nth-child(5) .js-bubble { background: rgba(245,158,11,0.13);  border: 2px solid rgba(245,158,11,0.45);  color: #fcd34d; box-shadow: 0 0 0 6px rgba(245,158,11,0.06); }
      .journey-stepper-item:nth-child(6) .js-bubble { background: rgba(239,68,68,0.12);   border: 2px solid rgba(239,68,68,0.42);   color: #fca5a5; box-shadow: 0 0 0 6px rgba(239,68,68,0.05); }

      /* -- Card below bubble -- */
      .js-card {
        margin-top: 20px;
        background: #12111e;
        border: 1px solid #2d2d50;
        border-radius: 16px;
        padding: 20px 16px 18px;
        text-align: center;
        width: 100%;
        flex: 1;
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        position: relative;
        overflow: hidden;
      }
      .js-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        border-radius: 16px 16px 0 0;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .journey-stepper-item:hover .js-card {
        transform: translateY(-6px);
        box-shadow: 0 14px 32px rgba(0,0,0,0.38);
      }
      .journey-stepper-item:nth-child(1):hover .js-card { border-color: rgba(204,34,224,0.5); }
      .journey-stepper-item:nth-child(2):hover .js-card { border-color: rgba(99,102,241,0.5);  }
      .journey-stepper-item:nth-child(3):hover .js-card { border-color: rgba(59,130,246,0.5);  }
      .journey-stepper-item:nth-child(4):hover .js-card { border-color: rgba(16,185,129,0.5);  }
      .journey-stepper-item:nth-child(5):hover .js-card { border-color: rgba(245,158,11,0.5);  }
      .journey-stepper-item:nth-child(6):hover .js-card { border-color: rgba(239,68,68,0.45);  }
      .journey-stepper-item:hover .js-card::before { opacity: 1; }
      .journey-stepper-item:nth-child(1) .js-card::before { background: linear-gradient(90deg,#CC22E0,#AA00CC); }
      .journey-stepper-item:nth-child(2) .js-card::before { background: linear-gradient(90deg,#6366f1,#4f46e5); }
      .journey-stepper-item:nth-child(3) .js-card::before { background: linear-gradient(90deg,#3b82f6,#2563eb); }
      .journey-stepper-item:nth-child(4) .js-card::before { background: linear-gradient(90deg,#10b981,#059669); }
      .journey-stepper-item:nth-child(5) .js-card::before { background: linear-gradient(90deg,#f59e0b,#d97706); }
      .journey-stepper-item:nth-child(6) .js-card::before { background: linear-gradient(90deg,#ef4444,#dc2626); }

      .js-card-step {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: block;
      }
      .journey-stepper-item:nth-child(1) .js-card-step { color: #CC22E0; }
      .journey-stepper-item:nth-child(2) .js-card-step { color: #a5b4fc; }
      .journey-stepper-item:nth-child(3) .js-card-step { color: #93c5fd; }
      .journey-stepper-item:nth-child(4) .js-card-step { color: #6ee7b7; }
      .journey-stepper-item:nth-child(5) .js-card-step { color: #fcd34d; }
      .journey-stepper-item:nth-child(6) .js-card-step { color: #fca5a5; }

      .js-card-title {
        margin: 0 0 8px;
        color: #ffffff;
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.25;
      }
      .js-card-desc {
        margin: 0 0 12px;
        color: rgba(220,228,239,0.6);
        font-size: 0.82rem;
        line-height: 1.6;
      }
      .js-card-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
      }
      .js-pill {
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(220,228,239,0.7);
      }

      /* -- Responsive -- */

      /* Tablet: 3 columns, 2 rows */
      @media (max-width: 1024px) and (min-width: 600px) {
        .journey-stepper {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 28px 0;
        }
        .journey-stepper-item:not(:last-child)::after { display: none; }
        /* re-draw connectors only within each row */
        .journey-stepper-item:nth-child(1)::after,
        .journey-stepper-item:nth-child(2)::after,
        .journey-stepper-item:nth-child(4)::after,
        .journey-stepper-item:nth-child(5)::after {
          display: block;
          top: 36px;
          left: calc(50% + 36px);
          right: calc(-50% + 36px);
          height: 2px;
        }
      }

      /* Mobile: 2 columns, 3 rows */
      @media (max-width: 599px) {
        .journey-section { padding: 56px 14px; }
        .journey-stepper {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 24px 0;
        }
        .journey-stepper-item:not(:last-child)::after { display: none; }
        .journey-stepper-item:nth-child(odd):not(:nth-child(5))::after {
          display: block;
          top: 36px;
          left: calc(50% + 36px);
          right: calc(-50% + 36px);
          height: 2px;
        }
        .js-bubble { width: 58px; height: 58px; }
        .js-bubble-icon svg { width: 20px; height: 20px; }
        .js-card { padding: 14px 10px 14px; }
        .js-card-title { font-size: 0.88rem; }
        .js-card-desc { font-size: 0.78rem; }
      }

      .wcl-section {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117,34,126,0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117,34,126,0.1) 1%, transparent 26%);
        padding: 80px 20px;
        border-top: 1px solid #2a2f3a;
        border-bottom: 1px solid #2a2f3a;
      }
      .wcl-inner {
        max-width: 1440px;
        margin: 0 auto;
      }

      /* Header */
      .wcl-header {
        text-align: center;
        margin-bottom: 56px;
      }
      .wcl-eyebrow {
        display: inline-block;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 14px;
        padding: 7px 20px;
        border-radius: 50px;
        background: linear-gradient(90deg, #CC22E0, #AA00CC);
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
      }
      .wcl-title {
        margin: 0 0 14px;
        color: #ffffff;
        font-size: clamp(1.9rem, 2.8vw, 2.8rem);
        font-weight: 800;
        line-height: 1.15;
      }
      .wcl-title span {
        background: linear-gradient(90deg, #CC22E0, #7c3aed);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .wcl-subtitle {
        margin: 0 auto;
        max-width: 580px;
        color: rgba(220,228,239,0.6);
        font-size: 1rem;
        line-height: 1.7;
      }

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

      /* Card */
      .wcl-card {
        background: #12111e;
        border: 1px solid #2d2d50;
        border-radius: 18px;
        padding: 32px 26px 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        position: relative;
        overflow: hidden;
      }
      .wcl-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        border-radius: 18px 18px 0 0;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .wcl-card:hover {
        transform: translateY(-6px);
        border-color: rgba(204,34,224,0.5);
        box-shadow: 0 16px 36px rgba(0,0,0,0.38);
      }
      .wcl-card:hover::before { opacity: 1; }

      /* unique top-bar colour per card */
      .wcl-card:nth-child(1)::before { background: linear-gradient(90deg,#CC22E0,#AA00CC); }
      .wcl-card:nth-child(2)::before { background: linear-gradient(90deg,#6366f1,#4f46e5); }
      .wcl-card:nth-child(3)::before { background: linear-gradient(90deg,#3b82f6,#2563eb); }
      .wcl-card:nth-child(4)::before { background: linear-gradient(90deg,#10b981,#059669); }
      .wcl-card:nth-child(5)::before { background: linear-gradient(90deg,#f59e0b,#d97706); }
      .wcl-card:nth-child(6)::before { background: linear-gradient(90deg,#ef4444,#dc2626); }

      /* Icon box */
      .wcl-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
      }
      .wcl-card:hover .wcl-icon-wrap { transform: scale(1.1) rotate(-4deg); }

      .wcl-card:nth-child(1) .wcl-icon-wrap { background: rgba(204,34,224,0.13); border: 1px solid rgba(204,34,224,0.3); }
      .wcl-card:nth-child(2) .wcl-icon-wrap { background: rgba(99,102,241,0.13);  border: 1px solid rgba(99,102,241,0.3); }
      .wcl-card:nth-child(3) .wcl-icon-wrap { background: rgba(59,130,246,0.13);  border: 1px solid rgba(59,130,246,0.3); }
      .wcl-card:nth-child(4) .wcl-icon-wrap { background: rgba(16,185,129,0.12);  border: 1px solid rgba(16,185,129,0.3); }
      .wcl-card:nth-child(5) .wcl-icon-wrap { background: rgba(245,158,11,0.12);  border: 1px solid rgba(245,158,11,0.3); }
      .wcl-card:nth-child(6) .wcl-icon-wrap { background: rgba(239,68,68,0.11);   border: 1px solid rgba(239,68,68,0.28); }

      .wcl-card-title {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: 1.08rem;
        font-weight: 800;
        line-height: 1.25;
      }
      .wcl-card-desc {
        margin: 0;
        color: rgba(220,228,239,0.6);
        font-size: 0.9rem;
        line-height: 1.65;
      }

      /* Responsive */
      @media (max-width: 900px) {
        .wcl-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 540px) {
        .wcl-section { padding: 56px 14px; }
        .wcl-grid { grid-template-columns: 1fr; }
      }

    .modules-redesign {
      background-color: #0d1117;
      background-image:
        radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
        radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
      padding: 44px 20px 34px;
    }
    .modules-redesign .AdditionalSection {
      max-width: 1440px;
      margin: 0 auto;
    }
    .modules-heading-wrap {
      text-align: center;
      margin-bottom: 16px;
    }
    .modules-eyebrow {
      display: inline-block;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.78rem;
      font-weight: 700;
      margin: 0 0 16px;
      padding: 7px 20px;
      background: linear-gradient(90deg, #CC22E0, #AA00CC);
      border-radius: 50px;
      box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .modules-main-heading {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.6rem, 2.2vw, 2.35rem);
      line-height: 1.25;
      font-weight: 800;
    }
    .modules-redesign .aiCards {
      display: flex;
      gap: 16px;
      max-width: 1440px;
      overflow-x: scroll;
      overflow-y: hidden;
      cursor: grab;
      padding: 2px 2px 8px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      align-items: stretch;
      will-change: scroll-position;
    }
    .modules-redesign .aiCards::-webkit-scrollbar {
      display: none;
    }
    .modules-redesign .aiCard {
      flex: 0 0 360px;
      width: 360px;
      min-width: 360px;
      margin: 0;
      padding: 20px;
      height: 430px;
      border-radius: 14px;
      border: 1px solid #253246;
      background: linear-gradient(160deg, rgba(15, 19, 29, 0.98) 0%, rgba(9, 12, 18, 0.99) 100%);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      overflow: hidden;
    }
    .modules-redesign .aiCard:hover {
      transform: translateY(-3px);
      border-color: #3f5574;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
      background: linear-gradient(160deg, rgba(18, 24, 36, 0.99) 0%, rgba(10, 13, 21, 1) 100%);
    }
    .module-card-title {
      margin: 0;
      font-size: 1.1rem;
      color: #f2f6ff;
      line-height: 1.35;
      font-weight: 700;
    }
    .modules-redesign .aiCard ul {
      margin: 12px 0 0;
      padding-left: 0;
      flex: 1;
      overflow-y: auto;
      padding-right: 4px;
    }
    .modules-redesign .aiCard li {
      font-size: 0.93rem;
      line-height: 1.45;
      color: #ccd7ea;
      padding: 6px 0 6px 24px;
    }
    .modules-redesign .aiCard ul li::before {
      content: "\2713";
      color: #CC22E0;
      left: 0;
      font-weight: 700;
      font-size: 0.9em;
    }
    .modules-redesign .skills-tag {
      background: rgba(141, 198, 255, 0.12);
      border: 1px solid rgba(141, 198, 255, 0.35);
      color: #dfecff;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.78rem;
    }
    .modules-redesign .moduleInstruction {
      text-align: center;
      margin: 8px 0 0;
      color: #9bb4d6;
      font-size: 0.88rem;
      opacity: 0.9;
    }
    .modules-carousel-controls {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }
    .modules-carousel-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #2f3f59;
      background: #0f1622;
      color: #dce7fa;
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .modules-carousel-btn:hover {
      border-color: #8dc6ff;
      color: #8dc6ff;
      transform: translateY(-1px);
    }
    @media (max-width: 700px) {
      .modules-redesign {
        padding: 40px 12px 28px;
      }
      .modules-redesign .aiCards {
        gap: 14px;
      }
      .modules-redesign .aiCard {
        flex: 0 0 calc(100vw - 38px);
        width: calc(100vw - 38px);
        min-width: calc(100vw - 38px);
        height: 400px;
        padding: 18px;
      }
    }
    @media (max-width: 900px) {
      .modules-carousel-controls {
        display: flex;
      }
    }

      .live-projects-section {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
        color: #fff;
        padding: 70px 20px;
      }
      .live-projects-inner {
        max-width: 1440px;
        margin: 0 auto;
        text-align: center;
      }
      .live-projects-eyebrow {
        display: inline-block;
        text-align: center;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 16px;
        padding: 7px 20px;
        background: linear-gradient(90deg, #CC22E0, #AA00CC);
        border-radius: 50px;
        box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.15);
      }
      .live-projects-heading {
        text-align: center;
        font-size: 1.8rem;
        font-weight: 800;
        color: #fff;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto 10px;
        line-height: 1.35;
        white-space: pre-line;
      }
      .live-projects-underline {
        width: 80px;
        height: 3px;
        background: #CC22E0;
        margin: 0 auto 50px;
        border-radius: 2px;
      }
      .live-project-card {
        background: #1a1a2e;
        border: 1px solid #2d2d50;
        border-radius: 16px;
        padding: 48px 52px 42px;
        margin-bottom: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: start;
        position: relative;
        overflow: hidden;
      }
      .lp-card-number {
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 9rem;
        font-weight: 900;
        line-height: 1;
        color: rgba(204,34,224,0.08);
        pointer-events: none;
        user-select: none;
        z-index: 0;
        letter-spacing: -4px;
        transition: color 0.3s ease;
      }
      .live-project-card.lp-active .lp-card-number {
        color: rgba(204,34,224,0.18);
        z-index: 2;
      }
      .lp-left, .lp-right {
        position: relative;
        z-index: 3;
      }
      @media (max-width: 768px) {
        .live-project-card { grid-template-columns: 1fr; gap: 24px; }
        .live-projects-heading { font-size: 1.5rem; }
      }
      .lp-project-number {
        color: #CC22E0;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      .lp-project-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        margin: 0 0 12px;
      }
      .lp-project-duration {
        font-size: 0.88rem;
        color: #a0a0c0;
        margin-bottom: 10px;
      }
      .lp-project-duration strong { color: #fff; }
      .lp-project-desc-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: #CC22E0;
        margin-bottom: 6px;
      }
      .lp-project-desc {
        font-size: 0.9rem;
        color: #b0b0cc;
        line-height: 1.7;
      }
      .lp-right-list {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
      }
      .lp-right-list li {
        font-size: 0.9rem;
        color: #ccc;
        padding: 7px 0;
        border-bottom: 1px solid #2a2a45;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .lp-right-list li::before {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid #CC22E0;
        flex-shrink: 0;
        background: transparent;
      }
      .lp-highlight-link {
        color: #CC22E0;
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      .lp-brand-note {
        text-align: center;
        font-size: 0.78rem;
        color: #666;
        font-style: italic;
        margin-top: 6px;
      }
      .lp-tools-row {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        align-items: center;
        justify-content: center;
        margin-top: 36px;
        background: #1a1a2e;
        border: 1px solid #2d2d50;
        border-radius: 12px;
        padding: 22px 30px;
      }
      .lp-tool-chip {
        background: #0f0f1a;
        border: 1px solid #3a3a6a;
        border-radius: 8px;
        padding: 8px 18px;
        font-size: 0.85rem;
        color: #ccc;
        font-weight: 600;
      }

      /* -- Live Projects Sticky Scroll ? Stacked Deck ------------------------ */
      .lp-scroll-wrapper {
        position: relative;
        height: 700vh;
      }
      .lp-sticky-panel {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-sizing: border-box;
        background: #0d1117;
      }
      .lp-number-ticker {
        position: absolute;
        left: -56px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        pointer-events: none;
        user-select: none;
        z-index: 10;
        width: 56px;
      }
      /* Vertical glow track */
      .lp-number-ticker::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, transparent, rgba(204,34,224,0.45) 25%, rgba(204,34,224,0.45) 75%, transparent);
        z-index: 0;
        border-radius: 2px;
      }
      .lp-num {
        font-weight: 900;
        line-height: 1;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        position: relative;
        z-index: 2;
        text-align: center;
      }
      .lp-num--prev {
        font-size: 1.15rem;
        opacity: 0.35;
        min-height: 1.3rem;
        color: #cc22e0;
        transform: scale(0.85);
      }
      .lp-num--curr {
        font-size: 2.6rem;
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 0 18px rgba(204,34,224,1), 0 0 38px rgba(204,34,224,0.6), 0 0 60px rgba(204,34,224,0.3);
        animation: lpNumPulse 2.5s ease-in-out infinite;
      }
      /* Glowing halo behind current number */
      .lp-num--curr::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(204,34,224,0.18) 0%, rgba(204,34,224,0.05) 60%, transparent 100%);
        border: 1px solid rgba(204,34,224,0.35);
        animation: lpHaloPulse 2.5s ease-in-out infinite;
        z-index: -1;
      }
      .lp-num--next {
        font-size: 1.15rem;
        opacity: 0.35;
        min-height: 1.3rem;
        color: #cc22e0;
        transform: scale(0.85);
      }
      .lp-num--pop {
        animation: lpNumPop 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      @keyframes lpNumPulse {
        0%, 100% { text-shadow: 0 0 18px rgba(204,34,224,1), 0 0 38px rgba(204,34,224,0.6); }
        50% { text-shadow: 0 0 30px rgba(204,34,224,1), 0 0 60px rgba(204,34,224,0.85), 0 0 90px rgba(204,34,224,0.4); }
      }
      @keyframes lpHaloPulse {
        0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%,-50%) scale(1.3); opacity: 0.65; }
      }
      @keyframes lpNumPop {
        0%   { transform: scale(0.65); opacity: 0.2; }
        60%  { transform: scale(1.18); }
        100% { transform: scale(1);    opacity: 1; }
      }
      .lp-sticky-inner {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 32px;
        height: calc(100vh - 80px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .lp-cards-stage {
        flex: 1;
        position: relative;
        overflow: hidden;
      }
      .lp-scroll-card {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        will-change: transform, opacity;
      }
      /* Deck progress dots */
      .lp-deck-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 18px 0 0;
        flex-shrink: 0;
      }
      .lp-deck-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #2d2d50;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.3s, transform 0.3s;
      }
      .lp-deck-dot.active {
        background: #CC22E0;
        transform: scale(1.4);
      }
      @media (max-width: 900px) {
        .lp-scroll-wrapper { height: auto; }
        .lp-sticky-panel { position: static; height: auto; background: transparent; overflow: visible; }
        .lp-sticky-inner { height: auto; }
        .lp-cards-stage { position: static; height: auto; overflow: visible; }
        .lp-scroll-card {
          position: static;
          transform: none !important;
          opacity: 0;
          display: none;
        }
        .lp-scroll-card.lp-active { display: grid; grid-template-columns: 1fr; gap: 20px; opacity: 1 !important; }
        .lp-deck-dots { padding: 16px 0; }
      }

      .dm-tools-section {
        background-color: #0d1117;
        background-image:
          radial-gradient(circle at 110% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%),
          radial-gradient(circle at -10% 50%, rgba(117, 34, 126, 0.1) 1%, transparent 26%);
        color: #ffffff;
        padding: 64px 0;
        border-top: 1px solid #2a2f3a;
        border-bottom: 1px solid #2a2f3a;
        overflow: hidden;
      }
      .dm-tools-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 20px;
      }
      .dm-tools-header {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 34px;
      }
      .dm-tools-eyebrow {
        display: inline-block;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 16px;
        padding: 7px 20px;
        border-radius: 50px;
        background: linear-gradient(90deg, #CC22E0, #AA00CC);
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
      }
      .dm-tools-heading {
        font-size: clamp(1.8rem, 2.5vw, 2.5rem);
        line-height: 1.22;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
      }
      .dm-tools-underline {
        width: 118px;
        height: 4px;
        margin: 18px auto 18px;
        border-radius: 999px;
        background: linear-gradient(90deg, #e07c00, #f7b733);
      }
      .dm-tools-copy {
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
        line-height: 1.7;
      }
      .dm-tools-carousel-wrap {
        display: flex;
        flex-direction: column;
        gap: 22px;
      }
      .dm-tools-carousel {
        position: relative;
        overflow: hidden;
        -webkit-mask: linear-gradient(90deg, transparent, #fff 7%, #fff 93%, transparent);
        mask: linear-gradient(90deg, transparent, #fff 7%, #fff 93%, transparent);
      }
      .dm-tools-track {
        display: flex;
        gap: 24px;
        width: max-content;
        animation: dmToolsScroll 34s linear infinite;
      }
      .dm-tools-track--reverse {
        animation-direction: reverse;
        animation-duration: 38s;
      }
      .dm-tools-carousel:hover .dm-tools-track {
        animation-play-state: paused;
      }
      .dm-tool-card {
        min-width: 170px;
        height: 88px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 18px;
        background: #161b22;
        border: 1px solid #2d3746;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      }
      .dm-tool-card:hover {
        transform: translateY(-4px);
        border-color: #4a5d78;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
      }
      .dm-tool-badge {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.92rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--tool-accent);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
      }
      .dm-tool-name {
        color: #eef3fb;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }
      @keyframes dmToolsScroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      @media (max-width: 768px) {
        .dm-tools-section {
          padding: 52px 0;
        }
        .dm-tools-inner {
          padding: 0 14px;
        }
        .dm-tools-header {
          margin-bottom: 26px;
        }
        .dm-tools-copy {
          font-size: 0.95rem;
        }
        .dm-tools-track {
          gap: 16px;
        }
        .dm-tool-card {
          min-width: 150px;
          height: 78px;
          padding: 14px 16px;
          border-radius: 16px;
        }
        .dm-tool-badge {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          font-size: 0.82rem;
        }
        .dm-tool-name {
          font-size: 0.9rem;
        }
      }

/* ============================================================
   Students Testimonials Section
   ============================================================ */
.testimonials-section {
  background: #0d1117;
  background-image:
    radial-gradient(ellipse at 110% 50%, rgba(117,34,126,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at -10% 50%, rgba(117,34,126,0.10) 0%, transparent 60%);
  padding: 80px 20px;
}
.testimonials-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.testimonials-header {
  text-align: center;
  margin-bottom: 50px;
}
.testimonials-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 7px 20px;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
}
.testimonials-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #f1f1f1;
  margin: 0 0 14px;
  line-height: 1.2;
}
.testimonials-title span {
  background: linear-gradient(90deg, #CC22E0, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.testimonials-underline {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border-radius: 2px;
  margin: 0 auto;
}
/* --- Testimonial Videos Carousel --- */
.testimonials-carousel-wrapper {
  overflow: hidden;
  width: 100%;
}
.testimonials-track {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}
.testimonial-card {
  background: #12111e;
  border: 1.5px solid #2d2d50;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 calc((100% - 60px) / 4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(204,34,224,0.18);
  border-color: rgba(204,34,224,0.5);
}
.testimonial-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 177.78%; /* 9:16 portrait ratio */
  height: 0;
  overflow: hidden;
  border-radius: 14px;
}
.testimonial-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* --- Carousel Controls --- */
.testimonials-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.testimonials-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(204,34,224,0.5);
  background: rgba(204,34,224,0.1);
  color: #CC22E0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
}
.testimonials-btn:hover:not(:disabled) {
  background: rgba(204,34,224,0.25);
  box-shadow: 0 0 14px rgba(204,34,224,0.4);
}
.testimonials-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.testimonials-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.testimonials-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(204,34,224,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.testimonials-dot.active {
  background: #CC22E0;
  transform: scale(1.3);
}
@media (max-width: 900px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
@media (max-width: 580px) {
  .testimonial-card {
    flex: 0 0 100%;
  }
  .testimonials-section {
    padding: 50px 16px;
  }
}



/* ============================================================
   Student Reviews Carousel Section
   ============================================================ */
.reviews-section {
  background: #0d1117;
  background-image:
    radial-gradient(ellipse at 110% 50%, rgba(117,34,126,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at -10% 50%, rgba(117,34,126,0.10) 0%, transparent 60%);
  padding: 80px 0;
  overflow: hidden;
}
.reviews-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.reviews-header {
  text-align: center;
  margin-bottom: 50px;
}
.reviews-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 7px 20px;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
}
.reviews-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #000000;
  margin: 0 0 14px;
  line-height: 1.2;
}
.reviews-title span {
  background: linear-gradient(90deg, #CC22E0, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.reviews-underline {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border-radius: 2px;
  margin: 0 auto;
}

/* Carousel */
.reviews-carousel-outer {
  position: relative;
}
.reviews-carousel-wrapper {
  overflow: hidden;
  position: relative;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.reviews-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: reviewsScroll 60s linear infinite;
}
.reviews-carousel-wrapper:hover .reviews-track {
  animation-play-state: paused;
}
/* Prev / Next buttons */
.reviews-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(204,34,224,0.15);
  border: 1.5px solid rgba(204,34,224,0.4);
  color: #CC22E0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.reviews-btn:hover {
  background: rgba(204,34,224,0.35);
  box-shadow: 0 0 18px rgba(204,34,224,0.4);
}
.reviews-btn-prev { left: 10px; }
.reviews-btn-next { right: 10px; }
@keyframes reviewsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Review Card */
.review-card {
  width: 340px;
  min-width: 340px;
  background: #12111e;
  border: 1.5px solid #2d2d50;
  border-radius: 18px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.review-card:hover {
  border-color: rgba(204,34,224,0.5);
  box-shadow: 0 12px 40px rgba(204,34,224,0.15);
}
.review-stars {
  font-size: 1.2rem;
  color: #CC22E0;
  letter-spacing: 2px;
}
.review-text {
  font-size: 0.95rem;
  color: #c4c4d4;
  line-height: 1.7;
  flex: 1;
  margin: 0;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #2d2d50;
}
.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #AA00CC, #CC22E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.review-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-author-info strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f1f1;
}
.review-author-info span {
  font-size: 0.78rem;
  color: #7a7a9a;
}

@media (max-width: 768px) {
  .review-card {
    width: 280px;
    min-width: 280px;
    padding: 22px 20px;
  }
  .reviews-section {
    padding: 50px 0;
  }
}



/* ============================================================
   Certification Section
   ============================================================ */
.cert-section {
  background: #0d1117;
  background-image:
    radial-gradient(ellipse at 110% 50%, rgba(117,34,126,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at -10% 50%, rgba(117,34,126,0.10) 0%, transparent 60%);
  padding: 80px 20px;
}
.cert-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Left content */
.cert-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cert-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 7px 20px;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
  align-self: flex-start;
  width: fit-content;
}
.cert-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #f1f1f1;
  line-height: 1.25;
  margin: 0;
}
.cert-underline {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border-radius: 2px;
}
.cert-sub-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e2e2f0;
  margin: 4px 0 0;
}
.cert-para {
  font-size: 0.92rem;
  color: #a8a8c0;
  line-height: 1.75;
  margin: 0;
}
.cert-para strong {
  color: #f1f1f1;
  font-weight: 600;
}

/* Right: carousel wrapper */
.cert-carousel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cert-carousel {
  display: grid;
  width: 100%;
}
.cert-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.cert-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.cert-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  object-fit: contain;
}

/* Achievement carousel — uniform frame for all person photos */
#achCarousel .cert-slide {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
}
#achCarousel .cert-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* Certificate Mockup */
.cert-mockup {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px 30px 24px;
  position: relative;
  box-shadow:
    0 0 0 6px rgba(204,34,224,0.15),
    0 24px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* decorative inner border */
  border: 3px solid transparent;
  background-clip: padding-box;
  outline: 2px solid #e8e0f5;
  outline-offset: 6px;
}
.cert-mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(204,34,224,0.08), rgba(204,34,224,0.04));
  pointer-events: none;
}
.cert-mockup-logo {
  font-size: 0.9rem;
  font-weight: 800;
  color: #AA00CC;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cert-mockup-logo::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #AA00CC, #CC22E0);
  border-radius: 5px;
  flex-shrink: 0;
}
.cert-mockup-body {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #ede9fb;
  border-bottom: 1px solid #ede9fb;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cert-mockup-awarded-to {
  font-size: 0.75rem;
  color: #888;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cert-mockup-name {
  font-size: 1.7rem;
  font-weight: 800;
  color: #1a1a2e;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
  letter-spacing: 0.01em;
}
.cert-mockup-subtitle {
  font-size: 0.75rem;
  color: #888;
  margin: 0;
}
.cert-mockup-course {
  font-size: 1.1rem;
  font-weight: 700;
  color: #AA00CC;
  margin: 4px 0 0;
  line-height: 1.35;
}
.cert-mockup-desc {
  font-size: 0.75rem;
  color: #666;
  margin: 2px 0 0;
}
.cert-mockup-footer {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding-top: 6px;
}
.cert-mockup-sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.cert-mockup-sig-line {
  width: 100%;
  height: 1px;
  background: #1a1a2e;
  margin-bottom: 4px;
}
.cert-mockup-sig span {
  font-size: 0.65rem;
  color: #555;
  text-align: center;
}
.cert-mockup-meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ede9fb;
  padding-top: 10px;
  margin-top: 2px;
}
.cert-mockup-meta span {
  font-size: 0.65rem;
  color: #999;
}

/* Dots */
.cert-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2d2d50;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0;
}
.cert-dot.active {
  background: #CC22E0;
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 900px) {
  .cert-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cert-carousel-wrap {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 500px) {
  .cert-section {
    padding: 50px 16px;
  }
  .cert-mockup {
    padding: 22px 18px 18px;
  }
  .cert-mockup-name {
    font-size: 1.3rem;
  }
}



/* ============================================================
   Meet Our Mentors Section
   ============================================================ */
.mentors-section {
  background: #ffffff;
  background-image:
    radial-gradient(ellipse at 110% 20%, rgba(180,100,255,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 80%, rgba(147,51,234,0.10) 0%, transparent 55%),
    linear-gradient(160deg, #f5f0ff 0%, #ffffff 50%, #faf4ff 100%);
  padding: 80px 20px;
}
.mentors-inner {
  max-width: 1440px;
  margin: 0 auto;
}
.mentors-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.mentors-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #CC22E0, #AA00CC);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 7px 20px;
  margin-bottom: 16px;
  box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
}
.mentors-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #000000;
  line-height: 1.25;
  margin: 0 0 18px;
}
.mentors-title span {
  background: linear-gradient(90deg, #CC22E0, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mentors-subtitle {
  font-size: 0.97rem;
  color: #5b5580;
  line-height: 1.75;
  margin: 0;
}

/* Grid */
.mentors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Card */
.mentor-card {
  background: #ffffff;
  border: 1.5px solid #e8dff8;
  border-radius: 20px;
  padding: 32px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(204,34,224,0.07);
}
.mentor-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #CC22E0, #CC22E0);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mentor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(204,34,224,0.14);
  border-color: rgba(204,34,224,0.35);
}
.mentor-card:hover::before {
  opacity: 1;
}

/* Avatar */
.mentor-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.mentor-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  position: relative;
  z-index: 1;
}
/* when the img itself carries the .mentor-avatar class */
img.mentor-avatar {
  object-fit: cover;
  display: block;
  flex: none;
}
.mentor-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.mentor-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2.5px solid #CC22E0;
  opacity: 0.55;
  transition: opacity 0.3s ease, inset 0.3s ease;
}
.mentor-card:hover .mentor-avatar-ring {
  opacity: 1;
  inset: -6px;
}

/* Text */
.mentor-role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #CC22E0;
  line-height: 1.4;
}
.mentor-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a0a2e;
  margin: 0;
  line-height: 1.2;
}
.mentor-exp {
  font-size: 0.78rem;
  color: #8b7aaa;
  margin: 0;
  font-weight: 500;
}
.mentor-desc {
  font-size: 0.85rem;
  color: #4a4468;
  line-height: 1.65;
  margin: 4px 0 6px;
  flex: 1;
}

/* Skill tags */
.mentor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.mentor-tags span {
  font-size: 0.7rem;
  font-weight: 600;
  color: #CC22E0;
  background: rgba(204,34,224,0.08);
  border: 1px solid rgba(204,34,224,0.22);
  border-radius: 50px;
  padding: 3px 10px;
}

/* Responsive */
@media (max-width: 1100px) {
  .mentors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .mentors-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }
  .mentors-section {
    padding: 50px 16px;
    background-image:
      radial-gradient(ellipse at 50% 0%, rgba(147,51,234,0.10) 0%, transparent 60%),
      linear-gradient(160deg, #f5f0ff 0%, #ffffff 100%);
  }
}

/* ---------------------------------------------------------------
   LIGHT THEME OVERRIDES ? applied after all other rules
   80% white / 20% purple accent ? professional, classy
   Glowing accents ? hover lift ? purple click glow
--------------------------------------------------------------- */

/* -- Palette variables (mirrors PHP inline block) -- */
:root {
  --lt-bg:         #ffffff;
  --lt-bg-alt:     #f8f5ff;
  --lt-text:       #000000;
  --lt-text-body:  #111111;
  --lt-text-muted: rgba(0,0,0,0.45);
  --lt-purple:     #CC22E0;
  --lt-border:     rgba(204,34,224,0.18);
  --lt-shadow:     rgba(204,34,224,0.11);
  --lt-glow:       rgba(204,34,224,0.38);
  --lt-section-bg:
    radial-gradient(ellipse at 100% 0%, rgba(176,0,204,0.22) 0%, rgba(200,80,230,0.08) 35%, #ffffff 62%),
    radial-gradient(ellipse at 0% 100%, rgba(176,0,204,0.12) 0%, #ffffff 55%);
}

/* -- Hero / main container -- */
.MainContainer,
.container,
.containerMain {
  background: transparent !important;
}
.formContainer {
  background: #ffffff !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 8px 32px var(--lt-shadow) !important;
  border-radius: 16px !important;
}
.formContainer h2 { color: var(--lt-text) !important; }
.formContainer input,
.formContainer select { background-color: #ffffff !important; color: #000000 !important; }
.formContainer input::placeholder,
.formContainer textarea::placeholder { color: rgba(0,0,0,0.45) !important; }

/* -- Skills section -- */
.dark-theme,
.skills-section.dark-theme {
  background: var(--lt-section-bg) !important;
  color: var(--lt-text) !important;
}
.dark-theme .skills-meta {
  color: var(--lt-text-muted) !important;
  border-bottom-color: var(--lt-border) !important;
}
.dark-theme .skills-meta strong:not(.cc-highlight) { background: none !important; -webkit-text-fill-color: var(--lt-text) !important; color: var(--lt-text) !important; }
.dark-theme h2               { color: var(--lt-text) !important; }
.dark-theme .skill-chip {
  background: #ffffff !important;
  border-color: rgba(204,34,224,0.35) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 2px 10px rgba(204,34,224,0.1) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
}
.dark-theme .skill-chip:hover {
  background: rgba(204,34,224,0.07) !important;
  border-color: #CC22E0 !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 0 0 1px rgba(204,34,224,0.5), 0 6px 22px rgba(204,34,224,0.35) !important;
  color: #8800bb !important;
}
.dark-theme .skill-chip img.skill-icon {
  filter: none !important;
  transition: filter 0.25s ease, transform 0.25s ease !important;
}
.dark-theme .skill-chip:hover img.skill-icon {
  filter: none !important;
  transform: scale(1.15) !important;
}

/* -- Placements -- */
.placements-section {
  background: var(--lt-section-bg) !important;
  color: var(--lt-text) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.placements-heading { color: var(--lt-text) !important; }
.placements-desc    { color: var(--lt-text-body) !important; }

.placement-companies-carousel {
  background: transparent !important;
}
.company-card {
  background: #ffffff !important;
  border: 1px solid var(--lt-border) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 2px 10px var(--lt-shadow) !important;
}
.company-name      { color: var(--lt-text) !important; }
.company-ctc-label { color: var(--lt-text-muted) !important; }
.company-ctc       { color: var(--lt-purple) !important; }

/* -- Programs -- */
.programs-section {
  background: var(--lt-section-bg) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.program-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 20px var(--lt-shadow) !important;
}
.program-card:hover {
  border-color: rgba(204,34,224,0.42) !important;
  box-shadow: 0 16px 48px rgba(204,34,224,0.2) !important;
}
.program-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 10px 36px rgba(204,34,224,0.35) !important;
}
.program-title, .program-rating strong { color: var(--lt-text) !important; }
.program-description                   { color: var(--lt-text-body) !important; }

/* -- Course comparison -- */
.course-comparison {
  background: var(--lt-section-bg) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.course-comparison .comparison-header h2 { color: var(--lt-text) !important; }
.course-comparison .comparison-header p  { color: var(--lt-text-body) !important; }
.course-comparison .comparison-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 20px var(--lt-shadow) !important;
}
.course-comparison .comparison-card:hover {
  box-shadow: 0 16px 48px rgba(204,34,224,0.2) !important;
  border-color: rgba(204,34,224,0.4) !important;
}
.course-comparison .comparison-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 10px 36px rgba(204,34,224,0.35) !important;
}
.course-comparison .card-header h3      { color: var(--lt-text) !important; }
.course-comparison .features-list li   { color: var(--lt-text-body) !important; }
.course-comparison .ideal-for p        { color: var(--lt-text) !important; }

/* -- Journey -- */
.journey-section {
  background: var(--lt-section-bg) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.journey-title         { color: var(--lt-text) !important; }
.journey-subtitle      { color: var(--lt-text-body) !important; }
.js-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 16px var(--lt-shadow) !important;
}
.journey-stepper-item:hover .js-card {
  box-shadow: 0 14px 38px rgba(204,34,224,0.2) !important;
}
.js-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
}
.js-card-title  { color: var(--lt-text) !important; }
.js-card-desc   { color: var(--lt-text-body) !important; }
.js-pill {
  background: rgba(204,34,224,0.06) !important;
  border-color: rgba(204,34,224,0.18) !important;
  color: var(--lt-text-body) !important;
}

/* -- WCL -- */
.wcl-section {
  background: var(--lt-section-bg) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.wcl-title      { color: var(--lt-text) !important; }
.wcl-subtitle   { color: var(--lt-text-body) !important; }
.wcl-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 18px var(--lt-shadow) !important;
}
.wcl-card:hover {
  box-shadow: 0 16px 44px rgba(204,34,224,0.2) !important;
  border-color: rgba(204,34,224,0.38) !important;
}
.wcl-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 30px rgba(204,34,224,0.35) !important;
}
.wcl-card-title { color: var(--lt-text) !important; }
.wcl-card-desc  { color: var(--lt-text-body) !important; }

/* -- Modules carousel -- */
.modules-redesign {
  background: var(--lt-section-bg) !important;
}
.modules-main-heading { color: var(--lt-text) !important; }
.modules-redesign .aiCard {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 18px var(--lt-shadow) !important;
  background-image: none !important;
}
.modules-redesign .aiCard:hover {
  border-color: rgba(204,34,224,0.38) !important;
  box-shadow: 0 12px 36px rgba(204,34,224,0.18) !important;
  background: var(--lt-bg-alt) !important;
}
.modules-redesign .aiCard:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
}
.module-card-title              { color: var(--lt-text) !important; }
.modules-redesign .aiCard li    { color: var(--lt-text-body) !important; }
.modules-redesign .aiCard ul li::before { color: var(--lt-purple) !important; }

/* -- DM Skills -- */
.dm-skills-section {
  background: var(--lt-section-bg) !important;
}
.dm-skills-heading { color: var(--lt-text) !important; }
.dm-skill-item { color: #000000 !important; border-bottom-color: rgba(204,34,224,0.14) !important; }
.dm-skill-item:first-child { border-top-color: rgba(204,34,224,0.14) !important; }
.dm-skill-item span:not(.dm-skill-icon) { color: #000000 !important; }
.dm-skill-icon {
  background: rgba(204,34,224,0.06) !important;
  border-color: rgba(204,34,224,0.22) !important;
  color: #CC22E0 !important;
}
.dm-skill-icon svg { stroke: #CC22E0 !important; }
.dm-skill-icon--ai {
  background: rgba(204,34,224,0.1) !important;
  border-color: rgba(204,34,224,0.35) !important;
  color: #CC22E0 !important;
}
.dm-skill-item:hover { color: #CC22E0 !important; }
.dm-skill-item:hover .dm-skill-icon {
  background: rgba(204,34,224,0.16) !important;
  border-color: #CC22E0 !important;
  color: #CC22E0 !important;
}

/* -- Live projects -- */
.live-projects-section {
  background: var(--lt-section-bg) !important;
}
.live-projects-heading { color: var(--lt-text) !important; }
.lp-sticky-panel       { background: var(--lt-section-bg) !important; }
.live-project-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 6px 24px var(--lt-shadow) !important;
}
.live-project-card:hover {
  border-color: rgba(204,34,224,0.42) !important;
  box-shadow: 0 14px 44px rgba(204,34,224,0.2) !important;
}
.live-project-card:active,
.lp-scroll-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 10px 36px rgba(204,34,224,0.38) !important;
}
.lp-project-title          { color: var(--lt-text) !important; }
.lp-project-desc           { color: var(--lt-text-body) !important; }
.lp-project-duration       { color: var(--lt-text-muted) !important; }
.lp-project-duration strong{ color: var(--lt-text) !important; }
.lp-right-list li          { color: var(--lt-text-body) !important; border-bottom-color: var(--lt-border) !important; }
.lp-brand-note             { color: var(--lt-text-muted) !important; }
.lp-tools-row {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 16px var(--lt-shadow) !important;
}
.lp-tool-chip {
  background: var(--lt-bg-alt) !important;
  border-color: var(--lt-border) !important;
  color: var(--lt-text) !important;
}

/* -- DM Tools carousel -- */
.dm-tools-section {
  background: var(--lt-section-bg) !important;
  border-top-color: var(--lt-border) !important;
  border-bottom-color: var(--lt-border) !important;
}
.dm-tools-heading { color: var(--lt-text) !important; }
.dm-tools-copy    { color: var(--lt-text-body) !important; }
.dm-tool-card {
  background: #ffffff !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 2px 10px var(--lt-shadow) !important;
}
.dm-tool-name { color: var(--lt-text) !important; }
.dm-tool-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 6px 20px rgba(204,34,224,0.35) !important;
}

/* -- Cert section -- */
.cert-section {
  background: var(--lt-section-bg) !important;
}
.cert-title, .cert-sub-heading { color: var(--lt-text) !important; }
.cert-para                      { color: var(--lt-text-body) !important; }
.cert-para strong               { color: var(--lt-text) !important; }
.cert-img {
  box-shadow: 0 8px 40px rgba(204,34,224,0.22) !important;
  filter: drop-shadow(0 0 16px rgba(204,34,224,0.18));
}

/* -- Mentors -- */
.mentors-section {
  background: var(--lt-section-bg) !important;
}
.mentors-title    { color: var(--lt-text) !important; }
.mentors-subtitle { color: var(--lt-text-body) !important; }
.mentor-card {
  background: #ffffff !important;
  border-color: rgba(204,34,224,0.18) !important;
  box-shadow: 0 4px 20px rgba(204,34,224,0.1) !important;
}
.mentor-card:hover {
  box-shadow: 0 16px 44px rgba(204,34,224,0.22), 0 0 0 1px rgba(204,34,224,0.18) !important;
}
.mentor-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 10px 36px rgba(204,34,224,0.35) !important;
}

/* -- Gallery -- */
.gallerySection {
  background: var(--lt-section-bg) !important;
}
.galleryContainer h2 { color: var(--lt-text) !important; }
.campus-desc         { color: var(--lt-text-body) !important; }
.campus-feature-card {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 2px 10px var(--lt-shadow) !important;
}
.campus-feature-card:hover {
  border-color: rgba(204,34,224,0.42) !important;
  box-shadow: 0 8px 28px rgba(204,34,224,0.18) !important;
}
.campus-feature-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 6px 20px rgba(204,34,224,0.35) !important;
}
.feature-text strong { color: var(--lt-text) !important; }
.feature-text p      { color: var(--lt-text-body) !important; }
.campus-photo-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
}

/* -- Achievements (CardContainer) -- */
.CardContainer {
  background: var(--lt-section-bg) !important;
}
.CardContainer h2       { color: var(--lt-text) !important; }
.introDataContainer li  { color: var(--lt-text-body) !important; }

/* -- Testimonials (video cards) -- */
.testimonials-section {
  background: var(--lt-section-bg) !important;
}
.testimonials-eyebrow {
  color: #ffffff !important;
  background: linear-gradient(90deg, #CC22E0, #AA00CC) !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 14px rgba(204,34,224,0.45) !important;
}
.testimonials-title       { color: var(--lt-text) !important; }
.testimonials-title span  {
  background: linear-gradient(90deg, #CC22E0, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.testimonials-underline   { background: linear-gradient(90deg, #CC22E0, #AA00CC) !important; }
.testimonial-card {
  background: #ffffff !important;
  border-color: rgba(204,34,224,0.28) !important;
  box-shadow: 0 6px 24px rgba(204,34,224,0.14) !important;
}
.testimonial-card p      { color: var(--lt-text-body) !important; }
.testimonial-card .author { color: var(--lt-text-muted) !important; }
.testimonial-card:hover {
  box-shadow: 0 14px 44px rgba(204,34,224,0.26) !important;
  border-color: rgba(204,34,224,0.45) !important;
}
.testimonial-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
}

/* -- Reviews section -- */
.reviews-section {
  background: var(--lt-section-bg) !important;
}
.reviews-eyebrow {
  color: #ffffff !important;
  background: linear-gradient(90deg, #CC22E0, #AA00CC) !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow: 0 0 14px rgba(204,34,224,0.45) !important;
}
.reviews-title            { color: var(--lt-text) !important; }
.reviews-title span {
  background: linear-gradient(90deg, #CC22E0, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.reviews-underline        { background: linear-gradient(90deg, #CC22E0, #AA00CC) !important; }
.review-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(204,34,224,0.25) !important;
  box-shadow: 0 4px 18px rgba(204,34,224,0.12) !important;
}
.review-card:hover {
  box-shadow: 0 14px 44px rgba(204,34,224,0.24), 0 0 0 1px rgba(204,34,224,0.3) !important;
  border-color: rgba(204,34,224,0.45) !important;
}
.review-card:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
}
.review-stars             { color: #CC22E0 !important; text-shadow: 0 0 8px rgba(204,34,224,0.5) !important; }
.review-text              { color: var(--lt-text-body) !important; }
.review-author            { border-top-color: rgba(204,34,224,0.2) !important; }
.review-author-info strong{ color: var(--lt-text) !important; }
.review-author-info span  { color: var(--lt-text-muted) !important; }
.review-avatar            { background: linear-gradient(135deg, #CC22E0, #AA00CC) !important; }

/* -- FAQs -- */
.faqs {
  background: var(--lt-section-bg) !important;
}
.faqs h2     { color: var(--lt-text) !important; }
.faqDetails  { color: var(--lt-text-body) !important; }
.faq, details {
  background: #ffffff !important;
  border-color: var(--lt-border) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 2px 10px var(--lt-shadow) !important;
}
details:hover {
  border-color: rgba(204,34,224,0.38) !important;
  box-shadow: 0 6px 24px rgba(204,34,224,0.16) !important;
}
details:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 6px 20px rgba(204,34,224,0.35) !important;
}
details summary { color: var(--lt-text) !important; }
details p       { color: var(--lt-text-body) !important; }

/* -- Stat blocks -- */
.stat-block {
  box-shadow: 0 4px 20px rgba(204,34,224,0.2) !important;
}
.stat-block:hover {
  box-shadow: 0 12px 40px rgba(204,34,224,0.28) !important;
}
.stat-block:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.55), 0 8px 30px rgba(204,34,224,0.38) !important;
}

/* -- Global button active glow -- */
button:active,
a.buttonHeroBanner:active,
a.highlight-contact-btn:active,
a.campus-cta:active,
a.placements-cta:active,
.lp-highlight-link:active {
  box-shadow: 0 0 0 3px rgba(204,34,224,0.55), 0 8px 32px rgba(204,34,224,0.4) !important;
  outline: none !important;
}

/* -- DM skill item hover -- */
.dm-skill-item {
  border-radius: 10px;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 6px 10px;
}
.dm-skill-item:hover {
  background: rgba(204,34,224,0.07) !important;
  box-shadow: 0 4px 16px rgba(204,34,224,0.15) !important;
}
.dm-skill-item:active {
  box-shadow: 0 0 0 2px rgba(204,34,224,0.5), 0 4px 14px rgba(204,34,224,0.3) !important;
}

/* -- Key points list -- */
.key-points-list li { color: #000000 !important; }
.key-points-list li::before {
  content: '✓' !important;
  color: var(--lt-purple) !important;
  text-shadow: 0 0 8px rgba(204,34,224,0.6) !important;
}

/* -- Skills tag (module cards) -- */
.skills-tag {
  background: rgba(204,34,224,0.07) !important;
  border-color: rgba(204,34,224,0.25) !important;
  color: var(--lt-purple) !important;
}

/* -- Line dividers -- */
.solid  { background: var(--lt-border) !important; }
.dashed { border-color: var(--lt-border) !important; }

/* ------------------------------------------------------
   BRIGHT BUTTON OVERRIDES (light theme)
   All CTA / nav / carousel buttons ? vivid neon purple
------------------------------------------------------ */

/* Primary CTA: "Book Demo" hero banner button */
.buttonHeroBanner {
  background: linear-gradient(135deg, #CC22E0 0%, #A000C8 100%) !important;
  background-size: 100% 200% !important;
  border: 1.5px solid rgba(204,34,224,0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 22px rgba(204,34,224,0.55) !important;
  transition: transform 0.2s, box-shadow 0.2s, background-position 0.4s !important;
}
.buttonHeroBanner:hover {
  background-position: bottom !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(204,34,224,0.7) !important;
}
.buttonHeroBanner .arrorSection {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* "Contact us" highlight button */
.highlight-contact-btn {
  background: linear-gradient(90deg, #CC22E0 0%, #AA00CC 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(204,34,224,0.55) !important;
  border: none !important;
}
.highlight-contact-btn:hover {
  box-shadow: 0 8px 30px rgba(204,34,224,0.72) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}

/* Placements CTA */
.placements-cta {
  background: linear-gradient(135deg, #CC22E0 0%, #CC22E0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 22px rgba(204,34,224,0.58) !important;
}
.placements-cta:hover {
  background: linear-gradient(135deg, #CC22E0 0%, #AA00CC 100%) !important;
  box-shadow: 0 8px 32px rgba(204,34,224,0.75) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}

/* Gallery / campus CTA */
.campus-cta {
  background: linear-gradient(135deg, #CC22E0 0%, #AA00CC 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 22px rgba(204,34,224,0.55) !important;
  border: none !important;
}
.campus-cta:hover {
  background: linear-gradient(135deg, #B400CC 0%, #8800BB 100%) !important;
  box-shadow: 0 8px 32px rgba(204,34,224,0.72) !important;
}

/* Live-projects highlight link */
.lp-highlight-link {
  color: #CC22E0 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(204,34,224,0.35) !important;
}
.lp-highlight-link:hover {
  color: #CC22E0 !important;
  text-shadow: 0 0 14px rgba(204,34,224,0.6) !important;
}

/* Mentors carousel prev/next buttons */
.mentors-carousel-btn {
  background: linear-gradient(135deg, #CC22E0, #AA00CC) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(204,34,224,0.5) !important;
}
.mentors-carousel-btn:hover {
  background: linear-gradient(135deg, #D400F2, #A800D8) !important;
  box-shadow: 0 6px 24px rgba(204,34,224,0.7) !important;
}
.mentors-carousel-btn:disabled {
  background: rgba(204,34,224,0.18) !important;
  color: rgba(204,34,224,0.5) !important;
  box-shadow: none !important;
}

/* Modules carousel prev/next buttons */
.modules-carousel-btn {
  background: linear-gradient(135deg, #CC22E0, #AA00CC) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(204,34,224,0.5) !important;
}
.modules-carousel-btn:hover {
  background: linear-gradient(135deg, #D400F2, #A800D8) !important;
  box-shadow: 0 6px 24px rgba(204,34,224,0.7) !important;
}
.modules-carousel-btn:disabled {
  background: rgba(204,34,224,0.18) !important;
  color: rgba(204,34,224,0.5) !important;
  box-shadow: none !important;
}

/* Form submit button */
.submitButton,
input[type="submit"] {
  background: linear-gradient(135deg, #CC22E0 0%, #AA00CC 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(204,34,224,0.5) !important;
  cursor: pointer !important;
}
.submitButton:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #D400F2 0%, #A800D8 100%) !important;
  box-shadow: 0 6px 26px rgba(204,34,224,0.68) !important;
}

/* FOMO bar CTA */
.fomo-bottom-cta {
  background: linear-gradient(135deg, #CC22E0 0%, #AA00CC 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(204,34,224,0.5) !important;
  cursor: pointer !important;
}
.fomo-bottom-cta:hover {
  background: linear-gradient(135deg, #CC22E0 0%, #AA00CC 100%) !important;
  box-shadow: 0 6px 26px rgba(204,34,224,0.7) !important;
}

/* Cert carousel dots (active) */
.cert-dot.active,
.lp-dot.active,
.modules-dot.active,
.mentors-dot.active {
  background: #CC22E0 !important;
  box-shadow: 0 0 8px rgba(204,34,224,0.7) !important;
}

/* Calendar nav buttons */
.bd-cal-nav button {
  color: #AA00CC !important;
}
.bd-cal-nav button:hover {
  background: rgba(204,34,224,0.18) !important;
  color: #CC22E0 !important;
}

/* ================================================================
   COMPREHENSIVE TEXT COLOUR OVERRIDES — light theme
   #000000 headings | #CC22E0 accents | rgba(0,0,0,0.65) body
================================================================ */

/* --- Hero Banner --- */
.mainHeader                  { color: #ffffff !important; }
.details                     { color: rgba(0,0,0,0.65) !important; }
.key-points-list li          { color: rgba(0,0,0,0.65) !important; }

/* --- Skills Section --- */
.dark-theme h2               { color: #000000 !important; }
.dark-theme h3               { color: #000000 !important; }
.skills-meta                 { color: rgba(0,0,0,0.65) !important; }
.dark-theme .skills-meta     { color: rgba(0,0,0,0.65) !important; }

/* --- Why Choose --- */
.why-choose-container h2     { color: #000000 !important; }
.benefit-item                { color: rgba(0,0,0,0.65) !important; }
.highlights-card li          { color: rgba(0,0,0,0.65) !important; }

/* --- Placements --- */
.placements-heading          { color: #000000 !important; }
.placements-heading span     { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.placements-desc             { color: rgba(0,0,0,0.65) !important; }
.company-name                { color: #000000 !important; }

/* --- Programs --- */
.programs-heading            { color: #000000 !important; }
.programs-heading span       { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.program-title               { color: #000000 !important; }
.program-description         { color: rgba(0,0,0,0.65) !important; }

/* --- Course Comparison --- */
.comparison-header h2        { color: #000000 !important; }
.comparison-header p         { color: rgba(0,0,0,0.65) !important; }
.card-header h3              { color: #000000 !important; }
.features-list li            { color: rgba(0,0,0,0.65) !important; }

/* --- Journey --- */
.journey-title               { color: #000000 !important; }
.journey-title span          { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.journey-subtitle            { color: rgba(0,0,0,0.65) !important; }
.js-card-title               { color: #000000 !important; }
.js-card-desc                { color: rgba(0,0,0,0.65) !important; }

/* --- Who This Course is For (WCL) --- */
.wcl-title                   { color: #000000 !important; }
.wcl-title span              { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.wcl-subtitle                { color: rgba(0,0,0,0.65) !important; }
.wcl-card-title              { color: #000000 !important; }
.wcl-card-desc               { color: rgba(0,0,0,0.65) !important; }

/* --- Modules --- */
.modules-main-heading        { color: #000000 !important; }
.modules-main-heading span   { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.module-card-title           { color: #000000 !important; }
.modules-redesign .aiCard li { color: rgba(0,0,0,0.65) !important; }

/* --- DM Skills --- */
.dm-skills-heading                      { color: #000000 !important; }
.dm-skills-heading span                 { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.dm-skill-item span:not(.dm-skill-icon) { color: #000000 !important; }

/* --- DM Tools --- */
.dm-tools-heading            { color: #000000 !important; }
.dm-tools-heading span       { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.dm-tools-copy               { color: rgba(0,0,0,0.65) !important; }
.dm-tool-name                { color: #000000 !important; }

/* --- Live Projects --- */
.live-projects-heading       { color: #000000 !important; }
.live-projects-heading span  { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.lp-project-title            { color: #000000 !important; }
.lp-project-desc             { color: rgba(0,0,0,0.65) !important; }

/* --- Certification --- */
.cert-title                  { color: #000000 !important; }
.cert-sub-heading            { color: #000000 !important; }
.cert-para                   { color: rgba(0,0,0,0.65) !important; }
.cert-para strong            { color: #000000 !important; }

/* --- Mentors --- */
.mentors-eyebrow             { color: #ffffff !important; background: linear-gradient(90deg, #CC22E0, #AA00CC) !important; }
.mentors-title               { color: #000000 !important; }
.mentors-title span          { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.mentors-subtitle            { color: rgba(0,0,0,0.65) !important; }
.mentor-name                 { color: #000000 !important; }
.mentor-desc                 { color: rgba(0,0,0,0.65) !important; }
.mentor-exp                  { color: rgba(0,0,0,0.45) !important; }

/* --- Testimonials --- */
.testimonials-title          { color: #000000 !important; }
.testimonials-title span     { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.testimonial-card p          { color: rgba(0,0,0,0.65) !important; }
.testimonial-card .author    { color: rgba(0,0,0,0.45) !important; }

/* --- Reviews --- */
.reviews-title               { color: #000000 !important; }
.reviews-title span          { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.review-text                 { color: rgba(0,0,0,0.65) !important; }
.review-author-info strong   { color: #000000 !important; }
.review-author-info span     { color: rgba(0,0,0,0.45) !important; }

/* --- Gallery / Campus --- */
.galleryContainer h2         { color: #000000 !important; }
.campus-desc                 { color: rgba(0,0,0,0.65) !important; }
.feature-text strong         { color: #FAFAFA !important; }
.feature-text p              { color: #FAFAFA !important; }
.campus-photo-card .photo-label { color: #ffffff !important; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%) !important; z-index: 10 !important; font-size: 0.92rem !important; font-weight: 700 !important; padding: 30px 6px 10px !important; text-shadow: 0 2px 6px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,1) !important; }

/* --- FAQs --- */
.faqs h2                     { color: #000000 !important; }
details summary              { color: #000000 !important; }
details p                    { color: rgba(0,0,0,0.65) !important; }
.faqDetails                  { color: rgba(0,0,0,0.65) !important; }

/* --- Achievements --- */
.CardContainer h2            { color: #000000 !important; }
.introDataContainer li       { color: rgba(0,0,0,0.65) !important; }

/* --- Book Demo --- */
.book-demo-title             { color: #000000 !important; }
.book-demo-title span        { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.book-demo-subtitle          { color: rgba(0,0,0,0.65) !important; }
.bdf-field label             { color: rgba(0,0,0,0.65) !important; }

/* ================================================================
   UNIFIED SECTION HEADING FONT STYLE
   Reference: .mentors-title — clamp(1.8rem,4vw,2.6rem) / 800 / #000
================================================================ */
.placements-heading,
.programs-heading,
.journey-title,
.wcl-title,
.modules-main-heading,
.dm-skills-heading,
.dm-tools-heading,
.live-projects-heading,
.cert-title,
.mentors-title,
.testimonials-title,
.reviews-title,
.galleryContainer h2,
.CardContainer h2,
.faqs h2,
.why-choose-container h2,
.book-demo-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #000000 !important;
}

/* Accent spans inside every section heading → gradient */
.placements-heading span,
.programs-heading span,
.journey-title span,
.wcl-title span,
.modules-main-heading span,
.dm-skills-heading span,
.dm-tools-heading span,
.live-projects-heading span,
.cert-title span,
.mentors-title span,
.testimonials-title span,
.reviews-title span,
.galleryContainer h2 span,
.CardContainer h2 span,
.faqs h2 span,
.book-demo-title span,
.cc-highlight {
  background: linear-gradient(90deg, #CC22E0, #7c3aed) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}



/* ===================================================================
   MIGRATED — expert-digital-marketing-course.php inline styles
   =================================================================== */
    /* -- Book Demo Section -- */
    .book-demo-section {
      background-color: #0d1117;
      background-image:
        radial-gradient(circle at 110% 50%, rgba(117,34,126,0.1) 1%, transparent 26%),
        radial-gradient(circle at -10% 50%, rgba(117,34,126,0.1) 1%, transparent 26%);
      padding: 80px 20px;
      border-top: 1px solid #2a2f3a;
      border-bottom: 1px solid #2a2f3a;
    }
    .book-demo-inner {
      max-width: 1440px;
      margin: 0 auto;
    }

    /* -- Header -- */
    .book-demo-header {
      text-align: center;
      margin-bottom: 52px;
    }
    .book-demo-eyebrow {
      display: inline-block;
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 7px 20px;
      border-radius: 50px;
      background: linear-gradient(90deg, #CC22E0, #AA00CC);
      border: 1px solid rgba(255,255,255,0.15);
      margin-bottom: 14px;
      box-shadow: 0 0 16px rgba(204,34,224,0.55), 0 2px 8px rgba(0,0,0,0.3);
    }
    .book-demo-title {
      color: #ffffff;
      font-size: clamp(1.9rem, 2.8vw, 2.8rem);
      font-weight: 800;
      line-height: 1.15;
      margin: 0 0 14px;
    }
    .book-demo-title span { background: linear-gradient(90deg, #CC22E0, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .book-demo-underline {
      width: 60px; height: 4px;
      background: #CC22E0;
      border-radius: 2px;
      margin: 0 auto 18px;
    }
    .book-demo-subtitle {
      color: rgba(220,228,239,0.6);
      font-size: 1rem;
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ------------------------------------------
       WHY CHOOSE ? REDESIGN
    ------------------------------------------ */
    .why-choose-section {
      padding: 80px 20px !important;
      border-bottom: 1px solid #2a2f3a;
    }
    .why-choose-container {
      max-width: 1100px !important;
      margin: 0 auto !important;
    }
    .why-choose-container h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
      font-weight: 800 !important;
      color: #ffffff !important;
      text-align: center !important;
      margin-bottom: 48px !important;
      line-height: 1.25 !important;
    }
    .diamond-mark { color: #CC22E0 !important; }

    .why-choose-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 28px !important;
      align-items: start !important;
    }
    @media (max-width: 780px) {
      .why-choose-grid { grid-template-columns: 1fr !important; }
    }

    /* Benefits card */
    .benefits-card {
      background: #ffffff !important;
      border: 1px solid rgba(0,0,0,0.08) !important;
      border-radius: 16px !important;
      padding: 32px 28px !important;
      transition: border-color .3s, box-shadow .3s !important;
    }
    .benefits-card:hover {
      border-color: rgba(204,34,224,.5) !important;
      box-shadow: 0 0 28px rgba(204,34,224,.1) !important;
    }
    .benefits-title {
      display: block !important;
      width: auto !important;
      text-align: center !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      letter-spacing: .14em !important;
      text-transform: uppercase !important;
      color: #CC22E0 !important;
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 0 24px !important;
      margin: 0 auto 0 !important;
    }
    .benefits-list {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px 14px !important;
    }
    .benefit-item {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-size: .9rem !important;
      font-weight: 600 !important;
      color: rgba(0,0,0,.85) !important;
      background: #f5f5f5 !important;
      border: 1px solid rgba(0,0,0,0.08) !important;
      border-radius: 10px !important;
      padding: 10px 12px !important;
      transition: border-color .2s, background .2s, color .2s, transform .2s !important;
      cursor: default !important;
    }
    .benefit-item:hover {
      border-color: rgba(204,34,224,.5) !important;
      background: rgba(204,34,224,.07) !important;
      color: #ffffff !important;
      transform: translateY(-2px) !important;
    }
    .benefit-no {
      flex-shrink: 0 !important;
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
      font-size: .78rem !important;
      background: rgba(204,34,224,.18) !important;
      color: #CC22E0 !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 800 !important;
      transition: background .2s !important;
    }
    .benefit-item:hover .benefit-no {
      background: #CC22E0 !important;
      color: #fff !important;
    }

    /* Highlights card */
    .highlights-card {
      background: #ffffff !important;
      border: 1px solid rgba(0,0,0,0.08) !important;
      border-radius: 16px !important;
      padding: 32px 28px !important;
      transition: border-color .3s, box-shadow .3s !important;
    }
    .highlights-card:hover {
      border-color: rgba(204,34,224,.5) !important;
      box-shadow: 0 0 28px rgba(204,34,224,.1) !important;
    }
    .highlights-card h3 {
      font-size: 1.1rem !important;
      font-weight: 800 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
      color: #CC22E0 !important;
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      display: block !important;
      margin-bottom: 22px !important;
    }
    .highlights-card ul {
      padding-left: 0 !important;
      list-style: none !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px 14px !important;
      margin-bottom: 24px !important;
    }
    .highlights-card li {
      font-size: .9rem !important;
      color: #111111 !important;
      line-height: 1.4 !important;
      padding: 8px 10px 8px 32px !important;
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      border-bottom: 1px solid rgba(204,34,224,0.1) !important;
      position: relative !important;
      transition: color .2s !important;
    }
    .highlights-card li::before {
      content: '✓' !important;
      position: absolute !important;
      left: 10px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      color: #CC22E0 !important;
      font-weight: 800 !important;
      font-size: .85rem !important;
    }
    .highlights-card li:hover {
      border-bottom-color: rgba(204,34,224,0.4) !important;
      color: #CC22E0 !important;
      transform: none !important;
    }
    .highlight-contact-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      background: linear-gradient(90deg, #CC22E0, #AA00CC) !important;
      color: #fff !important;
      font-weight: 700 !important;
      font-size: .95rem !important;
      padding: 12px 32px !important;
      border-radius: 10px !important;
      text-decoration: none !important;
      transition: opacity .2s, transform .2s, box-shadow .2s !important;
    }
    .highlight-contact-btn:hover {
      opacity: .92 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(204,34,224,.45) !important;
    }

    /* ------------------------------------------
       GLOBAL HOVER EFFECTS ? CARDS & BUTTONS
    ------------------------------------------ */

    /* Stat blocks */
    .stat-block {
      transition: transform .2s, box-shadow .2s !important;
    }
    .stat-block:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    }

    /* Live project cards */
    .live-project-card {
      transition: border-color .25s, box-shadow .25s !important;
    }
    .live-project-card:hover {
      border-color: rgba(204,34,224,.45) !important;
      box-shadow: 0 6px 30px rgba(204,34,224,.12) !important;
    }

    /* Testimonial cards */
    .testimonial-card {
      transition: border-color .25s, box-shadow .25s, transform .25s !important;
    }
    .testimonial-card:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 8px 30px rgba(204,34,224,.18) !important;
    }

    /* Review cards */
    .review-card {
      transition: border-color .25s, box-shadow .25s, transform .25s !important;
    }
    .review-card:hover {
      border-color: rgba(204,34,224,.45) !important;
      box-shadow: 0 6px 28px rgba(204,34,224,.15) !important;
      transform: translateY(-3px) !important;
    }

    /* Benefit items & highlight list items already handled above */

    /* Placements CTA button */
    .placements-cta {
      transition: opacity .2s, transform .2s, box-shadow .2s !important;
    }
    .placements-cta:hover {
      opacity: .9 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
    }

    /* Program cards ? lift on hover */
    .program-card {
      transition: transform .25s, box-shadow .25s !important;
    }
    .program-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 12px 40px rgba(204,34,224,.22) !important;
    }

    /* lp highlight link */
    .lp-highlight-link {
      transition: color .2s, gap .2s !important;
    }
    .lp-highlight-link:hover {
      color: #CC22E0 !important;
    }

    /* Hero banner button */
    .buttonHeroBanner {
      transition: transform .2s, box-shadow .2s !important;
    }
    .buttonHeroBanner:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
    }

    /* Mentor cards ? light theme overrides */
    .mentor-card {
      transition: transform .25s, box-shadow .25s !important;
      flex: 0 0 calc(25% - 18px);
      min-width: 260px;
      background: #ffffff !important;
      border-color: #e8dff8 !important;
    }
    .mentor-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 18px 48px rgba(204,34,224,0.18) !important;
    }

    /* -- Mentor Carousel -- */
    .mentors-carousel-wrap {
      overflow: hidden;
      position: relative;
    }
    .mentors-track {
      display: flex;
      gap: 24px;
      transition: transform 0.45s cubic-bezier(.4,0,.2,1);
      will-change: transform;
    }
    .mentors-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 36px;
    }
    .mentors-carousel-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(204,34,224,0.4);
      background: rgba(204,34,224,0.07);
      color: #CC22E0;
      font-size: 1.6rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, border-color .2s, transform .2s;
      line-height: 1;
      flex-shrink: 0;
    }
    .mentors-carousel-btn:hover {
      background: rgba(204,34,224,0.15);
      border-color: #CC22E0;
      transform: scale(1.1);
    }
    .mentors-carousel-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: scale(1);
    }
    .mentors-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .mentors-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(204,34,224,0.2);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background .25s, transform .25s;
    }
    .mentors-dot.active {
      background: #CC22E0;
      transform: scale(1.35);
    }
    @media (max-width: 1100px) {
      .mentor-card { flex: 0 0 calc(50% - 12px); min-width: 240px; }
    }
    @media (max-width: 600px) {
      .mentor-card { flex: 0 0 calc(100% - 0px); min-width: 0; max-width: 100%; }
    }

    /* FAQ items */
    .faq-item {
      transition: border-color .2s, background .2s !important;
    }
    .faq-item:hover {
      border-color: rgba(204,34,224,.4) !important;
      background: rgba(204,34,224,.04) !important;
    }

    /* Programs grid: 3 cards centered -- */
    .programs-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
      gap: 28px !important;
    }
    .programs-header {
      max-width: 960px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }
    .programs-copy {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* -- Two-column layout -- */
    .book-demo-layout {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 32px;
      align-items: start;
    }
    @media (max-width: 860px) {
      .book-demo-layout { grid-template-columns: 1fr; }
    }

    /* -- Calendar panel (left) -- */
    .bd-calendar-panel {
      background: #1a1a2e;
      border: 1px solid #2d2d50;
      border-radius: 16px;
      padding: 28px 24px;
    }
    .bd-cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .bd-cal-month-label {
      color: #ffffff;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .bd-cal-nav { display: flex; gap: 8px; }
    .bd-cal-nav button {
      width: 32px; height: 32px;
      background: rgba(204,34,224,0.1);
      border: 1px solid rgba(204,34,224,0.25);
      border-radius: 8px;
      color: #CC22E0;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
      line-height: 1;
    }
    .bd-cal-nav button:hover { background: rgba(204,34,224,0.22); }
    .bd-cal-dow {
      display: grid;
      grid-template-columns: repeat(7,1fr);
      margin-bottom: 6px;
    }
    .bd-cal-dow span {
      text-align: center;
      font-size: 0.7rem;
      font-weight: 700;
      color: rgba(220,228,239,0.4);
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 4px 0;
    }
    .bd-cal-grid {
      display: grid;
      grid-template-columns: repeat(7,1fr);
      gap: 3px;
    }
    .bd-cal-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 500;
      color: #dce4ef;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
      width: 100%;
    }
    .bd-cal-day:hover:not(.disabled):not(.empty) {
      background: rgba(204,34,224,0.15);
      border-color: rgba(204,34,224,0.3);
    }
    .bd-cal-day.today {
      border-color: rgba(204,34,224,0.55);
      color: #CC22E0;
      font-weight: 700;
    }
    .bd-cal-day.selected {
      background: #CC22E0;
      border-color: #CC22E0;
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 0 12px rgba(204,34,224,0.5);
    }
    .bd-cal-day.disabled {
      color: rgba(220,228,239,0.18);
      cursor: not-allowed;
      pointer-events: none;
    }
    .bd-cal-day.empty { pointer-events: none; }
    .bd-selected-display {
      margin-top: 18px;
      padding: 11px 14px;
      border-radius: 10px;
      background: rgba(204,34,224,0.07);
      border: 1px solid rgba(204,34,224,0.2);
      font-size: 0.87rem;
      color: rgba(220,228,239,0.55);
      text-align: center;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .bd-selected-display .bd-sel-date {
      color: #CC22E0;
      font-weight: 700;
    }
    .bd-info-list {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bd-info-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(220,228,239,0.6);
      font-size: 0.85rem;
      line-height: 1.55;
    }
    .bd-info-item svg {
      flex-shrink: 0;
      width: 16px; height: 16px;
      color: #CC22E0;
      margin-top: 2px;
    }

    /* -- Form panel (right) -- */
    .book-demo-form-wrap {
      background: #11182a;
      border: 1px solid #2d2d50;
      border-radius: 16px;
      padding: 32px 28px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.45);
      box-sizing: border-box;
    }
    .book-demo-form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }
    .bdf-row {
      margin-bottom: 16px;
      width: 100%;
      box-sizing: border-box;
    }
    .bdf-row:last-child { margin-bottom: 0; }
    .bdf-row.two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 480px) {
      .bdf-row.two-col { grid-template-columns: 1fr; }
    }
    .bdf-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .bdf-field label {
      font-size: .82rem;
      font-weight: 600;
      color: rgba(220,228,239,0.85);
      line-height: 1.3;
    }
    .bdf-field label span { color: #f87171; }
    .bdf-field input,
    .bdf-field select,
    .bdf-field textarea {
      width: 100%;
      padding: 10px 13px;
      border: 1.5px solid #2d3748;
      border-radius: 8px;
      font-size: .9rem;
      line-height: 1.4;
      color: #e2e8f0;
      background: #0d1117;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      box-sizing: border-box;
      font-family: inherit;
      height: 42px;
      -webkit-appearance: none;
      appearance: none;
    }
    .bdf-field select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23CC22E0' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px;
      padding-right: 34px;
    }
    .bdf-field input::placeholder,
    .bdf-field textarea::placeholder { color: rgba(220,228,239,0.3); }
    .bdf-field select option { background: #0d1117; color: #e2e8f0; }
    .bdf-field input:focus,
    .bdf-field select:focus,
    .bdf-field textarea:focus {
      border-color: #CC22E0;
      box-shadow: 0 0 0 3px rgba(204,34,224,0.15);
    }
    .bdf-field textarea {
      height: auto;
      resize: vertical;
      min-height: 84px;
    }
    .bd-form-date-echo {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 13px;
      border: 1.5px solid #2d3748;
      border-radius: 8px;
      background: #0d1117;
      font-size: .9rem;
      color: rgba(220,228,239,0.32);
      height: 42px;
      transition: border-color .2s, color .2s;
      box-sizing: border-box;
      cursor: default;
    }
    .bd-form-date-echo.filled {
      color: #CC22E0;
      border-color: rgba(204,34,224,0.45);
    }
    .bd-form-date-echo svg { width: 16px; height: 16px; flex-shrink: 0; }
    .bdf-submit {
      width: 100%;
      padding: 13px;
      background: linear-gradient(90deg, #CC22E0, #AA00CC);
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      letter-spacing: .03em;
      transition: opacity .2s, transform .15s;
      margin-top: 4px;
      box-sizing: border-box;
    }
    .bdf-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
    .bdf-submit:disabled { opacity: .55; cursor: not-allowed; }
    .bdf-status {
      margin-top: 12px;
      font-size: .88rem;
      text-align: center;
    }
    .bdf-success {
      color: #6ee7b7;
      background: rgba(16,185,129,0.1);
      border: 1px solid rgba(16,185,129,0.3);
      border-radius: 8px;
      padding: 10px 14px;
      display: block;
    }
    .bdf-error {
      color: #c0392b;
      background: rgba(239,68,68,0.07);
      border: 1px solid rgba(239,68,68,0.25);
      border-radius: 8px;
      padding: 10px 14px;
      display: block;
    }

  /* -----------------------------------------------------------
     LIGHT THEME ? 80% white / 20% purple accent gradient
     Professional, classy, glowing accents + hover/click glow
  ----------------------------------------------------------- */

  /* --- CSS custom properties for the light palette --- */
  :root {
    --lt-bg:          #ffffff;
    --lt-bg-alt:      #f8f5ff;
    --lt-bg-soft:     #f3eeff;
    --lt-text:        #000000;
    --lt-text-body:   #111111;
    --lt-text-muted:  rgba(0,0,0,0.45);
    --lt-purple:      #CC22E0;
    --lt-purple-mid:  #CC22E0;
    --lt-border:      rgba(204,34,224,0.18);
    --lt-border-soft: rgba(204,34,224,0.1);
    --lt-card:        #ffffff;
    --lt-card-alt:    #faf7ff;
    --lt-shadow:      rgba(204,34,224,0.12);
    --lt-glow:        rgba(204,34,224,0.38);
    --lt-glow-text:   0 0 14px rgba(204,34,224,0.55), 0 0 30px rgba(204,34,224,0.25);
  }

  /* --- Base --- */
  body {
    background: var(--lt-bg) !important;
    color: var(--lt-text) !important;
  }

  /* --- Section backgrounds (dark ? light) --- */
  .skills-section.dark-theme,
  .dark-theme,
  .why-choose-section,
  .placements-section,
  .programs-section,
  .course-comparison,
  .live-projects-section,
  .dm-tools-section,
  .additionalContainer.modules-redesign,
  .faqs,
  .book-demo-section,
  .CardContainer,
  .lineContainer, .lineContainer1,
  .gallerySection,
  .testimonial-section.dark-theme {
    background-color: var(--lt-bg) !important;
    background-image: none !important;
    color: var(--lt-text) !important;
    border-top-color: var(--lt-border) !important;
    border-bottom-color: var(--lt-border) !important;
  }
  /* Alternate sections ? very pale purple tint */
  .dm-skills-section,
  .wcl-section,
  .journey-section,
  .cert-section,
  .mentors-section {
    background-color: var(--lt-bg-alt) !important;
    background-image:
      radial-gradient(ellipse at 110% 40%, rgba(204,34,224,0.09) 0%, transparent 50%),
      radial-gradient(ellipse at -10% 60%, rgba(204,34,224,0.07) 0%, transparent 50%) !important;
    color: var(--lt-text) !important;
    border-top-color: var(--lt-border) !important;
    border-bottom-color: var(--lt-border) !important;
  }

  /* --- Global text (scoped to course content only, NOT footer/navbar) --- */
  .MainContainer h1, .MainContainer h2, .MainContainer h3,
  .MainContainer h4, .MainContainer h5, .MainContainer h6,
  .placements-section h1, .placements-section h2, .placements-section h3,
  .programs-section h1, .programs-section h2, .programs-section h3,
  .course-comparison h1, .course-comparison h2, .course-comparison h3,
  .journey-section h1, .journey-section h2, .journey-section h3,
  .wcl-section h1, .wcl-section h2, .wcl-section h3,
  .modules-redesign h1, .modules-redesign h2, .modules-redesign h3,
  .dm-skills-section h1, .dm-skills-section h2, .dm-skills-section h3,
  .live-projects-section h1, .live-projects-section h2, .live-projects-section h3,
  .dm-tools-section h1, .dm-tools-section h2, .dm-tools-section h3,
  .cert-section h1, .cert-section h2, .cert-section h3,
  .mentors-section h1, .mentors-section h2, .mentors-section h3,
  .gallerySection h1, .gallerySection h2, .gallerySection h3,
  .testimonials-section h1, .testimonials-section h2, .testimonials-section h3,
  .reviews-section h1, .reviews-section h2, .reviews-section h3,
  .faqs h1, .faqs h2, .faqs h3,
  .CardContainer h1, .CardContainer h2, .CardContainer h3,
  .dark-theme h2, .why-choose-section h2, .book-demo-section h2
  { color: var(--lt-text) !important; }

  .MainContainer p, .MainContainer li, .MainContainer span, .MainContainer label,
  .placements-section p, .placements-section li, .placements-section span,
  .programs-section p, .programs-section li, .programs-section span,
  .course-comparison p, .course-comparison li, .course-comparison span,
  .journey-section p, .journey-section li, .journey-section span,
  .wcl-section p, .wcl-section li, .wcl-section span,
  .modules-redesign p, .modules-redesign li, .modules-redesign span,
  .dm-skills-section p, .dm-skills-section li, .dm-skills-section span,
  .live-projects-section p, .live-projects-section li, .live-projects-section span,
  .dm-tools-section p, .dm-tools-section li, .dm-tools-section span,
  .cert-section p, .cert-section li, .cert-section span,
  .mentors-section p, .mentors-section li, .mentors-section span,
  .gallerySection p, .gallerySection li, .gallerySection span,
  .testimonials-section p, .testimonials-section li, .testimonials-section span,
  .reviews-section p, .reviews-section li, .reviews-section span,
  .faqs p, .faqs li, .faqs span, .faqs label,
  .CardContainer p, .CardContainer li, .CardContainer span,
  .dark-theme p, .dark-theme li, .dark-theme span,
  .why-choose-section p, .why-choose-section li, .why-choose-section span,
  .book-demo-section p, .book-demo-section li, .book-demo-section span, .book-demo-section label
  { color: var(--lt-text-body) !important; }

  /* --- Footer: restore original dark-bg colours (DO NOT override) --- */
  .da-footer,
  .da-footer h3, .da-footer h4,
  .da-footer p, .da-footer li, .da-footer span, .da-footer label { color: #cccccc !important; }
  .da-footer .da-footer-title                                      { color: #ffffff !important; }
  .da-footer a, .da-footer .da-footer-contact                      { color: #4ab8ff !important; }
  .course-footer-links li a                                        { color: #cccccc !important; }
  .da-footer-about                                                  { color: #cccccc !important; }

  /* --- Navbar bottom strip: keep original purple-on-white --- */
  .navbar span, .bottom span                    { color: #4b1864 !important; }
  .navbar h1, .navbar h2, .navbar h3,
  .navbar h4, .navbar h5, .navbar h6,
  .navbar p, .navbar li, .navbar label          { color: #4b1864 !important; }
  .dropdown-title                               { color: #4b1864 !important; }
  .suggestion-tag, .search-result-title        { color: #4b1864 !important; }
  .search-result-description, .search-result-tag { color: #666666 !important; }

  /* --- Hero banner --- */
  .MainContainer:not(.bg-mesh), .container, .containerMain { background: transparent !important; }
  .mainHeader { color: #111111 !important; }
  .details { color: var(--lt-text-body) !important; }

  /* --- Skills meta bar --- */
  .dark-theme .skills-meta { color: rgba(0,0,0,0.55) !important; border-bottom-color: rgba(204,34,224,0.18) !important; }
  .dark-theme .skills-meta strong:not(.cc-highlight) { background: none !important; -webkit-text-fill-color: var(--lt-text) !important; color: var(--lt-text) !important; }
  .dark-theme h2 { color: var(--lt-text) !important; }

  /* Skill chips */
  .dark-theme .skill-chip {
    background: #ffffff !important;
    border-color: rgba(204,34,224,0.35) !important;
    color: var(--lt-text) !important;
    box-shadow: 0 2px 10px rgba(204,34,224,0.1) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
  }
  .dark-theme .skill-chip:hover {
    background: rgba(204,34,224,0.07) !important;
    border-color: #CC22E0 !important;
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 0 0 1px rgba(204,34,224,0.5), 0 6px 22px rgba(204,34,224,0.35) !important;
    color: #8800bb !important;
  }
  .dark-theme .skill-chip img.skill-icon {
    filter: none !important;
    transition: filter 0.25s ease, transform 0.25s ease !important;
  }
  .dark-theme .skill-chip:hover img.skill-icon {
    filter: none !important;
    transform: scale(1.15) !important;
  }

  /* --- Why Choose section cards --- */
  .benefits-card, .highlights-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  }
  .benefits-card:hover, .highlights-card:hover {
    border-color: rgba(204,34,224,0.45) !important;
    box-shadow: 0 12px 40px rgba(204,34,224,0.22) !important;
  }
  .benefit-item {
    background: var(--lt-bg-alt) !important;
    border-color: var(--lt-border) !important;
    color: var(--lt-text) !important;
  }
  .benefit-item:hover {
    background: rgba(204,34,224,0.07) !important;
    border-color: rgba(204,34,224,0.4) !important;
    color: var(--lt-text) !important;
    box-shadow: 0 4px 16px rgba(204,34,224,0.18) !important;
  }
  .highlights-card li {
    background: none !important;
    border-color: transparent !important;
    border-bottom: 1px solid rgba(204,34,224,0.1) !important;
    color: var(--lt-text-body) !important;
  }
  .highlights-card li:hover {
    background: none !important;
    border-color: transparent !important;
    color: #CC22E0 !important;
    box-shadow: 0 4px 14px rgba(204,34,224,0.16) !important;
  }
  .why-choose-container h2 { color: var(--lt-text) !important; }

  /* --- Placements stats --- */
  .placements-heading, .placements-desc { color: var(--lt-text) !important; }
  .placements-stars { color: #e6a800 !important; text-shadow: 0 0 8px rgba(230,168,0,0.6) !important; }
  .placements-stars span { color: var(--lt-text-muted) !important; }
  .placements-desc { color: var(--lt-text-body) !important; }
  .company-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--lt-text) !important;
    box-shadow: 0 2px 10px var(--lt-shadow) !important;
  }
  .company-name { color: var(--lt-text) !important; }
  .company-ctc-label { color: var(--lt-text-muted) !important; }
  .company-ctc { color: var(--lt-purple) !important; }

  /* --- Programs section cards --- */
  .program-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 20px var(--lt-shadow) !important;
  }
  .program-card:hover {
    border-color: rgba(204,34,224,0.45) !important;
    box-shadow: 0 16px 48px rgba(204,34,224,0.22) !important;
  }
  .program-title, .program-rating strong, .program-type { color: var(--lt-text) !important; }
  .program-description { color: var(--lt-text-body) !important; }
  .program-chip {
    background: rgba(204,34,224,0.07) !important;
    border-color: rgba(204,34,224,0.2) !important;
    color: var(--lt-purple) !important;
  }

  /* --- Course comparison cards --- */
  .course-comparison .comparison-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 20px var(--lt-shadow) !important;
  }
  .course-comparison .comparison-card.expert:hover    { box-shadow: 0 0 0 1px rgba(204,34,224,0.25), 0 8px 20px rgba(204,34,224,0.14), 0 20px 50px rgba(204,34,224,0.2) !important; border-color: rgba(204,34,224,0.55) !important; }
  .course-comparison .comparison-card.advanced:hover  { box-shadow: 0 0 0 1px rgba(59,130,246,0.2), 0 8px 20px rgba(59,130,246,0.14), 0 20px 50px rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.5) !important; }
  .course-comparison .comparison-card.professional:hover { box-shadow: 0 0 0 1px rgba(16,185,129,0.18), 0 8px 20px rgba(16,185,129,0.13), 0 20px 50px rgba(16,185,129,0.17) !important; border-color: rgba(16,185,129,0.48) !important; }
  .course-comparison .comparison-card.beginner:hover  { box-shadow: 0 0 0 1px rgba(251,191,36,0.18), 0 8px 20px rgba(251,191,36,0.13), 0 20px 50px rgba(251,191,36,0.17) !important; border-color: rgba(251,191,36,0.48) !important; }
  .cc-highlight { background: linear-gradient(90deg, #CC22E0, #7c3aed) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
  .course-comparison .card-header h3 { color: var(--lt-text) !important; }
  .course-comparison .card-header .duration { color: var(--lt-text-muted) !important; }
  .course-comparison .features-list li { color: var(--lt-text-body) !important; }
  .course-comparison .ideal-for p { color: var(--lt-text) !important; }
  .course-comparison .ideal-for h4 { color: var(--lt-text-muted) !important; }

  /* --- Journey stepper cards --- */
  .js-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 16px var(--lt-shadow) !important;
  }
  .journey-stepper-item:hover .js-card {
    box-shadow: 0 16px 40px rgba(204,34,224,0.2) !important;
  }
  .js-card-title { color: var(--lt-text) !important; }
  .js-card-desc { color: var(--lt-text-body) !important; }
  .js-pill {
    background: rgba(204,34,224,0.06) !important;
    border-color: rgba(204,34,224,0.18) !important;
    color: var(--lt-text-body) !important;
  }

  /* --- WCL cards --- */
  .wcl-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 18px var(--lt-shadow) !important;
  }
  .wcl-card:hover {
    box-shadow: 0 16px 44px rgba(204,34,224,0.22) !important;
    border-color: rgba(204,34,224,0.4) !important;
  }
  .wcl-card-title { color: var(--lt-text) !important; }
  .wcl-card-desc { color: var(--lt-text-body) !important; }

  /* --- Modules carousel cards --- */
  .modules-redesign,
  .additionalContainer.modules-redesign {
    background-color: var(--lt-bg) !important;
  }
  .modules-redesign .aiCard {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 18px var(--lt-shadow) !important;
  }
  .modules-redesign .aiCard:hover {
    border-color: rgba(204,34,224,0.4) !important;
    box-shadow: 0 12px 36px rgba(204,34,224,0.2) !important;
    background: var(--lt-bg-alt) !important;
  }
  .module-card-title { color: var(--lt-text) !important; }
  .modules-redesign .aiCard li { color: var(--lt-text-body) !important; }
  .modules-main-heading { color: var(--lt-text) !important; }

  /* --- DM Skills section --- */
  .dm-skills-heading { color: var(--lt-text) !important; }
  .dm-skill-item { color: #000000 !important; border-bottom-color: rgba(204,34,224,0.14) !important; }
  .dm-skill-item:first-child { border-top-color: rgba(204,34,224,0.14) !important; }
  .dm-skill-item span:last-child { color: #000000 !important; }
  .dm-skill-icon {
    background: rgba(204,34,224,0.06) !important;
    border-color: rgba(204,34,224,0.22) !important;
    color: #CC22E0 !important;
  }
  .dm-skill-icon svg { stroke: #CC22E0 !important; }
  .dm-skill-icon--ai {
    background: rgba(204,34,224,0.1) !important;
    border-color: rgba(204,34,224,0.35) !important;
    color: #CC22E0 !important;
  }
  .dm-skill-item:hover { color: #CC22E0 !important; }
  .dm-skill-item:hover .dm-skill-icon {
    background: rgba(204,34,224,0.16) !important;
    border-color: #CC22E0 !important;
    color: #CC22E0 !important;
  }
  .dm-skill-icon { color: var(--lt-text-body) !important; }
  .dm-skill-icon--ai {
    background: linear-gradient(135deg, #CC22E0, #AA00CC) !important;
    color: #fff !important;
  }

  /* --- Live projects section --- */
  .live-projects-heading { color: #ffffff !important; }
  .lp-sticky-panel {
    background: var(--lt-bg) !important;
  }
  .live-project-card, .lp-scroll-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 6px 24px var(--lt-shadow) !important;
  }
  .live-project-card:hover {
    border-color: rgba(204,34,224,0.45) !important;
    box-shadow: 0 14px 44px rgba(204,34,224,0.22) !important;
  }
  .lp-project-title { color: var(--lt-text) !important; }
  .lp-project-duration { color: var(--lt-text-muted) !important; }
  .lp-project-duration strong { color: var(--lt-text) !important; }
  .lp-project-desc { color: var(--lt-text-body) !important; }
  .lp-right-list li { color: var(--lt-text-body) !important; border-bottom-color: var(--lt-border) !important; }
  .lp-brand-note { color: var(--lt-text-muted) !important; }
  .lp-tools-row {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 16px var(--lt-shadow) !important;
  }
  .lp-tool-chip {
    background: var(--lt-bg-alt) !important;
    border-color: var(--lt-border) !important;
    color: var(--lt-text) !important;
  }
  .lp-tool-chip:hover {
    background: rgba(204,34,224,0.08) !important;
    border-color: rgba(204,34,224,0.35) !important;
  }
  .lp-deck-dot { background: rgba(204,34,224,0.2) !important; }
  .lp-deck-dot.active { background: var(--lt-purple) !important; }

  /* --- DM Tools carousel cards --- */
  .dm-tool-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 2px 10px var(--lt-shadow) !important;
  }
  .dm-tool-name { color: var(--lt-text) !important; }

  /* --- Certification section --- */
  .cert-title, .cert-sub-heading { color: #ffffff !important; }
  .cert-para { color: var(--lt-text-body) !important; }
  .cert-para strong { color: var(--lt-text) !important; }
  .cert-img { box-shadow: 0 8px 36px rgba(204,34,224,0.22) !important; }
  .cert-dot { background: rgba(204,34,224,0.2) !important; }
  .cert-dot.active { background: var(--lt-purple) !important; }

  /* --- Gallery section --- */
  .galleryContainer h2 { color: var(--lt-text) !important; }
  .campus-desc { color: var(--lt-text-body) !important; }
  .campus-feature-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 2px 10px var(--lt-shadow) !important;
  }
  .campus-feature-card:hover {
    border-color: rgba(204,34,224,0.45) !important;
    box-shadow: 0 8px 28px rgba(204,34,224,0.2) !important;
  }
  .feature-text strong { color: var(--lt-text) !important; }
  .feature-text p { color: var(--lt-text-body) !important; }

  /* --- Testimonials --- */
  .testimonial-section h2 { color: var(--lt-text) !important; }
  .testimonial-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 18px var(--lt-shadow) !important;
    color: var(--lt-text-body) !important;
  }
  .testimonial-card p { color: var(--lt-text-body) !important; }
  .testimonial-card .author { color: var(--lt-text-muted) !important; }
  .testimonial-card:hover {
    box-shadow: 0 12px 40px rgba(204,34,224,0.22) !important;
    border-color: rgba(204,34,224,0.35) !important;
  }

  /* --- FAQs --- */
  .faqs h2 { color: var(--lt-text) !important; }
  .faqDetails { color: var(--lt-text-body) !important; }
  .faq, details {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    color: var(--lt-text) !important;
    box-shadow: 0 2px 10px var(--lt-shadow) !important;
  }
  details:hover {
    border-color: rgba(204,34,224,0.4) !important;
    box-shadow: 0 6px 24px rgba(204,34,224,0.18) !important;
  }
  details summary { color: var(--lt-text) !important; }
  details p { color: var(--lt-text-body) !important; }

  /* --- Book demo section --- */
  .book-demo-section { background-color: var(--lt-bg-alt) !important; }
  .book-demo-title { color: var(--lt-text) !important; }
  .book-demo-subtitle { color: var(--lt-text-body) !important; }
  .bd-calendar-panel {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 20px var(--lt-shadow) !important;
  }
  .bd-cal-month-label { color: var(--lt-text) !important; }
  .bd-cal-day { color: var(--lt-text) !important; }
  .bd-cal-day:hover:not(.disabled):not(.empty) {
    background: rgba(204,34,224,0.1) !important;
  }
  .bd-selected-display {
    background: rgba(204,34,224,0.07) !important;
    border-color: rgba(204,34,224,0.2) !important;
    color: var(--lt-text-muted) !important;
  }
  .bd-info-item { color: var(--lt-text-body) !important; }
  .book-demo-form-wrap {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 8px 40px rgba(204,34,224,0.14) !important;
  }
  .bdf-field label { color: var(--lt-text) !important; }
  .bdf-field input, .bdf-field select, .bdf-field textarea {
    background: var(--lt-bg-alt) !important;
    border-color: rgba(204,34,224,0.2) !important;
    color: var(--lt-text) !important;
  }
  .bdf-field input::placeholder, .bdf-field textarea::placeholder { color: var(--lt-text-muted) !important; }
  .bdf-field input:focus, .bdf-field select:focus, .bdf-field textarea:focus {
    border-color: var(--lt-purple) !important;
    box-shadow: 0 0 0 3px rgba(204,34,224,0.18) !important;
    background: var(--lt-card) !important;
  }
  .bd-form-date-echo {
    background: var(--lt-bg-alt) !important;
    border-color: rgba(204,34,224,0.2) !important;
    color: var(--lt-text-muted) !important;
  }
  .bd-form-date-echo.filled { color: var(--lt-purple) !important; }
  .bdf-success {
    color: #065f46 !important;
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.3) !important;
  }
  .bdf-error {
    color: #b91c1c !important;
    background: rgba(239,68,68,0.07) !important;
    border-color: rgba(239,68,68,0.25) !important;
  }

  /* --- Fomo bar --- */
  .fixed-fomo-bar {
    background: linear-gradient(90deg, #1a0a2e, #3d1060) !important;
    border-top: 1px solid rgba(204,34,224,0.4) !important;
    box-shadow: 0 -4px 24px rgba(204,34,224,0.18) !important;
  }

  /* --- Glowing accent text --- */
  .live-projects-eyebrow,
  .modules-eyebrow,
  .dm-tools-eyebrow,
  .wcl-eyebrow,
  .journey-eyebrow,
  .cert-eyebrow,
  .mentors-eyebrow,
  .book-demo-eyebrow,
  .testimonials-eyebrow,
  .reviews-eyebrow {
    color: #ffffff !important;
    font-size: 0.78rem !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
    background: linear-gradient(90deg, #CC22E0, #AA00CC) !important;
    box-shadow: 0 0 14px rgba(204,34,224,0.45) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  .placements-eyebrow {
    color: #ffffff !important;
    font-size: 0.78rem !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
    background: linear-gradient(90deg, #CC22E0, #AA00CC) !important;
    box-shadow: 0 0 14px rgba(204,34,224,0.45) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  .lp-project-number,
  .lp-project-desc-label,
  .benefits-title,
  .highlights-card h3 {
    text-shadow: var(--lt-glow-text) !important;
  }
  .programs-heading span,
  .book-demo-title span,
  .campus-highlight,
  .diamond-mark,
  .journey-title span,
  .wcl-title span,
  .mentors-title span,
  .live-projects-underline,
  .lp-highlight-link {
    text-shadow: var(--lt-glow-text) !important;
  }
  .placements-eyebrow {
    color: #ffffff !important;
    background: linear-gradient(90deg, #00c6a7, #0072ff) !important;
    box-shadow: 0 0 14px rgba(0,198,167,0.55) !important;
    border-color: rgba(255,255,255,0.2) !important;
  }
  .dm-tools-underline,
  .live-projects-underline,
  .wcl-header .wcl-eyebrow {
    filter: drop-shadow(0 0 8px rgba(204,34,224,0.7)) !important;
  }

  /* --- Universal hover glow (all major cards / clickable elements) --- */
  .stat-block:hover,
  .program-card:hover,
  .course-comparison .comparison-card:hover,
  .wcl-card:hover,
  .js-card:hover,
  .campus-feature-card:hover,
  .testimonial-card:hover,
  .benefit-item:hover,
  .highlights-card li:hover,
  details:hover,
  .faq-item:hover,
  .dm-tool-card:hover,
  .lp-tool-chip:hover,
  .mentor-card:hover,
  .aiCard:hover {
    box-shadow: 0 12px 40px rgba(204,34,224,0.22), 0 0 0 1px rgba(204,34,224,0.18) !important;
  }

  /* --- Click / active glow (purple glowing shadow on click) --- */
  .stat-block:active,
  .program-card:active,
  .course-comparison .comparison-card:active,
  .wcl-card:active,
  .benefit-item:active,
  .highlights-card li:active,
  .campus-feature-card:active,
  .testimonial-card:active,
  .dm-tool-card:active,
  .live-project-card:active,
  .lp-tool-chip:active,
  .mentor-card:active,
  .aiCard:active,
  details:active,
  button:active,
  a:active {
    box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 32px rgba(204,34,224,0.38) !important;
    outline: none !important;
  }

  /* :focus-visible glow for keyboard nav / click hold */
  .buttonHeroBanner:focus-visible,
  .highlight-contact-btn:focus-visible,
  .campus-cta:focus-visible,
  .placements-cta:focus-visible,
  .bdf-submit:focus-visible,
  .lp-highlight-link:focus-visible,
  .program-link:focus-visible,
  .modules-carousel-btn:focus-visible,
  .mentors-carousel-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204,34,224,0.5), 0 8px 28px rgba(204,34,224,0.35) !important;
  }

  /* --- stat blocks (light) --- */
  .stat-block {
    box-shadow: 0 4px 20px rgba(204,34,224,0.2) !important;
  }

  /* --- Section dividers --- */
  .lineContainer .solid { background: var(--lt-border) !important; }
  .lineContainer .dashed { border-color: var(--lt-border) !important; }
  .lineContainer1 .solid { background: var(--lt-border) !important; }

  /* --- Scrollbar tint for module cards --- */
  .modules-redesign .aiCards::-webkit-scrollbar { height: 4px; }
  .modules-redesign .aiCards::-webkit-scrollbar-track { background: var(--lt-bg-alt); border-radius: 4px; }
  .modules-redesign .aiCards::-webkit-scrollbar-thumb { background: rgba(204,34,224,0.3); border-radius: 4px; }

  /* --- Skills tags inside module cards --- */
  .modules-redesign .skills-tag {
    background: rgba(204,34,224,0.08) !important;
    border-color: rgba(204,34,224,0.28) !important;
    color: var(--lt-purple) !important;
  }

  /* --- Key points list (hero) --- */
  .key-points-list li { color: var(--lt-text-body) !important; }

  /* --- Link colors --- */
  .program-link { color: var(--lt-purple) !important; }
  .program-link:hover { color: #CC22E0 !important; }

  /* --- InfoContainer (achievements section) --- */
  .InfoContainer { background: transparent !important; }
  .introDataContainer ul li { color: var(--lt-text-body) !important; }

  /* --- Mentor section (already light ? keep white) --- */
  .mentors-section { background-color: var(--lt-bg-alt) !important; }
  .mentor-card {
    background: #ffffff !important;
    border-color: rgba(204,34,224,0.18) !important;
    box-shadow: 0 4px 20px rgba(204,34,224,0.1) !important;
  }
  .mentor-card:hover {
    box-shadow: 0 16px 44px rgba(204,34,224,0.22), 0 0 0 1px rgba(204,34,224,0.2) !important;
  }
  .mentor-name { color: var(--lt-text) !important; }
  .mentor-desc { color: var(--lt-text-body) !important; }
  .mentor-exp { color: var(--lt-text-muted) !important; }

  /* --- Mentors autoplay carousel dots --- */
  .mentors-dot { background: rgba(204,34,224,0.25) !important; }
  .mentors-dot.active { background: #CC22E0 !important; }

  /* --- Review cards --- */
  .review-card {
    background: var(--lt-card) !important;
    border-color: var(--lt-border) !important;
    box-shadow: 0 4px 18px var(--lt-shadow) !important;
  }
  .review-card:hover {
    box-shadow: 0 12px 40px rgba(204,34,224,0.2), 0 0 0 1px rgba(204,34,224,0.18) !important;
  }
  .review-text { color: var(--lt-text-body) !important; }
  .review-author-info strong { color: var(--lt-text) !important; }
  .review-author-info span { color: var(--lt-text-muted) !important; }
  .reviews-section { background-color: var(--lt-bg) !important; }
  .reviews-heading, .reviews-heading h2 { color: var(--lt-text) !important; }

  /* --- Comparison card header border overrides per type --- */
  .course-comparison .comparison-card.expert    .card-header { border-bottom-color: rgba(204,34,224,0.2) !important; }
  .course-comparison .comparison-card.advanced  .card-header { border-bottom-color: rgba(59,130,246,0.18) !important; }
  .course-comparison .comparison-card.professional .card-header { border-bottom-color: rgba(16,185,129,0.18) !important; }
  .course-comparison .comparison-card.beginner  .card-header { border-bottom-color: rgba(251,191,36,0.18) !important; }
  .course-comparison .ideal-for.expert    { background: rgba(204,34,224,0.06) !important; }
  .course-comparison .ideal-for.advanced  { background: rgba(59,130,246,0.06) !important; }
  .course-comparison .ideal-for.professional { background: rgba(16,185,129,0.06) !important; }
  .course-comparison .ideal-for.beginner  { background: rgba(251,191,36,0.06) !important; }

  /* ================================================================
     UNIFIED SECTION HEADING FONT STYLE
     Reference: mentors-title — clamp(1.8rem,4vw,2.6rem) / 800 / #000
  ================================================================ */
  .placements-heading,
  .programs-heading,
  .journey-title,
  .wcl-title,
  .modules-main-heading,
  .dm-skills-heading,
  .dm-tools-heading,
  .live-projects-heading,
  .cert-title,
  .mentors-title,
  .testimonials-title,
  .reviews-title,
  .galleryContainer h2,
  .CardContainer h2,
  .faqs h2,
  .why-choose-container h2,
  .book-demo-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #000000 !important;
  }

  /* Accent spans inside every section heading → gradient */
  .placements-heading span,
  .programs-heading span,
  .journey-title span,
  .wcl-title span,
  .modules-main-heading span,
  .dm-skills-heading span,
  .dm-tools-heading span,
  .live-projects-heading span,
  .cert-title span,
  .mentors-title span,
  .testimonials-title span,
  .reviews-title span,
  .galleryContainer h2 span,
  .CardContainer h2 span,
  .faqs h2 span,
  .why-choose-container h2 span,
  .book-demo-title span,
  .cc-highlight {
    background: linear-gradient(90deg, #CC22E0, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }



/* ================================================================
   COMPREHENSIVE MOBILE RESPONSIVE — expert-digital-marketing-course
   Covers all sections not already handled above
   Breakpoints: 768px (tablet), 480px (small mobile), 360px (tiny)
================================================================ */

/* ── 768px tablet ────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero */
  .MainContainer .container { padding: 24px 16px; }
  .mainHeader { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .details { font-size: 0.95rem !important; }
  .viewCourses { flex-direction: column; align-items: stretch; gap: 10px; }
  .buttonHeroBanner { text-align: center; }

  /* Skills section */
  .skills-section { padding: 36px 16px; }
  .skills-tags { gap: 8px; }

  /* Why Choose redesign */
  .wc-redesign { padding: 56px 16px; }
  .wc-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  .wc-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .wc-feat-card { padding: 24px 18px; }
  .wc-highlights-strip { gap: 8px 20px; }

  /* Placements */
  .placements-container { padding: 0 16px; }
  .placements-stats { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .stat-block { flex: 1 1 calc(50% - 12px); min-width: 130px; font-size: 1.6rem; }
  .placements-heading { font-size: clamp(1.5rem, 5vw, 2rem) !important; }

  /* Programs */
  .programs-section { padding: 48px 16px; }
  .programs-grid { grid-template-columns: repeat(2, minmax(0, 320px)) !important; max-width: 680px !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; gap: 20px !important; }
  .program-card-img { height: 185px !important; }

  /* Course comparison */
  .course-comparison { padding: 50px 16px; }

  /* Journey */
  .journey-section { padding: 56px 16px; }

  /* WCL */
  .wcl-section { padding: 56px 16px; }
  .wcl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  /* Modules */
  .modules-redesign { padding: 48px 16px 32px !important; }

  /* Live projects */
  .live-projects-section { padding: 50px 16px; }
  .lp-sticky-inner { padding: 0 16px !important; }
  .lp-number-ticker { display: none !important; }
  .live-project-card { padding: 28px 20px 24px !important; gap: 24px !important; flex-direction: column; }

  /* DM Skills */
  .dm-skills-section { padding: 56px 16px; }

  /* Cert */
  .cert-section { padding: 56px 16px; }

  /* Gallery */
  .galleryContainer { padding: 56px 16px; }
  .campus-features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* Testimonials */
  .testimonials-section { padding: 50px 16px; }
  .testimonials-grid { grid-template-columns: 1fr !important; }

  /* Reviews */
  .reviews-section { padding: 50px 0; }

  /* Mentors */
  .mentors-section { padding: 56px 16px; }

  /* FAQs */
  .faqs { padding: 50px 16px; }

  /* Book demo */
  .book-demo-section { padding: 50px 16px; }
  .book-demo-layout { grid-template-columns: 1fr !important; }
}

/* ── 480px small mobile ──────────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero */
  .mainHeader { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; line-height: 1.25 !important; }

  /* Why Choose */
  .wc-features { grid-template-columns: 1fr !important; }
  .wc-cta-btn { width: 100%; justify-content: center; padding: 13px 20px; }
  .wc-highlights-strip span { font-size: 0.82rem; }

  /* Placements */
  .stat-block { flex: 1 1 100%; font-size: 1.5rem; padding: 18px 12px; }
  .placements-stats { flex-direction: column; align-items: center; }
  .company-card { min-width: 160px !important; padding: 12px 14px !important; }

  /* Programs */
  .programs-grid { grid-template-columns: minmax(0, 420px) !important; max-width: 100% !important; justify-content: center !important; gap: 16px !important; }
  .program-card { min-height: auto !important; padding: 16px 18px 20px !important; }
  .program-card-img { width: calc(100% + 36px) !important; margin: -16px -18px 14px !important; height: 175px !important; }
  .program-title { font-size: 1.08rem !important; }
  .program-description { font-size: 0.87rem !important; }

  /* Journey stepper */
  .journey-stepper { grid-template-columns: 1fr !important; gap: 16px !important; }
  .journey-stepper-item::after { display: none !important; }
  .js-card { padding: 14px 12px; }

  /* WCL */
  .wcl-grid { grid-template-columns: 1fr !important; }
  .wcl-card { padding: 20px 16px; }

  /* DM Skills */
  .dm-skill-item { padding: 14px 0; gap: 10px; font-size: 0.9rem; }

  /* Live project cards */
  .live-project-card { padding: 22px 14px 18px !important; }
  .lp-tools-row { flex-wrap: wrap; gap: 8px; }
  .lp-right-list li { font-size: 0.85rem; }

  /* Cert */
  .cert-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }

  /* Gallery */
  .campus-features-grid { grid-template-columns: 1fr !important; }

  /* Mentors */
  .mentors-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .mentor-card { padding: 18px 14px; }

  /* Testimonials */
  .testimonial-card { padding: 18px 14px; }

  /* FAQ */
  .faqs { padding: 40px 14px; }
  details summary { font-size: 0.92rem; padding: 14px 12px; }

  /* Book demo */
  .bdf-row.two-col { grid-template-columns: 1fr !important; }
  .bd-calendar-panel { padding: 20px 14px; }
  .book-demo-form-wrap { padding: 22px 14px; }

  /* Section headings global tighten */
  .placements-heading,
  .programs-heading,
  .journey-title,
  .wcl-title,
  .modules-main-heading,
  .dm-skills-heading,
  .dm-tools-heading,
  .live-projects-heading,
  .cert-title,
  .mentors-title,
  .testimonials-title,
  .reviews-title,
  .book-demo-title,
  .wc-title,
  .galleryContainer h2,
  .faqs h2 {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  /* Eyebrow pills */
  .wc-eyebrow,
  .placements-eyebrow,
  .live-projects-eyebrow,
  .dm-tools-eyebrow,
  .wcl-eyebrow,
  .journey-eyebrow,
  .cert-eyebrow,
  .mentors-eyebrow,
  .book-demo-eyebrow,
  .modules-eyebrow,
  .testimonials-eyebrow,
  .reviews-eyebrow {
    font-size: 0.68rem !important;
    padding: 5px 14px !important;
  }
}

/* ── 360px tiny screens ──────────────────────────────────────── */
@media (max-width: 360px) {
  .mainHeader { font-size: 1.3rem !important; }
  .wc-feat-card { padding: 18px 12px; }
  .stat-block { font-size: 1.3rem; }
  .program-card { padding: 16px 12px; }
  .live-project-card { padding: 16px 10px 14px !important; }
  .cert-section, .mentors-section, .testimonials-section,
  .faqs, .book-demo-section { padding-left: 10px !important; padding-right: 10px !important; }
  .bdf-submit { font-size: 0.9rem; padding: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   ALTERNATING SECTION BACKGROUNDS  ·  .bg-aurora & .bg-mesh
   Odd  sections (1,3,5…) → .bg-aurora  (White Aurora Blobs)
   Even sections (2,4,6…) → .bg-mesh    (Mesh Gradient)
══════════════════════════════════════════════════════════════ */

/* ── Keyframe animations for aurora blobs ── */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(18px, -18px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-14px, 22px); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(22px, 12px); }
}

/* ── Background A : White Aurora Blobs ── */
/* Double-class selector (0,2,0) beats all single-class section rules (0,1,0) */
/* NO overflow:hidden — it would break position:sticky inside live-projects-section */
.bg-aurora.bg-aurora {
  background-color: #ffffff !important;
  background-image: none !important;
  position: relative;
}
/* Shared blob base */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
/* Blobs kept inside the section (no negative offsets) to avoid needing overflow:hidden */
.aurora-blob-1 {
  width: 220px;
  height: 220px;
  background: #d946ef;
  opacity: 0.18;
  top: 0;
  left: 0;
  animation: float1 6s ease-in-out infinite;
}
.aurora-blob-2 {
  width: 200px;
  height: 200px;
  background: #a855f7;
  opacity: 0.15;
  bottom: 0;
  right: 0;
  animation: float2 7s ease-in-out infinite;
}
.aurora-blob-3 {
  width: 160px;
  height: 160px;
  background: #ec4899;
  opacity: 0.13;
  top: 10px;
  left: 45%;
  animation: float3 5s ease-in-out infinite;
}

/* ── Background B : Mesh Gradient ──
   Double-class selector (0,2,0) overrides .skills-section.dark-theme !important
   which also has (0,2,0) — our rule wins because it appears later in the sheet */
.bg-mesh.bg-mesh {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(at 0%   0%,   #fae8ff, transparent 50%),
    radial-gradient(at 100% 0%,   #ede9fe, transparent 50%),
    radial-gradient(at 100% 100%, #fce7f3, transparent 50%),
    radial-gradient(at 0%   100%, #e0f2fe, transparent 50%) !important;
}