/* ================= ROOT ================= */

:root{

  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#eef2f9;

  --text:#0f172a;
  --text-soft:#5f6b7a;

  --line:#dce3ee;

  --blue:#2f54ff;

  --shadow:
  0 10px 40px rgba(15,23,42,0.08);

}

body.dark-mode{

  --bg:#0d1117;
  --surface:#111827;
  --surface-2:#151d2b;

  --text:#f8fafc;
  --text-soft:#94a3b8;

  --line:#243041;

  --blue:#5b7cff;

  --shadow:
  0 10px 40px rgba(0,0,0,0.35);

}

/* ================= GLOBAL ================= */

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Outfit',sans-serif;

  background:var(--bg);
  color:var(--text);

  overflow-x:hidden;

  transition:
  background 0.35s ease,
  color 0.35s ease;

}

/* ================= GRID ================= */

.bg-grid{

  position:fixed;
  inset:0;

  z-index:-5;

  background-image:
  linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);

  background-size:42px 42px;

  opacity:0.5;

}

body.dark-mode .bg-grid{

  background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

}

/* ================= NAVBAR ================= */

header{

  position:fixed;

  top:18px;
  left:50%;

  transform:translateX(-50%);

  width:min(96%,1450px);

  z-index:999;

  transition:
  opacity 0.35s ease,
  transform 0.35s ease,
  visibility 0.35s ease;

}

header.nav-hidden{

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(-24px);

}

@media(max-width:850px){
  header.nav-hidden{
    transform:translateY(-24px);
  }
}

.navbar{

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

  padding:20px 28px;

  border-radius:28px;

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

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:var(--shadow);

}

body.dark-mode .navbar{

  background:rgba(17,24,39,0.72);

}

.logo-wrap{

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

}

.logo{

  width:56px;
  height:56px;

  border-radius:18px;

  background:linear-gradient(135deg,#2f54ff,#6582ff);

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

  color:white;

  font-size:24px;
  font-weight:700;

}

.logo-text h2{

  font-size:20px;
  letter-spacing:1px;

}

.logo-text p{

  font-size:11px;
  letter-spacing:4px;

  color:var(--text-soft);

  margin-top:2px;

}

.nav-links{

  display:flex;
  gap:42px;

}

.nav-links a{

  text-decoration:none;

  color:var(--text-soft);

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

  transition:0.25s;

}

.nav-links a:hover{

  color:var(--blue);

}

.nav-right{

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

}

/* ================= TOGGLE ================= */

.theme-toggle{

  width:78px;
  height:40px;

  border:none;
  outline:none;

  border-radius:999px;

  background:var(--surface-2);

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

  padding:0 9px;

  cursor:pointer;

  position:relative;

}

.theme-toggle span{

  z-index:2;
  font-size:14px;

}

.theme-toggle span:first-child{

  margin-left:4px;

}

.toggle-ball{

  position:absolute;

  width:32px;
  height:32px;

  border-radius:50%;

  background:white;

  left:4px;

  transition:0.35s ease;

  box-shadow:
  0 5px 20px rgba(0,0,0,0.15);

}

body.dark-mode .toggle-ball{

  left:42px;

  background:#1f2937;

}

/* ================= CV BUTTON ================= */

.cv-btn{

  height:60px;

  padding:0 25px;

  border:none;

  border-radius:24px;

  background:
  linear-gradient(
    135deg,
    #3b5cff,
    #5f78ff
  );

  color:white;

  font-size:20px;
  font-weight:700;

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

  gap:14px;

  cursor:pointer;

  box-shadow:
  0 12px 30px rgba(47,84,255,0.22);

  transition:0.3s ease;

}

.cv-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 16px 36px rgba(47,84,255,0.3);

}

/* ================= ARROW ================= */

.cv-arrow{

  font-size:14px;

  font-weight:700;

  transition:0.3s ease;

  transform:
  translateY(-1px);

}

.cv-arrow-icon{

  width:12px;
  height:12px;

  object-fit:contain;

  transform:rotate(180deg);

  filter:
  brightness(0)
  invert(1);

  transition:0.3s ease;

}

/* ================= ACTIVE ================= */

.cv-dropdown.active .cv-arrow{

  transform:
  rotate(0deg)

}

.cv-btn:hover{

  transform:translateY(-2px);

}

/* ================= CV DROPDOWN ================= */

.cv-dropdown{

  position:relative;

}





/* ================= MENU ================= */

.cv-menu{

  position:absolute;

  top:72px;
  right:0;

  width:200px;

  padding:14px;

  border-radius:22px;

  background:#ffffff;

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.45);

  box-shadow:
  0 12px 40px rgba(15,23,42,0.12);

  display:flex;
  flex-direction:column;

  gap:10px;

  opacity:0;
  visibility:hidden;

  transform:
  translateY(10px);

  transition:0.3s ease;

  z-index:1000;

}

body.dark-mode .cv-menu{

  background:#111827;

}

.cv-dropdown.active .cv-menu{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0);

}

.cv-dropdown.active .cv-arrow{

  transform:
  rotate(180deg)
  translateY(1px);

}

/* ================= OPTIONS ================= */

.cv-option{

  display:flex;
  align-items:center;

  gap:14px;

  text-decoration:none;

  color:var(--text);

  padding:
  16px 18px;

  border-radius:16px;

  transition:0.25s ease;

}

.cv-option:hover{

  background:
  rgba(47,84,255,0.08);

  color:var(--blue);

}

.download-icon{

  width:36px;
  height:36px;

  border-radius:50%;

  background:
  rgba(47,84,255,0.12);

  color:var(--blue);

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

  font-size:15px;

}

/* ================= HERO ================= */

.hero{

  position:relative;

  min-height:100vh;

  padding:
  180px 6%
  120px;

  overflow:hidden;

  display:flex;
  align-items:flex-start;

}

/* ================= SPLINE BACKGROUND ================= */

.hero-bg{

  position:absolute;

  inset:0;

  z-index:1;

  opacity:0.95;

  pointer-events:none;

}

.spline-bg{

  width:100%;
  height:100%;

  transform:scale(1.08);

  filter:
  saturate(1.05)
  contrast(1.02);

}

/* ================= HERO OVERLAY ================= */

.hero::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:2;

  background:
  linear-gradient(
    90deg,
    rgba(245,247,251,0.96) 0%,
    rgba(245,247,251,0.92) 28%,
    rgba(245,247,251,0.7) 50%,
    rgba(245,247,251,0.15) 75%,
    rgba(245,247,251,0.02) 100%
  );

}

body.dark-mode .hero::before{

  background:
  linear-gradient(
    90deg,
    rgba(13,17,23,0.96) 0%,
    rgba(13,17,23,0.92) 28%,
    rgba(13,17,23,0.7) 50%,
    rgba(13,17,23,0.15) 75%,
    rgba(13,17,23,0.02) 100%
  );

}

/* ================= HERO CONTENT ================= */

.hero-content{

  position:relative;

  z-index:5;

  width:100%;
  max-width:1450px;

  margin:0 auto;

}

/* ================= PROFILE IMAGE ================= */

.profile-image-wrap{

  width:160px;
  height:160px;

  border-radius:28px;

  overflow:hidden;

  margin-bottom:34px;

  position:relative;

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

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.4);

  box-shadow:
  0 10px 40px rgba(15,23,42,0.12);

}

body.dark-mode .profile-image-wrap{

  background:rgba(17,24,39,0.5);

}

.profile-image{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

}

.profile-image-wrap::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:28px;

  box-shadow:
  inset 0 0 40px rgba(255,255,255,0.15);

  pointer-events:none;

}

/* ================= HERO TEXT ================= */

.hero-title{

  font-size:clamp(70px,8vw,82px);

  line-height:0.92;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:22px;

  white-space:nowrap;

}

.hero-title span{

  color:var(--blue);

}

.hero-sub{

  font-size:24px;

  letter-spacing:8px;

  color:var(--text-soft);

  margin-bottom:42px;

}

.hero-text{

  font-size:26px;

  line-height:1.8;

  color:var(--text-soft);

  max-width:780px;

  margin-bottom:48px;

}

/* ================= BUTTONS ================= */

.hero-actions{

  display:flex;
  gap:18px;

  flex-wrap:wrap;

  margin-bottom:44px;

}

.primary-btn,
.secondary-btn{

  padding:18px 34px;

  border-radius:18px;

  text-decoration:none;

  font-weight:600;

  transition:0.25s;

}

.primary-btn{

  background:var(--blue);

  color:white;

}

.primary-btn:hover{

  transform:translateY(-3px);

}

.secondary-btn{

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

  border:1px solid var(--line);

  color:var(--text);

  backdrop-filter:blur(10px);

}

body.dark-mode .secondary-btn{

  background:rgba(17,24,39,0.6);

}

/* ================= SOCIALS ================= */

.socials{

  display:flex;
  gap:18px;

}

.socials a{

  width:62px;
  height:62px;

  border-radius:50%;

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

  text-decoration:none;

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

  border:1px solid var(--line);

  backdrop-filter:blur(10px);

  color:var(--text);

  font-size:26px;

  transition:0.25s;

}

body.dark-mode .socials a{

  background:rgba(17,24,39,0.7);

}

.socials a:hover{

  transform:translateY(-4px);

  color:var(--blue);

}

/* ================= METRICS ================= */

.metrics-strip{

  position:relative;

  z-index:5;

  margin-top:70px;

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

  gap:18px;

  width:100%;

  flex-wrap:nowrap;

}

.metric-item{

  flex:1;

  min-width:0;

}

.metric-item h2{

  font-size:52px;

  font-weight:500;

  line-height:1;

  color:var(--blue);

  margin-bottom:10px;

  letter-spacing:-2px;

}

.metric-item h2 span{

  font-size:24px;

}

.metric-item p{

  font-size:10px;

  line-height:1.7;

  letter-spacing:2px;

  color:var(--text-soft);

  text-transform:uppercase;

}

.metric-divider{

  font-size:28px;

  color:rgba(47,84,255,0.18);

  font-weight:200;

  margin-top:6px;

}

/* ================= EXPERIENCE ================= */

.experience-section{

  background:var(--bg);

  position:relative;

  z-index:10;

  margin-top:-15px;

  padding:
  40px 6%
  120px;

}

.experience-container{

  width:100%;

  max-width:1450px;

  margin:0 auto;

}

.experience-heading{

  margin-bottom:90px;

}

.section-label{

  font-size:13px;

  letter-spacing:4px;

  color:var(--blue);

  margin-bottom:24px;

  font-weight:600;

}

.experience-heading h2{

  font-size:clamp(42px,5vw,84px);

  line-height:1.08;

  font-weight:300;

  letter-spacing:-2px;

  max-width:1200px;

}

.experience-heading h2 span{

  color:var(--blue);

  font-style:italic;

}

.experience-list{

  display:flex;
  flex-direction:column;

  gap:80px;

}

.experience-item{

  display:grid;

  grid-template-columns:260px 1fr;

  gap:60px;

  padding-bottom:70px;

  border-bottom:1px solid rgba(47,84,255,0.08);

}

.experience-meta{

  padding-top:10px;

}

.experience-meta p{

  font-size:14px;

  letter-spacing:3px;

  color:var(--text-soft);

  margin-bottom:10px;

}

.experience-meta span{

  font-size:18px;

  color:var(--text-soft);

}

.experience-content h3{

  font-size:48px;

  font-weight:500;

  margin-bottom:12px;

  line-height:1.1;

}

.experience-content h4{

  font-size:15px;

  letter-spacing:4px;

  color:var(--blue);

  margin-bottom:40px;

}

.experience-content ul{

  list-style:none;

  display:flex;
  flex-direction:column;

  gap:26px;

}

.experience-content li{

  position:relative;

  padding-left:28px;

  font-size:21px;

  line-height:1.8;

  color:var(--text-soft);

}

.experience-content li::before{

  content:"";

  position:absolute;

  left:0;
  top:17px;

  width:12px;
  height:2px;

  background:var(--blue);

}


/* ================= EDUCATION SECTION ================= */

.education-section{
  position:relative;
  padding:40px 6% 120px;
  background:var(--bg);
}

.education-container{
  width:100%;
  max-width:1450px;
  margin:0 auto;
}

.education-heading{
  margin-bottom:80px;
}

.education-heading h2{
  font-size:clamp(42px,5vw,84px);
  line-height:1.08;
  font-weight:300;
  letter-spacing:-2px;
}

.education-heading h2 span{
  color:var(--blue);
  font-style:italic;
}

.education-list{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.education-item{
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(47,84,255,0.08);
}

.education-left h3{
  font-size:54px;
  line-height:1.1;
  margin-bottom:12px;
}

.education-left h4{
  font-size:28px;
  font-weight:500;
  margin-bottom:14px;
}

.education-left p{
  font-size:22px;
  color:var(--blue);
  font-weight:600;
}

.education-duration{
  font-size:54px;
  font-weight:700;
  white-space:nowrap;
}

@media(max-width:850px){

  .education-item{
    flex-direction:column;
    gap:18px;
  }

  .education-left h3{
    font-size:34px;
  }

  .education-left h4{
    font-size:22px;
  }

  .education-left p{
    font-size:18px;
  }

  .education-duration{
    font-size:34px;
  }

}

/* ================= SKILLS SECTION ================= */

.skills-section{

  position:relative;

  padding:
  40px 6%
  140px;

  background:var(--bg);

}

.skills-container{

  width:100%;

  max-width:1450px;

  margin:0 auto;

}

/* ================= HEADING ================= */

.skills-heading{

  margin-bottom:90px;

}

.skills-heading h2{

  font-size:clamp(42px,5vw,84px);

  line-height:1.08;

  font-weight:300;

  letter-spacing:-2px;

  max-width:1200px;

}

.skills-heading h2 span{

  color:var(--blue);

  font-style:italic;

}

/* ================= GRID ================= */

.skills-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;

}

/* ================= CARDS ================= */

.skill-card{

  position:relative;

  padding:34px;

  border:1px solid rgba(47,84,255,0.12);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.18)
  );

  backdrop-filter:blur(12px);

  overflow:hidden;

  transition:0.3s ease;

}

body.dark-mode .skill-card{

  background:
  linear-gradient(
    180deg,
    rgba(17,24,39,0.7),
    rgba(17,24,39,0.45)
  );

}

.skill-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:1px;
  height:28px;

  background:var(--blue);

}

.skill-card::after{

  content:"";

  position:absolute;

  bottom:0;
  right:0;

  width:28px;
  height:1px;

  background:var(--blue);

}

.skill-card:hover{

  transform:translateY(-6px);

  border-color:rgba(47,84,255,0.22);

}

/* ================= CARD CONTENT ================= */

.skill-card h3{

  font-size:13px;

  letter-spacing:4px;

  font-weight:600;

  color:var(--blue);

  margin-bottom:34px;

}

.skill-card ul{

  list-style:none;

  display:flex;
  flex-direction:column;

  gap:14px;

}

.skill-card li{

  position:relative;

  padding-left:14px;

  font-size:18px;

  line-height:1.35;

  color:var(--text);

}

.skill-card li::before{

  content:"→";

  position:absolute;

  left:0;

  color:var(--text-soft);

  font-size:10px;

  top:6px;

}


/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

  .skills-grid{

    grid-template-columns:1fr 1fr;

  }

}

@media(max-width:800px){

  .skills-grid{

    grid-template-columns:1fr;

  }

  .skill-card{

    padding:34px;

  }

  .skill-card li{

    font-size:18px;

  }

  .skills-heading h2{

    font-size:48px;

  }

}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

  .hero-title{
    white-space:normal;
  }

  .metrics-strip{
    flex-wrap:wrap;
  }

  .metric-divider{
    display:none;
  }

}

@media(max-width:1000px){

  .experience-item{

    grid-template-columns:1fr;

    gap:30px;

  }

}

@media(max-width:900px){

  .nav-links{
    display:none;
  }

}



/* ================= PROJECTS SECTION ================= */

.projects-section{

  position:relative;

  padding:
  40px 6%
  140px;

  background:var(--bg);

}

.projects-container{

  width:100%;

  max-width:1450px;

  margin:0 auto;

}

/* ================= HEADING ================= */

.projects-heading{

  margin-bottom:90px;

}

.projects-heading h2{

  font-size:clamp(42px,5vw,84px);

  line-height:1.08;

  font-weight:300;

  letter-spacing:-2px;

  max-width:1100px;

}

.projects-heading h2 span{

  color:var(--blue);

  font-style:italic;

}

/* ================= CAROUSEL ================= */

.projects-carousel-wrap{

  position:relative;

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

  gap:24px;

}

.projects-carousel{

  display:flex;

  gap:28px;

  overflow-x:auto;

  scroll-behavior:smooth;

  scrollbar-width:none;

  width:100%;

  padding:10px;

}

.projects-carousel::-webkit-scrollbar{

  display:none;

}

/* ================= BUTTONS ================= */

.carousel-btn{

  width:60px;
  height:60px;

  border-radius:50%;

  border:1px solid rgba(47,84,255,0.12);

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

  backdrop-filter:blur(12px);

  color:var(--blue);

  font-size:24px;

  cursor:pointer;

  transition:0.25s ease;

  flex-shrink:0;

}

body.dark-mode .carousel-btn{

  background:
  rgba(17,24,39,0.75);

}

.carousel-btn:hover{

  transform:translateY(-4px);

  border-color:rgba(47,84,255,0.28);

}

/* ================= PROJECT CARD ================= */

.project-card{

  position:relative;

  min-width:700px;
  max-width:700px;

  flex-shrink:0;

  padding:42px;

  border:1px solid rgba(47,84,255,0.12);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.16)
  );

  backdrop-filter:blur(12px);

  overflow:hidden;

  transition:0.35s ease;

}

body.dark-mode .project-card{

  background:
  linear-gradient(
    180deg,
    rgba(17,24,39,0.7),
    rgba(17,24,39,0.45)
  );

}

.project-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:1px;
  height:28px;

  background:var(--blue);

}

.project-card::after{

  content:"";

  position:absolute;

  bottom:0;
  right:0;

  width:28px;
  height:1px;

  background:var(--blue);

}

.project-card:hover{

  transform:translateY(-8px);

  border-color:rgba(47,84,255,0.25);

}

/* ================= TOP ================= */

.project-top{

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

  margin-bottom:40px;

}

.project-tag{

  font-size:12px;

  letter-spacing:3px;

  color:var(--blue);

  text-transform:uppercase;

}

.project-number{

  font-size:14px;

  color:var(--text-soft);

}

/* ================= CONTENT ================= */

.project-card h3{

  font-size:34px;

  line-height:1.2;

  margin-bottom:22px;

  font-weight:500;

}

.project-card p{

  font-size:18px;

  line-height:1.8;

  color:var(--text-soft);

  margin-bottom:30px;

}

/* ================= TECH LIST ================= */

.project-card ul{

  list-style:none;

  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-bottom:38px;

}

.project-card li{

  padding:
  10px 14px;

  border-radius:999px;

  background:rgba(47,84,255,0.08);

  color:var(--blue);

  font-size:14px;

}

body.dark-mode .project-card li{

  background:rgba(91,124,255,0.14);

}

/* ================= LINK ================= */

.project-link{

  text-decoration:none;

  color:var(--text);

  font-weight:500;

  transition:0.25s;

}

.project-link:hover{

  color:var(--blue);

}

/* ================= RESPONSIVE ================= */

@media(max-width:700px){

  .projects-heading h2{

    font-size:48px;

  }

  .project-card{

    padding:34px;

  }

  .project-card h3{

    font-size:28px;

  }

  .project-card p{

    font-size:16px;

  }

}

/* ================= CERTIFICATIONS ================= */

.certifications-section,
.languages-section{

  position:relative;

  padding:
  40px 6%
  120px;

  background:var(--bg);

}

.certifications-container,
.languages-container{

  width:100%;

  max-width:1450px;

  margin:0 auto;

}

/* ================= HEADING ================= */

.certifications-heading,
.languages-heading{

  margin-bottom:80px;

}

.certifications-heading h2,
.languages-heading h2{

  font-size:clamp(42px,5vw,84px);

  line-height:1.08;

  font-weight:300;

  letter-spacing:-2px;

  max-width:1000px;

}

.certifications-heading h2 span,
.languages-heading h2 span{

  color:var(--blue);

  font-style:italic;

}

/* ================= GRID ================= */

.certifications-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:24px;

}

.languages-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:24px;

}

/* ================= CARDS ================= */

.certificate-card,
.language-card{

  padding:34px;

  border:1px solid rgba(47,84,255,0.12);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.16)
  );

  backdrop-filter:blur(12px);

  transition:0.3s ease;

}

body.dark-mode .certificate-card,
body.dark-mode .language-card{

  background:
  linear-gradient(
    180deg,
    rgba(17,24,39,0.7),
    rgba(17,24,39,0.45)
  );

}

.certificate-card:hover,
.language-card:hover{

  transform:translateY(-6px);

}

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

.certificate-card h3,
.language-card h3{

  font-size:28px;

  line-height:1.3;

  margin-bottom:16px;

  font-weight:500;

}

.cert-company,
.language-card p{

  font-size:18px;

  color:var(--text-soft);

  margin-bottom:24px;

}

.certificate-card a,
.language-card a{

  text-decoration:none;

  color:var(--blue);

  font-weight:500;

}

.cert-on-request {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  margin-top: 4px;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

  .certifications-grid{

    grid-template-columns:1fr;

  }

  .languages-grid{

    grid-template-columns:1fr 1fr;

  }

}

@media(max-width:700px){

  .languages-grid{

    grid-template-columns:1fr;

  }

}

/* ================= CONTACT SECTION ================= */

.contact-section{

  position:relative;

  padding:
  40px 6%
  120px;

  background:var(--bg);

}

.contact-container{

  width:100%;

  max-width:1450px;

  margin:0 auto;

}

/* ================= HEADING ================= */

.contact-heading{

  margin-bottom:90px;

}

.contact-heading h2{

  font-size:clamp(42px,5vw,84px);

  line-height:1.08;

  font-weight:300;

  letter-spacing:-2px;

  margin-bottom:24px;

}

.contact-heading h2 span{

  color:var(--blue);

  font-style:italic;

}

.contact-subtext{

  font-size:22px;

  line-height:1.8;

  color:var(--text-soft);

  max-width:700px;

}

/* ================= GRID ================= */

.contact-grid{

  display:grid;

  grid-template-columns:420px 1fr;

  gap:42px;

}

/* ================= CARD ================= */

.contact-card{

  padding:42px;

  border:1px solid rgba(47,84,255,0.12);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.16)
  );

  backdrop-filter:blur(12px);

}

body.dark-mode .contact-card{

  background:
  linear-gradient(
    180deg,
    rgba(17,24,39,0.7),
    rgba(17,24,39,0.45)
  );

}

.contact-card h3{

  font-size:34px;

  margin-bottom:18px;

}

.contact-card p{

  font-size:18px;

  line-height:1.8;

  color:var(--text-soft);

  margin-bottom:34px;

}

/* ================= LINKEDIN ================= */

.linkedin-btn{

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

  gap:16px;

  text-decoration:none;

  color:var(--text);

  font-weight:500;

  transition:0.25s;

}

.linkedin-btn span{

  width:52px;
  height:52px;

  border-radius:50%;

  background:var(--blue);

  color:white;

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

  font-size:22px;
  font-weight:700;

}

.linkedin-btn:hover{

  transform:translateY(-3px);

}

/* ================= FORM ================= */

.contact-form{

  display:flex;
  flex-direction:column;

  gap:22px;

}

.form-group input,
.form-group textarea{

  width:100%;

  padding:22px 24px;

  border:none;

  outline:none;

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

  border:1px solid rgba(47,84,255,0.1);

  color:var(--text);

  font-family:'Outfit',sans-serif;

  font-size:18px;

  backdrop-filter:blur(10px);

}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea{

  background:rgba(17,24,39,0.6);

}

.form-group textarea{

  min-height:220px;

  resize:none;

}

.submit-btn{

  width:fit-content;

  padding:
  18px 34px;

  border:none;

  background:var(--blue);

  color:white;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:0.25s;

}

.submit-btn:hover{

  transform:translateY(-3px);

}

/* ================= BACK TO TOP ================= */

.back-to-top{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
  translateY(20px);

  z-index:999;

  position:fixed;

  right:34px;
  bottom:34px;

  width:68px;
  height:68px;

  border-radius:50%;

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

  text-decoration:none;

  background:
  linear-gradient(
    135deg,
    rgba(47,84,255,0.16),
    rgba(47,84,255,0.05)
  );

  border:1px solid rgba(47,84,255,0.16);

  backdrop-filter:blur(14px);

  color:var(--blue);

  transition:0.3s ease;

  box-shadow:
  0 10px 30px rgba(47,84,255,0.12);

}

body.dark-mode .back-to-top{

  background:
  linear-gradient(
    135deg,
    rgba(47,84,255,0.18),
    rgba(47,84,255,0.08)
  );

}

.back-to-top svg{

  width:28px;
  height:28px;

}

.back-to-top:hover{

  transform:
  translateY(-5px)
  scale(1.04);

  box-shadow:
  0 14px 34px rgba(47,84,255,0.2);

}

/* ================= ACTIVE ================= */

.back-to-top.show{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
  translateY(0);

}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

  .contact-grid{

    grid-template-columns:1fr;

  }

}

@media(max-width:700px){

  .contact-heading h2{

    font-size:48px;

  }

}


/* =========================================================
   FINAL MOBILE FIXES
========================================================= */

.mobile-menu-btn{

  display:none;

  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  width:48px;
  height:48px;

  border-radius:50%;

  background:rgba(47,84,255,0.08);

  cursor:pointer;

  flex-shrink:0;

}

.mobile-menu-btn span{

  display:block;

  width:20px;
  height:2.5px;

  background:var(--text);

  border-radius:2px;

  transition:0.3s ease;

}

.mobile-menu{
  display:none;
}

.mobile-hero-cv{
  display:none;
}

@media screen and (max-width:850px){

  .nav-links,
  .nav-right{
    display:none;
  }

  .mobile-menu-btn{
    display:flex;
  }

  .mobile-menu{
    display:flex;
  }

  .mobile-hero-cv{
    display:block;
    width:100%;
  }

  header{
    width:100%;
    left:0;
    transform:none;
    padding:0 14px;
  }

  .navbar{
    width:100%;
    padding:16px 18px;
    border-radius:24px;
  }

  .logo-wrap{
    max-width:75%;
  }

  .logo{
    width:58px;
    height:58px;
    font-size:22px;
  }

  .logo-text h2{
    font-size:16px;
    line-height:1.1;
  }

  .logo-text p{
    font-size:9px;
    letter-spacing:2px;
  }

  .hero{
    padding:150px 24px 90px;
    min-height:auto;
  }

  .hero-bg{
    display:none;
  }

  .hero::before{
    background:
    linear-gradient(
      180deg,
      rgba(245,247,251,0.98) 0%,
      rgba(245,247,251,0.96) 100%
    );
  }

  body.dark-mode .hero::before{
    background:
    linear-gradient(
      180deg,
      rgba(13,17,23,0.98) 0%,
      rgba(13,17,23,0.96) 100%
    );
  }

  .profile-image-wrap{
    width:140px;
    height:140px;
    margin-bottom:28px;
  }

  .hero-title{
    font-size:58px;
    line-height:0.95;
    white-space:normal;
  }

  .hero-sub{
    font-size:16px;
    letter-spacing:5px;
    margin-bottom:30px;
  }

  .hero-text{
    font-size:18px;
    line-height:1.8;
    max-width:100%;
  }

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

  .primary-btn,
  .secondary-btn,
  .mobile-hero-cv-btn{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .mobile-hero-cv-btn{
    border:none;
    border-radius:18px;
    background:var(--blue);
    color:white;
    font-size:16px;
    font-weight:550;
    cursor:pointer;
  }

  .mobile-hero-cv-menu{
    display:none;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }

  .mobile-hero-cv-menu.active{
    display:flex;
  }

  .mobile-hero-cv-menu a{
    text-decoration:none;
    background:rgba(47,84,255,0.08);
    color:var(--blue);
    padding:14px 18px;
    border-radius:14px;
    font-weight:600;
    text-align:center;
  }

  .metrics-strip{
    flex-direction:column;
    gap:30px;
    margin-top:50px;
  }

  .metric-divider{
    display:none;
  }

  .metric-item h2{
    font-size:42px;
  }

  .metric-item p{
    font-size:11px;
  }

  .projects-carousel{
    padding:0;
    gap:16px;
  }

  .project-card{
    min-width:88%;
    max-width:88%;
    padding:28px 22px;
  }

  .project-card h3{
    font-size:24px;
  }

  .project-card p{
    font-size:16px;
  }

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

  .contact-card{
    padding:30px 24px;
  }

  .mobile-menu{
    position:absolute;
    top:92px;
    left:14px;
    width:calc(100% - 28px);

    background:var(--surface);

    border-radius:28px;

    padding:30px 24px;

    flex-direction:column;

    gap:22px;

    box-shadow:var(--shadow);

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    transition:0.3s ease;

    z-index:999;
  }

  .mobile-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .mobile-menu a{
    text-decoration:none;
    color:var(--text);
    font-size:18px;
    font-weight:600;
  }

    .github-social-icon{

    width:22px;
    height:22px;

  }

  .mobile-theme-toggle{
    border:none;
    border-radius:18px;
    background:var(--blue);
    color:white;
    padding:18px;
    display:flex;
    justify-content:space-between;
    font-size:18px;
    font-weight:600;
  }

}

/* LANDSCAPE */

@media screen and (max-height:600px) and (orientation:landscape){

  .hero{
    padding-top:120px;
  }

  .hero-title{
    font-size:46px;
  }

  .hero-text{
    font-size:16px;
    line-height:1.6;
  }

  .mobile-menu{
    max-height:70vh;
    overflow-y:auto;
  }

}

.github-social-icon{

  width:28px;
  height:28px;

  object-fit:contain;

  transition:0.25s ease;

  filter:
  brightness(0)
  saturate(100%)
  invert(12%)
  sepia(15%)
  saturate(1299%)
  hue-rotate(182deg)
  brightness(96%)
  contrast(92%);

}

body.dark-mode .github-social-icon{

  filter:
  brightness(0)
  saturate(100%)
  invert(95%)
  sepia(7%)
  saturate(254%)
  hue-rotate(180deg)
  brightness(104%)
  contrast(98%);

}

.socials a:hover .github-social-icon{

  filter:
  brightness(0)
  saturate(100%)
  invert(33%)
  sepia(100%)
  saturate(2472%)
  hue-rotate(225deg)
  brightness(100%)
  contrast(102%);

}

/* MOBILE CV ARROW ICON */

.mobile-cv-arrow-icon{

  margin-left:10px;
  width:12px;
  height:12px;

  object-fit:contain;

  transform:rotate(180deg);

  filter:
  brightness(0)
  invert(1);

  transition:0.3s ease;

}
/* =========================================================
   SCROLL NAV BUTTON
========================================================= */

.scroll-nav-btn{
  position:fixed;
  top:22px;
  right:34px;
  width:68px;
  height:68px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  z-index:998;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-20px);
  transition:0.35s ease;
}

body.dark-mode .scroll-nav-btn{
  background:rgba(17,24,39,0.82);
  border-color:rgba(255,255,255,0.08);
}

.scroll-nav-btn.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.scroll-nav-btn span{
  display:block;
  width:22px;
  height:2.5px;
  background:var(--text);
  border-radius:2px;
  transition:0.3s ease;
}

@media(max-width:850px){
  .scroll-nav-btn,
  .scroll-nav-panel{
    display:none !important;
  }
}

/* =========================================================
   SCROLL NAV PANEL
========================================================= */

.scroll-nav-panel{
  position:fixed;
  top:106px;
  right:34px;
  width:320px;
  background:var(--surface);
  border-radius:28px;
  border:1px solid var(--line);
  padding:30px 24px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:20px;
  z-index:1001;
  opacity:0;
  visibility:hidden;
  transform:translateY(-16px) scale(0.97);
  transform-origin:top right;
  transition:0.3s ease;
}

.scroll-nav-panel.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.scroll-nav-logo{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.scroll-nav-links{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.scroll-nav-links a{
  text-decoration:none;
  color:var(--text);
  font-size:18px;
  font-weight:600;
  padding:10px 10px;
  border-radius:12px;
  transition:0.2s ease;
}

.scroll-nav-links a:hover{
  background:rgba(47,84,255,0.07);
  color:var(--blue);
  padding-left:16px;
}

.scroll-nav-cv-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =========================================================
   SCROLL NAV PANEL — BOTTOM ROW (CV + THEME TOGGLE)
========================================================= */

.scroll-nav-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:8px;
  border-top:1px solid var(--line);
}

/* CV button fits the panel width */
.scroll-cv-dropdown{
  flex:1;
}

.scroll-cv-btn{
  width:100%;
  height:50px;
  font-size:16px;
  font-weight:600;
  padding:0 18px;
  border-radius:18px;
  gap:10px;
}

/* Drop UP instead of down — panel is near top of viewport */
.scroll-cv-menu{
  top:auto !important;
  bottom:58px;
  right:0;
  left:0;
  width:110%;
}

.scroll-cv-dropdown.active .scroll-cv-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Keep the toggle-ball behaviour inside the panel */
.scroll-nav-bottom .theme-toggle{
  flex-shrink:0;
}

/* =========================================================
   MOBILE MENU — BOTTOM ROW (CV + THEME TOGGLE)
========================================================= */

.mobile-menu-bottom{

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

  gap:14px;

  padding-top:6px;

  border-top:1px solid var(--line);

}

.mobile-menu-cv-dropdown{
  flex:1;
}

.mobile-menu-cv-btn{

  width:100%;

  height:50px;

  font-size:16px;
  font-weight:600;

  padding:0 18px;

  border-radius:18px;

  gap:10px;

}

/* Drop upward so it doesn't clip below the panel */

.mobile-menu-cv-menu{

  top:auto !important;

  bottom:58px;

  right:0;
  left:0;

  width:100%;

}

.mobile-menu-cv-dropdown.active .mobile-menu-cv-menu{

  opacity:1;
  visibility:visible;
  transform:translateY(0);

}

/* ================= FOOTER ================= */

.footer {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  background: var(--surface);
}