:root{
  --bg:#061510;
  --bg2:#0b211a;
  --card:#0d2a21;
  --card2:#11352a;
  --text:#f7fbf8;
  --muted:#9cb8aa;
  --line:#1d4b3b;
  --green:#22e27c;
  --green2:#13b85e;
  --cyan:#42d7a7;
  --white:#ffffff;
  --shadow:0 18px 50px rgba(0,0,0,.32);
}

body.light{
  --bg:#f8fbf8;
  --bg2:#eef7f1;
  --card:#ffffff;
  --card2:#f4f9f6;
  --text:#10221a;
  --muted:#60736a;
  --line:#d7e6dc;
  --green:#0dbd66;
  --green2:#078e4b;
  --cyan:#0aa375;
  --shadow:0 16px 45px rgba(26,83,53,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  transition:.25s ease;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1240px,94%);margin:auto}

.topbar{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.nav-wrap{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand-logo{
  font-size:31px;font-weight:900;letter-spacing:-.08em;
  color:var(--green)
}
.brand-copy{display:flex;flex-direction:column;line-height:1.2}
.brand-copy strong{font-size:13px}
.brand-copy small{font-size:10px;color:var(--muted);margin-top:3px}

nav{display:flex;align-items:center;gap:24px;font-size:12px;font-weight:700}
nav a{color:var(--muted);position:relative;padding:9px 0}
nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--green);transition:.2s}
nav a:hover{color:var(--text)}
nav a:hover:after{right:0}

.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  cursor:pointer;
}
.menu-btn{display:none}

.google-badge{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:11px;
  background:#fff;color:#121212;border:1px solid #e6e6e6;
  min-width:210px;box-shadow:0 8px 24px rgba(0,0,0,.12)
}
.g-logo{
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  font-size:24px;font-weight:800;
  background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0 100%);
  color:white;
}
.google-badge>span:nth-child(2){display:flex;flex-direction:column;line-height:1.1}
.google-badge b{font-size:11px}
.google-badge small{font-size:8px;color:#555;margin-top:3px}
.google-badge>i{color:#1a73e8;font-size:13px;margin-left:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;padding:12px 17px;font-size:12px;font-weight:800;
  border:1px solid transparent;transition:.2s
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--green),#39f09a);color:#03110a}
.btn.ghost{border-color:var(--line);background:var(--card);color:var(--text)}
.nav-cv{padding:11px 15px}
.small-btn{padding:10px 13px}

.hero{
  padding:58px 0 32px;
  background:
    radial-gradient(circle at 16% 30%,rgba(34,226,124,.12),transparent 30%),
    radial-gradient(circle at 87% 20%,rgba(34,226,124,.08),transparent 22%);
  border-bottom:1px solid var(--line);
}
.hero-layout{
  display:grid;
  grid-template-columns:1.15fr .75fr 1fr;
  gap:36px;
  align-items:center;
}
.hello{font-size:20px;color:var(--cyan);margin:0 0 4px}
.hero-left h1{
  font-size:clamp(44px,5vw,68px);
  line-height:1.02;letter-spacing:-.055em;margin:0 0 7px
}
.hero-left h2{
  font-size:clamp(34px,3.8vw,52px);line-height:1;
  color:var(--green);letter-spacing:-.04em;margin:0 0 12px
}
.hero-left h3{
  font-size:20px;line-height:1.35;margin:0 0 14px
}
.hero-text{
  max-width:650px;color:var(--muted);font-size:13px;line-height:1.75;margin:0
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.social-row{display:flex;gap:8px;margin-top:15px}
.social{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);font-size:18px;transition:.2s
}
.social:hover{transform:translateY(-3px)}
.linkedin{color:#0A66C2}.whatsapp{color:#25D366}.mail{color:#ff4d57}

.hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center}
.profile-ring{
  width:260px;height:260px;border-radius:50%;padding:6px;position:relative;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  box-shadow:0 24px 70px rgba(34,226,124,.22)
}
.profile-ring img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  border-radius:50%;border:7px solid var(--bg)
}
.online-dot{
  position:absolute;right:18px;bottom:24px;width:20px;height:20px;border-radius:50%;
  background:#14d84f;border:3px solid var(--bg)
}
.profile-caption{
  margin-top:14px;text-align:center;font-size:11px;color:var(--muted)
}
.profile-caption b{display:block;color:var(--text);font-size:13px;margin-top:2px}

.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cap-card{
  min-height:108px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:12px 8px;box-shadow:var(--shadow)
}
.cap-card i{font-size:25px;color:var(--green);margin-bottom:8px}
.cap-card span{font-size:10px;color:var(--muted);line-height:1.4}
.cap-card b{color:var(--text);font-size:11px}
.hero-quote{
  margin:18px 0 16px;text-align:center;font-size:13px;font-style:italic;
  color:var(--muted);line-height:1.7
}
.mini-stats{
  display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--green);
  padding-top:13px
}
.mini-stats>div{text-align:center;border-right:1px solid var(--line)}
.mini-stats>div:last-child{border-right:0}
.mini-stats b{display:block;font-size:20px}
.mini-stats span{font-size:9px;color:var(--muted)}

.section{padding:64px 0}
.projects-section{background:var(--bg2)}
.section-title-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:26px
}
.eyebrow{
  font-size:10px;letter-spacing:.18em;color:var(--green);font-weight:800;margin:0 0 7px
}
.section-title-row h2{font-size:34px;line-height:1.2;margin:0}
.section-sub{font-size:11px;color:var(--muted);margin:6px 0 0}
.outline-btn{
  border:1px solid var(--green);border-radius:11px;padding:10px 14px;
  font-size:10px;font-weight:800;color:var(--green);white-space:nowrap
}

.projects-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:15px
}
.project-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);transition:.2s
}
.project-card:hover{transform:translateY(-5px);border-color:var(--green)}
.project-image{
  aspect-ratio:16/10;background:#06120e;position:relative;overflow:hidden
}
.project-image img{width:100%;height:100%;object-fit:cover;display:block}
.project-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(3,12,8,.82);color:#fff;border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:6px 8px;font-size:9px;font-weight:800
}
.project-content{padding:15px}
.project-content h3{font-size:14px;line-height:1.35;margin:0 0 6px}
.project-content p{font-size:10px;line-height:1.6;color:var(--muted);margin:0}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.tag{
  font-size:8px;padding:5px 7px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line);color:var(--muted)
}
.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.project-actions button,.project-actions a{
  border:1px solid var(--line);background:var(--card2);color:var(--text);
  border-radius:9px;padding:8px 9px;font-size:9px;font-weight:800;cursor:pointer;text-align:center
}
.project-actions .view-dashboard{
  background:linear-gradient(135deg,var(--green),#39f09a);color:#04120b;border-color:transparent
}

.credentials-skills{background:var(--bg)}
.lower-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px}
.mini-heading{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.mini-heading>i{color:var(--green);font-size:20px}
.mini-heading h3{font-size:17px;margin:0}
.mini-heading p{font-size:9px;color:var(--muted);margin:2px 0 0}

.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cert-card{
  border:1px solid var(--line);background:var(--card);border-radius:14px;
  padding:14px;display:flex;gap:11px;min-height:110px
}
.cert-icon{
  width:39px;height:39px;border-radius:11px;display:grid;place-items:center;
  background:var(--card2);color:var(--green);font-size:18px;flex:none
}
.cert-body h4{font-size:11px;line-height:1.35;margin:0 0 4px}
.cert-body p{font-size:8px;color:var(--muted);margin:0 0 9px}
.cert-body a{font-size:8px;color:var(--green);font-weight:800}

.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.skill-card{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px 8px;text-align:center;min-height:94px
}
.skill-card i{font-size:21px;color:var(--green);margin-bottom:8px}
.skill-card b{display:block;font-size:10px}
.skill-card small{display:block;font-size:7px;color:var(--muted);margin-top:3px}

.experience-section{background:var(--bg2)}
.timeline{position:relative;margin-left:7px}
.timeline:before{
  content:"";position:absolute;left:5px;top:12px;bottom:10px;width:1px;background:var(--line)
}
.timeline article{position:relative;padding-left:30px;margin-bottom:13px}
.dot{
  position:absolute;left:0;top:24px;width:11px;height:11px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 5px rgba(34,226,124,.12)
}
.timeline-card{
  border:1px solid var(--line);background:var(--card);border-radius:15px;
  padding:18px
}
.timeline-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.timeline h3{font-size:13px;margin:0 0 4px}
.timeline h4{font-size:9px;color:var(--green);margin:0}
.timeline time{font-size:8px;color:var(--muted);font-weight:700;white-space:nowrap}
.timeline p{font-size:9px;line-height:1.6;color:var(--muted);margin:8px 0 0}

.contact-section{
  background:linear-gradient(135deg,color-mix(in srgb,var(--green) 8%,var(--bg)),var(--bg))
}
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
.contact-copy h2{font-size:34px;line-height:1.2;margin:0 0 10px}
.contact-copy p:last-child{font-size:11px;color:var(--muted);line-height:1.7}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.contact-grid a{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);background:var(--card);border-radius:12px;padding:13px
}
.contact-grid a>i{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--card2);color:var(--green);flex:none
}
.contact-grid span{display:flex;flex-direction:column;min-width:0}
.contact-grid small{font-size:7px;color:var(--muted);margin-bottom:2px}
.contact-grid b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.floating-actions{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;flex-direction:column;gap:8px
}
.floating-actions a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:white;box-shadow:0 10px 28px rgba(0,0,0,.25)
}
.floating-actions a.fa-linkedin {
    background: #0A66C2;
}

.floating-actions a.fa-github {
    background: #24292f;
}

.floating-actions a.fa-whatsapp {
    background: #25D366;
}

.floating-actions a.fa-github i,
.floating-actions a.fa-linkedin i,
.floating-actions a.fa-whatsapp i {
    background: transparent !important;
    color: #ffffff !important;
}

.modal{
  position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:18px
}
.modal.open{display:flex}
.modal-card{
  width:min(1320px,96vw);max-height:92vh;overflow:auto;
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;
  padding:18px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.55)
}
.modal-close{
  position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:2px 48px 15px 0
}
.modal-head h3{font-size:20px;margin:0}
.modal-gallery{display:grid;gap:14px}
.modal-gallery img{width:100%;border-radius:14px;border:1px solid var(--line);display:block}

footer{border-top:1px solid var(--line);padding:24px 0}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:9px;color:var(--muted)
}
.footer-brand{display:flex;align-items:center;gap:9px}
.footer-brand>span:last-child{display:flex;flex-direction:column}
.footer-brand b{font-size:10px;color:var(--text)}
.footer-brand small{font-size:8px}

@media(max-width:1120px){
  nav{display:none;position:absolute;top:76px;left:3%;right:3%;padding:15px;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
  nav.open{display:flex}
  .menu-btn{display:block}
  .google-badge{display:none}
  .hero-layout{grid-template-columns:1fr 320px}
  .hero-right{grid-column:1/-1}
  .capability-grid{grid-template-columns:repeat(4,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .nav-cv{display:none}
  .hero{padding-top:42px}
  .hero-layout{grid-template-columns:1fr;gap:28px}
  .hero-center{order:-1}
  .profile-ring{width:230px;height:230px}
  .hero-left{text-align:center}
  .hero-actions,.social-row{justify-content:center}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid,.lower-grid,.contact-layout{grid-template-columns:1fr}
  .cert-grid,.contact-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .section-title-row{align-items:flex-start;flex-direction:column}
  .timeline-top{flex-direction:column;gap:4px}
  .timeline time{white-space:normal}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .modal-head{flex-direction:column;align-items:flex-start;padding-right:45px}
}

@media(max-width:480px){
  .hero-left h1{font-size:42px}
  .hero-left h2{font-size:34px}
  .capability-grid{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:1fr}
}


/* ===== WhatsApp visibility fix ===== */
.social.whatsapp{background:#25D366 !important;color:#fff !important;border-color:#25D366 !important}
.social.whatsapp i{color:#fff !important;font-size:20px;display:block}
.social.github{color:var(--text)}
.social.mail{background:#ff4f64;color:#fff;border-color:#ff4f64}
.social.mail i{color:#fff}

/* ===== Add Project navigation ===== */
.nav-add-project{
  border:0;background:transparent;color:var(--green);font:inherit;font-weight:800;
  padding:9px 0;cursor:pointer;white-space:nowrap
}
.nav-add-project:hover{color:var(--text)}
.project-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.add-project-btn{background:var(--green);color:#04120b !important;border-color:var(--green) !important;cursor:pointer}

/* ===== Project Manager Modal ===== */
.project-form-modal{z-index:170}
.add-project-card{
  width:min(760px,96vw);max-height:92vh;overflow:auto;background:var(--bg2);
  border:1px solid var(--line);border-radius:22px;padding:24px;position:relative;
  box-shadow:0 34px 110px rgba(0,0,0,.58)
}
.add-project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-right:42px;margin-bottom:20px}
.add-project-head h3{font-size:27px;line-height:1.2;margin:0 0 7px}
.add-project-head>div:first-child>p:last-child{font-size:11px;line-height:1.65;color:var(--muted);margin:0;max-width:580px}
.manager-icon{width:54px;height:54px;border-radius:15px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:25px;color:var(--green);flex:none}
.project-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-form label{display:flex;flex-direction:column;gap:7px}
.project-form label>span{font-size:10px;font-weight:800;color:var(--text)}
.project-form input,.project-form textarea,.project-form select{
  width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);
  border-radius:11px;padding:12px 13px;outline:none;font-size:11px
}
.project-form textarea{resize:vertical;min-height:104px;line-height:1.6}
.project-form input:focus,.project-form textarea:focus,.project-form select:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.project-form small{font-size:8px;color:var(--muted)}
.full-field{grid-column:1/-1}
.two-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input-with-icon{position:relative}.input-with-icon i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}.input-with-icon input{padding-left:37px}
.upload-field input{padding:9px}
.image-preview-wrap{grid-column:1/-1;border:1px dashed var(--line);border-radius:13px;padding:10px;background:var(--card)}
.image-preview-wrap img{width:100%;max-height:260px;object-fit:cover;border-radius:9px;display:block}
.form-note{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:11px;background:color-mix(in srgb,var(--green) 8%,var(--card));border:1px solid color-mix(in srgb,var(--green) 25%,var(--line));font-size:9px;color:var(--muted);line-height:1.5}
.form-note i{color:var(--green);margin-top:2px}
.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:2px}

/* User-added project cover and owner controls */
.user-project-cover{height:100%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(34,226,124,.22),transparent 36%),linear-gradient(135deg,#071711,#10372a)}
.user-project-cover-inner{text-align:center;color:#fff;padding:20px}.user-project-cover-inner i{font-size:48px;color:#39f09a;margin-bottom:12px}.user-project-cover-inner b{display:block;font-size:17px;line-height:1.3}.user-project-cover-inner small{display:block;color:#a6c8b4;font-size:10px;margin-top:6px}
.custom-project-label{background:linear-gradient(135deg,var(--green),#41efa0) !important;color:#03120a !important}
.delete-project{grid-column:1/-1;background:transparent !important;color:#ff7885 !important;border-color:color-mix(in srgb,#ff5468 40%,var(--line)) !important}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:220;
  background:var(--text);color:var(--bg);padding:11px 16px;border-radius:999px;
  font-size:10px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  .project-form{grid-template-columns:1fr}.project-form>label,.full-field,.two-fields,.form-note,.form-actions,.image-preview-wrap{grid-column:1}.two-fields{grid-template-columns:1fr}.project-heading-actions{width:100%}.project-heading-actions .outline-btn{flex:1;text-align:center}.nav-add-project{text-align:left}.add-project-card{padding:18px}.add-project-head h3{font-size:23px}
}

/* Secure Admin */
.admin-nav-link{color:var(--green)!important;font-weight:800}.admin-nav-link i{margin-right:4px}.admin-entry{background:color-mix(in srgb,var(--green) 10%,var(--card));color:var(--green)!important}.admin-entry:hover{background:var(--green);color:#04120b!important}.remote-project-badge{background:linear-gradient(135deg,var(--green),#49eca1)!important;color:#03130a!important}.project-status{font-size:8px;color:var(--muted);margin-top:7px}


/* =========================================================
   FINAL UI POLISH - LIGHT/DARK ICONS + TYPOGRAPHY + RESPONSIVE
   ========================================================= */

/* ---------- 1. SOCIAL ICON FIX ---------- */

/* Prevent Font Awesome GitHub icon itself from getting black background */
.social i,
.floating-actions i {
  background: transparent !important;
}

/* GitHub button - Dark Theme */
.social.github {
  background: #0d2a21;
  color: #ffffff;
  border-color: #275243;
}

.social.github i {
  color: #ffffff !important;
  background: transparent !important;
  font-size: 19px;
}

/* GitHub button - Light Theme */
body.light .social.github {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d7e2dc !important;
}

body.light .social.github i {
  color: #111827 !important;
  background: transparent !important;
}

/* LinkedIn */
.social.linkedin i {
  color: #0A66C2 !important;
  background: transparent !important;
}

/* WhatsApp */
.social.whatsapp {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
}

.social.whatsapp i {
  color: #ffffff !important;
  background: transparent !important;
}

/* Email */
.social.mail {
  background: #ff4f64 !important;
  color: #ffffff !important;
  border-color: #ff4f64 !important;
}

.social.mail i {
  color: #ffffff !important;
  background: transparent !important;
}


/* ---------- 2. FLOATING ICON FIX ---------- */

/* IMPORTANT:
   Earlier .fa-github selector could also affect actual FontAwesome icon.
   These selectors target only floating buttons.
*/

.floating-actions a.fa-linkedin {
  background: #0A66C2;
}

.floating-actions a.fa-github {
  background: #24292f;
}

.floating-actions a.fa-whatsapp {
  background: #25D366;
}

.floating-actions a.fa-github i,
.floating-actions a.fa-linkedin i,
.floating-actions a.fa-whatsapp i {
  background: transparent !important;
  color: #ffffff !important;
}


/* ---------- 3. SLIGHTLY BIGGER LOWER PAGE FONTS ---------- */

/* Projects */
.project-content h3 {
  font-size: 15px;
  line-height: 1.4;
}

.project-content p {
  font-size: 11px;
  line-height: 1.7;
}

.tag {
  font-size: 9px;
}

.project-actions button,
.project-actions a {
  font-size: 10px;
  line-height: 1.35;
}


/* Certifications */
.mini-heading h3 {
  font-size: 19px;
}

.mini-heading p {
  font-size: 10px;
}

.cert-body h4 {
  font-size: 12px;
  line-height: 1.45;
}

.cert-body p {
  font-size: 9px;
  line-height: 1.5;
}

.cert-body a {
  font-size: 9px;
}


/* Skills */
.skill-card b {
  font-size: 11px;
}

.skill-card small {
  font-size: 8px;
  line-height: 1.4;
}


/* Experience */
.timeline h3 {
  font-size: 14px;
  line-height: 1.4;
}

.timeline h4 {
  font-size: 10px;
}

.timeline p {
  font-size: 10px;
  line-height: 1.75;
}

.timeline time {
  font-size: 9px;
}


/* Contact */
.contact-copy p:last-child {
  font-size: 12px;
}

.contact-grid small {
  font-size: 8px;
}

.contact-grid b {
  font-size: 10px;
}


/* Footer */
.footer-inner {
  font-size: 10px;
}

.footer-brand b {
  font-size: 11px;
}

.footer-brand small {
  font-size: 9px;
}


/* ---------- 4. DESKTOP 100% ZOOM OPTIMIZATION ---------- */

.container {
  width: min(1240px, 92%);
  margin-left: auto;
  margin-right: auto;
}

section {
  scroll-margin-top: 85px;
}

.project-card,
.cert-card,
.skill-card,
.timeline-card,
.contact-grid a {
  overflow: hidden;
}

.project-content,
.cert-body,
.contact-grid span {
  min-width: 0;
}

.project-content h3,
.project-content p,
.cert-body h4,
.timeline h3,
.timeline h4,
.timeline p {
  overflow-wrap: break-word;
}


/* ---------- 5. LAPTOP RESPONSIVE ---------- */

@media (max-width: 1180px) {

  .container {
    width: min(1120px, 94%);
  }

  .hero-layout {
    grid-template-columns: 1fr 290px;
    gap: 30px;
  }

  .hero-right {
    grid-column: 1 / -1;
  }

  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ---------- 6. TABLET RESPONSIVE ---------- */

@media (max-width: 900px) {

  .nav-wrap {
    min-height: 68px;
  }

  .hero {
    padding-top: 45px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-center {
    order: -1;
  }

  .hero-left {
    text-align: center;
  }

  .hero-actions,
  .social-row {
    justify-content: center;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .profile-ring {
    width: 230px;
    height: 230px;
  }

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

  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lower-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .timeline-top {
    gap: 10px;
  }
}


/* ---------- 7. MOBILE RESPONSIVE ---------- */

@media (max-width: 650px) {

  body {
    overflow-x: hidden;
  }

  .container {
    width: 92%;
  }

  .topbar {
    width: 100%;
  }

  .brand-copy strong {
    font-size: 12px;
  }

  .brand-copy small {
    font-size: 9px;
  }

  .hero {
    padding: 35px 0 25px;
  }

  .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .hero-center {
    order: -1;
  }

  .profile-ring {
    width: 205px;
    height: 205px;
  }

  .hero-left h1 {
    font-size: 39px;
    line-height: 1.05;
  }

  .hero-left h2 {
    font-size: 31px;
  }

  .hero-left h3 {
    font-size: 17px;
  }

  .hero-text {
    font-size: 12px;
    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .social-row {
    margin-top: 18px;
  }

  .social {
    width: 44px;
    height: 44px;
  }

  .capability-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cap-card {
    min-height: 100px;
  }

  .mini-stats {
    width: 100%;
  }

  .section {
    padding: 52px 0;
  }

  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .section-title-row h2 {
    font-size: 30px;
  }

  .section-sub {
    font-size: 11px;
    line-height: 1.6;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-image {
    aspect-ratio: 16 / 9;
  }

  .project-content {
    padding: 17px;
  }

  .project-content h3 {
    font-size: 16px;
  }

  .project-content p {
    font-size: 11px;
  }

  .project-actions {
    grid-template-columns: 1fr;
  }

  .project-actions button,
  .project-actions a {
    width: 100%;
    padding: 10px;
    font-size: 10px;
  }

  .cert-grid {
    grid-template-columns: 1fr;
  }

  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-card {
    min-height: 100px;
  }

  .timeline article {
    padding-left: 27px;
  }

  .timeline-top {
    flex-direction: column;
    gap: 4px;
  }

  .timeline time {
    white-space: normal;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid a {
    width: 100%;
  }

  .floating-actions {
    right: 12px;
    bottom: 14px;
  }

  .floating-actions a {
    width: 42px;
    height: 42px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---------- 8. VERY SMALL MOBILE ---------- */

@media (max-width: 390px) {

  .container {
    width: 90%;
  }

  .hero-left h1 {
    font-size: 35px;
  }

  .hero-left h2 {
    font-size: 28px;
  }

  .profile-ring {
    width: 185px;
    height: 185px;
  }

  .skills-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .social {
    width: 41px;
    height: 41px;
  }
}


/* ---------- 9. LIGHT THEME POLISH ---------- */

body.light .project-card,
body.light .cert-card,
body.light .skill-card,
body.light .timeline-card,
body.light .contact-grid a,
body.light .social {
  box-shadow: 0 10px 30px rgba(20, 70, 45, 0.08);
}

body.light .social.github:hover {
  border-color: #111827 !important;
}

body.light .social.linkedin:hover {
  border-color: #0A66C2;
}


/* ---------- 10. HOVER POLISH ---------- */

.social,
.project-card,
.skill-card,
.cert-card,
.contact-grid a {
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.social:hover {
  transform: translateY(-3px);
}

.project-card:hover {
  transform: translateY(-5px);
}

.contact-grid a:hover {
  transform: translateY(-2px);
  border-color: var(--green);
}

/* ===== READABILITY FONT SIZE UPDATE ===== */

body {
    font-size: 15px;
}

/* Navigation */
nav a,
.nav a {
    font-size: 13px;
}

/* Section descriptions / normal text */
p {
    font-size: 13px;
    line-height: 1.6;
}

/* Certification cards */
.cert-card b,
.cert-card strong {
    font-size: 13px;
}

.cert-card small,
.cert-card p {
    font-size: 10px;
}

.cert-card a {
    font-size: 10px;
}

/* Technical Skills */
.skill-card b,
.skill-card strong {
    font-size: 12px;
}

.skill-card small {
    font-size: 9px;
}

/* Work Experience */
.experience-card h3,
.timeline-card h3 {
    font-size: 15px;
}

.experience-card p,
.timeline-card p {
    font-size: 11px;
}

.experience-card small,
.timeline-card small {
    font-size: 10px;
}

/* Mobile readability */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    p {
        font-size: 13px;
    }
}

/* ===== HERO TYPING EFFECT ===== */

.typing-role {
    color: var(--green);
    min-height: 1.2em;
    white-space: nowrap;
}

.typing-cursor {
    display: inline-block;
    margin-left: 3px;
    color: var(--green);
    font-weight: 400;
    animation: typingBlink 0.75s infinite;
}

@keyframes typingBlink {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}

/* ===== FINAL PROJECT RESPONSIVE POLISH ===== */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-actions {
    margin-top: auto;
}

@media (max-width: 1000px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-card {
        width: 100%;
    }

    .project-content {
        padding: 16px;
    }

    .project-content h3 {
        font-size: 16px;
    }

    .project-content p {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* =====================================================
   PREMIUM DATA ANALYST HERO - FINAL DESIGN
===================================================== */

/* HERO BACKGROUND */

#home.hero {
    position: relative;
    overflow: hidden;
    padding: 65px 0 70px;
    background:
        radial-gradient(circle at 50% 45%, rgba(24, 210, 132, 0.11), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(25, 224, 144, 0.08), transparent 25%),
        linear-gradient(135deg, #f7fffb 0%, #ffffff 48%, #effff7 100%);
}

#home.hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: -180px;
    border-radius: 50%;
    border: 1px solid rgba(15, 196, 117, 0.12);
    box-shadow:
        0 0 0 35px rgba(15, 196, 117, 0.025),
        0 0 0 70px rgba(15, 196, 117, 0.018);
    pointer-events: none;
}

#home .hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.9fr 1.05fr;
    gap: 52px;
    align-items: center;
}


/* =====================================================
   LEFT SIDE
===================================================== */

#home .hero-left {
    min-width: 0;
}

#home .hello {
    margin: 0 0 10px;
    color: #0bbd73;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#home .premium-name {
    margin: 0;
    color: #082c22;
    font-size: clamp(52px, 5vw, 76px);
    line-height: 0.95;
    letter-spacing: -3px;
    font-weight: 800;
}

#home .premium-name span {
    display: block;
    margin-top: 6px;
    color: #0dbd72;
}

#home .premium-role {
    margin: 21px 0 0;
    color: #526a62;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 7px;
    text-transform: uppercase;
}

#home .premium-title-line {
    width: 82px;
    height: 4px;
    margin: 15px 0 19px;
    border-radius: 50px;
    background: linear-gradient(90deg, #09b96e, #35e69d);
}

#home .premium-tagline {
    margin: 0;
    color: #102e25;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 750;
}

#home .premium-tagline span {
    color: #0bbd72;
}

#home .hero-text {
    max-width: 500px;
    margin: 15px 0 0;
    color: #64766f;
    font-size: 12px;
    line-height: 1.75;
}

#home .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 22px;
}

#home .hero-actions .btn {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#home .hero-actions .btn:hover {
    transform: translateY(-3px);
}

#home .hero-actions .primary {
    box-shadow: 0 12px 25px rgba(12, 193, 115, 0.18);
}

#home .social-row {
    margin-top: 14px;
}

#home .social-row .social {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#home .social-row .social:hover {
    transform: translateY(-4px);
}


/* =====================================================
   CENTER PROFILE
   Clean design - no floating boxes around photo
===================================================== */

#home .hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

#home .profile-orbit {
    position: relative;
    width: min(310px, 23vw);
    height: min(310px, 23vw);
    display: flex;
    align-items: center;
    justify-content: center;
}

#home .profile-orbit::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(13, 193, 115, 0.18);
    pointer-events: none;
}

#home .profile-orbit::after {
    content: "";
    position: absolute;
    inset: -33px;
    border-radius: 50%;
    border: 1px dashed rgba(13, 193, 115, 0.16);
    animation: premiumProfileOrbit 20s linear infinite;
    pointer-events: none;
}

@keyframes premiumProfileOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#home .profile-circle {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #02a963, #36e99e);
    box-shadow:
        0 25px 55px rgba(10, 106, 73, 0.18),
        0 0 0 9px rgba(255, 255, 255, 0.8);
}

#home .profile-circle img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

#home .profile-online-dot {
    position: absolute;
    z-index: 5;
    right: 8px;
    bottom: 42px;
    width: 22px;
    height: 22px;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #0bcf7b;
    box-shadow: 0 0 0 5px rgba(11, 207, 123, 0.11);
}

#home .data-impact-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 34px;
    color: #173b30;
    font-size: 17px;
    font-weight: 750;
}

#home .data-impact-text span:nth-of-type(2) {
    color: #0abb70;
}

#home .data-impact-text span:nth-of-type(3) {
    color: #0a9f61;
}

#home .data-impact-text i {
    color: #7c928a;
    font-size: 11px;
}


/* =====================================================
   OPEN TO OPPORTUNITIES BUTTON
===================================================== */

#home .opportunity-button {
    width: min(300px, 100%);
    margin-top: 18px;
    padding: 11px 14px;
    border: 1px solid rgba(11, 185, 111, 0.18);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(14, 97, 70, 0.09);
    display: flex;
    align-items: center;
    gap: 11px;
    color: #0a3326;
    cursor: pointer;
    transition: all 0.25s ease;
}

#home .opportunity-button:hover {
    transform: translateY(-4px);
    border-color: rgba(10, 199, 119, 0.55);
    box-shadow: 0 17px 35px rgba(10, 157, 94, 0.15);
}

#home .opportunity-status {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #0bcf7b;
    box-shadow: 0 0 0 5px rgba(11, 207, 123, 0.12);
    animation: opportunityPulse 1.8s infinite;
}

@keyframes opportunityPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 207, 123, 0.30);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(11, 207, 123, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 207, 123, 0);
    }
}

#home .opportunity-button > div {
    min-width: 0;
    flex: 1;
    text-align: left;
}

#home .opportunity-button strong {
    display: block;
    color: #092f24;
    font-size: 11px;
}

#home .opportunity-button small {
    display: block;
    margin-top: 3px;
    color: #72827c;
    font-size: 8px;
    line-height: 1.4;
}

#home .opportunity-button > i {
    color: #0bbd72;
    font-size: 11px;
}


/* =====================================================
   RIGHT SIDE
===================================================== */

#home .hero-right {
    width: 100%;
    min-width: 0;
}

#home .impact-banner {
    padding: 15px 17px;
    margin-bottom: 14px;
    border: 1px solid rgba(10, 112, 75, 0.08);
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(226, 255, 242, 0.82)
        );
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 13px 30px rgba(12, 88, 63, 0.07);
}

#home .impact-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #e0fff0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0bbb70;
    font-size: 20px;
}

#home .impact-banner span,
#home .impact-banner strong {
    display: block;
}

#home .impact-banner span {
    color: #71817b;
    font-size: 9px;
}

#home .impact-banner strong {
    margin-top: 2px;
    color: #092f24;
    font-size: 15px;
}

#home .hero-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#home .service-card {
    min-height: 108px;
    padding: 16px;
    border: 1px solid rgba(9, 94, 65, 0.08);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 12px 28px rgba(10, 73, 52, 0.055);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.25s ease;
}

#home .service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 196, 117, 0.35);
    box-shadow: 0 17px 35px rgba(9, 116, 76, 0.09);
}

#home .service-card > i {
    margin-top: 2px;
    color: #0bc274;
    font-size: 22px;
}

#home .service-card strong {
    display: block;
    color: #092f24;
    font-size: 12px;
    line-height: 1.3;
}

#home .service-card small {
    display: block;
    margin-top: 6px;
    color: #71827b;
    font-size: 9px;
    line-height: 1.45;
}

#home .premium-quote {
    margin: 24px auto 18px;
    color: #62756e;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    line-height: 1.7;
}

#home .hero-stats {
    padding-top: 15px;
    border-top: 2px solid #13c579;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#home .hero-stats > div {
    text-align: center;
    border-right: 1px solid #dce9e3;
}

#home .hero-stats > div:last-child {
    border-right: none;
}

#home .hero-stats strong,
#home .hero-stats span {
    display: block;
}

#home .hero-stats strong {
    color: #082d22;
    font-size: 23px;
}

#home .hero-stats span {
    margin-top: 3px;
    color: #75857f;
    font-size: 9px;
}


/* =====================================================
   DARK MODE SUPPORT
===================================================== */

body:not(.light) #home.hero {
    background:
        radial-gradient(circle at 50% 45%, rgba(17, 191, 112, 0.10), transparent 30%),
        linear-gradient(135deg, #07130f 0%, #091a14 50%, #07130f 100%);
}

body:not(.light) #home .premium-name,
body:not(.light) #home .premium-tagline,
body:not(.light) #home .data-impact-text {
    color: #f3fff9;
}

body:not(.light) #home .premium-role,
body:not(.light) #home .hero-text,
body:not(.light) #home .premium-quote {
    color: #9bb0a7;
}

body:not(.light) #home .impact-banner,
body:not(.light) #home .service-card,
body:not(.light) #home .opportunity-button {
    background: rgba(12, 31, 24, 0.92);
    border-color: rgba(45, 211, 139, 0.14);
}

body:not(.light) #home .impact-banner strong,
body:not(.light) #home .service-card strong,
body:not(.light) #home .opportunity-button strong,
body:not(.light) #home .hero-stats strong {
    color: #f2fff9;
}

body:not(.light) #home .impact-banner span,
body:not(.light) #home .service-card small,
body:not(.light) #home .opportunity-button small,
body:not(.light) #home .hero-stats span {
    color: #91a69d;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    #home .hero-layout {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    #home .profile-orbit {
        width: 280px;
        height: 280px;
    }

    #home .hero-right {
        grid-column: 1 / -1;
        max-width: 720px;
        margin: 0 auto;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    #home.hero {
        padding: 42px 0 50px;
    }

    #home .hero-layout {
        grid-template-columns: 1fr;
        gap: 38px;
        text-align: center;
    }

    #home .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #home .premium-name {
        font-size: 53px;
        letter-spacing: -2px;
    }

    #home .premium-role {
        font-size: 14px;
        letter-spacing: 5px;
    }

    #home .premium-title-line {
        margin-left: auto;
        margin-right: auto;
    }

    #home .premium-tagline {
        font-size: 18px;
    }

    #home .hero-text {
        max-width: 440px;
    }

    #home .hero-actions,
    #home .social-row {
        justify-content: center;
    }

    #home .profile-orbit {
        width: 250px;
        height: 250px;
    }

    #home .data-impact-text {
        font-size: 15px;
    }

    #home .opportunity-button {
        width: min(310px, 92vw);
    }

    #home .hero-right {
        max-width: 480px;
        margin: 0 auto;
    }

    #home .hero-services {
        grid-template-columns: 1fr;
    }

    #home .service-card {
        min-height: auto;
        text-align: left;
    }

}


/* EXTRA SMALL MOBILE */

@media (max-width: 420px) {

    #home .premium-name {
        font-size: 46px;
    }

    #home .profile-orbit {
        width: 220px;
        height: 220px;
    }

    #home .data-impact-text {
        gap: 7px;
        font-size: 13px;
    }

    #home .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    #home .hero-actions .btn {
        width: 100%;
    }

}

/* =====================================================
   OPEN TO OPPORTUNITIES MODAL
===================================================== */

.opportunity-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(4, 24, 18, 0.62);
    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

.opportunity-modal.active {
    opacity: 1;
    visibility: visible;
}

.opportunity-modal-card {
    position: relative;

    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;

    padding: 32px;

    border: 1px solid rgba(18, 186, 113, 0.16);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(27, 226, 139, 0.14),
            transparent 32%
        ),
        #ffffff;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.26);

    transform: translateY(25px) scale(0.97);

    transition:
        transform 0.28s ease;
}

.opportunity-modal.active .opportunity-modal-card {
    transform: translateY(0) scale(1);
}


/* CLOSE BUTTON */

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(10, 80, 57, 0.10);
    border-radius: 50%;

    background: #f4fbf7;
    color: #173b30;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: 0.25s ease;
}

.modal-close:hover {
    transform: rotate(90deg);
    background: #e6fff2;
    color: #0bbc70;
}


/* TOP ICON */

.modal-icon {
    width: 56px;
    height: 56px;

    margin-bottom: 17px;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #dffff0,
        #effff8
    );

    color: #0bbc70;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
}


/* LABEL */

.modal-label {
    display: inline-block;

    color: #0aad68;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


/* TITLE */

.opportunity-modal-card h2 {
    margin: 10px 0 12px;

    color: #082e22;

    font-size: 31px;
    line-height: 1.15;

    letter-spacing: -0.6px;
}

.opportunity-modal-card h2 span {
    color: #0bbb70;
}


/* DESCRIPTION */

.opportunity-modal-card > p {
    margin: 0;

    color: #687b74;

    font-size: 12px;
    line-height: 1.7;
}


/* SKILL CHIPS */

.opportunity-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 21px 0;
}

.opportunity-skills span {
    padding: 7px 11px;

    border: 1px solid #d7f0e4;
    border-radius: 50px;

    background: #effbf5;

    color: #15513c;

    font-size: 9px;
    font-weight: 800;
}


/* OPPORTUNITY CARDS */

.opportunity-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 11px;
}

.opportunity-types > div {
    padding: 15px;

    border: 1px solid #dfede6;
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.82);

    transition: 0.25s ease;
}

.opportunity-types > div:hover {
    transform: translateY(-4px);

    border-color: rgba(12, 193, 115, 0.35);

    box-shadow:
        0 12px 28px rgba(12, 103, 72, 0.08);
}

.opportunity-types i {
    margin-bottom: 9px;

    color: #0bbc70;

    font-size: 18px;
}

.opportunity-types strong,
.opportunity-types small {
    display: block;
}

.opportunity-types strong {
    color: #0d3629;

    font-size: 11px;
}

.opportunity-types small {
    margin-top: 4px;

    color: #72817c;

    font-size: 9px;
    line-height: 1.45;
}


/* ACTION BUTTONS */

.modal-actions {
    display: flex;
    gap: 10px;

    margin-top: 23px;
}

.modal-primary,
.modal-secondary {
    min-height: 44px;

    padding: 0 18px;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    transition: 0.25s ease;
}

.modal-primary {
    background: linear-gradient(
        135deg,
        #08bb70,
        #3ce59f
    );

    color: #06261c;
}

.modal-secondary {
    border: 1px solid #dbe9e2;

    background: #f2f8f5;

    color: #173b30;
}

.modal-primary:hover,
.modal-secondary:hover {
    transform: translateY(-3px);
}


/* DARK MODE */

body:not(.light) .opportunity-modal-card {
    border-color: rgba(43, 210, 138, 0.15);

    background:
        radial-gradient(
            circle at top right,
            rgba(27, 226, 139, 0.12),
            transparent 34%
        ),
        #0c1f18;
}

body:not(.light) .opportunity-modal-card h2 {
    color: #f1fff8;
}

body:not(.light) .opportunity-modal-card > p {
    color: #98aaa2;
}

body:not(.light) .modal-close {
    border-color: rgba(45, 211, 139, 0.12);

    background: #142b22;

    color: #effff8;
}

body:not(.light) .opportunity-skills span {
    border-color: rgba(43, 210, 138, 0.15);

    background: #132b22;

    color: #baf2d7;
}

body:not(.light) .opportunity-types > div {
    border-color: rgba(43, 210, 138, 0.12);

    background: rgba(17, 41, 32, 0.88);
}

body:not(.light) .opportunity-types strong {
    color: #effff8;
}

body:not(.light) .opportunity-types small {
    color: #96a9a1;
}

body:not(.light) .modal-secondary {
    border-color: rgba(43, 210, 138, 0.14);

    background: #142b22;

    color: #effff8;
}


/* MOBILE */

@media (max-width: 650px) {

    .opportunity-modal {
        padding: 14px;
    }

    .opportunity-modal-card {
        padding: 26px 20px 22px;
        border-radius: 20px;
    }

    .opportunity-modal-card h2 {
        font-size: 25px;
    }

    .opportunity-types {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-primary,
    .modal-secondary {
        width: 100%;
    }

}

/* =====================================================
   PREMIUM TOOLS STRIP
   ===================================================== */

.premium-tools-strip {
    width: min(1380px, calc(100% - 80px));
    margin: -1px auto 28px;
    padding: 18px 28px;
    display: grid;
    grid-template-columns: 260px 1fr 190px;
    align-items: center;
    gap: 28px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 112, 78, 0.14);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(5, 55, 38, 0.06);
}

/* LEFT TEXT */

.tools-strip-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tools-strip-heading strong {
    font-size: 17px;
    font-weight: 800;
    color: #102c24;
}

.tools-strip-heading span {
    font-size: 11px;
    color: #70847e;
}

/* TOOLS AREA */

.tools-strip-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    gap: 18px;
}

.premium-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 70px;
    transition: transform 0.25s ease;
}

.premium-tool:hover {
    transform: translateY(-4px);
}

.premium-tool > span {
    font-size: 12px;
    font-weight: 600;
    color: #536861;
}

.tool-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* POWER BI */

.tool-icon.powerbi {
    color: #e5b900;
}

/* EXCEL */

.tool-icon.excel {
    color: #107c41;
}

/* SQL */

.tool-icon.sql {
    color: #1685c0;
}

/* PYTHON */

.tool-icon.python {
    color: #3776ab;
}

/* TABLEAU */

.tool-icon.tableau {
    color: #e97627;
}

/* GITHUB */

.tool-icon.github-tool {
    color: #181717;
    font-size: 30px;
}

/* RIGHT MOTTO */

.tools-strip-motto {
    min-height: 58px;
    padding-left: 25px;
    border-left: 1px solid rgba(16, 77, 59, 0.15);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.tools-strip-motto > i {
    font-size: 30px;
    color: #10b96d;
}

.tools-strip-motto > div {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.tools-strip-motto span {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #08764c;
}

.tools-strip-motto span:nth-child(2) {
    color: #10b96d;
}

.tools-strip-motto span:nth-child(3) {
    color: #102c24;
}

/* LIGHT THEME */

body.light .premium-tools-strip {
    background: rgba(255, 255, 255, 0.94);
}

/* DARK THEME */

body:not(.light) .premium-tools-strip {
    background: rgba(11, 27, 23, 0.92);
    border-color: rgba(70, 225, 157, 0.15);
}

body:not(.light) .tools-strip-heading strong,
body:not(.light) .premium-tool > span {
    color: #eefbf5;
}

body:not(.light) .tools-strip-heading span {
    color: #9eb7ad;
}

body:not(.light) .tool-icon.github-tool {
    color: #ffffff;
}

/* TABLET */

@media (max-width: 1100px) {

    .premium-tools-strip {
        width: calc(100% - 40px);
        grid-template-columns: 190px 1fr;
        gap: 22px;
    }

    .tools-strip-motto {
        display: none;
    }

    .tools-strip-list {
        gap: 12px;
    }
}

/* MOBILE */

@media (max-width: 760px) {

    .premium-tools-strip {
        width: calc(100% - 28px);
        margin: 12px auto 24px;
        padding: 18px 16px;
        display: block;
    }

    .tools-strip-heading {
        text-align: center;
        margin-bottom: 18px;
    }

    .tools-strip-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px;
    }

    .premium-tool {
        min-width: 0;
    }

    .tool-icon {
        width: 34px;
        height: 34px;
        font-size: 23px;
    }

    .premium-tool > span {
        font-size: 11px;
    }

    .tools-strip-motto {
        display: none;
    }
}

/* EXTRA SMALL MOBILE */

@media (max-width: 420px) {

    .premium-tools-strip {
        width: calc(100% - 20px);
        padding: 16px 12px;
    }

    .tools-strip-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 6px;
    }
}

/* =====================================================
   FINAL PREMIUM SIGNATURE + SK LOGO ANIMATION
===================================================== */


/* =========================================
   DATA → INSIGHT → IMPACT SIGNATURE
========================================= */

#home .impact-signature {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 34px;
    padding-bottom: 18px;

    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 30px;
    font-weight: 600;
    font-style: italic;

    color: #0d4736;

    letter-spacing: 0.2px;

    transform: rotate(-1deg);
}

#home .impact-signature span {
    position: relative;
    display: inline-block;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

#home .impact-signature span:nth-of-type(1) {
    color: #0d4736;
}

#home .impact-signature span:nth-of-type(2) {
    color: #0ab96f;
}

#home .impact-signature span:nth-of-type(3) {
    color: #0a7f53;
}

#home .impact-signature i {
    color: #0ab96f;

    font-size: 14px;

    transform: translateY(2px);
}

/* subtle hover animation */

#home .impact-signature:hover span:nth-of-type(1) {
    transform: translateY(-3px) rotate(-2deg);
}

#home .impact-signature:hover span:nth-of-type(2) {
    transform: translateY(-5px) scale(1.05);
}

#home .impact-signature:hover span:nth-of-type(3) {
    transform: translateY(-3px) rotate(2deg);
}


/* =========================================
   CURVED UNDERLINE
========================================= */

#home .impact-signature-line {
    position: relative;

    width: 310px;
    height: 18px;

    margin-top: -10px;

    background: transparent;

    overflow: hidden;
}

#home .impact-signature-line::before {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    top: 2px;

    height: 22px;

    border-top: 3px solid #0d8a59;
    border-radius: 50%;

    transform: rotate(-2deg);
}

#home .impact-signature-line::after {
    content: "";

    position: absolute;

    left: 55px;
    right: 35px;
    top: 8px;

    height: 16px;

    border-top: 2px solid rgba(13, 138, 89, 0.48);
    border-radius: 50%;

    transform: rotate(2deg);
}


/* =========================================
   SK LOGO PREMIUM ANIMATION
========================================= */

.brand-logo {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: 900;

    background:
        linear-gradient(
            120deg,
            #009c5b,
            #2be39a,
            #0a7f53,
            #35e8a0,
            #009c5b
        );

    background-size: 300% auto;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(0 5px 8px rgba(10, 160, 98, 0.12));

    animation:
        skPremiumGradient 5s linear infinite,
        skPremiumFloat 3s ease-in-out infinite;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* animated small dot */

.brand-logo::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: -7px;
    top: 0;

    border-radius: 50%;

    background: #0bcf79;

    box-shadow:
        0 0 0 4px rgba(11, 207, 121, 0.12),
        0 0 10px rgba(11, 207, 121, 0.35);

    animation:
        skPremiumDot 1.5s ease-in-out infinite;
}


/* hover */

.brand:hover .brand-logo {
    transform:
        translateY(-2px)
        scale(1.08)
        rotate(-2deg);

    filter:
        drop-shadow(0 8px 12px rgba(10, 170, 103, 0.26));
}


/* gradient movement */

@keyframes skPremiumGradient {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }

}


/* floating effect */

@keyframes skPremiumFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }

}


/* dot pulse */

@keyframes skPremiumDot {

    0%,
    100% {
        transform: scale(0.75);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    #home .impact-signature {
        gap: 9px;

        font-size: 23px;
    }

    #home .impact-signature-line {
        width: 250px;
    }

}

@media (max-width: 420px) {

    #home .impact-signature {
        gap: 7px;

        font-size: 20px;
    }

    #home .impact-signature-line {
        width: 220px;
    }

}

/* ===== DARK MODE SIGNATURE FIX ===== */

body:not(.light) #home .impact-signature {
    color: #dfffee !important;
}

body:not(.light) #home .impact-signature span:nth-of-type(1) {
    color: #ffffff !important;
}

body:not(.light) #home .impact-signature span:nth-of-type(2) {
    color: #32e79f !important;
}

body:not(.light) #home .impact-signature span:nth-of-type(3) {
    color: #8af5c6 !important;
}

body:not(.light) #home .impact-signature i {
    color: #35e79f !important;
}

body:not(.light) #home .impact-signature-line::before {
    border-top-color: #26d98f !important;
}

body:not(.light) #home .impact-signature-line::after {
    border-top-color: rgba(71, 235, 166, 0.55) !important;
}

/* ===== HERO WAVING HAND ===== */

.hello span {
    display: inline-block;
    font-size: 1.65em;
    margin-left: 6px;
    vertical-align: middle;
    transform-origin: 70% 70%;
    animation: heroHandWave 2.2s ease-in-out infinite;
}

@keyframes heroHandWave {
    0%, 60%, 100% {
        transform: rotate(0deg) scale(1);
    }

    10% {
        transform: rotate(20deg) scale(1.08);
    }

    20% {
        transform: rotate(-12deg) scale(1.08);
    }

    30% {
        transform: rotate(20deg) scale(1.08);
    }

    40% {
        transform: rotate(-8deg) scale(1.06);
    }

    50% {
        transform: rotate(14deg) scale(1.04);
    }
}

/* =====================================================
   PREMIUM GOOGLE CERTIFIED BADGE
===================================================== */

.google-badge {
    min-height: 48px;
    padding: 7px 12px 7px 9px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border: 1px solid rgba(30, 80, 60, 0.12);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 8px 22px rgba(20, 70, 50, 0.08);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.google-badge:hover {
    transform: translateY(-3px);

    border-color: rgba(66, 133, 244, 0.28);

    box-shadow:
        0 13px 30px rgba(20, 70, 50, 0.13);
}


/* ===== ORIGINAL GOOGLE LOGO ===== */

.google-cert-logo {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    object-fit: contain;

    display: block;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.google-badge:hover .google-cert-logo {
    transform: scale(1.10) rotate(-6deg);

    filter:
        drop-shadow(0 4px 7px rgba(66, 133, 244, 0.18));
}


/* ===== CERTIFICATE TEXT ===== */

.google-cert-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    text-align: left;
}

.google-cert-copy b {
    color: #172b24;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;
}

.google-cert-copy small {
    margin-top: 2px;

    color: #71807a;

    font-size: 8px;
    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;
}


/* ===== BLUE VERIFIED ICON ===== */

.google-cert-check {
    margin-left: 3px;

    color: #4285f4 !important;

    font-size: 13px;

    filter:
        drop-shadow(0 2px 4px rgba(66, 133, 244, 0.20));

    transition:
        transform 0.3s ease;
}

.google-badge:hover .google-cert-check {
    transform: scale(1.18);
}


/* ===== DARK THEME ===== */

body:not(.light) .google-badge {
    background: rgba(255, 255, 255, 0.97);

    border-color: rgba(255, 255, 255, 0.14);
}

body:not(.light) .google-cert-copy b {
    color: #172b24;
}

body:not(.light) .google-cert-copy small {
    color: #71807a;
}


/* ===== MOBILE ===== */

@media (max-width: 700px) {

    .google-badge {
        min-height: 44px;

        padding: 6px 9px;

        gap: 7px;

        border-radius: 12px;
    }

    .google-cert-logo {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }

    .google-cert-copy b {
        font-size: 10px;
    }

    .google-cert-copy small {
        font-size: 7px;
    }

    .google-cert-check {
        font-size: 11px;
    }
}

/* =====================================================
   PREMIUM SOCIAL ICON HOVER / FLOAT ANIMATION
===================================================== */

/* RIGHT SIDE FLOATING SOCIAL ICONS */
.floating-actions a {
    position: relative;
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        filter 0.28s ease !important;
    will-change: transform;
}

/* Hover = left side float + slight zoom */
.floating-actions a:hover {
    transform: translateX(-8px) translateY(-2px) scale(1.10) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.18),
        0 0 0 4px rgba(18, 200, 125, 0.08) !important;
    filter: brightness(1.06);
}

/* Icon itself */
.floating-actions a i {
    transition: transform 0.28s ease !important;
}

.floating-actions a:hover i {
    transform: scale(1.12);
}


/* =====================================================
   CONTACT / FOOTER SOCIAL BUTTONS
===================================================== */

/* Covers social/contact cards and buttons */
.contact-card,
.contact-links a,
.social-links a,
.footer-socials a {
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}

/* Float upward on hover */
.contact-card:hover,
.contact-links a:hover,
.social-links a:hover,
.footer-socials a:hover {
    transform: translateY(-6px) !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.11) !important;

    border-color:
        rgba(18, 200, 125, 0.45) !important;
}


/* =====================================================
   SUBTLE IDLE FLOAT FOR RIGHT SIDE ICONS
===================================================== */

.floating-actions {
    animation: socialPanelFloat 4s ease-in-out infinite;
}

@keyframes socialPanelFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .floating-actions {
        animation: none;
    }

    .floating-actions a,
    .contact-card,
    .contact-links a,
    .social-links a,
    .footer-socials a {
        transition: none !important;
    }
}

/* ===== CERTIFICATIONS + TECHNICAL SKILLS HOVER FLOAT ===== */

/* Certification cards */
.cert-card,
.certification-card,
#certifications .card {
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}

.cert-card:hover,
.certification-card:hover,
#certifications .card:hover {
    transform: translateY(-7px) scale(1.015) !important;
    border-color: rgba(18, 200, 125, 0.45) !important;
    box-shadow:
        0 16px 34px rgba(12, 90, 62, 0.13) !important;
}


/* Technical skill cards */
.skill-card,
.skills-grid .card,
#skills .card {
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}

.skill-card:hover,
.skills-grid .card:hover,
#skills .card:hover {
    transform: translateY(-7px) scale(1.02) !important;
    border-color: rgba(18, 200, 125, 0.45) !important;
    box-shadow:
        0 16px 34px rgba(12, 90, 62, 0.13) !important;
}


/* Icon animation inside cards */
.cert-card i,
.certification-card i,
.skill-card i,
#certifications .card i,
#skills .card i {
    transition:
        transform 0.28s ease,
        filter 0.28s ease !important;
}

.cert-card:hover i,
.certification-card:hover i,
.skill-card:hover i,
#certifications .card:hover i,
#skills .card:hover i {
    transform: translateY(-2px) scale(1.12) rotate(-3deg) !important;
    filter: drop-shadow(0 5px 8px rgba(12, 190, 115, 0.18));
}


/* View Certificate link hover */
.cert-card a,
.certification-card a,
#certifications .card a {
    transition:
        transform 0.25s ease,
        color 0.25s ease !important;
}

.cert-card a:hover,
.certification-card a:hover,
#certifications .card a:hover {
    transform: translateX(3px);
}


/* Dark mode */
body:not(.light) .cert-card:hover,
body:not(.light) .certification-card:hover,
body:not(.light) .skill-card:hover,
body:not(.light) #certifications .card:hover,
body:not(.light) #skills .card:hover {
    border-color: rgba(57, 232, 158, 0.45) !important;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(57, 232, 158, 0.08) !important;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .cert-card,
    .certification-card,
    .skill-card,
    #certifications .card,
    #skills .card {
        transition: none !important;
    }

}

/* ===== PROJECT DASHBOARD IMAGE CLARITY FIX ===== */

.project-image {
    width: 100%;
    height: 260px !important;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px 14px 0 0;
    position: relative;
}

.project-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    display: block;

    /* Better image rendering */
    image-rendering: auto;
    backface-visibility: hidden;

    /* Smooth zoom */
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Dashboard zoom on hover */
.project-card:hover .project-image img {
    transform: scale(1.08);
    filter: contrast(1.04) saturate(1.04);
}

/* Card premium hover */
.project-card {
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.project-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
}

/* Tablet */
@media (max-width: 1000px) {
    .project-image {
        height: 280px !important;
    }
}

/* Mobile - image ko aur readable rakho */
@media (max-width: 650px) {
    .project-image {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .project-image img {
        object-fit: contain !important;
    }
}

/* ===== LARGER PROJECT CARDS FOR DASHBOARD READABILITY ===== */

.projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
}

@media (max-width: 700px) {
    .projects-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   ABOUT ME SECTION
===================================================== */

.about-section {
    padding: 70px 0;
    background:
        linear-gradient(
            180deg,
            rgba(236, 255, 246, 0.88),
            rgba(255, 255, 255, 0.96)
        );
}

.about-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 42px;
    align-items: center;

    padding: 34px;

    border: 1px solid rgba(15, 120, 80, 0.12);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 18px 45px rgba(10, 90, 62, 0.08);
}


/* LEFT SIDE */

.about-intro .eyebrow {
    margin-bottom: 10px;
    color: #0ab970;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.4px;
}

.about-intro h2 {
    margin: 0;

    color: #0b3025;

    font-size: 31px;
    line-height: 1.18;
}

.about-intro h2 span {
    color: #0bbd72;
}

.about-description {
    max-width: 650px;

    margin-top: 16px;

    color: #667a72;

    font-size: 12px;
    line-height: 1.75;
}

.about-btn {
    margin-top: 22px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.about-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(12, 190, 115, 0.18);
}

.about-btn i {
    transition: transform 0.28s ease;
}

.about-btn:hover i {
    transform: translateX(4px);
}


/* RIGHT SIDE HIGHLIGHTS */

.about-highlights {
    display: grid;
    gap: 14px;
}

.about-highlight {
    min-height: 86px;

    padding: 16px 18px;

    display: flex;
    align-items: center;
    gap: 14px;

    border: 1px solid rgba(15, 120, 80, 0.10);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0fff7
        );

    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.about-highlight:hover {
    transform: translateY(-6px);

    border-color: rgba(12, 196, 117, 0.42);

    box-shadow:
        0 14px 30px rgba(10, 95, 65, 0.10);
}

.about-highlight > i {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e3fff1;

    color: #0abb70;

    font-size: 18px;

    transition:
        transform 0.28s ease;
}

.about-highlight:hover > i {
    transform: scale(1.10) rotate(-4deg);
}

.about-highlight strong,
.about-highlight span {
    display: block;
}

.about-highlight strong {
    color: #10392c;

    font-size: 12px;
}

.about-highlight span {
    margin-top: 4px;

    color: #71837c;

    font-size: 9px;
    line-height: 1.45;
}


/* DARK MODE */

body:not(.light) .about-section {
    background:
        linear-gradient(
            180deg,
            #081710,
            #091b14
        );
}

body:not(.light) .about-card {
    background: rgba(12, 31, 24, 0.94);

    border-color: rgba(44, 210, 139, 0.13);
}

body:not(.light) .about-intro h2 {
    color: #f2fff9;
}

body:not(.light) .about-description {
    color: #9db0a7;
}

body:not(.light) .about-highlight {
    background:
        linear-gradient(
            135deg,
            rgba(17, 42, 32, 0.95),
            rgba(12, 31, 24, 0.95)
        );

    border-color: rgba(44, 210, 139, 0.12);
}

body:not(.light) .about-highlight strong {
    color: #f1fff8;
}

body:not(.light) .about-highlight span {
    color: #95a99f;
}


/* TABLET */

@media (max-width: 900px) {

    .about-card {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .about-section {
        padding: 48px 0;
    }

    .about-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .about-intro {
        text-align: center;
    }

    .about-intro h2 {
        font-size: 25px;
    }

    .about-description {
        margin-left: auto;
        margin-right: auto;
    }

    .about-btn {
        justify-content: center;
    }

    .about-highlight {
        text-align: left;
    }
}

/* ===== PROJECT KEY INSIGHT ===== */

.project-insight {
    margin: 12px 0 14px;
    padding: 10px 12px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    border: 1px solid rgba(13, 190, 111, 0.18);
    border-radius: 11px;

    background: rgba(232, 255, 244, 0.72);

    color: #45665a;

    font-size: 10px;
    line-height: 1.55;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.project-insight i {
    margin-top: 2px;
    color: #0abb70;
    font-size: 13px;
}

.project-insight b {
    color: #0d4c38;
}

.project-card:hover .project-insight {
    transform: translateY(-2px);
    border-color: rgba(13, 190, 111, 0.38);

    box-shadow:
        0 8px 18px rgba(12, 100, 70, 0.07);
}

/* DARK MODE */

body:not(.light) .project-insight {
    background: rgba(16, 44, 33, 0.88);
    border-color: rgba(54, 220, 147, 0.17);
    color: #a7bbb2;
}

body:not(.light) .project-insight b {
    color: #7ef0bd;
}

/* MOBILE */

@media (max-width: 650px) {
    .project-insight {
        font-size: 9px;
        padding: 9px 10px;
    }
}

/* ===== PROJECT KEY INSIGHT ===== */

.project-insight {
    margin: 12px 0 14px;
    padding: 11px 13px;
    background: rgba(16, 185, 129, 0.07);
    border-left: 3px solid #10b981;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                background 0.25s ease;
}

.project-insight i {
    color: #10b981;
    margin-right: 6px;
}

.project-insight strong {
    font-weight: 700;
}

.project-card:hover .project-insight {
    transform: translateX(3px);
    background: rgba(16, 185, 129, 0.11);
}

/* Light theme */
body.light .project-insight {
    background: rgba(16, 185, 129, 0.06);
}

/* Mobile */
@media (max-width: 650px) {
    .project-insight {
        font-size: 11px;
        padding: 10px 12px;
    }
}

/* Keep Key Insight label clean */
.project-insight strong {
    white-space: nowrap;
    flex-shrink: 0;
}

.project-insight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ===== FINAL KEY INSIGHT ALIGNMENT ===== */

.project-insight {
    display: grid;
    grid-template-columns: 18px auto 1fr;
    align-items: start;
    column-gap: 9px;
    padding: 12px 14px;
}

.project-insight i {
    margin: 2px 0 0 0;
}

.project-insight strong {
    white-space: nowrap !important;
    display: inline-block;
    min-width: max-content;
}

.project-insight {
    font-size: 11px;
    line-height: 1.55;
}

/* =====================================================
   RESPONSIVE PROJECT LOGO BADGES
===================================================== */

.project-image {
    position: relative;
}

/* Logo badge */
.project-logo-badge {
    position: absolute;
    top: 12px;
    left: 12px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.95);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.16);

    z-index: 10;

    overflow: hidden;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

/* Actual logo */
.project-logo-badge img {
    width: 76% !important;
    height: 76% !important;

    object-fit: contain !important;

    display: block;

    transform: none !important;
    filter: none !important;
}

/* Hover effect */
.project-card:hover .project-logo-badge {
    transform: translateY(-3px) scale(1.08);

    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.20);
}

/* Prevent main image hover rules from affecting logo */
.project-card:hover .project-logo-badge img {
    transform: none !important;
    filter: none !important;
}


/* TABLET */

@media (max-width: 900px) {

    .project-logo-badge {
        width: 42px;
        height: 42px;

        top: 10px;
        left: 10px;
    }
}


/* MOBILE */

@media (max-width: 650px) {

    .project-logo-badge {
        width: 38px;
        height: 38px;

        top: 8px;
        left: 8px;
    }
}


/* SMALL MOBILE */

@media (max-width: 420px) {

    .project-logo-badge {
        width: 34px;
        height: 34px;

        top: 7px;
        left: 7px;
    }
}

/* Starbucks logo size adjustment */
.project-logo-badge img[src*="starbucks-logo"] {
    width: 96% !important;
    height: 96% !important;
    transform: scale(1.18) !important;
}


/* =====================================================
   MERGED FINAL RESPONSIVE OVERRIDES
   Desktop base preserved + mobile working rules
===================================================== */

/* =====================================================
   FINAL MOBILE HEADER FIX
   iPhone + Android
===================================================== */

@media (max-width: 700px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    * {
        box-sizing: border-box !important;
    }

    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    .topbar .nav-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px 40px !important;
        grid-template-areas:
            "brand theme menu"
            "certificate certificate certificate" !important;

        align-items: center !important;
        gap: 8px !important;

        padding: 8px 12px !important;
        margin: 0 !important;
    }

    .brand {
        grid-area: brand !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .brand-copy {
        min-width: 0 !important;
    }

    .brand-copy strong {
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .brand-copy small {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .nav-actions {
        display: contents !important;
    }

    #themeToggle {
        grid-area: theme !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    #menuBtn {
        grid-area: menu !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        z-index: 1002 !important;
    }

    .google-badge {
        grid-area: certificate !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        padding: 7px 10px !important;
        margin: 0 !important;

        overflow: hidden !important;
    }

    .google-cert-logo {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        object-fit: contain !important;
    }

    .google-cert-copy {
        display: block !important;
        min-width: 0 !important;
        max-width: calc(100% - 50px) !important;
    }

    .google-cert-copy b {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .google-cert-copy small {
        display: block !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .google-cert-check {
        flex-shrink: 0 !important;
    }

    /* Mobile nav dropdown */
    #nav {
        position: absolute !important;

        top: 100% !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        max-width: calc(100% - 24px) !important;

        display: none !important;
        flex-direction: column !important;

        padding: 10px !important;

        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;

        box-shadow: var(--shadow) !important;

        z-index: 1001 !important;
    }

    #nav.open {
        display: flex !important;
    }

    #nav a {
        width: 100% !important;

        padding: 10px 12px !important;

        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Hero */
    .hero {
        width: 100% !important;
        max-width: 100% !important;

        padding: 22px 14px 28px !important;

        overflow: hidden !important;
    }

    .hero-layout {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 24px !important;

        margin: 0 auto !important;
    }

    .hero-left,
    .hero-center,
    .hero-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-center {
        order: -1 !important;

        max-width: 280px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-left {
        text-align: center !important;
    }

    .hero-left h1 {
        font-size: clamp(40px, 12vw, 52px) !important;
        line-height: .98 !important;
    }

    .hero-left p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .hero-actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .hero-actions a,
    .hero-actions button {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    section,
    main,
    footer,
    .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #projectsGrid,
    .projects-grid {
        grid-template-columns: 1fr !important;
    }

    .project-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 390px) {

    .topbar .nav-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .brand-copy strong {
        font-size: 12px !important;
    }

    .hero-center {
        max-width: 245px !important;
    }

    .hero-left h1 {
        font-size: 40px !important;
    }
}

/* =========================================
   CERTIFICATIONS WIDTH FIX - DESKTOP ONLY
========================================= */

@media (min-width: 901px) {

    #certifications {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #certifications .container {
        width: min(1320px, calc(100% - 80px)) !important;
        max-width: 1320px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Certifications + Technical Skills main columns */
    #certifications .cert-skills-grid,
    #certifications .certifications-skills-grid,
    #certifications .credentials-grid {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, .95fr) !important;

        gap: 28px !important;
    }
}

/* ===== FINAL MOBILE HERO COMPACT ===== */
@media (max-width: 700px) {

    #home.hero {
        padding: 14px 0 24px !important;
    }

    #home .profile-orbit {
        width: 185px !important;
        height: 185px !important;
        max-width: 185px !important;
        max-height: 185px !important;
    }

    #home .profile-orbit::before {
        inset: -10px !important;
    }

    #home .profile-orbit::after {
        inset: -18px !important;
    }

    #home .profile-online-dot {
        width: 16px !important;
        height: 16px !important;
        right: 4px !important;
        bottom: 25px !important;
        border-width: 3px !important;
    }

    #home .data-impact-text {
        margin-top: 20px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }

    #home .hello {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        font-size: 12px !important;
    }

    #home .premium-name {
        font-size: 40px !important;
        line-height: .96 !important;
    }

    #home .premium-role,
    #home .typing-role {
        margin-top: 15px !important;
        font-size: 11px !important;
        letter-spacing: 2.6px !important;
        white-space: nowrap !important;
    }

    #home .premium-title-line {
        width: 62px !important;
        margin: 10px auto 15px !important;
    }

    #home .premium-tagline {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    #home .hero-text {
        max-width: 330px !important;
        margin: 12px auto 0 !important;
        font-size: 11.5px !important;
        line-height: 1.6 !important;
    }

    .floating-actions {
        right: 7px !important;
    }

    .floating-actions a {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 700px) {
    .floating-actions {
        right: 4px !important;
        gap: 6px !important;
    }

    .floating-actions a {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}