:root{--green:#006737;--dark:#062b21;--mint:#eaf6f0;--line:#e5ece8;--text:#111a1d;--muted:#5e676b;--shadow:0 14px 40px rgba(7,48,35,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(135deg,#edf4f1,#fff 35%,#f0f5f3);color:var(--text);font-family:"DM Sans",sans-serif}
button,input{font:inherit}.offer{height:58px;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:linear-gradient(90deg,#033e2c,#00653d,#023e2c);font-size:15px}.offer>a{margin-left:18px;padding:10px 17px;border-radius:22px;color:#174c38;background:#f3fffa;text-decoration:none;font-size:12px;font-weight:700}.page-shell{width:calc(100% - 40px);max-width:1560px;margin:0 auto 20px;background:#fff;box-shadow:var(--shadow);border-radius:14px 14px 0 0;overflow:hidden}
.navbar{height:102px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid #f1f3f2;gap:40px;background:rgba(255,255,255,.96);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:var(--dark);text-decoration:none;min-width:235px}.brand-mark{width:54px;height:52px;position:relative;display:grid;place-items:center;color:var(--green);font-size:44px;line-height:1}.brand-mark .cap{position:absolute;top:-6px;font-size:35px;color:#042e28;transform:rotate(45deg)}.brand-mark .book{position:absolute;bottom:-8px;font-size:52px;font-weight:800}.brand b{display:block;font:800 26px/1 "Manrope",sans-serif;letter-spacing:3px}.brand small{display:block;font:700 11px/1.6 "Manrope",sans-serif;letter-spacing:6px;color:var(--green)}
.nav-links{display:flex;align-items:stretch;justify-content:center;gap:40px;height:100%;flex:1}.nav-links a{display:flex;align-items:center;color:#151a1d;text-decoration:none;font-weight:500;white-space:nowrap;position:relative}.nav-links a.active{color:var(--green)}.nav-links a.active:after{content:"";position:absolute;bottom:10px;height:2px;left:-10px;right:-10px;background:var(--green)}.chevron{font-size:17px;margin-left:6px}.nav-actions{display:flex;align-items:center;gap:14px}.btn{border:0;padding:13px 28px;border-radius:12px;font-weight:600;cursor:pointer}.btn-outline{background:#fff;border:1px solid #9ccbb6;color:#075f39}.btn-primary{background:linear-gradient(135deg,#087345,#005b31);color:#fff;box-shadow:0 7px 14px rgba(0,103,55,.15)}.icon-btn{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:29px;line-height:1}.menu-toggle{display:none;border:0;background:none;font-size:27px}
.hero{min-height:620px;display:grid;grid-template-columns:48% 52%;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:390px;height:390px;left:-160px;top:210px;border-radius:50%;background:radial-gradient(circle,rgba(222,244,234,.55),transparent 68%)}.hero-copy{padding:70px 30px 20px 72px;position:relative;z-index:3}.eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--mint);color:#176d48;border-radius:25px;padding:9px 15px;font-size:12px;font-weight:700}.eyebrow span{font-size:20px}.hero h1{font:800 clamp(48px,4.2vw,68px)/1.13 "Manrope",sans-serif;letter-spacing:-2.5px;margin:28px 0 20px;color:#07191c}.hero h1 span{color:var(--green)}.hero-copy>p{font-size:18px;line-height:1.65;max-width:540px;margin-bottom:26px}.search-box{height:64px;display:flex;align-items:center;border:1px solid #d8e6df;border-radius:17px;padding:7px 8px 7px 20px;max-width:610px;box-shadow:0 8px 25px rgba(7,48,35,.05)}.search-box>span{font-size:27px;color:var(--green);transform:rotate(-15deg)}.search-box input{border:0;outline:0;min-width:0;flex:1;padding:0 16px;color:#25312e}.search-box button{border:0;border-radius:12px;padding:14px 30px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}.popular{display:flex;align-items:center;gap:8px;margin-top:18px;white-space:nowrap;font-size:11px}.popular button{border:0;background:#edf5f1;border-radius:15px;padding:7px 12px;color:#354b42;cursor:pointer}
.hero-visual{position:relative;min-width:0}.hero-visual>img{width:112%;height:100%;object-fit:cover;object-position:57% center;display:block}.float-card{position:absolute;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 35px rgba(9,55,40,.11);border-radius:19px;padding:17px;z-index:2}.float-card strong,.float-card small{display:block}.round-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e3f4ea;color:var(--green);font-weight:800}.live-card{left:-33px;top:180px;width:178px}.live-card strong{margin-top:10px}.live-card small,.cert-card small{color:var(--green);margin-top:8px}.cert-card{right:28px;top:105px;display:flex;align-items:center;gap:14px;width:188px}.progress-card{right:55px;bottom:125px;width:180px}.progress-row{display:flex;align-items:center;gap:15px;margin-top:10px}.progress-ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:radial-gradient(circle,#fff 52%,transparent 54%),conic-gradient(var(--green) 78%,#cce9db 0)}.progress-row>strong{font-size:22px}.progress-row>strong small{font-size:9px;color:#4a765f}.join-card{position:absolute;bottom:25px;right:80px;width:370px;border-radius:18px;padding:15px 20px;background:linear-gradient(110deg,#005a35,#087045);color:#fff;display:flex;align-items:center;gap:16px}.join-card small{display:block;margin-top:5px;color:#d8eee4}.avatars{display:flex}.avatars span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e6eee9;border:2px solid white;margin-left:-9px;font-size:22px}.avatars span:first-child{margin-left:0}
.stats{display:flex;gap:60px;padding:0 72px 28px;position:relative;margin-top:-36px;z-index:5}.stats>div{display:flex;align-items:center;gap:12px}.stat-icon{width:50px;height:50px;display:grid;place-items:center;background:var(--mint);border-radius:50%;color:var(--green);font-size:28px}.stat-icon.gold{color:#f1ae20}.stats p{margin:0}.stats strong{display:block;font-size:23px;color:#073f2c}.stats small{display:block;margin-top:4px;font-size:11px;color:#545e5b}
.features{margin:15px 48px 28px;padding:25px 15px;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;border:1px solid #edf1ef;border-radius:27px;box-shadow:0 10px 35px rgba(3,50,34,.04)}.features article{text-align:center;padding:5px 13px;min-height:155px;border-right:1px solid #eef1ef}.features article:last-child{border-right:0}.features article>span{display:grid;place-items:center;width:57px;height:57px;margin:0 auto 13px;background:var(--mint);border-radius:50%;color:var(--green);font-size:28px;font-weight:800}.features strong{font-size:13px}.features p{font-size:12px;line-height:1.7;margin:9px 0 0;color:#47504e}
.trusted{min-height:92px;margin:0 48px 32px;padding:18px 30px;display:flex;align-items:center;justify-content:space-around;gap:25px;border-radius:18px;background:linear-gradient(90deg,#fff,#fbfcfc);box-shadow:0 5px 25px rgba(0,0,0,.035)}.trusted>small{font-size:10px;color:#61706a}.company{font-size:23px;font-weight:600;white-space:nowrap}.google{color:#4285f4}.microsoft{color:#666}.amazon{font-weight:800}.deloitte{font-weight:800}.deloitte span{color:#80be3e}.infosys{color:#1387c9;font-weight:400}.wipro{color:#502070}.tcs{color:#ec3e82;font-size:29px}
/* .modal{position:fixed;inset:0;z-index:100;background:rgba(3,28,20,.58);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.2s}.modal.open{opacity:1;visibility:visible}.modal-card{width:min(400px,calc(100% - 30px));background:#fff;border-radius:22px;padding:36px;text-align:center;position:relative;transform:translateY(15px);transition:.2s}.modal.open .modal-card{transform:none}.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}.modal-icon{font-size:38px}.modal-card h2{margin:12px 0 5px}.modal-card p{color:var(--muted);font-size:14px}.modal-card input{width:100%;padding:14px;border:1px solid #d9e2de;border-radius:10px;margin:12px 0}.modal-submit{width:100%}.toast{position:fixed;z-index:200;bottom:25px;left:50%;transform:translate(-50%,90px);background:#073e2d;color:#fff;padding:12px 22px;border-radius:25px;transition:.3s;box-shadow:var(--shadow)}.toast.show{transform:translate(-50%,0)} */



/* Modal Background Overlay */
.modal {
  position: fixed;
  top: 0; left: 0; 
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Smooth dark overlay */
  display: flex; 
  align-items: center; 
  justify-content: center;
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.25s ease;
  z-index: 1100;
  font-family: 'Inter', 'Manrope', sans-serif;
}

.modal.open { 
  opacity: 1; 
  pointer-events: auto; 
}

/* Modal Box (Exact Image UI) */
.modal-content { 
  background: #ffffff; 
  padding: 40px 35px; 
  border-radius: 28px; /* High rounded corners as per image */
  width: 90%; 
  max-width: 420px; 
  position: relative; 
  text-align: center; /* Centers everything */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); /* Soft shadow */
}

/* Close Button (top-right 'x') */
.modal-close { 
  position: absolute; 
  top: 25px; 
  right: 25px; 
  border: 0; 
  background: none; 
  font-size: 22px; 
  font-weight: 600;
  color: #000000;
  cursor: pointer; 
  transition: transform 0.2s;
}
.modal-close:hover {
  transform: scale(1.1);
}

/* Graduation Cap Style */
.modal-icon {
  font-size: 42px;
  margin-bottom: 15px;
  display: inline-block;
}

/* Headings */
.modal-content h2 {
  font-size: 26px;
  font-weight: 700;
  color: #031723;
  margin: 0 0 12px 0;
}

/* Sub-text */
.modal-content p {
  font-size: 14.5px;
  color: #556975;
  line-height: 1.5;
  margin: 0 0 25px 0;
  padding: 0 10px;
}

/* Form Alignment */
.form-group { 
  margin-bottom: 16px; 
}

/* Input Field (Exact Border & Radius) */
.form-group input { 
  width: 100%;
  padding: 14px 16px; 
  border: 1px solid #d3ded9; 
  border-radius: 10px; 
  font-size: 15px; 
  outline: none; 
  box-sizing: border-box;
  color: #25312e;
  transition: border-color 0.2s;
}
.form-group input::placeholder {
  color: #8fa0aa;
}
.form-group input:focus { 
  border-color: #005930; /* Highlight on focus */
}

/* Green Continue Button */
.btn-continue { 
  width: 100%; 
  padding: 14px; 
  background-color: #005930; /* Deep green from your image */
  color: #ffffff;
  font-size: 16px;
  font-weight: 700; 
  border-radius: 12px; 
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 89, 48, 0.2);
  transition: background-color 0.2s;
}
.btn-continue:hover {
  background-color: #004424; /* Darker green on hover */
}
@media(max-width:1350px){.navbar{padding:0 24px;gap:22px}.nav-links{gap:24px}.brand{min-width:205px}.nav-actions .btn{padding-left:20px;padding-right:20px}}
@media(max-width:1180px){.nav-links{gap:16px;font-size:14px}.brand{min-width:180px}.hero-copy{padding-left:42px}.features{grid-template-columns:repeat(3,1fr)}.features article:nth-child(3){border-right:0}.stats{gap:30px;padding-left:42px}.join-card{right:20px}.popular{flex-wrap:wrap;white-space:normal}}
@media(max-width:900px){.offer{font-size:11px;height:auto;min-height:48px;padding:8px 12px;text-align:center;margin-bottom: 5px}.offer>a{display:none}.page-shell{width:100%;border-radius:0}.navbar{height:76px;justify-content:space-between}.brand{min-width:auto}.brand b{font-size:20px}.brand small{letter-spacing:4px}.brand-mark{transform:scale(.8)}.menu-toggle{display:block;order:3}.nav-links{display:none;position:absolute;top:76px;left:0;right:0;height:auto;background:#fff;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;gap:20px}.nav-links.open{display:flex}.nav-links a.active:after{display:none}.nav-actions{margin-left:auto}.icon-btn{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:50px 28px 20px;text-align:center}.eyebrow{font-size:10px}.hero h1{font-size:clamp(42px,10vw,62px)}.hero-copy>p,.search-box{margin-left:auto;margin-right:auto}.popular{justify-content:center}.hero-visual{height:530px}.hero-visual>img{width:100%;object-position:center}.live-card{left:20px}.stats{margin:0;padding:25px;display:grid;grid-template-columns:1fr 1fr}.features{margin:15px 20px;grid-template-columns:repeat(2,1fr)}.features article{border-right:0}.trusted{margin:25px 20px;flex-wrap:wrap}.trusted>small{width:100%;text-align:center}}
@media(max-width:560px){.nav-actions .btn-outline{display:none}.btn{padding:10px 16px}.navbar{padding:0 14px;gap:8px}.brand-mark{width:42px}.hero-copy{padding:35px 18px 15px}.hero h1{font-size:39px;letter-spacing:-1.5px}.hero-copy>p{font-size:15px}.search-box{height:56px}.search-box button{padding:11px 16px}.popular button{font-size:10px}.hero-visual{height:420px}.live-card{top:40px;left:10px;transform:scale(.82);transform-origin:left top}.cert-card{top:20px;right:5px;transform:scale(.75);transform-origin:right top}.progress-card{right:8px;bottom:85px;transform:scale(.75);transform-origin:right bottom}.join-card{bottom:16px;right:12px;width:calc(100% - 24px);font-size:12px}.stats{grid-template-columns:1fr 1fr;padding:20px 16px;gap:18px}.stats strong{font-size:19px}.features{grid-template-columns:1fr 1fr;gap:5px;padding:14px 5px}.features article{padding:5px;min-height:170px}.trusted{gap:18px}.company{font-size:18px}}

/* Premium interaction layer */
.offer>a,.brand-mark,.nav-links a,.btn,.icon-btn,.popular button,.hero-visual>img,.float-card,.round-icon,.join-card,.avatars span,.stats>div,.stat-icon,.features article,.features article>span,.company{
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,color .25s ease,background .25s ease,border-color .25s ease,filter .3s ease;
}
.float-card{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.join-card{box-shadow:0 15px 32px rgba(0,75,43,.2)}
.search-box{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.features article{border-radius:18px;padding-top:12px;position:relative}
.btn,.offer>a{position:relative;overflow:hidden}
.btn:after,.offer>a:after{content:"";position:absolute;inset:-80% auto -80% -45%;width:28%;background:rgba(255,255,255,.4);transform:rotate(22deg);transition:left .55s ease}
.nav-links a:not(.active):after{content:"";position:absolute;bottom:10px;height:2px;left:50%;right:50%;background:linear-gradient(90deg,#12a867,var(--green));transition:left .3s ease,right .3s ease}

@media(hover:hover){
  .offer>a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
  .offer>a:hover:after,.btn:hover:after{left:125%}
  .brand:hover .brand-mark{transform:translateY(-3px) rotate(-2deg);filter:drop-shadow(0 7px 8px rgba(0,103,55,.18))}
  .nav-links a:hover{color:var(--green)}
  .nav-links a:hover:after{left:-8px;right:-8px}
  .btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,103,55,.25)}
  .btn-outline:hover{background:#effaf5;border-color:#087345}
  .icon-btn:hover{transform:rotate(-8deg) scale(1.08);color:#fff;background:var(--green);border-color:var(--green);box-shadow:0 8px 20px rgba(0,103,55,.22)}
  .search-box:focus-within{transform:translateY(-2px);border-color:#5eae87;box-shadow:0 13px 35px rgba(0,103,55,.13),0 0 0 4px rgba(0,103,55,.05)}
  .search-box button:hover{background:#00502c;box-shadow:0 7px 17px rgba(0,103,55,.25)}
  .popular button:hover{transform:translateY(-2px);background:#dff1e8;color:var(--green);box-shadow:0 7px 15px rgba(0,103,55,.1)}
  .hero-visual:hover>img{transform:scale(1.025);filter:saturate(1.06)}
  .float-card:hover{transform:translateY(-9px) scale(1.025);box-shadow:0 22px 48px rgba(5,67,45,.19);border-color:#d3eee1}
  .float-card:hover .round-icon{transform:rotate(8deg) scale(1.1);background:#d4efdf}
  .join-card:hover{transform:translateY(-7px);box-shadow:0 24px 45px rgba(0,75,43,.28);filter:saturate(1.08)}
  .join-card:hover .avatars span{transform:translateY(-3px)}
  .stats>div:hover{transform:translateY(-5px)}
  .stats>div:hover .stat-icon{transform:rotate(-6deg);box-shadow:0 10px 22px rgba(0,103,55,.13)}
  .features article:hover{transform:translateY(-10px);background:linear-gradient(145deg,#fff,#f2fbf7);box-shadow:0 18px 38px rgba(0,88,49,.12);z-index:2}
  .features article:hover>span{transform:translateY(-3px) rotate(-6deg) scale(1.1);background:linear-gradient(135deg,#087345,#005b31);color:#fff;box-shadow:0 10px 22px rgba(0,103,55,.2)}
  .features article:hover strong{color:var(--green)}
  .company:hover{transform:translateY(-4px) scale(1.07);filter:saturate(1.25);text-shadow:0 8px 18px rgba(0,0,0,.12)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}