/* ===============================
   ROOT VARIABLES
/* ================================ */
:root {

  --bg: rgb(2, 13, 23);
  --card: linear-gradient(145deg, #0f1c2e, #0c1624);
  /* --card: #27303c5d; */
  --gold: #00e0ff;
  --text: #f5f5f5;
  --muted: #b0c4d4;
  --bg: rgb(2, 13, 23);
  /* derived nav colors */
  --nav-bg: rgba(2, 13, 23, 0.75);
  --nav-border: rgba(176, 165, 133, 0.22);
  --nav-blur: 16px;
} 



body {
  font-family: 'Inter', system-ui, sans-serif;

  overflow-x: hidden;
}
body > *:not(.topbar) {
  transform-style: preserve-3d;
}

html {
  background-color: rgb(2, 13, 23);
  scrollbar-gutter: stable;
}





/* ===============================
   RESET
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===============================
   BODY
================================ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
  overflow-x: hidden;

  padding-top: 74px;   /* EXACT MATCH WITH NAV HEIGHT */
}


.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 74px;
  padding: 45px 6%;  

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

  /* ✅ SAME COLOR FAMILY AS BODY */
  background-color: rgba(2, 13, 23, 0.78);

  /* ✅ BLUR (VARIABLE SAFE) */
  backdrop-filter: blur(var(--nav-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(140%);

  border-bottom: 1px solid var(--nav-border);

  z-index: 1000000;

  /* 🔥 CRITICAL FIXES (DO NOT TOUCH) */
  border-radius: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);

  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}
.topbar {
  contain: paint;
}





/* BRAND */
.brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.logo {
  color: var(--gold);
  font-size: 2.00rem;
  font-weight: 700;
  margin-left: 20px
}

.sub {
  color: var(--muted);
  font-size: 0.8rem;
}

/* DESKTOP LINKS */
.nav-links-desktop {
  display: flex;
  gap: 28px;
}

.nav-links-desktop a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding-left: 20px;
  
}


.nav-links-desktop a:hover {
  color: var(--gold);
}

/* MOBILE TOGGLE */
.menu-btn {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
}

/* MINI MENU (MOBILE) */
.mini-menu {
  position: absolute;
  top: 68px;
  right: 6%;
  background: linear-gradient(145deg, #0f1c2e, #0c1624);
  border-radius: 14px;
  padding: 12px 0;
  display: none;
  flex-direction: column;
  min-width: 200px;
  box-shadow:
    0 0 25px rgba(55, 196, 212, 0.35),
    0 0 45px rgba(55, 157, 212, 0.2);
}

.mini-menu a {
  padding: 12px 20px;
  color: var(--text);
  text-decoration: none;
}

.mini-menu a:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.2);;
}

.mini-menu.show {
  display: flex;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .nav-links-desktop {
    display: none;
  }

  .menu-btn {
    display: block;
  }
}




.hero-name {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 3px;


}




.context-strip {
  margin: 15px auto 20px;
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;

  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--muted);

  opacity: 0;

  /* two-phase animation */
  animation:
    contextIntro 0.8s ease forwards,
    contextFade 2s ease-in-out infinite;

  /* ⏱️ delay control */
  animation-delay: 1s, 1.8s;
}

/* dot separator */
.context-strip span {
  position: relative;
}

.context-strip span::after {
  content: "•";
  position: absolute;
  right: -16px;
  opacity: 0.3;
}

.context-strip span:last-child::after {
  display: none;
}

/* INTRO FADE (ONCE) */
@keyframes contextIntro {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 0.65;
    transform: translateY(0);
  }
}

/* IDLE BREATHING */
@keyframes contextFade {
  0%,100% { opacity: 0.45; }
  50% { opacity: 0.65; }
}


.scroll-indicator {
  position: relative;
  margin: 30px auto 10px;
  width: 24px;
  height: 48px;
}

.scroll-indicator span {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
  animation: scrollArrow 1.8s infinite;
  opacity: 0;
}

.scroll-indicator span:nth-child(1) { top: 0; animation-delay: 0s; }
.scroll-indicator span:nth-child(2) { top: 14px; animation-delay: .2s; }
.scroll-indicator span:nth-child(3) { top: 28px; animation-delay: .4s; }

@keyframes scrollArrow {
  0% { opacity: 0; transform: translate(-50%, -6px) rotate(45deg); }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 6px) rotate(45deg); }
}













/* ===============================
   SECTIONS
================================ */
.section {
  padding: 90px 8%;
  margin-top: 0;
  padding-top: 90px;
  font-family: 'Inter', system-ui, sans-serif;



}
#home{
  margin-top: 40px;
}


.pro1 { margin-top: -110px; }
.mine { margin-top: -110px; }

.section-title {
  text-align: center;
  color: var(--gold);
  font-size: 2.4rem;
  margin-bottom: 50px;
}

/* ===============================
   GRID & BOX
================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}
.grid .box{
  background-color: linear-gradient(145deg, #0f1c2e, #0c1624);
}

.hovering:hover{
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.2);
}
.box:hover{
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.2);
}

.box {
  background: linear-gradient(145deg, #14253d, #0c1624);
  padding: 25px;
  border-radius: 18px;
  transition: all 0.35s ease;
  
}
.box1:hover{
    box-shadow:
    0 0 440px rgba(255, 255, 255, 0.25),
    0 0 10px rgba(218, 223, 226, 0.4);
  transform: translateY(-10px);
}

.box1{
  box-shadow:
    0 0 1000px rgba(66, 76, 91, 0.25),
    0 0 20px rgba(150, 154, 157, 0.4);

}

/* ===============================
   CENTER UTIL
================================ */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.center i {
  font-size: 2.5rem;
}

/* ===============================
   HERO
================================ */
.hero-box {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
}

.photo-box img {
  width: 100%;
  max-width: 260px;
  border-radius: 14px;
  margin-top: 21px;
}

.hero-text h1 {
  font-size: 2.2rem;
}



/* ================================
   HERO ACTION SYSTEM
================================ */

.hero-actions {
  margin-top: 23px;
  display: flex;
  flex-direction: column;
  gap: 22px;

}

/* -------------------------------
   SOCIAL ICONS (ROUNDED STYLE)
-------------------------------- */

.social-icons {
  display: flex;
  gap: 18px;
}

.social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ffffff;
  font-size: 1rem;
  transition: 0.35s ease;
}

.social-btn:hover {
  background: var(--gold);
  color: #000;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.social-btn i {
  font-size: 1rem;
}

/* -------------------------------
   MINI BUTTONS
-------------------------------- */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.85rem;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.3);
  transition: 0.3s ease;
}

.mini-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* PRIMARY MINI BUTTON */

.primary-mini {
  border-color: var(--gold);
  color: var(--gold);
}

.primary-mini:hover {
  background: var(--gold);
  color: #000;
}



.social-icons a {
  text-decoration: none !important;
}







/* ===============================
   HERO ROLE – ROTATING TYPE STYLE
================================ */

.hero-role {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
  min-height: 30px;
}

#typed-role {
  border-right: 3px solid var(--gold);
  padding-right: 6px;
  animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {
  0% { border-color: var(--gold); }
  50% { border-color: transparent; }
  100% { border-color: var(--gold); }
}




.hero-text p {
  margin-top: 12px;
  line-height: 1.7;
  color: var(--muted);
}

/* ===============================
   LINK BUTTONS
================================ */
.link-row {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 8px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.link-btn:hover {
  background: var(--gold);
  color: black;

    box-shadow:
    0 0 35px rgba(124, 125, 129, 0.25),
    0 0 75px rgba(86, 85, 83, 0.4);
  transform: translateY(-1px);
}

.link-btn i {
  font-size: 1.1rem;
}

.mail-icon,
.view-icon,
.download-icon {
  width: 18px;
  height: 18px;
}

/* ===============================
   PROJECTS
================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.project-card {
  background: var(--card);
  padding: 28px;
  border-radius: 18px;
  transition: all 0.35s ease;
}

.project-card:hover {
  box-shadow:
    0 0 300px rgba(124, 125, 129, 0.25),
    0 0 25px rgba(86, 85, 83, 0.4);
  transform: translateY(-8px);
}


.project-card h3 {
  color: var(--gold);
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.project-card p {
  font-size: 0.95rem;
  color: var(--muted);
  min-height: 72px;
  padding-top: 30px;
}

.project-card span {
  display: block;
  margin: 15px 0;
  font-size: 0.85rem;
}

.project-card a {
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
}

.project-card a:hover {
  background: var(--gold);
  color: black;
}


/* HIDE EXTRA PROJECTS */
.extra-project {
  display: none;
}

/* PROJECT TOGGLE BUTTON */
.project-toggle {
  text-align: center;
  margin-top: 40px;
}

#toggleProjectBtn {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 26px;
  font-size: 0.95rem;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.4s ease;
}

#toggleProjectBtn:hover {
  background: var(--gold);
  color: black;
  box-shadow:
    0 0 25px rgba(212,175,55,0.6),
    0 0 50px rgba(212,175,55,0.35);
  transform: translateY(-2px);
}





/* ===============================
   CERTIFICATIONS
================================ */
.cert-card {
  text-align: center;
}

.cert-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
  cursor: pointer;
}

.cert-card h3 {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.cert-card p {
  font-size: 0.9rem;
  color: var(--muted);
  min-height: 48px;
}

/* HIDE EXTRA CERTS INITIALLY */
.extra-cert {
  display: none;
}

/* SHOW MORE BUTTON */
.cert-toggle {
  text-align: center;
  margin-top: 40px;
}

#toggleCertBtn {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 26px;
  font-size: 0.95rem;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.4s ease;
}

/* GLOW EFFECT */
#toggleCertBtn:hover {
  background: var(--gold);
  color: black;
  box-shadow:
    0 0 25px rgba(212,175,55,0.6),
    0 0 50px rgba(212,175,55,0.35);
  transform: translateY(-2px);
}


/* =========================================
   CERTIFICATE MODAL – UPDATED (MATCH INTERNSHIP STYLE)
========================================= */

#certModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;

  z-index: 10000000; /* Higher than navbar */

  opacity: 0;
  transition: opacity 0.3s ease;
}

#certModal.show {
  opacity: 1;
}

#certModal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 18px;

  transform: scale(0.9);
  transition: transform 0.35s ease;
}

#certModal.show img {
  transform: scale(1);
}

/* Desktop show/hide logic */
#certGrid .extra-cert {
  display: none;
}

#certGrid.expanded .extra-cert {
  display: block;
}




#tools .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }
/* ===============================
   RESUME MODAL (STABLE)
================================ */
.resume-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.vi{
  margin-top: 45px;
}

.resume-box {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin-left: -200px;
  background: #111;
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(11, 47, 67, 0.6);
  overflow: hidden;
}

.resume-box iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
#resumeModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#resumeModal img {
  max-width: 85%;
  max-height: 85%;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(212,175,55,0.6);
}


.resume-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
}

body.modal-open {
  overflow: hidden;
}

body.modal-open #cursorGlow,
body.modal-open #clickSpot {
  opacity: 0;
}

/* ===============================
   ABOUT ME
================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px;
}

.about-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 0.95rem;
}

.about-card strong {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 6px;
}

.about-card span {
  color: var(--muted);
  line-height: 1.5;
}

.phone-link {
  color: var(--muted);
  text-decoration: none;
}

.phone-link:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ===============================
   CURSOR EFFECT
================================ */
#cursorGlow {
  position: fixed;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 60, 7, 0.35), transparent 60%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
}

#clickSpot {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   FOOTER
================================ */
.smart-footer {
  padding: 14px 8%;
  border-top: 1px solid rgba(212,175,55,0.25);
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  gap: 10px;
}

.sf-left,
.sf-center,
.sf-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sf-center { justify-content: center; }
.sf-right { justify-content: flex-end; }

.status { color: var(--gold); }

.resume-link {
  color: var(--gold);
  text-decoration: none;
}

.resume-link:hover {
  text-decoration: underline;
}

.dot { opacity: 0.5; }

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1200px) {
  .about-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .hero-box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .photo-box img {
    max-width: 180px;
    margin: auto;
  }

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

  .resume-box {
    width: 95vw;
    height: 92vh;
  }
}

@media (max-width: 480px) {
  .about-grid { grid-template-columns: 1fr; }

  .smart-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sf-left,
  .sf-center,
  .sf-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}



/*Tools---------------------------*/

#tools .box{
  background-color: linear-gradient(145deg, #0f1c2e, #0c1624);
}



/* ===============================
   CINEMATIC SCROLL ANIMATIONS
================================ */

html {
  scroll-behavior: smooth;
}

/* 3D space ONLY for scroll animations */



/* BASE STATE */
.reveal {
  opacity: 0;
  transform:
    translate3d(0, 80px, -120px)
    rotateX(8deg)
    scale(0.92);
  filter: blur(12px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s ease;
  will-change: transform, opacity, filter;
}

/* ACTIVE STATE */
.reveal.active {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotateX(0deg)
    scale(1);
  filter: blur(0);
}

/* LEFT DEPTH */
.reveal-left {
  transform:
    translate3d(-120px, 60px, -160px)
    rotateY(12deg)
    scale(0.9);
}
.reveal-left.active {
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

/* RIGHT DEPTH */
.reveal-right {
  transform:
    translate3d(120px, 60px, -160px)
    rotateY(-12deg)
    scale(0.9);
}
.reveal-right.active {
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

/* SCALE FLOAT */
.reveal-float {
  transform:
    translate3d(0, 100px, -200px)
    scale(0.85);
}
.reveal-float.active {
  transform: translate3d(0, 0, 0) scale(1);
}

/* STAGGER DELAYS */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.4s; }

/* NEVER ANIMATE HERO */
#home .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* ===============================
   NAVBAR HARD ISOLATION FIX
================================ */

/* Remove navbar from 3D stacking chaos */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 999999; /* nuclear priority */
  
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;

  will-change: transform;
}

/* Prevent sections from covering navbar */
.section {
  position: relative;
  z-index: 1;
}

/* Ensure animated elements never overlap nav */
.reveal,
.reveal-left,
.reveal-right,
.reveal-float {
  position: relative;
  z-index: 1;
}











/* =========================================
   HERO MASTER ANIMATION (STABLE VERSION)
========================================= */

/* ---------- HERO CONTAINER ---------- */
#home {
  position: relative;
}

/* ---------- HERO ENTRY (ONCE ONLY) ---------- */
.hero-box {
  opacity: 0;
  animation: heroEnter 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- PHOTO CARD (ENTRY ONLY) ---------- */
.photo-box {
  opacity: 0;
  animation: photoEnter 1.1s cubic-bezier(.19,1,.22,1) forwards;
  overflow: hidden;
  animation-delay: 0.15s;
   transform: translateZ(0);
}

@keyframes photoEnter {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- NAME TEXT ---------- */
.hero-name {
  opacity: 0;
  animation:
    nameSlideIn 0.9s cubic-bezier(.23,1,.32,1) forwards,
    nameGlow 4s ease-in-out infinite;
  animation-delay: 0.35s, 1.4s;
}

@keyframes nameSlideIn {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

}

/* ---------- ROLE TEXT ---------- */
.hero-role {
  opacity: 0;
  animation: roleFade 0.8s ease forwards;
  animation-delay: 0.55s;
}

@keyframes roleFade {
  from {
    opacity: 0;
    letter-spacing: 5px;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    letter-spacing: 1px;
    transform: translateY(0);
  }
}

/* ---------- PARAGRAPHS CASCADE ---------- */
.hero-text p {
  opacity: 0;
  transform: translateY(16px);
  animation: textCascade 0.7s ease forwards;
}

.hero-text p:nth-of-type(1) { animation-delay: 0.75s; }
.hero-text p:nth-of-type(2) { animation-delay: 0.95s; }
.hero-text p:nth-of-type(3) { animation-delay: 1.15s; }

@keyframes textCascade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ---------- BUTTON HOVER GLOW ---------- */
.link-btn {
  position: relative;
  overflow: hidden;
}



/* ============================================================
   MOBILE-ONLY RESPONSIVE OVERRIDE (Max-width: 768px)
   This will NOT affect the Windows/Desktop layout.
   ============================================================ */

@media (max-width: 768px) {
    /* 1. UNIQUE NAV BAR DESIGN */
    .topbar {
        height: 60px;
        padding: 0 5% !important;
        background: rgba(2, 13, 23, 0.95); /* More solid for mobile */
        overflow: visible !important; /* Critical for dropdown */
        clip-path: none !important;
        contain: none !important;
    }

    .logo { font-size: 1.4rem; margin-left: 0; }
    .sub { display: none; } /* Remove "Myself" to save space */
    .mini-menu {
        top: 60px;
        right: 0;
        left: 0;
        width: 100vw;
        border-radius: 0 0 20px 20px;
        background: rgba(3, 16, 29, 0.98);
        border: 1px solid rgb(25, 166, 195);
        text-align: center;
        
    }
     .mini-menu a:hover{
      background-color: rgba(18, 83, 111, 0.323);
      
     }

    /* 2. SKILLS: 4 per line, smaller boxes */
    #skills .grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
    #skills {
      margin-top: -60px;
    }
    #skills .box {
        padding: 10px 5px !important;
        height: 70px !important; /* Boxy size */
    }
    #skills .box i { font-size: 1.6rem !important; }
    #skills .box span { font-size: 0.8rem !important; }

    /* 3. PROJECTS: 3 per line, Headline + Skills + Link only */
    #projects .project-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    #tools .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }
    .project-card {
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 150px !important;
    }
    .project-card h3 { font-size: 0.85rem !important; margin-bottom: 5px !important; }
    .project-card p { display: none !important; } /* REMOVE extra text */
    .project-card span { font-size: 0.8rem !important; margin: 5px 0 !important; color: whitesmoke; }
    .project-card a { 
        font-size: 0.7rem !important; 
        padding: 4px 8px !important; 
        display: inline-block;
        text-align: center;
    }

          @media (max-width: 768px) {
        /* ... your existing mobile code ... */

        /* Force hide projects from the 7th one onwards on mobile */
        #projectGrid .project-card:nth-child(n+7) {
          display: none;
        }

        /* When the grid has the 'expanded' class, show them all again */
        #projectGrid.expanded .project-card:nth-child(n+7) {
          display: flex !important; /* Matches your project card flex/block style */
        }
      }

    /* 4. CERTIFICATIONS: 3 per line, keep ratio, smaller photo */
    #certifications .project-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    #certifications{
      margin-top: -90px;
    }
    .cert-card { padding: 8px !important; }
    .cert-card img {
        height: 90px !important; /* Smaller size */
        margin-bottom: 5px !important;
    }
    .cert-card h3 { font-size: 0.9rem !important; }
    .cert-card p { display: grid !important; } /* Remove extra text */

    @media (max-width: 768px) {
  /* ... your existing mobile code ... */

  /* 1. HIDE CERTS FROM 7th ONWARDS */
  #certGrid .cert-card:nth-child(n+7) {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* 2. SHOW WITH ANIMATION WHEN EXPANDED */
  #certGrid.expanded .cert-card:nth-child(n+7) {
    display: block !important;
    animation: slideUpFade 0.6s forwards;
  }

  /* Keyframe for that smooth "glide" effect */
  @keyframes slideUpFade {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}


    /* 5. TOOLS: 2 per line, small but keep icons */
    #tools .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .tool-card { padding: 15px !important; }
    .tool-card i { font-size: 1.8rem !important; }

    /* 6. ABOUT ME: 3 per line, Boxy shape */
    .about-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .about-card {
        aspect-ratio: 1 / 1 !important; /* Force square boxy type */
        padding: 8px !important;
        justify-content: center !important;
    }
    .about-card strong { font-size: 0.85rem !important; }
    .about-card span { font-size: 0.78rem !important; }

    /* 7. MINIMAL FOOTER */
    .smart-footer {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 20px 5% !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .sf-left, .sf-center, .sf-right { justify-content: center !important; }
    
    /* Remove everything except requested footer elements */
    .sf-left #liveDate, .sf-center .dot, .sf-center .focus, .sf-center .work, .sf-right #liveTime, .sf-right .dot, .sf-right span:nth-child(3) {
        display: none !important;
    }
    
    /* 8. HERO ADJUSTMENT (Mobile only) */
    .hero-box { grid-template-columns: 1fr !important; text-align: center;margin-top: -90px; margin-bottom: -50px; }
    .photo-box img { max-width: 150px !important; }
    .hero-name { font-size: 1.8rem !important; }
    .link-row { justify-content: center !important; }
}









/* ==========================================
   MOBILE FIX — ABOUT ME SECTION ONLY
   DOES NOT AFFECT DESKTOP
========================================== */

@media (max-width: 768px) {

  #about {
    padding: 60px 6% !important;
    margin-top: -70px;
  }

  .about-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .about-card {
    background: var(--card);
    border-radius: 14px !important;
    padding: 14px 10px !important;

    min-height: 110px;
    aspect-ratio: auto !important;

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

    text-align: center !important;
  }

  .about-card strong {
    font-size: 0.75rem !important;
    margin-bottom: 6px;
  }

  .about-card span {
    font-size: 0.65rem !important;
    line-height: 1.3;
  }

  /* Phone number fix */
  .about-card a.phone-link {
    font-size: 0.7rem !important;
    word-break: break-word;
  }
}








/* Hide extra projects by default */
.project-card.extra-project {
  display: none;
}

/* Show them when grid is expanded */
#projectGrid.expanded .project-card.extra-project {
  display: block;
}







/* ======================================
   GLOBAL CARD ANIMATION (ALL BOX TYPES)
====================================== */

/* ======================================
   GLOBAL CARD ANIMATION (SAFE VERSION)
   Excludes Hero + Header
====================================== */

#skills .box,
#tools .box,
#projects .project-card,
#certifications .cert-card,
#internships .internship-card,,
#about .about-card {
  transition: transform 0.45s ease, box-shadow 0.35s ease;
  will-change: transform, box-shadow;
}

#skills .box:hover,
#tools .box:hover,
#about .box:hover{
  transform: translateY(-10px);
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.25);
}

#home .box {
  background: #27313f5d
}









/* =========================================
   INTERNSHIPS SECTION – FULL REPLACEMENT
========================================= */

/* ===== GRID ===== */
.internship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* ===== CARD ===== */
.internship-card {
  background: var(--card);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(0, 224, 255, 0.08);

  box-shadow: 0 0 15px rgba(0, 224, 255, 0.08);
  transition: all 0.35s ease;

  display: flex;
  flex-direction: column;
}

/* Hover Animation */
.internship-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 0 28px rgba(0, 224, 255, 0.22);
  border-color: var(--gold);
}

/* ===== CERTIFICATE IMAGE ===== */
.intern-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intern-img:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(0, 224, 255, 0.3);
}

/* ===== TEXT STYLING ===== */

.internship-card h3 {
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 4px;
}

.internship-card h4 {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 6px;
}

.internship-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.internship-card span {
  font-size: 0.88rem;
  color: #cdd9e5;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* ===== BUTTON ===== */
.internship-card a {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.internship-card a:hover {
  background: var(--gold);
  color: #000;
}

/* =========================================
   INTERNSHIP MODAL (IMAGE VIEWER)
========================================= */
#internModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;

  z-index: 10000000; /* MUST be higher than navbar */

  opacity: 0;
  transition: opacity 0.3s ease;
}

#internModal.show {
  opacity: 1;
}

#internPreview {
  max-width: 90%;
  max-height: 90%;
  border-radius: 18px;

  transform: scale(0.9);
  transition: transform 0.3s ease;
}

#internModal.show #internPreview {
  transform: scale(1);
}



@media (max-width: 768px) {

  /* =========================================
     MOBILE FIX – INTERNSHIP SECTION
  ========================================= */

  #internships {
    margin-top: -80px;
  }

  #internships .internship-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #internships .internship-card {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  #internships .intern-img {
    height: 90px !important;
    margin-bottom: 8px !important;
  }

  #internships .internship-card h3 {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
  }

  #internships .internship-card h4 {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
  }

  #internships .internship-card p {
    font-size: 0.7rem !important;
    margin-bottom: 6px !important;
  }

  #internships .internship-card span {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
  }

  #internships .internship-card a {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
  }

}




/*resume prev*/

.resume-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.resume-box {
  width: 90vw;
  height: 90vh;
}

/* ===============================
   MOBILE FIX – HERO ACTION ALIGN
================================ */
@media (max-width: 768px) {

  .hero-actions {
    align-items: center;
    gap: 16px;
  }

  /* Social Icons Row */
  .social-icons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .social-btn {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .social-btn i {
    font-size: 0.9rem;
  }

  /* Buttons Row */
  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .mini-btn {
    font-size: 0.75rem;
    padding: 7px 14px;
  }

}





/* =========================================
   HIRE ME – PROPORTIONAL CLEAN LAYOUT
========================================= */

#hire {
  padding: 70px 8%;
}

/* GRID */
.hire-grid {
  display: grid;
  grid-template-columns: 320px 1fr;   /* smaller left */
  gap: 50px;
  align-items: start;
  max-width: 1100px;   /* control overall width */
  margin: 0 auto;
}

/* LEFT CONTACT SIDE */
.hire-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hire-card {
  background: var(--card);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 224, 255, 0.08);
  transition: 0.3s ease;
}

.hire-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.25);
  border-color: var(--gold);
}

.hire-card h3 {
  font-size: 0.95rem;
  color: var(--gold);
  margin-bottom: 6px;
}

.hire-card p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.hire-card a {
  font-size: 0.8rem;
  color: var(--gold);
  text-decoration: none;
}

.hire-card a:hover {
  text-decoration: underline;
}

/* RIGHT FORM */
.hire-form {
  background: var(--card);
  padding: 28px;              /* reduced */
  border-radius: 20px;
  border: 1px solid rgba(0, 224, 255, 0.08);
  box-shadow: 0 0 18px rgba(0, 224, 255, 0.08);
  max-width: 700px;           /* limit width */
}

/* INPUTS */
.hire-form input,
.hire-form textarea {
  width: 100%;
  padding: 12px 14px;         /* smaller */
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 224, 255, 0.15);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: 0.25s ease;
}

.hire-form input:focus,
.hire-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(0, 224, 255, 0.25);
}

.hire-form textarea {
  resize: none;
  min-height: 110px;   /* reduced */
}

/* BUTTON */
.hire-form button {
  width: 100%;
  padding: 12px;
  border-radius: 25px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s ease;
}

.hire-form button:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 224, 255, 0.35);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hire-grid {
    grid-template-columns: 1fr;
  }

  .hire-form {
    max-width: 100%;
  }
}




/* ===============================
   HIRE ME NAV – TEXT BLINK STYLE
================================ */

.hire-btn {
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--gold) !important;
  animation: hireBlink 1.4s ease-in-out infinite;
  transition: 0.3s ease;
}

/* Soft active blink */
@keyframes hireBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Hover = stop blinking, full solid */
.hire-btn:hover {
  animation: none;
  opacity: 1;
}






/* ===============================
   SCROLL TO TOP BUTTON
================================ */

#scrollTopBtn {
  position: fixed;
  bottom: 60px;
  right: 30px;

  width: 45px;
  height: 45px;

  background: var(--gold);
  color: #000;

  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  text-decoration: none;

  cursor: pointer;

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);

  transition: all 0.3s ease;
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}






.resume-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.resume-box {
  width: 170%;
  height: 160%;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.resume-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.resume-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: transparent;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

/* ===============================
   Highlight Skill Card (Pandas)
================================ */

.skill-highlight {
  position: relative;
  background: linear-gradient(145deg, #0f1b2b, #0a1422);
  border-radius: 25px;
  padding: 60px 20px;
  transition: all 0.4s ease;
}

.skill-highlight i {
  font-size: 90px;
  margin-bottom: 20px;
}

.skill-highlight span {
  font-size: 18px;
  font-weight: 500;
}

/* Glow Effect */
.skill-highlight:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
      0 0 20px rgba(0, 255, 255, 0.3),
      0 0 40px rgba(0, 255, 255, 0.2),
      0 0 60px rgba(0, 255, 255, 0.1);
}

#home,
#skills,
#projects,
#internships,
#certifications,
#tools,
#about,
#hire {
  scroll-margin-top: 140px;
}