/* =========================================================
   Course pages – shared skin (2026)
   Restyles the existing course-page markup into the site design system.
   Header/footer/chatbot styles live in chrome.css.
   ========================================================= */
:root{
  --azure-blue:#0078d4;--azure-dark:#003f7f;--azure-deeper:#001f4d;--gold:#f0a500;--gold-light:#ffd166;
  --light-bg:#f6f8fb;--text-dark:#0d1b2a;--text-muted:#5a6a7a;
  --navy:#06173a;--ink:#0d1b2a;--line:#e2ebf6;--sky:#eaf3fd;--sky-2:#d6e8fb;
  /* legacy per-course colours mapped onto one palette */
  --ai-dark:#003f7f;--ai-purple:#0078d4;--ai-deeper:#06173a;--ai-light:#eaf3fd;
  --mc-blue:#0078d4;--mc-dark:#003f7f;--mc-deeper:#06173a;--mc-orange:#e8781f;
  --font-h:'Sora',system-ui,sans-serif;--font-b:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font-b);color:var(--ink);background:#fff;overflow-x:clip;font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font-h);color:var(--ink);line-height:1.3}
p,h1,h2,h3,h4,h5,h6,a,span,li{overflow-wrap:break-word}
section{scroll-margin-top:110px}
a{color:var(--azure-blue)}

/* breadcrumb */
.breadcrumb-bar{background:var(--light-bg);border-bottom:1px solid var(--line);padding:11px 0;font-size:13.5px}
.breadcrumb-bar a{color:var(--azure-blue);text-decoration:none}
.breadcrumb-bar span{color:var(--text-muted)}

/* hero */
.hero-banner{position:relative;overflow:hidden;background:var(--navy);padding:56px 0 64px;color:#fff;text-align:left!important}
.hero-banner::before{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:radial-gradient(900px 420px at 85% 10%,rgba(0,120,212,.45),transparent 60%),radial-gradient(600px 380px at 0% 100%,rgba(0,149,232,.22),transparent 60%);pointer-events:none;top:0;left:0;right:0;bottom:0}
.hero-banner::after{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none;top:0;left:0;right:0;bottom:0}
.hero-banner .container{position:relative;z-index:1}
.hero-banner h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:700;letter-spacing:-.6px;line-height:1.16;margin-bottom:18px}
.hero-banner h1 span,.hero-banner h1 span.gold{color:var(--gold)}
.hero-banner h1 span.orange{color:#ffb36b}
.hero-banner p{color:#c9dbf0}
.rating-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e8f1fc;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:600;margin:0 6px 8px 0}
.course-info-bar{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:6px 8px;margin:18px 0 24px}
.course-info-bar .row{--bs-gutter-y:0}
.info-item{padding:10px 6px}
.info-item .label{display:block;font-size:11.5px;color:#9fbde0;letter-spacing:.4px;text-transform:none}
.info-item .value{display:block;font-family:var(--font-h);font-size:18px;font-weight:700;color:#fff;margin-top:2px}
.info-item .value span{color:var(--gold)}

/* hero form */
.hero-form{background:#fff;border-radius:20px;padding:0 0 22px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;color:var(--ink)}
.hero-form h4{margin:0 0 18px;padding:16px 22px;border-radius:0;background:linear-gradient(135deg,#0a3d8f,var(--azure-blue));color:#fff;font-size:1.02rem;font-weight:700;text-align:left}
.hero-form form{padding:0 22px}
.hero-form .form-control{border:1.5px solid #dbe5f1;border-radius:10px;font-size:14px;padding:10px 13px;margin-bottom:11px;background-color:#f8fbff;color:var(--ink)}
.hero-form .form-control:focus{border-color:var(--azure-blue);box-shadow:0 0 0 3px rgba(0,120,212,.12);background-color:#fff}
.hero-form label{color:var(--azure-dark)!important}
.btn-enroll{width:100%;border:0;border-radius:12px;padding:13px;font-weight:700;font-size:15px;color:#fff;background:#16a34a;cursor:pointer;transition:background .2s}
.btn-enroll:hover{background:#12813b}

/* buttons */
.btn-wa,.btn-dl{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none;padding:12px 22px;border:0;cursor:pointer;transition:background .2s,transform .2s;line-height:1.2;box-shadow:none}
.btn-wa{background:#25d366;color:#05310f}
.btn-wa:hover{color:#05310f;transform:translateY(-1px);background:#22c55e}
.btn-dl{background:var(--azure-blue);color:#fff}
.btn-dl:hover{background:var(--azure-dark);color:#fff}
.hero-banner .btn-dl{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3)}
.hero-banner .btn-dl:hover{background:rgba(255,255,255,.16)}

/* trust bar */
.trust-bar{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}
.trust-item{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:13px;justify-content:flex-start}
.trust-item strong{display:block;font-family:var(--font-h);font-size:14.5px;color:var(--ink)}
.trust-item small{display:block;color:var(--text-muted);font-size:12px;line-height:1.3}
.trust-icon{width:40px;height:40px;border-radius:12px;background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.trust-icon:empty::before{content:"\F26B";font-family:"bootstrap-icons"}

/* sections */
.content-section,.content-section-light,.content-section-blue,.content-section-dark,.content-section-ai{padding:84px 0!important;position:relative}
.content-section{background:#fff}
.content-section-light{background:var(--light-bg)}
.content-section-blue,.content-section-dark,.content-section-ai{background:var(--navy)!important;overflow:hidden}
.content-section-blue::before,.content-section-dark::before,.content-section-ai::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 90% 0%,rgba(0,120,212,.35),transparent 60%);pointer-events:none}
.content-section-blue .container,.content-section-dark .container,.content-section-ai .container{position:relative}
.content-section-blue .section-title,.content-section-dark .section-title,.content-section-ai .section-title{color:#fff}
.content-section-blue p,.content-section-dark p,.content-section-ai p{color:#c9dbf0}
section[style*="background:#fff"],section[style*="background: #fff"]{padding:84px 0!important}
section[style*="var(--light-bg)"]{padding:84px 0!important}
.section-label{display:inline-flex;align-items:center;gap:8px;background:none!important;color:var(--azure-blue)!important;font-size:14px;font-weight:700;padding:0!important;border-radius:0;letter-spacing:0;text-transform:none;margin-bottom:10px}
.section-label::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--gold)}
.content-section-blue .section-label,.content-section-dark .section-label,.content-section-ai .section-label{color:var(--gold-light)!important}
.section-title{font-size:clamp(1.55rem,3.1vw,2.2rem);font-weight:700;letter-spacing:-.5px;margin-bottom:16px;color:var(--ink)}
.section-title span{color:var(--azure-blue)}
.content-section-blue .section-title span,.content-section-dark .section-title span,.content-section-ai .section-title span{color:var(--gold)!important}
.text-center.mb-5,.text-center.mb-4{max-width:760px;margin-left:auto;margin-right:auto}

/* trainer */
.trainer-card{background:#fff;border:1px solid var(--line)!important;border-radius:20px;padding:26px;height:100%;box-shadow:none;position:relative;overflow:hidden}
.trainer-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--azure-blue),var(--gold))}
.trainer-avatar{width:72px;height:72px;border-radius:20px!important;background:var(--navy)!important;color:var(--gold-light)!important;font-family:var(--font-h);font-size:1.5rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cert-badge{display:inline-flex;align-items:center;gap:5px;background:var(--sky);color:var(--azure-dark);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;margin:0 4px 6px 0}

/* syllabus – always open, card style */
.syllabus-module{background:#fff;border:1px solid var(--line)!important;border-left:1px solid var(--line)!important;border-radius:16px;margin-bottom:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.syllabus-module:hover{border-color:var(--azure-blue)!important;box-shadow:0 12px 30px rgba(0,63,127,.08)}
.syllabus-header{padding:16px 18px 8px;cursor:default;display:flex;align-items:flex-start;gap:10px}
.syllabus-header h5{font-size:15px;font-weight:700;color:var(--azure-dark)!important;margin:0;line-height:1.4;display:flex;align-items:flex-start;gap:10px}
.syllabus-header .bi-chevron-down{display:none}
.module-num{flex-shrink:0;min-width:34px;height:34px;padding:0 6px!important;border-radius:10px!important;background:var(--navy)!important;color:var(--gold-light)!important;font-family:var(--font-h);font-weight:800;font-size:13px!important;display:inline-flex;align-items:center;justify-content:center;margin:0!important}
.syllabus-body,.syllabus-body.collapse{display:block!important;height:auto!important;padding:2px 18px 16px 62px!important;font-size:14px;color:var(--text-muted);line-height:1.75}
.highlight-badge{display:inline-block;font-size:10px;font-weight:800;background:var(--gold)!important;color:#1b1300!important;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle;font-family:var(--font-b)}

/* career */
.career-card{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px;padding:20px 14px;text-align:center;height:100%;transition:background .2s}
.content-section,.content-section-light{--cc:1}
.content-section .career-card,.content-section-light .career-card{background:#fff!important;border:1px solid var(--line)!important}
.career-card .icon{width:46px;height:46px;border-radius:12px;background:rgba(240,165,0,.16);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 10px}
.career-card h5{font-size:14px;color:#fff;margin-bottom:6px}
.content-section .career-card h5,.content-section-light .career-card h5{color:var(--ink)}
.career-card .salary{display:inline-block;font-size:12.5px;font-weight:800;color:#1b1300!important;background:var(--gold-light);border-radius:8px;padding:2px 10px}

/* why / city */
.why-card,.city-card{background:#fff;border:1px solid var(--line)!important;border-radius:20px;padding:24px;height:100%;border-left:4px solid var(--azure-blue)!important}
.why-card h5,.city-card h5{font-size:1.02rem;color:var(--ink)!important;margin-bottom:8px}
.why-card p,.city-card p{font-size:14.5px;color:var(--text-muted)!important;line-height:1.75;margin:0}
.content-section-blue .why-card p,.content-section-dark .why-card p,.content-section-ai .why-card p{color:var(--text-muted)!important}

/* azure vs aws table */
.cloud-compare{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,63,127,.06)}
.cloud-compare-header{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center}
.cloud-compare-header div{padding:14px;font-family:var(--font-h);font-weight:700;font-size:14px}
.cloud-compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line)}
.cloud-compare-row div{padding:12px 16px;font-size:13.5px;color:var(--text-muted);display:flex;align-items:center}
.col-label-header{background:var(--light-bg);color:var(--ink)}
.col-azure-header{background:var(--azure-blue);color:#fff}
.col-aws-header{background:#232f3e;color:#ff9900}
.col-azure{background:#f5f9ff}
.col-aws{background:#fffaf3}
.col-label{font-weight:700;color:var(--ink)!important}
@media(max-width:575px){.cloud-compare-row div,.cloud-compare-header div{padding:10px 8px;font-size:12px}}

/* faq */
.accordion-item{border:1px solid var(--line)!important;border-radius:12px!important;margin-bottom:10px;overflow:hidden;background:#fff}
.accordion-button{font-family:var(--font-h);font-weight:600;font-size:14.5px;color:var(--ink);background:#fff;padding:16px 18px}
.accordion-button:not(.collapsed){background:var(--sky);color:var(--azure-dark);box-shadow:none}
.accordion-button:focus{box-shadow:none}
.accordion-body{font-size:14.5px;color:var(--text-muted);line-height:1.75}

/* related */
.related-card{display:block;background:#fff;border:1px solid var(--line)!important;border-radius:18px;padding:20px;text-decoration:none;height:100%;transition:border-color .2s,box-shadow .2s}
.related-card:hover{border-color:var(--azure-blue)!important;box-shadow:0 14px 34px rgba(0,63,127,.10)}
.related-card img{border-radius:12px!important}
.related-card h5{font-size:1rem;color:var(--ink)!important;margin:10px 0 6px}
.related-card p{font-size:13.5px;color:var(--text-muted);margin:0}
.related-tag{display:inline-block;background:var(--sky)!important;color:var(--azure-blue)!important;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:8px;margin-bottom:6px}

/* misc inline-styled blocks: soften borders & radii to match */
[style*="border-radius:16px"][style*="box-shadow"]{box-shadow:0 10px 30px rgba(6,23,58,.06)!important}
iframe{border-radius:18px}

@media(max-width:767px){
  .hero-banner{padding:36px 0 44px}
  .content-section,.content-section-light,.content-section-blue,.content-section-dark,.content-section-ai,section[style*="background:#fff"],section[style*="var(--light-bg)"]{padding:60px 0!important}
  .trust-bar .row>div{justify-content:flex-start!important}
  .syllabus-body,.syllabus-body.collapse{padding:2px 16px 14px 16px!important}
}
.info-item .value,.info-item .value span{overflow-wrap:normal;word-break:normal}
.info-item .value{font-size:16px;line-height:1.3}
@media(max-width:575px){.info-item .value{font-size:15px}}