/* =========================================================
   ManaCoding Institute — Design Tokens
========================================================= */
:root{
  --white:#FFFFFF;
  --primary:#2563EB;
  --primary-dark:#1D4ED8;
  --secondary:#06B6D4;
  --accent:#F59E0B;
  --success:#10B981;
  --ink:#0F172A;
  --ink-soft:#475569;
  --muted:#64748B;
  --border:#E2E8F0;
  --soft-bg:#F8FAFC;
  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(255,255,255,.35);
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --shadow-md:0 12px 32px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  --radius:18px;
  --radius-sm:12px;
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --transition: .35s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --white:#0B1220;
  --ink:#F1F5F9;
  --ink-soft:#CBD5E1;
  --muted:#94A3B8;
  --border:#1E293B;
  --soft-bg:#0F172A;
  --glass-bg:rgba(15,23,42,.65);
  --glass-border:rgba(255,255,255,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  transition:background var(--transition), color var(--transition);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); color:var(--ink); font-weight:700;}
a{text-decoration:none;}
.text-grad{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-pad{padding:100px 0;}
.bg-soft{background:var(--soft-bg);}
.text-muted-2{color:var(--muted);}
@media (max-width:768px){ .section-pad{padding:64px 0;} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ============== Preloader ============== */
#preloader{
  position:fixed; inset:0; background:var(--white); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{opacity:0; visibility:hidden;}
.loader-ring{
  width:52px;height:52px;border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--primary);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============== Navbar (Glassmorphism) ============== */
.navbar-glass{
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--glass-border);
  transition:all var(--transition);
  z-index:1030;
}
.navbar-brand{font-family:var(--font-display); font-weight:700;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:var(--shadow-sm);
}
.brand-text{display:flex; flex-direction:column; line-height:1; color:var(--ink); font-size:1.15rem;}
.brand-text small{font-size:.55rem; letter-spacing:.14em; color:var(--muted); font-weight:600;}
.nav-link{color:var(--ink-soft) !important; font-weight:500; padding:.5rem 1rem !important; position:relative;}
.nav-link.active, .nav-link:hover{color:var(--primary) !important;}
.nav-link.active::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.15rem; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary)); border-radius:2px;
}
.theme-toggle{
  width:40px;height:40px;border-radius:50%; border:1px solid var(--border); background:transparent;
  color:var(--ink); display:flex;align-items:center;justify-content:center; transition:var(--transition);
}
.theme-toggle:hover{background:var(--primary); color:#fff; border-color:var(--primary);}

/* Buttons */
.btn-primary-grad{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  border:none; color:#fff; font-weight:600; padding:.7rem 1.6rem; border-radius:12px;
  position:relative; overflow:hidden; transition:transform var(--transition), box-shadow var(--transition);
  box-shadow:0 8px 20px rgba(37,99,235,.28);
}
.btn-primary-grad:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.38); color:#fff;}
.btn-outline-glass{
  background:var(--glass-bg); backdrop-filter:blur(10px);
  border:1px solid var(--border); color:var(--ink); font-weight:600; padding:.7rem 1.6rem; border-radius:12px;
  transition:var(--transition);
}
.btn-outline-glass:hover{border-color:var(--primary); color:var(--primary);}
.btn-ripple{position:relative; overflow:hidden;}
.ripple-el{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{ to{transform:scale(3); opacity:0;} }

/* ============== Hero ============== */
.hero{
  position:relative; padding:170px 0 110px; overflow:hidden;
  background:linear-gradient(180deg,#F8FBFF 0%, #FFFFFF 70%);
}
[data-theme="dark"] .hero{background:linear-gradient(180deg,#0B1220 0%, #0B1220 70%);}
.hero-bg-anim{position:absolute; inset:0; z-index:0;}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; animation:float 10s ease-in-out infinite;}
.blob1{width:340px;height:340px; background:var(--primary); top:-80px; left:-100px;}
.blob2{width:300px;height:300px; background:var(--secondary); top:200px; right:-90px; animation-delay:2s;}
.blob3{width:260px;height:260px; background:var(--accent); bottom:-100px; left:35%; animation-delay:4s;}
@keyframes float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.08);}}
.grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg,var(--border) 1px, transparent 1px);
  background-size:48px 48px; opacity:.25; mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-inner{position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--glass-bg); backdrop-filter:blur(8px);
  border:1px solid var(--border); padding:.4rem .9rem; border-radius:30px; font-size:.8rem; font-weight:600; color:var(--primary); margin-bottom:1.2rem;
}
.hero-title{font-size:clamp(2.1rem,4.5vw,3.4rem); line-height:1.15; margin-bottom:1rem;}
.hero-sub{font-size:1.1rem; color:var(--ink-soft); max-width:520px; margin-bottom:1.2rem;}
.typing-wrap{display:flex; gap:.5rem; font-family:var(--font-display); font-weight:700; font-size:1.3rem;}
.cursor{animation:blink 1s step-start infinite; color:var(--primary); font-weight:400;}
@keyframes blink{50%{opacity:0;}}
.hero-trust{display:flex; align-items:center; gap:.8rem;}
.avatars{display:flex;}
.av{
  width:34px;height:34px;border-radius:50%; color:#fff; display:flex;align-items:center;justify-content:center;
  font-size:.8rem; font-weight:700; border:2px solid var(--white); margin-left:-10px;
}
.av:first-child{margin-left:0;}
.hero-trust p{margin:0; font-size:.9rem; color:var(--ink-soft);}

.hero-visual{position:relative; max-width:520px; margin:auto;}
.hero-illustration{width:100%; height:auto; filter:drop-shadow(var(--shadow-lg));}
.float-card{
  position:absolute; background:var(--glass-bg); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-radius:12px; padding:.5rem .9rem;
  font-weight:600; font-size:.85rem; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.4rem;
  animation:bob 4s ease-in-out infinite;
}
.float-card i{color:var(--primary);}
.fc1{top:2%; left:0%; animation-delay:.2s;}
.fc2{top:15%; right:-2%; animation-delay:.6s;}
.fc3{top:45%; left:-8%; animation-delay:1s;}
.fc4{top:60%; right:-6%; animation-delay:1.4s;}
.fc5{bottom:8%; left:6%; animation-delay:1.8s;}
.fc6{bottom:-4%; right:16%; animation-delay:2.2s;}
.fc7{top:35%; right:36%; animation-delay:2.6s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@media (max-width:991px){ .float-card{position:static; display:inline-flex; margin:6px;} .hero-visual{display:flex; flex-direction:column; align-items:center;} }

/* ============== Stats ============== */
.stats-section{padding:60px 0; background:linear-gradient(90deg,var(--primary),var(--secondary));}
.stat-card h3{color:#fff; font-size:2.4rem; margin-bottom:.2rem;}
.stat-card p{color:rgba(255,255,255,.9); font-weight:500; margin:0;}

/* ============== Section headers ============== */
.section-eyebrow{
  display:inline-block; color:var(--primary); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.8rem; margin-bottom:.6rem;
}
.section-title{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:1rem;}
.lead-text{font-size:1.1rem; font-weight:500; color:var(--ink);}

.mini-badge{
  display:flex; align-items:center; gap:.5rem; background:var(--soft-bg); border:1px solid var(--border);
  border-radius:10px; padding:.6rem .9rem; font-size:.85rem; font-weight:600; color:var(--ink-soft);
}
.mini-badge i{color:var(--success);}

.glass-card{
  background:var(--glass-bg); backdrop-filter:blur(14px); border:1px solid var(--glass-border);
  border-radius:var(--radius); box-shadow:var(--shadow-md); padding:1.5rem;
}
.about-visual svg{width:100%; height:auto;}

/* ============== Feature / Why Choose Us ============== */
.feature-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.8rem 1.2rem; text-align:center; height:100%; transition:var(--transition);
}
.feature-card i{font-size:1.8rem; color:var(--primary); margin-bottom:.8rem; display:block;}
.feature-card h5{font-size:.95rem; margin:0;}
.feature-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:var(--primary);}

/* ============== Course Cards ============== */
.course-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.8rem; height:100%; position:relative; transition:var(--transition); overflow:hidden;
}
.course-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--primary);}
.course-card.featured{border:2px solid var(--primary); box-shadow:var(--shadow-md);}
.ribbon{
  position:absolute; top:16px; right:-34px; transform:rotate(45deg); background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; padding:.3rem 2.4rem; box-shadow:var(--shadow-sm);
}
.course-card h4{font-size:1.15rem; margin-bottom:.4rem;}
.duration{color:var(--muted); font-size:.85rem; margin-bottom:.8rem;}
.tech-tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; max-height:120px; overflow-y:auto;}
.tech-tags span{
  background:var(--soft-bg); color:var(--primary); border:1px solid var(--border);
  font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:20px;
}
.course-includes{list-style:none; padding:0; margin:0 0 1rem; font-size:.85rem; color:var(--ink-soft);}
.course-includes li{margin-bottom:.3rem;}
.course-includes i{color:var(--success); margin-right:.4rem;}
.price-row{display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem;}
.old-price{text-decoration:line-through; color:var(--muted); font-size:.95rem;}
.new-price{font-size:1.5rem; font-weight:800; color:var(--primary); font-family:var(--font-display);}

/* ============== Placement / Journey ============== */
.placement-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.6rem 1rem; text-align:center; transition:var(--transition); height:100%;
}
.placement-card i{font-size:1.6rem; color:var(--secondary); margin-bottom:.6rem; display:block;}
.placement-card p{margin:0; font-weight:600; font-size:.9rem;}
.placement-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}

.company-badges{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center;}
.company-badges span{
  border:1px solid var(--border); padding:.6rem 1.3rem; border-radius:30px; font-weight:600; color:var(--ink-soft);
  background:var(--white); transition:var(--transition);
}
.company-badges span:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-3px);}

.journey-track{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; position:relative;}
.journey-track::before{
  content:''; position:absolute; top:28px; left:5%; right:5%; height:2px; background:var(--border); z-index:0;
}
.journey-step{flex:1; min-width:110px; text-align:center; position:relative; z-index:1;}
.jnum{
  width:56px;height:56px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:1.2rem; margin:0 auto .8rem; box-shadow:var(--shadow-md);
}
.journey-step h6{margin:0; font-weight:600;}

/* ============== Certificates ============== */
.cert-card{text-align:center;}
.cert-mock{
  height:200px; border-radius:var(--radius); background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
  margin-bottom:1rem; box-shadow:var(--shadow-md); border:6px solid rgba(255,255,255,.4);
}
.cert-mock.alt{background:linear-gradient(135deg,var(--secondary),var(--success));}
.cert-mock.alt2{background:linear-gradient(135deg,var(--accent),var(--primary));}
.cert-mock i{font-size:2.4rem; margin-bottom:.6rem;}
.cert-mock span{font-weight:700; letter-spacing:.05em;}

/* ============== Reviews ============== */
.review-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:2rem; text-align:center; max-width:600px; margin:auto; box-shadow:var(--shadow-sm);
}
.stars{color:var(--accent); margin-bottom:1rem;}
.review-card p{font-size:1.05rem; font-style:italic; color:var(--ink-soft); margin-bottom:1rem;}
.review-card h6{color:var(--primary); margin:0;}
.swiper-pagination-bullet-active{background:var(--primary) !important;}

/* ============== Projects / Gallery ============== */
.project-tile{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1.6rem; text-align:center; transition:var(--transition); height:100%;
}
.project-tile i{font-size:1.6rem; color:var(--primary); margin-bottom:.5rem; display:block;}
.project-tile p{margin:0; font-weight:600;}
.project-tile:hover{background:linear-gradient(135deg,var(--primary),var(--secondary)); transform:translateY(-6px);}
.project-tile:hover i, .project-tile:hover p{color:#fff;}

.gallery-tile{
  height:160px; border-radius:var(--radius-sm); background:var(--soft-bg); border:1px dashed var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:var(--muted);
  transition:var(--transition);
}
.gallery-tile i{font-size:1.8rem; color:var(--secondary);}
.gallery-tile:hover{border-color:var(--primary); color:var(--primary);}

/* ============== Blog ============== */
.blog-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  padding:1.6rem; height:100%; transition:var(--transition);
}
.blog-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md);}
.blog-thumb{
  height:120px; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; margin-bottom:1rem;
}
.blog-tag{color:var(--secondary); font-weight:700; font-size:.75rem; text-transform:uppercase;}
.blog-card h5{font-size:1.05rem; margin:.5rem 0 1rem;}
.blog-card a{color:var(--primary); font-weight:600; font-size:.9rem;}

/* ============== FAQ ============== */
.custom-accordion .accordion-item{border:1px solid var(--border); border-radius:var(--radius-sm) !important; margin-bottom:1rem; overflow:hidden;}
.custom-accordion .accordion-button{font-weight:600; background:var(--white); color:var(--ink);}
.custom-accordion .accordion-button:not(.collapsed){color:var(--primary); background:var(--soft-bg); box-shadow:none;}
.custom-accordion .accordion-button:focus{box-shadow:none; border-color:var(--border);}

/* ============== Contact ============== */
.contact-info-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; height:100%;}
.ci-item{display:flex; gap:1rem; margin-bottom:1.4rem; align-items:flex-start;}
.ci-item:last-child{margin-bottom:0;}
.ci-item i{font-size:1.3rem; color:var(--primary); background:var(--soft-bg); width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ci-item h6{margin:0 0 .2rem;}
.ci-item p{margin:0; color:var(--ink-soft);}
.map-wrap{height:100%; min-height:320px; padding:0; overflow:hidden;}
.map-wrap iframe{display:block; min-height:320px;}

/* ============== Footer ============== */
.site-footer{background:var(--ink); color:#CBD5E1; padding:70px 0 0;}
.site-footer .brand-text.light{color:#fff;}
.footer-tagline{color:#94A3B8; margin-bottom:1rem;}
.social-icons{display:flex; gap:.7rem;}
.social-icons a{
  width:38px;height:38px; border-radius:50%; border:1px solid #334155; color:#CBD5E1;
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.social-icons a:hover{background:var(--primary); border-color:var(--primary); color:#fff;}
.fw-col-title{color:#fff; font-weight:700; margin-bottom:1rem; font-size:.95rem;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:.6rem;}
.footer-links a{color:#94A3B8; transition:var(--transition); font-size:.9rem;}
.footer-links a:hover{color:#fff;}
.newsletter-form{display:flex; gap:.5rem;}
.newsletter-form input{
  flex:1; padding:.6rem .9rem; border-radius:10px; border:1px solid #334155; background:#0F172A; color:#fff;
}
.newsletter-form button{
  background:linear-gradient(90deg,var(--primary),var(--secondary)); border:none; color:#fff; width:44px; border-radius:10px;
}
.site-footer hr{border-color:#1E293B;}
.site-footer .container > div:last-child p{color:#64748B;}

/* ============== Floating Buttons ============== */
.floating-btn{
  position:fixed; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; z-index:1000; box-shadow:var(--shadow-md); transition:var(--transition);
}
.floating-btn:hover{transform:scale(1.1); color:#fff;}
.whatsapp-float{background:#25D366; bottom:24px; left:24px;}
.call-float{background:var(--primary); bottom:24px; left:88px;}
.back-top{
  background:var(--ink); bottom:24px; right:24px; border:none; opacity:0; pointer-events:none;
}
.back-top.show{opacity:1; pointer-events:auto;}
@media (max-width:576px){ .call-float{left:24px; bottom:88px;} }

/* ============== Modal / Admission Form ============== */
.glass-modal{
  background:var(--glass-bg); backdrop-filter:blur(20px); border:1px solid var(--glass-border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.glass-modal .form-control, .glass-modal .form-select{
  background:var(--white); border:1px solid var(--border); border-radius:10px; color:var(--ink);
}
.glass-modal .form-control:focus, .glass-modal .form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
}
.success-check{
  width:70px;height:70px;border-radius:50%; background:var(--success); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:2rem; margin:0 auto; animation:pop .4s ease;
}
@keyframes pop{0%{transform:scale(0);}70%{transform:scale(1.15);}100%{transform:scale(1);}}

/* ============== Scroll reveal fallback ============== */
[data-aos]{transition-property:transform, opacity;}

/* ============== Scrollbar (tech tags) ============== */
.tech-tags::-webkit-scrollbar{width:5px;}
.tech-tags::-webkit-scrollbar-thumb{background:var(--border); border-radius:5px;}