:root {
     --navy-950: #03182c;
     --navy-900: #062b4d;
     --navy-800: #084a72;
     --blue-700: #0d689f;
     --blue-500: #2d8ec2;
     --blue-200: #cfe7f5;
     --ice: #eaf4fa;
     --white: #ffffff;
     --grey-050: #f7f9fb;
     --grey-100: #eef2f5;
     --grey-200: #dfe6eb;
     --grey-600: #5f7280;
     --ink: #10293d;
     --shadow: 0 18px 46px rgba(3, 35, 60, .13);
     --radius: 24px;
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: #fff;
     color: var(--ink);
     font-family: 'Inter', Arial, sans-serif;
     line-height: 1.65
 }

 img {
     max-width: 100%
 }

 a {
     color: inherit
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .btn,
 .menu-link,
 .stat strong,
 .form-kicker,
 .eyebrow,
 .rail-btn {
     font-family: 'Poppins', Arial, sans-serif
 }

 .container {
     width: min(1240px, calc(100% - 48px));
     margin: auto
 }

 .section {
     position: relative;
     padding: 88px 0
 }

 .section-title {
     font-size: clamp(2.2rem, 4vw, 4rem);
     line-height: 1.07;
     margin: 8px 0 18px;
     color: var(--navy-950);
     font-weight: 800
 }

 .lead {

     color: #526a7a;
     font-size: 1.05rem
 }

 .eyebrow {
     font-size: .78rem;
     text-transform: uppercase;
     letter-spacing: .15em;
     font-weight: 800;
     color: var(--blue-700)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border: 0;
     border-radius: 999px;
     padding: 14px 24px;
     background: var(--blue-700);
     color: #fff;
     text-decoration: none;
     font-weight: 800;
     box-shadow: 0 10px 26px rgba(13, 104, 159, .20)
 }

 .btn:hover {
     background: var(--navy-800);
     transform: translateY(-1px)
 }

 .text-link {
     font-weight: 800;
     color: var(--blue-700);
     text-decoration: none
 }

 /* Header contact CTA — exact requested content */
 .contact-strip {
     color: #fff;
     background:
         radial-gradient(circle at 12% -30%, rgba(80, 178, 220, .30), transparent 35%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px),
         linear-gradient(90deg, var(--navy-950), var(--navy-800));
     border-bottom: 1px solid rgba(255, 255, 255, .12)
 }

 .contact-strip-inner {
     width: min(1440px, calc(100% - 42px));
     margin: auto;
     min-height: 44px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 8px 18px;
     flex-wrap: wrap;
     font-size: .79rem
 }

 .contact-item {
     display: inline-flex;
     align-items: center;
     gap: 5px
 }

 .contact-item b {
     font-weight: 700
 }

 .contact-item a {
     color: #fff;
     text-decoration: none
 }

 .contact-item a:hover {
     text-decoration: underline
 }

 .topbar {
     color: #d9f1ff;
     background:
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 20px),
         linear-gradient(90deg, #05233e, #0b4c75)
 }

 .topbar .container {
     min-height: 34px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: .74rem
 }

 .header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: rgba(255, 255, 255, .97);
     backdrop-filter: blur(12px);
     box-shadow: 0 6px 26px rgba(4, 36, 62, .08)
 }

 .nav {
     min-height: 92px;
     display: flex;
     align-items: center;
     gap: 18px
 }

 .logo {
     width: 290px;
     max-height: 74px;
     object-fit: contain;
     object-position: left center
 }

 .menu {
     display: flex;
     align-items: center;
     gap: 3px;
     margin-left: auto
 }

 .menu-item {
     position: relative
 }

 .menu-link {
     display: block;
     padding: 30px 10px;
     text-decoration: none;
     font-weight: 700;
     color: var(--navy-950);
     font-size: .86rem;
     white-space: nowrap
 }

 .dropdown {
     display: none;
     position: absolute;
     top: 78px;
     left: 0;
     width: 360px;
     padding: 14px;
     border-radius: 18px;
     background: #fff;
     box-shadow: 0 20px 60px rgba(2, 35, 62, .18);
     border: 1px solid #dfe8ee;
     max-height: 470px;
     overflow: auto
 }

 .dropdown a {
     display: block;
     padding: 10px 12px;
     border-radius: 10px;
     text-decoration: none;
     font-size: .86rem
 }

 .dropdown a:hover {
     background: var(--ice);
     color: var(--blue-700)
 }

 .has-dropdown:hover>.dropdown {
     display: block
 }

 .menu-toggle {
     display: none;
     border: 0;
     background: var(--navy-900);
     color: #fff;
     border-radius: 12px;
     padding: 9px 12px;
     font-size: 1.2rem
 }

 /* Hero */
 .hero {
     position: relative;
     overflow: hidden;
     color: #fff;
     background:
         radial-gradient(circle at 84% 10%, rgba(45, 142, 194, .30), transparent 25%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 26px),
         linear-gradient(115deg, #052a4b, #075781 70%, #0d78ad)
 }

 .hero .container {
     position: relative
 }

 .slide {
     display: none;
     grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
     gap: 62px;
     align-items: center;
     min-height: 610px;
     padding: 66px 0 88px
 }

 .slide.active {
     display: grid
 }

 .hero-copy {
     max-width: 570px
 }

 .hero h1 {
     font-size: clamp(2.7rem, 4.5vw, 4.7rem);
     line-height: 1.02;
     margin: 10px 0 20px;
     font-weight: 900
 }

 .hero h1 strong {
     color: #9bd8f8
 }

 .hero p {
     font-size: 1.03rem;
     color: #edf8ff;
     max-width: 620px
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-top: 26px;
     flex-wrap: wrap
 }

 .cpd-badge {
     width: 112px;
     padding: 8px;
     border-radius: 16px;
     background: #fff;
     box-shadow: 0 10px 28px rgba(0, 0, 0, .18)
 }

 .cpd-badge img {
     display: block;
     width: 100%
 }

 .hero-visual {
     border-radius: 28px;
     overflow: hidden;
     border: 4px solid rgba(255, 255, 255, .55);
     box-shadow: 0 24px 70px rgba(0, 0, 0, .22)
 }

 .hero-visual img {
     display: block;
     width: 100%;
     height: 470px;
     object-fit: cover
 }

 .hero-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 5;
     width: 48px;
     height: 48px;
     border: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, .94);
     color: var(--navy-900);
     font-size: 1.6rem;
     cursor: pointer;
     box-shadow: 0 10px 24px rgba(0, 0, 0, .16)
 }

 .hero-prev {
     left: 20px
 }

 .hero-next {
     right: 20px
 }

 .dots {
     position: absolute;
     left: 50%;
     bottom: 30px;
     transform: translateX(-50%);
     display: flex;
     gap: 9px
 }

 .dot {
     width: 10px;
     height: 10px;
     border: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, .4);
     cursor: pointer
 }

 .dot.active {
     width: 28px;
     border-radius: 999px;
     background: #fff
 }

 /* Application form */
 .interest-wrap {
     position: relative;
     z-index: 12;
     margin-top: -38px;
     border-radius: 28px;
     padding: 28px;
     color: #fff;
     box-shadow: 0 22px 70px rgba(2, 31, 55, .24);
     background:
         radial-gradient(circle at 90% 0, rgba(74, 176, 220, .22), transparent 26%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 20px),
         linear-gradient(135deg, #031d36, #0b608f)
 }

 .form-intro {
     text-align: center;
     margin-bottom: 18px
 }

 .form-intro h2 {
     margin: 4px 0 5px;
     font-size: 1.8rem
 }

 .form-intro p {
     margin: 0;
     color: #d8eef9
 }

 .form-kicker {
     font-size: .72rem;
     letter-spacing: .15em;
     color: #93daf7
 }

 .interest {
     display: grid;
     grid-template-columns: 1.15fr .7fr 1fr 1.15fr 1fr 1.15fr auto;
     gap: 10px
 }

 .interest input,
 .interest select {
     min-width: 0;
     border: 1px solid rgba(255, 255, 255, .25);
     background: #fff;
     color: #17354a;
     border-radius: 12px;
     padding: 13px 12px;
     font: 500 .88rem 'Inter'
 }

 .interest button {
     border: 0;
     border-radius: 12px;
     padding: 13px 18px;
     background: #fff;
     color: var(--navy-900);
     font: 800 .82rem 'Poppins';
     cursor: pointer
 }

 /* Textured section backgrounds instead of solid fills */
 #courses,
 #accreditation,
 #career,
 #faq {
     background:
         radial-gradient(circle at 90% 7%, rgba(13, 104, 159, .10), transparent 25%),
         repeating-linear-gradient(135deg, rgba(5, 72, 118, .028) 0 1px, transparent 1px 24px),
         linear-gradient(180deg, #fbfdff, #edf4f8)
 }

 .section.alt {
     background:
         radial-gradient(circle at 8% 8%, rgba(13, 104, 159, .10), transparent 25%),
         linear-gradient(rgba(5, 74, 119, .038) 1px, transparent 1px),
         linear-gradient(90deg, rgba(5, 74, 119, .038) 1px, transparent 1px),
         linear-gradient(145deg, #edf3f7, #fafcfd);
     background-size: auto, 32px 32px, 32px 32px, auto
 }

 .stats,
 .final-cta {
     color: #fff;
     background:
         radial-gradient(circle at 15% 10%, rgba(71, 174, 218, .22), transparent 25%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 22px),
         linear-gradient(135deg, #031a31, #075784)
 }

 /* Point 1 — ALL cards colored + textured */
 .course-card,
 .feature,
 .info-card,
 .quote,
 .career-list>div,
 .support-strip>div,
 .mode-grid>div {
     position: relative;
     isolation: isolate;
     overflow: hidden;
     border-radius: var(--radius);
     border: 1px solid rgba(4, 64, 106, .15);
     box-shadow: var(--shadow);
     transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
 }

 .course-card::before,
 .feature::before,
 .info-card::before,
 .quote::before,
 .career-list>div::before,
 .support-strip>div::before,
 .mode-grid>div::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
         radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .55), transparent 24%),
         repeating-linear-gradient(135deg, rgba(3, 70, 116, .055) 0 1px, transparent 1px 17px),
         linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 60%)
 }

 .course-card:nth-child(4n+1),
 .feature:nth-child(4n+1),
 .quote:nth-child(4n+1),
 .career-list>div:nth-child(4n+1),
 .support-strip>div:nth-child(4n+1) {
     background: linear-gradient(145deg, #d8ecf7, #f1f8fc)
 }

 .course-card:nth-child(4n+2),
 .feature:nth-child(4n+2),
 .quote:nth-child(4n+2),
 .career-list>div:nth-child(4n+2),
 .support-strip>div:nth-child(4n+2) {
     background: linear-gradient(145deg, #f8fafc, #dfe6eb)
 }

 .course-card:nth-child(4n+3),
 .feature:nth-child(4n+3),
 .quote:nth-child(4n+3),
 .career-list>div:nth-child(4n+3),
 .support-strip>div:nth-child(4n+3) {
     background: linear-gradient(145deg, #c9e3f1, #e9f3f8)
 }

 .course-card:nth-child(4n),
 .feature:nth-child(4n),
 .quote:nth-child(4n),
 .career-list>div:nth-child(4n),
 .support-strip>div:nth-child(4n) {
     background: linear-gradient(145deg, #d7e0e7, #f4f7f9)
 }

 .course-card:hover,
 .feature:hover,
 .info-card:hover,
 .quote:hover,
 .career-list>div:hover,
 .support-strip>div:hover {
     transform: translateY(-6px);
     box-shadow: 0 24px 54px rgba(3, 41, 69, .18);
     border-color: #3b94c4
 }

 .course-card img {
     width: 100%;
     height: 205px;
     object-fit: cover;
     display: block
 }

 .course-body {
     padding: 22px
 }

 .course-body h3 {
     margin: 0 0 10px;
     color: var(--navy-900);
     font-size: 1.16rem
 }

 .course-body p {
     color: #526a78;
     font-size: .91rem
 }

 /* Point 2 — readable dark text on a LIGHT textured background */
 .pathways-section {
     color: var(--ink);
     background:
         radial-gradient(circle at 88% 12%, rgba(23, 126, 184, .14), transparent 28%),
         repeating-linear-gradient(135deg, rgba(4, 78, 126, .04) 0 1px, transparent 1px 22px),
         linear-gradient(145deg, #e4f0f7, #f9fbfd)
 }

 .pathways-section .section-title,
 .pathways-section .lead,
 .pathways-section .container>p {
     color: var(--navy-950) !important
 }

 .pathways-section .eyebrow {
     color: var(--blue-700)
 }

 .feature-grid {
     margin-top: 32px
 }

 .feature {
     padding: 24px
 }

 .feature-photo {
     width: 100%;
     height: 165px;
     object-fit: cover;
     border-radius: 18px;
     margin-bottom: 18px
 }

 .proper-icon,
 .icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     margin-bottom: 14px;
     background: linear-gradient(145deg, var(--navy-800), var(--blue-700));
     color: #fff
 }

 .proper-icon svg {
     width: 27px;
     height: 27px;
     fill: none;
     stroke: #fff;
     stroke-width: 2.2
 }

 .feature b {
     display: block;
     color: var(--navy-900);
     font-family: 'Poppins';
     font-size: 1.05rem;
     margin-bottom: 6px
 }

 .feature span {
     color: #5d7281
 }

 /* Point 3 — credentials: three colored/textured cards, no image */
 .credential-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 22px;
     margin-top: 30px
 }

 .credential-card {
     min-height: 300px;
     padding: 36px;
     border-radius: 26px;
     box-shadow: var(--shadow);
     position: relative;
     overflow: hidden
 }

 .credential-card::before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none
 }

 .credential-card h3 {
     position: relative;
     margin: 0 0 14px;
     font-size: 1.4rem
 }

 .credential-card p {
     position: relative
 }

 .credential-card-1 {
     color: #fff;
     background:
         radial-gradient(circle at 84% 8%, rgba(75, 181, 224, .28), transparent 28%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 19px),
         linear-gradient(145deg, #031a31, #086394)
 }

 .credential-card-1 h3,
 .credential-card-1 p {
     color: #fff
 }

 .credential-card-2 {
     background:
         radial-gradient(circle at 8% 8%, rgba(13, 104, 159, .16), transparent 28%),
         repeating-linear-gradient(45deg, rgba(4, 70, 116, .05) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #d8ecf7, #f7fbfd)
 }

 .credential-card-3 {
     background:
         radial-gradient(circle at 90% 0, rgba(5, 76, 125, .12), transparent 26%),
         repeating-linear-gradient(135deg, rgba(3, 54, 92, .05) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #d9e0e6, #f7f9fa)
 }

 /* horizontal rails */
 .rail-shell {
     position: relative;
     min-width: 0
 }

 .rail-controls {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin: 10px 0 14px
 }

 .rail-btn {
     width: 44px;
     height: 44px;
     border: 0;
     border-radius: 50%;
     color: #fff;
     font-size: 1.3rem;
     cursor: pointer;
     background: linear-gradient(145deg, var(--blue-700), var(--navy-900));
     box-shadow: 0 8px 20px rgba(3, 35, 60, .18)
 }

 .horizontal-rail {
     display: flex !important;
     flex-wrap: nowrap !important;
     gap: 20px !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
     width: 100% !important;
     min-width: 0 !important;
     scroll-snap-type: x proximity !important;
     scroll-behavior: smooth !important;
     -webkit-overflow-scrolling: touch !important;
     overscroll-behavior-x: contain !important;
     touch-action: pan-x !important;
     padding: 6px 4px 24px !important;
     cursor: grab;
     scrollbar-width: none !important;
     -ms-overflow-style: none;
 }

 .horizontal-rail::-webkit-scrollbar {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
 }

 .horizontal-rail.dragging {
     cursor: grabbing;
     scroll-snap-type: none !important;
     user-select: none
 }

 .horizontal-rail>* {
     flex: 0 0 340px !important;
     width: 340px !important;
     min-width: 340px !important;
     scroll-snap-align: start !important
 }

 /* Course slider: arrows only, no visible scrollbar */
 #courses .horizontal-rail {
     scroll-snap-type: x mandatory !important;
     padding-bottom: 10px !important;
 }

 #courses .horizontal-rail>* {
     scroll-snap-align: start !important;
 }

 #courses .rail-btn:disabled {
     opacity: .35;
     cursor: not-allowed;
     box-shadow: none;
 }

 /* Generic layouts */
 .stats {
     padding: 62px 0
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px
 }

 .stat {
     padding: 24px;
     border: 1px solid rgba(255, 255, 255, .14);
     border-radius: 20px;
     text-align: center;
     background: rgba(255, 255, 255, .08)
 }

 .stat strong {
     display: block;
     font-size: 2.1rem;
     color: #fff
 }

 .stat span {
     color: #d8effa
 }

 .about-grid,
 .split,
 .image-story-grid {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 42px;
     align-items: center
 }

 .malaysia-card,
 .info-card {
     padding: 30px
 }

 .malaysia-card {
     color: #fff;
     border-radius: 26px;
     background:
         radial-gradient(circle at 90% 10%, rgba(76, 184, 226, .24), transparent 26%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 22px),
         linear-gradient(145deg, #03203b, #08608f)
 }

 .pill,
 .city-pills span {
     display: inline-block;
     margin: 5px 5px 0 0;
     padding: 8px 12px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .10);
     border: 1px solid rgba(255, 255, 255, .18)
 }

 .career-list,
 .support-strip,
 .quote-grid,
 .course-grid,
 .feature-grid,
 .accred {
     margin-top: 28px
 }

 .quote {
     padding: 26px
 }

 .quote small {
     display: block;
     color: #68808f;
     margin: 5px 0 12px
 }

 .mode-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px
 }

 .mode-grid>div {
     padding: 12px;
     border-radius: 12px
 }

 .image-stack img,
 .image-story-gallery img {
     border-radius: 24px;
     box-shadow: var(--shadow)
 }

 .final-cta {
     padding: 48px;
     border-radius: 28px
 }

 .final-cta .section-title,
 .final-cta p {
     color: #fff
 }

 .faq {
     max-width: 1000px;
     margin: auto
 }

 .faq-item {
     border-bottom: 1px solid #dbe4ea
 }

 .faq-q {
     width: 100%;
     padding: 18px 0;
     display: flex;
     justify-content: space-between;
     gap: 20px;
     border: 0;
     background: transparent;
     text-align: left;
     font: 700 1rem 'Poppins';
     color: var(--navy-900);
     cursor: pointer
 }

 .faq-a {
     display: none;
     padding: 0 0 18px;
     color: #5e7280
 }

 .faq-item.open .faq-a {
     display: block
 }

 .footer {
     color: #dcecf6;
     background:
         radial-gradient(circle at 12% 0, rgba(36, 143, 194, .18), transparent 25%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 22px),
         linear-gradient(145deg, #02172b, #06395b);
     padding: 60px 0 24px
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 2fr repeat(3, 1fr);
     gap: 32px
 }

 .footer a {
     display: block;
     text-decoration: none;
     margin: 7px 0
 }

 .footer-logo {
     width: 280px
 }

 .copyright {
     margin-top: 34px;
     padding-top: 18px;
     border-top: 1px solid rgba(255, 255, 255, .12);
     font-size: .8rem;
     color: #a9c1d0
 }

 /* Malaysia skyline */
 .malaysia-skyline-band {
     position: relative;
     min-height: 520px;
     color: #fff;
     background:
         linear-gradient(90deg, rgba(2, 18, 34, .94), rgba(3, 38, 65, .76) 48%, rgba(3, 38, 65, .30)),
         url("https://images.unsplash.com/photo-1596422846543-75c6fc197f07?auto=format&fit=crop&w=1800&q=88") center/cover no-repeat
 }

 .skyline-content {
     position: relative;
     z-index: 2;
     width: min(1240px, calc(100% - 48px));
     margin: auto;
     padding: 90px 0
 }

 .skyline-content h2 {
     font-size: clamp(2.8rem, 5vw, 5rem);
     line-height: 1.04;
     max-width: 720px;
     margin: 8px 0 18px
 }

 .skyline-content p {
     max-width: 720px
 }

 /* Responsive */
 @media(max-width:1100px) {
     .menu-toggle {
         display: block;
         margin-left: auto
     }

     .menu {
         display: none;
         position: absolute;
         left: 0;
         right: 0;
         top: 92px;
         padding: 12px 22px 22px;
         background: #fff;
         box-shadow: 0 20px 40px rgba(3, 35, 60, .15);
         flex-direction: column;
         align-items: stretch
     }

     .menu.open {
         display: flex
     }

     .menu-link {
         padding: 12px 6px
     }

     .dropdown {
         position: static;
         width: auto;
         box-shadow: none;
         border: 0;
         padding: 4px 10px
     }

     .has-dropdown.open>.dropdown {
         display: block
     }

     .nav>.btn {
         display: none
     }

     .logo {
         width: 255px
     }
 }

 @media(max-width:900px) {
     .slide {
         grid-template-columns: 1fr;
         gap: 28px;
         min-height: auto;
         padding: 54px 0 88px
     }

     .hero-visual img {
         height: 340px
     }

     .interest {
         grid-template-columns: 1fr 1fr
     }

     .interest button {
         grid-column: 1/-1
     }

     .credential-grid,
     .about-grid,
     .split,
     .image-story-grid {
         grid-template-columns: 1fr
     }

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

     .footer-grid {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:620px) {
     .container {
         width: min(100% - 28px, 1240px)
     }

     .contact-strip-inner {
         width: calc(100% - 22px);
         justify-content: center;
         padding: 8px 0;
         gap: 5px 10px
     }

     .contact-item {
         font-size: .7rem;
         white-space: normal
     }

     .topbar .container span:last-child {
         display: none
     }

     .logo {
         width: 220px
     }

     .hero h1 {
         font-size: 2.65rem
     }

     .hero-arrow {
         top: auto;
         bottom: 24px;
         transform: none
     }

     .hero-prev {
         left: 18px
     }

     .hero-next {
         right: 18px
     }

     .hero-visual img {
         height: 270px
     }

     .interest-wrap {
         width: calc(100% - 20px);
         padding: 20px;
         margin-top: -26px
     }

     .interest {
         grid-template-columns: 1fr
     }

     .horizontal-rail>* {
         flex: 0 0 84vw !important;
         width: 84vw !important;
         min-width: 84vw !important
     }

     .rail-controls {
         justify-content: flex-start
     }

     .stats-grid,
     .footer-grid {
         grid-template-columns: 1fr
     }

     .section {
         padding: 68px 0
     }
 }

 .header {
     top: 0 !important
 }

 .header .contact-strip {
     width: 100%;
     background:
         radial-gradient(circle at 12% -20%, rgba(197, 35, 49, .22), transparent 28%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 20px),
         linear-gradient(90deg, #021a31, #073f64);
     color: #fff;
     border-bottom: 1px solid rgba(255, 255, 255, .12)
 }

 .header .contact-strip-inner {
     width: min(1440px, calc(100% - 40px));
     margin: auto;
     min-height: 42px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 8px 18px;
     flex-wrap: wrap;
     font: 500 .78rem/1.3 'Inter', sans-serif
 }

 .header .contact-item {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: #fff
 }

 .header .contact-item b {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     color: #fff
 }

 .header .contact-item a {
     color: #fff !important;
     text-decoration: none
 }

 .header .contact-item a:hover {
     color: #fff !important;
     text-decoration: underline
 }

 @media(max-width:760px) {
     .header .contact-strip-inner {
         width: calc(100% - 20px);
         justify-content: center;
         padding: 7px 0;
         gap: 5px 10px
     }

     .header .contact-item {
         font-size: .69rem;
         white-space: normal
     }
 }

 @media(max-width:1100px) {
     .header .menu {
         top: 134px !important
     }
 }

 /* CARDS WITH IMAGES remain cleaner blue/grey */
 .course-card {
     background:
         radial-gradient(circle at 90% 4%, rgba(255, 255, 255, .7), transparent 22%),
         repeating-linear-gradient(135deg, rgba(6, 77, 126, .04) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #e9f3f9, #f8fbfd) !important;
     border: 1px solid rgba(5, 72, 116, .14) !important
 }

 .course-card:nth-child(even) {
     background:
         radial-gradient(circle at 12% 0, rgba(5, 88, 142, .09), transparent 22%),
         repeating-linear-gradient(45deg, rgba(5, 72, 116, .035) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #eef2f5, #ffffff) !important
 }

 /* CARDS WITHOUT IMAGES: NAVY + RED, visibly designed and textured */
 .no-image-card {
     position: relative !important;
     isolation: isolate;
     overflow: hidden !important;
     border-radius: 22px !important;
     border: 1px solid rgba(255, 255, 255, .09) !important;
     box-shadow: 0 16px 38px rgba(2, 28, 48, .15) !important;
     transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important
 }

 .no-image-card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -2;
     pointer-events: none;
     background:
         radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .10), transparent 24%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px)
 }

 .no-image-card::after {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 6px;
     z-index: 2;
     background: linear-gradient(180deg, #c51f31, #8e1021)
 }

 .no-image-card:nth-child(odd) {
     color: #fff !important;
     background:
         radial-gradient(circle at 86% 12%, rgba(197, 31, 49, .22), transparent 28%),
         linear-gradient(145deg, #031b33, #073f62) !important
 }

 .no-image-card:nth-child(even) {
     color: #17324a !important;
     background:
         radial-gradient(circle at 88% 10%, rgba(197, 31, 49, .10), transparent 27%),
         repeating-linear-gradient(135deg, rgba(5, 70, 112, .035) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #f7f9fb, #e3e9ee) !important;
     border-color: rgba(5, 70, 112, .13) !important
 }

 .no-image-card:nth-child(even)::after {
     background: linear-gradient(180deg, #a8182a, #d33b4b)
 }

 .no-image-card:nth-child(odd) h3,
 .no-image-card:nth-child(odd) h4,
 .no-image-card:nth-child(odd) b,
 .no-image-card:nth-child(odd) strong,
 .no-image-card:nth-child(odd) p,
 .no-image-card:nth-child(odd) span,
 .no-image-card:nth-child(odd) small {
     color: #fff !important
 }

 .no-image-card:nth-child(even) h3,
 .no-image-card:nth-child(even) h4,
 .no-image-card:nth-child(even) b,
 .no-image-card:nth-child(even) strong {
     color: #062b4d !important
 }

 .no-image-card:nth-child(even) p,
 .no-image-card:nth-child(even) span,
 .no-image-card:nth-child(even) small {
     color: #5a6f7d !important
 }

 .no-image-card:hover {
     transform: translateY(-6px) !important;
     box-shadow: 0 24px 54px rgba(2, 35, 59, .22) !important;
     border-color: rgba(197, 31, 49, .38) !important
 }

 .no-image-card .icon,
 .no-image-card .proper-icon {
     background: linear-gradient(145deg, #b61b2d, #7e1020) !important;
     color: #fff !important
 }

 .no-image-card .text-link {
     color: #d23649 !important
 }

 .no-image-card:nth-child(odd) .text-link {
     color: #ff8a98 !important
 }

 /* Credentials: all 3 cards use navy/red family, no image */
 .credential-grid {
     gap: 22px !important
 }

 .credential-card-1 {
     background:
         radial-gradient(circle at 87% 10%, rgba(197, 31, 49, .25), transparent 28%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #031a31, #073f62) !important
 }

 .credential-card-2 {
     background:
         radial-gradient(circle at 90% 8%, rgba(197, 31, 49, .12), transparent 28%),
         repeating-linear-gradient(45deg, rgba(5, 70, 112, .04) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #f7f9fb, #e3e9ee) !important
 }

 .credential-card-3 {
     color: #fff !important;
     background:
         radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .08), transparent 26%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #71101e, #b92134) !important
 }

 .credential-card-3 h3,
 .credential-card-3 p {
     color: #fff !important
 }

 /* RESTORE the "Professional learning..." section to its earlier balanced layout */
 .story-restored {
     position: relative !important;
     padding: 82px 0 !important;
     background: #e9f3fa !important;
     overflow: hidden !important
 }

 .story-restored::before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
         radial-gradient(circle at 0% 100%, rgba(9, 91, 148, .16), transparent 30%),
         linear-gradient(110deg, transparent 45%, rgba(255, 255, 255, .55) 45%)
 }

 .story-restored .image-story-grid {
     position: relative;
     z-index: 1;
     display: grid !important;
     grid-template-columns: .75fr 1.25fr !important;
     gap: 52px !important;
     align-items: center !important
 }

 .story-restored .image-story-copy h2 {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(2rem, 3.5vw, 3.4rem) !important;
     line-height: 1.07 !important;
     color: #03294d !important;
     margin: .5rem 0 1rem !important
 }

 .story-restored .image-story-copy p {
     color: #526b7a !important
 }

 .story-restored .image-story-gallery {
     display: grid !important;
     grid-template-columns: 1.2fr .8fr !important;
     grid-template-rows: 190px 190px !important;
     gap: 14px !important;
     min-width: 0 !important
 }

 .story-restored .image-story-gallery img {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
     border-radius: 22px !important;
     box-shadow: 0 16px 40px rgba(3, 29, 55, .16) !important;
     margin: 0 !important;
     transform: none !important
 }

 .story-restored .image-story-gallery img:first-child {
     grid-row: 1/3 !important
 }

 @media(max-width:820px) {
     .story-restored .image-story-grid {
         grid-template-columns: 1fr !important;
         gap: 30px !important
     }

     .story-restored .image-story-gallery {
         grid-template-rows: 160px 160px !important
     }
 }

 /* HORIZONTAL SCROLL: rebuilt to use true native overflow on every device */
 .rail-shell {
     position: relative !important;
     width: 100% !important;
     max-width: 100% !important;
     min-width: 0 !important;
     overflow: visible !important
 }

 .rail-controls {
     display: flex !important;
     justify-content: flex-end !important;
     gap: 10px !important;
     margin: 8px 0 14px !important
 }

 .rail-btn {
     width: 46px !important;
     height: 46px !important;
     border: 0 !important;
     border-radius: 50% !important;
     cursor: pointer !important;
     color: #fff !important;
     font: 800 1.35rem/1 'Poppins', sans-serif !important;
     background:
         radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .14), transparent 36%),
         linear-gradient(145deg, #b61b2d, #062f50) !important;
     box-shadow: 0 8px 22px rgba(2, 35, 60, .18) !important
 }

 .horizontal-rail {
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
     gap: 18px !important;
     width: 100% !important;
     max-width: 100% !important;
     min-width: 0 !important;
     overflow-x: scroll !important;
     overflow-y: hidden !important;
     scroll-behavior: smooth !important;
     scroll-snap-type: x proximity !important;
     scroll-padding-inline: 4px !important;
     overscroll-behavior-x: contain !important;
     -webkit-overflow-scrolling: touch !important;
     touch-action: pan-x !important;
     padding: 6px 4px 24px !important;
     scrollbar-width: auto !important;
     scrollbar-color: #b61b2d #dce6ed !important;
     cursor: grab !important
 }

 .horizontal-rail::-webkit-scrollbar {
     display: block !important;
     height: 8px !important
 }

 .horizontal-rail::-webkit-scrollbar-track {
     background: #dce6ed !important;
     border-radius: 999px !important
 }

 .horizontal-rail::-webkit-scrollbar-thumb {
     background: linear-gradient(90deg, #062f50, #b61b2d) !important;
     border-radius: 999px !important
 }

 .horizontal-rail.dragging {
     cursor: grabbing !important;
     scroll-behavior: auto !important;
     scroll-snap-type: none !important;
     user-select: none !important
 }

 .horizontal-rail>* {
     flex: 0 0 330px !important;
     width: 330px !important;
     min-width: 330px !important;
     max-width: 330px !important;
     scroll-snap-align: start !important
 }

 @media(max-width:760px) {
     .rail-controls {
         justify-content: flex-start !important
     }

     .horizontal-rail {
         gap: 14px !important;
         padding-inline: 2px !important;
         scroll-snap-type: x mandatory !important
     }

     .horizontal-rail>* {
         flex: 0 0 84vw !important;
         width: 84vw !important;
         min-width: 84vw !important;
         max-width: 84vw !important
     }
 }


 /* ===== V9: Build skills for a changing education landscape — readability fix ===== */
 .career-visibility-fix {
     background:
         radial-gradient(circle at 88% 8%, rgba(12, 105, 166, .11), transparent 26%),
         repeating-linear-gradient(135deg, rgba(4, 70, 116, .03) 0 1px, transparent 1px 24px),
         linear-gradient(145deg, #f4f8fb, #e7eff4) !important;
 }

 .career-visibility-fix .section-title {
     color: #031a31 !important
 }

 .career-visibility-fix .lead {
     color: #536b7a !important
 }

 .career-visibility-fix .career-list {
     display: grid !important;
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     gap: 18px !important;
     margin-top: 30px !important;
 }

 .career-visibility-fix .career-list>div {
     min-height: 180px !important;
     padding: 26px 24px 24px 30px !important;
     border-radius: 22px !important;
     position: relative !important;
     overflow: hidden !important;
     box-shadow: 0 14px 34px rgba(3, 35, 60, .12) !important;
 }

 .career-visibility-fix .career-list>div::after {
     content: "" !important;
     position: absolute !important;
     left: 0 !important;
     top: 0 !important;
     bottom: 0 !important;
     width: 6px !important;
     background: linear-gradient(180deg, #d13a4b, #8d1221) !important;
     z-index: 2 !important;
 }

 .career-visibility-fix .career-list>div:nth-child(odd) {
     background:
         radial-gradient(circle at 90% 7%, rgba(201, 39, 56, .22), transparent 27%),
         repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #031a31, #064a70) !important;
 }

 .career-visibility-fix .career-list>div:nth-child(even) {
     background:
         radial-gradient(circle at 90% 5%, rgba(196, 32, 49, .10), transparent 27%),
         repeating-linear-gradient(135deg, rgba(4, 70, 116, .045) 0 1px, transparent 1px 18px),
         linear-gradient(145deg, #ffffff, #e2e9ee) !important;
 }

 .career-visibility-fix .career-list>div:nth-child(odd),
 .career-visibility-fix .career-list>div:nth-child(odd) *,
 .career-visibility-fix .career-list>div:nth-child(odd) h3,
 .career-visibility-fix .career-list>div:nth-child(odd) h4,
 .career-visibility-fix .career-list>div:nth-child(odd) p,
 .career-visibility-fix .career-list>div:nth-child(odd) span,
 .career-visibility-fix .career-list>div:nth-child(odd) strong,
 .career-visibility-fix .career-list>div:nth-child(odd) b {
     color: #ffffff !important;
     opacity: 1 !important;
 }

 .career-visibility-fix .career-list>div:nth-child(even),
 .career-visibility-fix .career-list>div:nth-child(even) h3,
 .career-visibility-fix .career-list>div:nth-child(even) h4,
 .career-visibility-fix .career-list>div:nth-child(even) strong,
 .career-visibility-fix .career-list>div:nth-child(even) b {
     color: #062b4d !important;
     opacity: 1 !important;
 }

 .career-visibility-fix .career-list>div:nth-child(even) p,
 .career-visibility-fix .career-list>div:nth-child(even) span {
     color: #536a79 !important;
     opacity: 1 !important;
 }

 .career-visibility-fix .career-list h3,
 .career-visibility-fix .career-list h4,
 .career-visibility-fix .career-list strong,
 .career-visibility-fix .career-list b {
     display: block !important;
     font-family: 'Poppins', Arial, sans-serif !important;
     font-weight: 800 !important;
     font-size: 1.05rem !important;
     line-height: 1.35 !important;
     margin: 0 0 9px !important;
 }

 .career-visibility-fix .career-list p,
 .career-visibility-fix .career-list span {
     display: block !important;
     font-size: .91rem !important;
     line-height: 1.58 !important;
     margin: 0 !important;
 }

 @media(max-width:900px) {
     .career-visibility-fix .career-list {
         grid-template-columns: repeat(2, minmax(0, 1fr)) !important
     }
 }

 @media(max-width:620px) {
     .career-visibility-fix .career-list {
         grid-template-columns: 1fr !important
     }

     .career-visibility-fix .career-list>div {
         min-height: auto !important
     }
 }


 /* Hide ALL horizontal slider/rail scrollbars; scrolling and arrow controls remain functional */
 .horizontal-rail,
 .course-rail,
 [class*="rail"] {
     scrollbar-width: none !important;
     -ms-overflow-style: none !important;
 }

 .horizontal-rail::-webkit-scrollbar,
 .course-rail::-webkit-scrollbar,
 [class*="rail"]::-webkit-scrollbar {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
     background: transparent !important;
 }


 /* Heading-tag structure update: visual appearance intentionally unchanged */
 .hero .hero-title {
     font-family: 'Poppins', Arial, sans-serif;
     font-size: clamp(2.7rem, 4.5vw, 4.7rem);
     line-height: 1.02;
     margin: 10px 0 20px;
     font-weight: 900;
 }

 .hero .hero-title strong {
     color: #9bd8f8;
 }

 .form-intro .form-heading {
     font-family: 'Poppins', Arial, sans-serif;
     margin: 4px 0 5px;
     font-size: 1.8rem;
     font-weight: 700;
     line-height: 1.2;
 }

 .headingless-h3 {
     font-family: 'Poppins', Arial, sans-serif;
     font-size: 1.17em;
     font-weight: 700;
     margin-block: 1em;
 }

 .course-body h2 {
     margin: 0 0 10px;
     color: var(--navy-900);
     font-size: 1.16rem;
 }

 .no-image-card:nth-child(odd) h2 {
     color: #fff !important;
 }

 .no-image-card:nth-child(even) h2 {
     color: #062b4d !important;
 }

 .faq-q h3 {
     margin: 0;
     padding: 0;
     font: inherit;
     color: inherit;
 }

 .footer-heading {
     font-family: 'Poppins', Arial, sans-serif;
     display: block;
     font-size: 1em;
     font-weight: 700;
     margin-block-start: 1.33em;
     margin-block-end: 1.33em;
 }

 @media(max-width:620px) {
     .hero .hero-title {
         font-size: 2.65rem;
     }
 }

 .footer ul {
     margin: 0;
     padding: 0;
 }

 .footer ul li {
     position: relative;
     margin-bottom: 10px;
     display: inline-block;
     margin-right: 10px;
 }

 .footer ul li a {
     width: 35px;
     line-height: 35px;
     font-size: 15px;
     color: #fff;
     border-radius: 50%;
     text-align: center;
     background-color: #021d3a;
     -webkit-transition: all 0.4s linear;
     transition: all 0.4s linear;
 }

 .footer ul li a:hover {
     background: var(--blue-700);
 }

 #Form_common .form-control {
     width: 100%;
     height: 42px;
     font-size: 14px;
 }

 #Form_common .btn-danger {
     min-height: 42px;
 }

 @media (min-width: 1200px) {
     #Form_common .row {
         flex-wrap: nowrap;
     }

     #Form_common #submit_index {
         margin-top: 8px;
     }
 }

 #Form_common .horizontal-form-row {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 8px;
     width: 100%;
 }

 #Form_common .form-field {
     flex: 1 1 0;
     min-width: 0;
 }

 #Form_common .form-field input,
 #Form_common .form-field select {
     display: block;
     width: 100%;
     height: 42px;
     box-sizing: border-box;
     font-size: 13px;
 }

 #Form_common .captcha-image {
     /*flex: 0 0 85px;*/
     text-align: center;
 }

 #Form_common .captcha-image img {
     max-width: 100%;
     height: 38px;
     object-fit: contain;
 }

 #Form_common .captcha-input {
     flex: 0 0 100px;
 }

 #Form_common .submit-field {
     flex: 0 0 auto;
 }

 #Form_common .submit-field button {
     height: 42px;
     padding: 6px 10px;
     white-space: nowrap;
     font-size: 12px;
 }

 @media (max-width: 1100px) {
     #Form_common .horizontal-form-row {
         flex-wrap: wrap;
     }

     #Form_common .form-field {
         flex: 1 1 30%;
     }

     #Form_common .captcha-image {
         flex: 0 0 85px;
     }

     #Form_common .captcha-input {
         flex: 1 1 100px;
     }
 }

 @media (max-width: 576px) {
     #Form_common .form-field {
         flex: 1 1 100%;
     }
 }