e:root{
--bg:#24102a;
--nav:#351046;
--accent:#d44aa6;
--muted:#bfb0c6;
--white:#ffffff;
}
*{box-sizing:border-box ; margin: 0; padding: 0;}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--white);background:linear-gradient(180deg,var(--bg),#1f0d24);}


.container{max-width:fit-content;margin:48px auto;padding:40px 24px}
.hero{display:flex;gap:40px;align-items:flex-start}
.hero-left{flex:1;min-width:420px}
h1{font-size:44px;line-height:1.02;margin:6px 0 18px}
h2{font-size:20px;color:var(--muted);font-weight:500;margin:0 0 18px}
.lead{color:#d6c8dd;max-width:680px;line-height:1.7}

.features{display:flex;gap:18px;margin:28px 0 22px;flex-wrap:wrap}
.chip{background:linear-gradient(180deg,#fff,#fff);padding:18px;border-radius:12px;min-width:140px;display:flex;flex-direction:column;align-items:center;gap:10px;color:#2b2030;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.chip small{font-size:14px;font-weight:600}
.icon-box{width:44px;height:44px;border-radius:8px;display:grid;place-items:center}

.cta{display:flex;gap:18px;margin-top:10px}
.btn{padding:12px 22px;border-radius:28px;font-weight:700;border:none;cursor:pointer}
.btn.primary{background:var(--accent);color:white;box-shadow:0 6px 18px rgba(212,74,166,0.25)}
.btn.ghost{background:transparent;border:3px solid rgba(255,255,255,0.12);color:white}

.hero-right{width:520px;position:relative}
.hero-right img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.badge{position:absolute;left:-12px;bottom:42px;background:linear-gradient(180deg,#e6e6e6,#cfcfcf);color:#111;padding:12px 20px;border-radius:18px;box-shadow:8px 16px 36px rgba(0,0,0,0.45);display:flex;align-items:center;gap:12px;font-weight:700}

.stats{margin-top:64px}
.stat-wrap{background:#fff;border-radius:14px;padding:26px 32px;display:flex;justify-content:space-between;align-items:center;color:#231321}
.stat{flex:1;text-align:center;font-weight:700;font-size:18px}
.stat .muted{font-weight:500;color:#6d6270;margin-top:8px}
 .nav-links.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .menu-toggle {
    display: block;
  }

/* Responsive */
@media (max-width:980px){
.hero{flex-direction:column}
.hero-right{width:100%}
.nav{padding:0 20px}
.container{padding:24px}
}
/* Course-Section */
.course-section{
max-width:fit-content;
margin:80px auto;
padding:20px;
color:#fff;
font-family:Inter;
}
.tabs{
display:flex;
gap:40px;
font-weight:700;
}
.tabs a{
color:#d7cde2;
text-decoration:none;
}
.tabs .active{color:#fff;}
.divider{
border:none;
border-bottom:1px solid #5a4366;
margin:18px 0 30px;
}
.description{
line-height:1.7;
max-width:1000px;
color:#d6c8dd;
}
.section-grid{
display:flex;
gap:40px;
margin-top:40px;
}
.left-cards{
flex:1;
display:flex;
flex-direction:column;
gap:22px;
}
.card{
background:#fff;
color:#2b2030;
padding:22px;
border-radius:16px;
display:flex;
align-items:flex-start;
gap:16px;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}
.card h3{margin:0 0 6px;}
.icon{
width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:#d7cde2;color:#2b2030;
}
.right-box{
flex:1;
background:#fff;
color:#2b2030;
padding:28px;
border-radius:18px;
box-shadow:0 8px 26px rgba(0,0,0,0.15);
}
.right-box h2{margin-top:0;margin-bottom:20px;}
.right-item{
display:flex;
gap:12px;
margin-bottom:20px;
}
.r-icon{
width:42px;height:42px;font-size:22px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#eee;
}

@media(max-width:900px){
.section-grid{flex-direction:column;}
}
/* why-choose-this-course.css */
.why-this-course{padding:80px 20px 110px;background:#24102a;color:#fff;font-family:Inter}
.wtc-wrap{max-width:1180px;margin:0 auto;text-align:center}
.wtc-title{font-size:40px;font-weight:800;margin-bottom:36px}
.wtc-title span{color:#d44aa6}

.wtc-list{display:flex;flex-direction:column;gap:18px;max-width:850px;margin:0 auto}
.wtc-item{background:#fff;color:#231321;padding:20px 26px;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,0.25);font-size:18px;font-weight:600;text-align:left;padding-left:54px;position:relative}
.wtc-item:before{content:"\2713";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:transparent;color:#d44aa6;border:2px solid rgba(212,74,166,0.2);font-size:14px}

@media(max-width:700px){
.wtc-item{font-size:16px}
}/* canva-ai-detailed-curriculum.css */
.detailed-curriculum{padding:80px 20px 110px;background:#24102a;color:#fff;font-family:Inter}
.dc-wrap{max-width:1180px;margin:0 auto}
.dc-title{text-align:center;font-size:40px;font-weight:800;margin-bottom:40px}
.dc-title span{color:#d44aa6}

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

.dc-module{background:#fff;color:#231321;padding:32px 28px;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,0.25)}
.dc-module h3{margin:0 0 16px;font-size:22px;font-weight:700}
.dc-module ul{margin:0;padding-left:20px;color:#444;line-height:1.7}
.dc-module ul li{margin-bottom:8px}

@media(max-width:900px){
.dc-grid{grid-template-columns:1fr}
}

/* program-structure.css */
.program-structure{padding:80px 20px 100px;background:#24102a;color:#fff;font-family:Inter}
.structure-inner{max-width:fit-content;margin:0 auto;position:relative}
.title{text-align:center;font-size:42px;margin-bottom:50px;font-weight:800}
.title span{color:#d44aa6}

.grid-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;position:relative}

.ps-card{padding:32px 34px;border-radius:22px;color:#1e1e1e;box-shadow:0 12px 40px rgba(0,0,0,0.25)}
.ps-card h3{margin:0 0 16px;font-size:22px}
.ps-card ul{list-style:disc;padding-left:20px;margin:0;color:#333;line-height:1.7}

/* Color variations */
.lilac{background:#e9defc}
.blue{background:#dfefff}
.pink{background:#fbe0eb}
.grey{background:#e5e4dd}

/* Responsive */
@media(max-width:900px){
.grid-boxes{grid-template-columns:1fr}
}
/* tools-you-will-master */
.tools-master{padding:72px 20px 110px;background:#24102a;color:#fff;font-family:Inter}
.tm-wrap{max-width:1180px;margin:0 auto;text-align:center}
.tm-title{font-size:36px;font-weight:800;margin-bottom:28px}
.tm-title span{color:#d44aa6}

.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tm-card{background:#fff;color:#231321;padding:20px;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,0.25);display:flex;flex-direction:column;align-items:center;gap:12px}
.tm-icon{width:68px;height:68px;border-radius:12px;background:#f6eef8;display:grid;place-items:center}
.tm-icon img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.tm-card h3{margin:0;font-size:18px}
.muted{color:#6b6b73;font-size:14px;margin:0}

@media(max-width:1100px){
.tm-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.tm-grid{grid-template-columns:1fr}
}
/* career-opportunities-canva-ai.css */
.career-canva-ai{padding:80px 20px 110px;background:#24102a;color:#fff;font-family:Inter}
.cca-wrap{max-width:1180px;margin:0 auto;text-align:center}
.cca-title{font-size:40px;font-weight:800;margin-bottom:36px}
.cca-title span{color:#d44aa6}

.cca-list{display:flex;flex-direction:column;gap:18px;max-width:850px;margin:0 auto}
.cca-item{background:#fff;color:#231321;padding:20px 26px;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,0.25);font-size:18px;font-weight:600;text-align:left;padding-left:54px;position:relative}
.cca-item:before{content:"\2713";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:transparent;color:#d44aa6;border:2px solid rgba(212,74,166,0.2);font-size:14px}

@media(max-width:700px){
.cca-item{font-size:16px}
}

/* who-can-join.css */
.who-join{padding:80px 20px 120px;background:#24102a;color:#fff;font-family:Inter}
.wj-wrap{max-width:fit-content;margin:0 auto}
.wj-title{text-align:center;font-size:40px;font-weight:800;margin-bottom:36px}
.wj-title span{color:#d44aa6}

.wj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:30px}

.wj-card{background:#fff;color:#231321;border-radius:18px;padding:36px 32px;box-shadow:0 10px 28px rgba(0,0,0,0.25);text-align:center}
.wj-card h3{margin:16px 0 10px;font-size:22px}
.wj-card p{color:#6b6b73;line-height:1.6;margin:0 auto;max-width:330px}

.wj-icon{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto;box-shadow:0 6px 14px rgba(0,0,0,0.15)}
.wj-icon img{width:40px;height:40px;border-radius:10px;object-fit:cover}

/* Card background soft colors */
.pink{background:#f7eef7}
.blue{background:#e8f7fb}
.yellow{background:#fbf7e2}
.lavender{background:#f3f0fa}

@media(max-width:900px){
.wj-grid{grid-template-columns:1fr}
}

/* learning-paths.css */
:root{--bg:#24102a;--card:#fff;--accent:#d44aa6;--blue:#49b7d8;--muted:#6b6b73}
.pricing-section{background:var(--bg);color:#fff;padding:64px 20px 96px;font-family:Inter}
.pricing-inner{max-width:1180px;margin:0 auto}
.pricing-title{text-align:center;font-size:36px;margin-bottom:36px;font-weight:800}
.pricing-title span{color:var(--accent)}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.plan{background:var(--card);color:#231321;border-radius:14px;padding:36px 42px;box-shadow:0 20px 48px rgba(0,0,0,0.5);position:relative;overflow:visible}

/* ribbon */
.ribbon{position:absolute;left:0;top:0;background:var(--accent);color:#fff;padding:12px 18px;border-top-left-radius:12px;border-bottom-right-radius:12px;font-weight:700}
.ribbon.small{background:var(--blue);right:auto;left:0}

.plan-right .ribbon{left:auto;right:0;border-top-left-radius:0;border-bottom-left-radius:12px}

.plan-icon{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin:8px auto 12px;background:linear-gradient(135deg,#f7d7ef,#f2b5d6);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.plan-icon img{width:46px;height:46px;object-fit:cover}

.plan-name{text-align:center;font-size:28px;margin:8px 0 6px}
.plan-meta{text-align:center;color:var(--muted);margin-bottom:6px}
.plan-desc{text-align:center;color:#8c8c93;margin-bottom:20px}

.price-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
.price{font-size:36px;font-weight:800}
.price-old{color:#9a9a9a;text-decoration:line-through;font-weight:600}
.price-old .save{color:#2aa84f;font-weight:700;text-decoration:none;margin-left:8px}
.price-note{font-size:13px;color:var(--muted)}

.plan-features{list-style:none;padding:0;margin:18px 0 24px}
.plan-features li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06);padding-left:28px;position:relative;color:#4b4b52}
.plan-features li:before{content:"\2713";position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--accent);border:2px solid rgba(212,74,166,0.15)}

.btn.enroll{display:block;width:70%;margin:10px auto; text-align: center; text-decoration: none; padding:14px;border-radius:10px;border:none;font-weight:700;cursor:pointer;box-shadow:0 16px 32px rgba(0,0,0,0.25)}
.btn.enroll.pink{background:linear-gradient(180deg,var(--accent),#e07ab9);color:#fff}
.btn.enroll.blue{background:linear-gradient(180deg,var(--blue),#59bfe0);color:#fff}

.secure{text-align:center;color:#7b6f7f;font-size:13px;margin-top:12px}

/* Left card accent line */
.plan-left{border:3px solid rgba(212,74,166,0.12)}
.plan-right{border:3px solid rgba(73,183,216,0.08)}

/* rounded corner emphasis */
.plan{border-radius:18px}

@media(max-width:1000px){
.plans{grid-template-columns:1fr}
.plan{padding:28px}
.btn.enroll{width:90%}
}
/* Footer */
.footer {
    max-width: var(--max-width);
    margin: auto;
    padding: 50px 40px;
    background: linear-gradient(180deg, #240418, #1b0510);
    border-radius: 4px;
}

.footer .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

/* LOGO */
.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 200px;
}

.logo1 {
  img{
    width: 150px;
    height:150px;
  } ;
}

.name {
    color: var(--accent);
    font-weight: 700;
    font-family: "Montserrat";
}

.small {
    font-size: 12px;
    color: var(--link);
    font-weight: 400;
}

/* NAVIGATION */
.nav-columns {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    min-width: 280px;
}

.col h4 {
    color: var(--accent);
    font-family: "Montserrat";
    font-size: 16px;
    margin-bottom: 12px;
}

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

.col ul li {
    margin: 8px 0;
    color: var(--link);
    font-size: 14px;
}

/* NEWSLETTER */
.newsletter {
    min-width: 280px;
}

.newsletter h3 {
    font-family: "Montserrat";
    color: var(--accent);
    margin-bottom: 12px;
}

.lead {
    color: var(--link);
    margin-bottom: 16px;
}

.subscribe-row {
    display: flex;
    gap: 12px;
}

.subscribe-row input {
    flex: 1;
    padding: 14px;
    background: var(--accent);
    border-radius: 12px;
    border: none;
    font-weight: 600;
}

.subscribe-row button {
    background: var(--accent);
    padding: 12px 22px;
    border-radius: 28px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.privacy {
    font-size: 12px;
    color: var(--link);
    margin-top: 10px;
}

/* DIVIDER */
.divider {
    margin: 35px 0 20px;
    border-top: 1px solid var(--hr);
}

/* SOCIAL ICONS */
.socials {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent);
    transition: 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* COPYRIGHT */
copyright {
    text-align: center;
}

copyright, .copyright {
    text-align: center;
    color: var(--accent);
    font-family: "Montserrat";
    margin-top: 5px;
}

/* RESPONSIVE */
@media (max-width: 880px) {
    .subscribe-row {
        flex-direction: column;
    }
    .subscribe-row button {
        width: 100%;
    }
    .socials {
        gap: 14px;
    }
}