@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  text-transform: capitalize;
  transition: all 0.2s linear;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  background: #f7f7f7;
  font-family: "Poppins", sans-serif;
}
*::selection {
  background: #0318a9;
  color: #fff;
}
html::-webkit-scrollbar { width: 0.8rem; }
html::-webkit-scrollbar-track { background: rgb(235, 202, 245); }
html::-webkit-scrollbar-thumb { background: #420177; }

/* pre loader */
.loader-container {
  position: fixed; top: 0; left: 0; z-index: 10000;
  background: #e6eff1;
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  transition: top 1s ease;
}
.loader-container.fade-out { top: -120%; }

/* navbar */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.7rem 10%; height: 6.5rem;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.3);
}
section { min-height: 100vh; padding: 2rem 9%; }
.heading { font-size: 3.5rem; color: rgb(32,32,32); font-weight: 800; text-align: center; }
.heading span { color: #0318a9; }

header .logo { font-size: 1.9rem; font-weight: 800; text-decoration: none; color: #0e2431; }
header .logo i { font-size: 2.2rem; color: #0318a9; }
header .logo:hover { color: #0318a9; }
header .navbar { display: flex; align-items: center; }
header .navbar ul { list-style: none; display: flex; justify-content: center; align-items: center; }
header .navbar li { margin-left: 2.5rem; }
header .navbar ul li a {
  font-size: 1.57rem; color: #0e2431; font-weight: 600;
  letter-spacing: 0.04rem; transition: color 0.2s;
  position: relative; padding: 0.5rem 0;
  text-decoration: none !important;
}
header .navbar ul li a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 3px;
  background: #0318a9; border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
header .navbar ul li a.active,
header .navbar ul li a:hover { color: #0318a9; text-decoration: none !important; }
header .navbar ul li a.active::after,
header .navbar ul li a:hover::after { width: 100%; }

/* hamburger */
#menu { font-size: 3rem; cursor: pointer; color: rgb(24,2,63); display: none; }
@media (max-width: 768px) {
  #menu { display: block; }
  header .navbar {
    position: fixed; top: 6.5rem; right: -120%; width: 75%; height: 100%;
    text-align: left; align-items: flex-start; background-color: #0e0f31;
  }
  header .navbar ul { flex-flow: column; padding: 1rem; }
  header .navbar ul li { text-align: center; width: 100%; margin: 1rem 0; border-radius: 0.5rem; width: 26rem; }
  header .navbar ul li a { display: block; padding: 1rem; text-align: left; color: #fff; font-size: 2rem; }
  header .navbar ul li a.active,
  header .navbar ul li a:hover { padding: 1rem; color: #fff; border-radius: 0.5rem; background: rgba(3,24,169,0.2); }
  header .navbar ul li a::after { display: none; }
  .fa-times { transform: rotate(180deg); }
  header .navbar.nav-toggle { right: 0; }
}

/* ═══════════════════════════════
   HOME / HERO
═══════════════════════════════ */
.home {
  position: relative; display: flex; flex-wrap: nowrap;
  gap: 2rem; min-height: 100vh; align-items: center;
  padding-top: 6.5rem;
}
.home #particles-js {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.home::before {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.home .content { flex: 1 1 45rem; padding-top: 0; z-index: 1; }
.home .image { flex: 0 0 40rem; z-index: 1; display: flex; justify-content: center; align-items: center; }
.home .image img {
  width: 60%; max-width: 28rem; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); cursor: pointer;
}
.home .image img:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.home .content h2 { font-size: 5rem; font-weight: 800; color: #002057; }
.home .content h2 span { font-size: 5rem; font-weight: 800; color: #0318a9; }
.home .content p { font-size: 2.5rem; color: #000; font-weight: 600; padding: 1rem 0; }
.home .content p span { font-size: 2.5rem; color: #0318a9; font-weight: 600; }
.home .btn {
  margin-top: 1rem; position: absolute; line-height: 0;
  padding: 1.6rem 3rem; border-radius: 4em; transition: 0.5s;
  color: #fff; background: #0318a9; box-shadow: 0px 5px 18px rgba(37,99,235,0.5);
  font-family: "Nunito", sans-serif;
}
.home .btn span { font-weight: 700; font-size: 1.7rem; letter-spacing: 0.1rem; }
.home .btn i { margin-left: 0.3rem; font-size: 1.5rem; transition: 0.3s; }
.home .btn:hover { background: #0318a9; }
.home .btn:hover i { transform: translateX(5px); }

/* social icons */
.socials { position: relative; margin-top: 9rem; }
.socials .social-icons { padding-left: 0; margin-bottom: 0; list-style: none; }
.socials .social-icons li { display: inline-block; margin-bottom: 14px; }
.social-icons a {
  font-size: 2rem; display: inline-block; line-height: 44px;
  color: #fff; background-color: #0318a9;
  width: 44px; height: 44px; text-align: center;
  margin-right: 8px; border-radius: 100%; transition: all 0.2s linear;
}
.social-icons a:hover { color: #fff; background-color: #0685da; }
.social-icons a.github:hover { background-color: #0e0e0e; }
.social-icons a.linkedin:hover { background-color: #007bb6; }
.social-icons a.email:hover { background-color: #0318a9; }

@media (max-width: 768px) {
  .home .btn {
    position: relative;
    display: inline-block;
    margin: 2rem 0 0 0;
  }
  .socials { margin-top: 2rem; }
  .home .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 450px) {
  .home .btn { margin: 1.5rem 0 0 0; }
  .socials { margin-top: 1.5rem; }
  .home .image img { margin-top: 0; }
  .home .content p, .home .content p span { font-size: 2.2rem; }
}

/* ═══════════════════════════════
   ABOUT
═══════════════════════════════ */
.about { background: rgb(255,255,255); }
.about .row { display: flex; flex-direction: row; gap: 2rem; flex-wrap: wrap; padding: 4rem; }
.about .row .image { text-align: center; flex: 1 1 35rem; }
.about .row .image img {
  margin: 4rem; width: 30rem; height: auto; border-radius: 5%;
  box-shadow: 0 5px 10px rgba(0,0,0,0.6); mix-blend-mode: luminosity;
  transition: 0.3s; cursor: pointer;
}
.about .row .image img:hover { mix-blend-mode: normal; }
.about .row .content { flex: 1 1 45rem; padding: 3rem; }
.about .row .content h3 { color: rgb(27,27,27); font-size: 2.5rem; }
.about .row .content .tag { font-size: 1.4rem; color: #020133; font-weight: 600; margin-top: 1rem; }
.about .row .content p { font-size: 1.5rem; margin-top: 1.5rem; font-family: "Nunito"; font-weight: 600; text-transform: none; }
.about .row .content .box-container { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: "Nunito"; font-weight: 600; }
.about .row .content .box-container .box p { text-transform: none; font-size: 1.5rem; padding: 0.3rem 0; }
.about .row .content .box-container .box p span { color: #0318a9; }
.resumebtn { margin-top: 6rem; }
.resumebtn .btn {
  padding: 1.7rem 3rem; border-radius: 0.5em; transition: 0.3s;
  color: #fff; background: #0318a9; box-shadow: 0px 5px 10px rgba(37,99,235,0.4);
  font-family: "Nunito", sans-serif;
  animation: bounce 1s infinite alternate;
}
.resumebtn .btn span { font-weight: 600; font-size: 1.8rem; letter-spacing: 0.1rem; }
.resumebtn .btn i { margin-left: 0.3rem; font-size: 1.2rem; transition: 0.3s; }
.resumebtn .btn:hover { background: #0318a9; }
.resumebtn .btn:hover i { transform: translateX(5px); }

@media screen and (max-width: 600px) {
  .about .row .image { margin-top: 2rem; }
  .about .row .image img { margin: 0 auto; width: 80%; mix-blend-mode: normal; }
  .about .row { padding: 0.5rem; margin-bottom: 7rem; }
  .about .row .content { padding: 1rem; }
  .about .row .content .box-container { gap: 0; }
}

/* ═══════════════════════════════
   SKILLS  (Jigar dark gradient style)
═══════════════════════════════ */
.skills {
  min-height: 90vh;
  background: #f0f0f0;
}
.skills h2 { color: #0e2431; }
.skills .heading span { color: #0318a9; }
.skills .container {
  background: transparent; color: #0e2431;
  border-radius: 1rem; padding: 2rem;
  width: 90%; margin: auto; margin-top: 2rem;
}
.skills .container .row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  flex-wrap: wrap; gap: 1.8rem;
}
.skills .container .bar {
  margin-bottom: 15px; padding: 10px; border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  background: #fff; transition: 0.2s;
}
.skills .container .bar:hover {
  box-shadow: 0 8px 10px rgba(0,2,68,0.8) !important;
  background-color: #f0f0f0 !important;
}
.skills .container .bar .info {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem; margin-top: 1rem;
}
.skills .container .bar .info img { width: 48px; height: 48px; border-radius: 6px; }
.skills .container .bar .info img[alt="GitHub"] { background: #1a1a2e; border-radius: 8px; padding: 3px; }
.skills .container .bar .info span {
  font-size: 1.6rem; font-weight: 500;
  font-family: "Poppins"; margin-left: 0.5rem; text-align: center; color: #0e2431;
}

@media screen and (max-width: 600px) {
  .skills .container { padding: 0; margin: 0; width: 100%; margin-top: 5px; }
  .skills .container .row { grid-template-columns: repeat(2, 1fr); margin: 1rem; padding: 2rem 0.2rem; gap: 1rem; }
}

/* ═══════════════════════════════
   EDUCATION
═══════════════════════════════ */
.education { background: #f7f7f7; min-height: 80vh; }
.education .qoute {
  font-size: 1.5rem; text-align: center;
  font-family: "Nunito", sans-serif; font-weight: 600; margin-top: 0.5rem;
}
.education .box-container {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; flex-direction: column;
}
.education .box-container .box {
  display: flex; flex-direction: row; width: 80%; border-radius: 0.5rem;
  box-shadow: 0.2rem 0.5rem 1rem rgba(0,0,0,0.2); text-align: center;
  position: relative; margin-top: 2rem; overflow: hidden; transition: 0.3s;
  background: rgb(252,252,252);
}
.education .box-container .box:hover {
  transform: scale(1.03);
  box-shadow: 1rem 0.5rem 1.2rem rgba(0,0,0,0.3);
}
.education .box-container .box .image { flex: 1 1 20rem; width: 100%; }
.education .box-container .box img { object-fit: cover; position: relative; width: 100%; height: 100%; }
.education .box-container .box .content {
  position: relative; display: flex; flex-direction: column;
  padding: 1rem; flex-wrap: wrap; flex: 1 1 70rem;
}
.education .box-container .box .content h3 {
  font-size: 2.5rem; color: #0e2431; padding: 0.5rem 0;
  font-weight: 600; text-align: left; margin-left: 1rem;
}
.education .box-container .box .content p {
  font-size: 1.5rem; margin-left: 1rem; text-align: left;
}
.education h4 {
  font-size: 1.8rem; color: #0318a9; text-align: left;
  margin: 1rem; font-family: "Nunito", sans-serif; font-weight: 700;
}
.education h4.in-progress {
  color: rgb(34,109,0); /* in-progress only */
}

@media screen and (max-width: 600px) {
  .education .box-container .box { flex-direction: column; width: 100%; }
  .education .box-container .box .image { width: 100%; height: 25rem; }
  .education .box-container .box img { width: 100%; }
  .education .box-container .box .content { flex: 0; }
}

/* ═══════════════════════════════
   EXPERIENCE  (Jigar orange timeline)
═══════════════════════════════ */
.experience { background: #f7f7f7; }
.experience .timeline { position: relative; max-width: 1200px; margin: 0 auto; }
.experience .timeline::after {
  content: ""; position: absolute; width: 6px;
  background: #020133; top: 0; bottom: 0; left: 50%; margin-left: -3px; z-index: 1;
}
.experience .exp-container {
  padding: 10px 40px; position: relative;
  background-color: inherit; width: 50%;
  z-index: 2;
}
.experience .exp-container::after {
  content: "\f0b1"; font-family: "Font Awesome 5 Free";
  position: absolute; width: 42px; height: 42px; right: -24px;
  background-color: #fff; border: 3px solid #0318a9;
  top: 8px; border-radius: 50%; z-index: 200;
  font-size: 1.3rem; font-weight: 900; color: #0318a9;
  display: flex; align-items: center; justify-content: center;
  line-height: 42px; text-align: center;
}
.experience .left { left: 0; }
.experience .right { left: 50%; }
.experience .left::before {
  content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px;
  border: medium solid #0318a9; border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #0318a9;
}
.experience .right::before {
  content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px;
  border: medium solid #0318a9; border-width: 10px 10px 10px 0;
  border-color: transparent #0318a9 transparent transparent;
}
.experience .right::after { left: -16px; }
.experience .content { background-color: #0318a9; position: relative; border-radius: 6px; }
.experience .content.we-white { background-color: #fff; border: 1.5px solid #e8e8e8; box-shadow: 0 2px 12px rgba(37,99,235,0.08); }
.experience .content.we-white .tag { background: #f0f6ff; }
.experience .content.we-white .tag h2 { color: #0e2431; font-size: 1.5rem; }
.experience .content.we-white .desc h3 { color: #0e2431; font-size: 1.4rem; }
.experience .content.we-white .desc p { color: #555; }
.experience .content.we-white .desc .bullets li { color: #444; }
.experience .content .tag { font-size: 1.3rem; padding-top: 1.5rem; padding-left: 1.5rem; }
.experience .content .desc { margin-left: 1.5rem; padding-bottom: 1rem; }
.experience .content .desc h3 { font-size: 1.5rem; font-weight: 600; }
.experience .content .desc p { font-size: 1.2rem; }

.morebtn { display: flex; justify-content: center; margin-top: 3rem; }
.morebtn .btn {
  position: relative; line-height: 0; padding: 1.6rem 3rem;
  border-radius: 0.5em; transition: 0.5s; color: #fff;
  background: #0318a9; box-shadow: 0px 5px 10px rgba(37,99,235,0.4); text-align: center;
}
.morebtn .btn span { font-weight: 600; font-size: 1.7rem; font-family: "Nunito", sans-serif; }
.morebtn .btn i { margin-left: 0.3rem; font-size: 1.5rem; transition: 0.3s; }
.morebtn .btn:hover { background: #0318a9; }
.morebtn .btn:hover i { transform: translateX(5px); }

@media screen and (max-width: 600px) {
  .experience { min-height: 80vh; }
  .experience .timeline { margin-top: 2rem; }
  .experience .timeline::after { left: 31px; }
  .experience .exp-container { width: 100%; padding-left: 8rem; padding-right: 2rem; }
  .experience .exp-container::before {
    left: 61px; border: medium solid #0318a9;
    border-width: 10px 10px 10px 0;
    border-color: transparent #0318a9 transparent transparent;
  }
  .experience .left::after, .experience .right::after { left: 15px; }
  .experience .right { left: 0%; }
  .morebtn { margin-top: 3rem; }
}

/* ═══════════════════════════════
   AWARDS
═══════════════════════════════ */
.awards {
  background: #fff;
  min-height: 60vh;
}
.awards h2 { color: #0e2431; }
.awards .heading span { color: #0318a9; }
.awards-box-container {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: center; margin-top: 3rem;
}
.awards-box {
  background: #f7f7f7; border-radius: 1rem;
  padding: 3rem 2.5rem; flex: 1 1 28rem; max-width: 38rem;
  text-align: center; border: 1px solid #eee;
  transition: transform 0.3s, box-shadow 0.3s; color: #0e2431;
}
.awards-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(37,99,235,0.2);
}
.awards-box i { font-size: 4rem; color: #0318a9; margin-bottom: 1.5rem; display: block; }
.awards-box h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: #0318a9; }
.awards-box p { font-size: 1.4rem; line-height: 1.8; text-transform: none; color: #555; }

/* ═══════════════════════════════
   CONFERENCES & CERTIFICATIONS
═══════════════════════════════ */
.conferences { background: #f0f0f0; min-height: 60vh; }
.conf-box-container {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: center; margin-top: 3rem;
}
.conf-box {
  background: #fff; border-radius: 0.5rem; padding: 2.5rem;
  flex: 1 1 28rem; max-width: 38rem;
  box-shadow: 0.2rem 0.5rem 1rem rgba(0,0,0,0.12);
  border-bottom: 4px solid #0318a9;
  transition: transform 0.3s, box-shadow 0.3s;
}
.conf-box:hover { transform: translateY(-6px); box-shadow: 0 10px 25px #0318a9; }
.conf-box i { font-size: 3rem; color: #0318a9; margin-bottom: 1rem; display: block; }
.conf-box h3 { font-size: 1.7rem; font-weight: 700; color: #0e2431; margin-bottom: 0.5rem; }
.conf-box span { font-size: 1.2rem; color: #fff; background: #0318a9; display: inline-block; padding: 0.3rem 1rem; border-radius: 2rem; margin-bottom: 1rem; }
.conf-box p { font-size: 1.3rem; color: #555; line-height: 1.7; text-transform: none; }

/* ═══════════════════════════════
   PROJECTS  (Jigar dark work style)
═══════════════════════════════ */
.work {
  background: #fff;
}
.work h2 { color: #0e2431; padding: 1rem; }
.work .heading span { color: #0318a9; }
.work .box-container { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2rem; }
.work .box-container .box {
  flex: 1 1 30rem; border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  position: relative; overflow: hidden; height: 30rem;
}
.work .box-container .box img { height: 100%; width: 100%; object-fit: cover; }
.work .box-container .box .content {
  height: 100%; width: 100%;
  position: absolute; top: 85%; left: 0;
  background: rgba(255,255,255,0.9);
  display: flex; flex-direction: column;
}
.work .box-container .box .content .tag {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  height: 4.5rem; width: 100%; padding-left: 1rem;
  background: #ffd900;
}
.work .box-container .box .content .tag h3 { font-size: 2rem; }
.work .box-container .box:hover .content { top: 25%; }
.work .desc { margin: 2rem; display: flex; flex-direction: column; justify-content: center; }
.work .desc p { font-size: 1.5rem; text-transform: none; }
.work .desc .btns { display: flex; justify-content: space-between; width: 100%; margin-top: 2rem; }
.work .desc .btns .btn {
  line-height: 0; display: inline; padding: 1.5rem 2.5rem;
  border-radius: 0.5rem; font-size: 1.5rem; color: #fff;
  background: rgb(12,12,12); margin-right: 2rem;
}
.work .desc .btns .btn:hover { background: #310ae0f5; }

/* ═══════════════════════════════
   CONTACT
═══════════════════════════════ */
.contact { background: #f0f4ff; min-height: 60vh; padding: 2rem 9% 5rem; }

.contact-wrapper {
  display: flex; flex-wrap: wrap;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(3,24,169,0.10);
}
.contact-left { flex: 1 1 32rem; }
.contact-right { flex: 2 1 40rem; }

/* LEFT panel */
.contact-left {
  background: #fff;
  padding: 4rem 3.5rem;
  display: flex; flex-direction: column;
  justify-content: center; gap: 2.5rem;
}
.contact-left h3 {
  font-size: 2.8rem; font-weight: 800;
  color: #002057; line-height: 1.3;
  text-transform: none;
}
.contact-left p {
  font-size: 1.45rem; color: #555;
  line-height: 1.8; text-transform: none;
}
.contact-socials { display: flex; gap: 1rem; margin-top: 1rem; }
.contact-socials a {
  width: 3.8rem; height: 3.8rem;
  background: #0318a9; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; transition: 0.25s;
}
.contact-socials a:hover {
  background: #002057;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(3,24,169,0.3);
}

/* RIGHT panel — form */
.contact-right {
  padding: 4rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  background: #fff;
}

.contact-right h4 {
  font-size: 2rem; font-weight: 700; color: #002057;
  margin-bottom: 1.5rem; text-transform: none;
}

form .form-group { display: flex; flex-direction: column; gap: 0; }

.form-group .field {
  height: 52px; display: flex; position: relative;
  margin: 0.7rem 0; width: 100%;
}

form i {
  position: absolute; top: 50%; left: 16px;
  color: #aab; font-size: 15px;
  pointer-events: none; transform: translateY(-50%);
  transition: color 0.2s;
}

form .field input {
  width: 100%; height: 100%; outline: none;
  padding: 0 16px 0 44px; font-size: 1.45rem;
  font-family: "Poppins", sans-serif;
  border-radius: 10px;
  border: 1.5px solid #e0e6f5;
  background: #f8f9ff;
  color: #002057;
  transition: border 0.25s, box-shadow 0.25s, background 0.25s;
}

form .field input:focus {
  border-color: #0318a9;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(3,24,169,0.08);
}

form .field input:focus ~ i { color: #0318a9; }

form .message { position: relative; margin: 0.7rem 0; width: 100%; }
form .message i { top: 20px; transform: none; }

form .message textarea {
  width: 100%; min-height: 120px; max-height: 200px;
  resize: vertical; outline: none;
  padding: 14px 16px 14px 44px; font-size: 1.45rem;
  font-family: "Poppins", sans-serif;
  border-radius: 10px;
  border: 1.5px solid #e0e6f5;
  background: #f8f9ff; color: #002057;
  transition: border 0.25s, box-shadow 0.25s, background 0.25s;
}

form .message textarea:focus {
  border-color: #0318a9;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(3,24,169,0.08);
}

form .message textarea:focus ~ i { color: #0318a9; }

form .field input,
form .message textarea {
  text-transform: none !important;
}



/* ═══════════════════════════════
   FOOTER  (exact Jigar)
═══════════════════════════════ */
.footer { min-height: auto; padding-top: 0; background: rgb(0,1,43); }
.footer .box-container { display: flex; justify-content: center; flex-wrap: wrap; }
.footer .box-container .box { flex: 1 1 25rem; margin: 2.5rem; }
.footer .box-container .box h3 { font-size: 2.5rem; color: #fff; padding-bottom: 1rem; font-weight: normal; }
.footer .box-container .box p { font-size: 1.5rem; color: #ccc; padding: 0.7rem 0; text-transform: none; }
.footer .box-container .box p i { padding-right: 1rem; color: #0318a9; }
.footer .box-container .box a { font-size: 1.5rem; color: rgb(238,238,238); padding: 0.3rem 0; display: block; }
.footer .box-container .box a:hover { color: #0318a9; }
.footer .box-container .box .share { display: flex; flex-wrap: wrap; padding: 1rem 0; }
.footer .box-container .box .share a {
  height: 4rem; width: 4rem; padding: 1rem; text-align: center;
  border-radius: 5rem; font-size: 1.7rem; margin-right: 1rem; transition: 0.2s;
  background: rgb(230,230,230); color: #02094b; border: none;
}
.footer .box-container .box .share a:hover { background: transparent; transform: scale(0.98); border: 0.1rem solid rgb(180,178,178); color: #0318a9; }
.footer .credit { padding: 1rem 0 0 0; text-align: center; font-size: 1.5rem; font-family: "Nunito", sans-serif; font-weight: 600; color: #fff; border-top: 0.1rem solid #fff3; }
.footer .credit a { color: #0318a9; text-decoration: none; }
.footer .fa { color: #e90606; margin: 0 0.3rem; font-size: 1.5rem; animation: pound 0.35s infinite alternate; }
@keyframes pound { to { transform: scale(1.1); } }

/* scroll top */
#scroll-top {
  position: fixed; top: -140%; right: 2rem;
  padding: 1rem 1.5rem; font-size: 2rem;
  background: #0318a9; color: rgb(13,0,44);
  border-radius: 50%; transition: 1s linear; z-index: 1000;
}
#scroll-top.active { top: calc(100% - 12rem); }

/* common */
@media (max-width: 450px) {
  html { font-size: 55%; }
  body { padding-right: 0; }
  section { padding: 2rem; }
}

/* ═══════════════════════════════
   CERTIFICATIONS SLIDER
═══════════════════════════════ */
.certifications { background: #f0f0f0; min-height: 60vh; padding-bottom: 5rem; }

.cert-slider-wrapper {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; margin-top: 3rem; padding: 0 2rem;
}

.cert-slider { position: relative; width: 75rem; overflow: hidden; }

.cert-slide {
  display: none; animation: certFade 0.6s ease;
}
.cert-slide.active { display: block; }

@keyframes certFade {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* The certificate card itself */
.cert-card {
  background: #f0f4ff;
  border-radius: 1.5rem;
  padding: 5rem 6rem;
  position: relative;
  overflow: hidden;
  min-height: 36rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

/* Decorative blobs like in the screenshot */
.cert-deco {
  position: absolute; border-radius: 50%;
  opacity: 0.35; pointer-events: none;
}
.deco1 {
  width: 22rem; height: 22rem;
  background: #a8d8f0;
  top: -6rem; right: -4rem;
}
.deco2 {
  width: 18rem; height: 18rem;
  background: #f0b8d4;
  top: 2rem; right: 4rem;
}

/* Gold seal bottom left */
.cert-seal {
  position: absolute; bottom: 2rem; left: 3rem;
  width: 7rem; height: 7rem;
  background: radial-gradient(circle, #0318a9, #1a47c0);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}
.cert-seal i { font-size: 3rem; color: #fff; }

/* Signature bottom right */
.cert-sig {
  position: absolute; bottom: 3rem; right: 4rem;
  font-size: 3rem; color: #555; font-style: italic;
}

.cert-body { position: relative; z-index: 2; }
.cert-intro { font-size: 1.4rem; color: #666; margin-bottom: 1rem; }
.cert-name { font-size: 3rem; font-weight: 800; color: #1a1a2e; margin-bottom: 1.5rem; font-family: Georgia, serif; }
.cert-desc { font-size: 1.4rem; color: #555; margin-bottom: 1.5rem; line-height: 1.8; }
.cert-course { font-size: 2.8rem; font-weight: 700; color: #0318a9; margin-bottom: 1rem; }
.cert-org { font-size: 1.3rem; color: #888; letter-spacing: 0.05em; }

/* Arrow buttons */
.cert-arrow {
  background: #fff; border: none; cursor: pointer;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  font-size: 1.6rem; color: #0e2431;
  display: flex; align-items: center; justify-content: center;
  transition: 0.2s; flex-shrink: 0;
}
.cert-arrow:hover { background: #0318a9; color: #fff; transform: scale(1.08); }

/* Dots */
.cert-dots {
  display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem;
}
.cert-dot {
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #ccc; cursor: pointer; transition: 0.3s;
}
.cert-dot.active { background: #0318a9; transform: scale(1.3); }

@media (max-width: 700px) {
  .cert-slider { width: 100%; }
  .cert-card { padding: 4rem 2rem; }
  .cert-name { font-size: 2rem; }
  .cert-course { font-size: 2rem; }
  .cert-arrow { width: 3.5rem; height: 3.5rem; }
}

/* ═══════════════════════════════
   FOOTER COMPACT REDESIGN
═══════════════════════════════ */
.footer { min-height: auto; padding: 2rem 9% 0; background: rgb(0,1,43); }

.footer-top {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
}

.footer-brand { flex: 1 1 25rem; }
.footer-brand i { display: block; margin-bottom: 1rem; }
.footer-brand h3 { font-size: 2.2rem; color: #fff; font-weight: 700; margin-bottom: 0.5rem; }
.footer-brand p { font-size: 1.4rem; color: #aaa; margin-bottom: 1.5rem; text-transform: none; }

.footer-links { flex: 1 1 18rem; }
.footer-links h3,
.footer-contact h3 { font-size: 1.8rem; color: #fff; margin-bottom: 1.2rem; font-weight: 600; }
.footer-links a { display: block; font-size: 1.4rem; color: #bbb; padding: 0.3rem 0; transition: 0.2s; }
.footer-links a:hover { color: #0318a9; padding-left: 0.5rem; }
.footer-links a i { margin-right: 0.5rem; color: #0318a9; }

.footer-contact { flex: 1 1 25rem; }
.footer-contact p { font-size: 1.4rem; color: #bbb; padding: 0.5rem 0; text-transform: none; }
.footer-contact p i { color: #0318a9; margin-right: 0.8rem; }

.footer .share { display: flex; gap: 1rem; margin-top: 1rem; }
.footer .share a {
  width: 3.8rem; height: 3.8rem; display: flex;
  align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.6rem;
  background: rgba(255,255,255,0.1); color: #fff;
  transition: 0.2s;
}
.footer .share a:hover { background: #0318a9; color: #000; transform: translateY(-3px); }

.footer .credit {
  text-align: center; font-size: 1.4rem;
  font-family: "Nunito", sans-serif; font-weight: 600;
  color: #fff; padding: 2rem 0;
}
.footer .credit a { color: #0318a9; text-decoration: none; }

@media (max-width: 600px) {
  .footer { padding: 3rem 2rem 0; }
  .footer-top { gap: 2rem; }
}

/* ═══════════════════════════════
   EXPERIENCE BULLETS
═══════════════════════════════ */
.experience .content .desc .bullets {
  margin-top: 0.8rem;
  padding-left: 2rem;
  list-style: disc;
}
.experience .content .desc .bullets li {
  font-size: 1.25rem;
  color: #0e2431;
  margin-bottom: 0.4rem;
  text-transform: none;
  line-height: 1.6;
}

/* Skills bar hover fix for light bg */
.skills .container .bar:hover {
  box-shadow: 0 8px 16px rgba(115,3,151,0.15) !important;
}

/* Work cards text fix for light bg */
.work .box-container .box .content { background: rgba(255,255,255,0.95); }
.work .box-container .box .content .tag { background: #0318a9; }
.work .box-container .box .content .tag h3 { color: #fff; font-size: 1.6rem; }
.work .desc p { font-size: 1.4rem; color: #333; text-transform: none; }
.work .desc .btns .btn { background: #0e2431; }
.work .desc .btns .btn:hover { background: #0318a9; }

/* ═══════════════════════════════
   RESPONSIVE COMPLET — toutes sections
═══════════════════════════════ */

/* ── Navbar (déjà géré à 768px, on renforce) ── */
@media (max-width: 768px) {
  header { padding: 1.5rem 5%; }
  header .logo { font-size: 1.7rem; }
}

/* ── Hero ── */
@media (max-width: 768px) {
  .home { flex-wrap: wrap; flex-direction: column; text-align: center; padding-top: 8rem; }
  .home .content { order: 2; flex: 1 1 100%; width: 100%; }
  .home .image { order: 1; flex: 0 0 auto; display: flex; justify-content: center; width: 100%; overflow: hidden; }
  .home .image img { width: 16rem; max-width: 16rem; height: 16rem; object-fit: cover; border-radius: 50%; }
  .home .content h2 { font-size: 3rem; }
  .home .content h2 span { font-size: 3rem; }
  .home .content p, .home .content p span { font-size: 2rem; }
  .home .socials { margin-top: 2rem; }
  .socials .social-icons { display: flex; justify-content: center; }
}
@media (max-width: 450px) {
  .home .image img { width: 14rem; max-width: 14rem; height: 14rem; }
  .home .content h2, .home .content h2 span { font-size: 2.6rem; }
}

/* ── About ── */
@media (max-width: 768px) {
  .about .row { flex-direction: column; padding: 1rem; }
  .about .row .image img { width: 70%; margin: 0 auto; display: block; }
  .about .row .content { padding: 1rem 0; }
  .about .row .content h3 { font-size: 2rem; }
  .resumebtn { margin-top: 2rem; }
}

/* ── Skills ── */
@media (max-width: 992px) {
  .skills .container .row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .skills .container .row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
  .skills .container .row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Education ── */
@media (max-width: 768px) {
  .education .box-container .box { width: 100%; flex-direction: column; }
  .education .box-container .box .image { height: 20rem; }
  .education .box-container .box .content h3 { font-size: 1.8rem; }
}

/* ── Experience ── */
@media (max-width: 768px) {
  .experience .timeline::after { left: 2rem; }
  .experience .exp-container { width: 100%; padding-left: 6rem; padding-right: 1rem; }
  .experience .exp-container::before {
    left: 4.5rem;
    border-width: 10px 10px 10px 0;
    border-color: transparent #0318a9 transparent transparent;
  }
  .experience .left::after,
  .experience .right::after { left: 0.8rem; }
  .experience .right { left: 0; }
  .experience .content .desc .bullets li { font-size: 1.2rem; }
}

/* ── Awards ── */
@media (max-width: 768px) {
  .awards-box-container { flex-direction: column; align-items: center; }
  .awards-box { max-width: 100%; }
}

/* ── Conferences ── */
@media (max-width: 768px) {
  .conf-box-container { flex-direction: column; align-items: center; }
  .conf-box { max-width: 100%; }
}

/* ── Projects ── */
@media (max-width: 768px) {
  .work .box-container { margin: 1rem 0; }
  .work .box-container .box { flex: 1 1 100%; height: 32rem; }
}

/* ── Projects (jp-cards) ── */
@media (max-width: 992px) {
  .jigar-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .jigar-projects { grid-template-columns: 1fr; padding: 0 1rem; }
  .jp-img-wrap { height: 20rem; }
}

/* ── Contact ── */
@media (max-width: 768px) {
  .contact-wrapper { flex-direction: column; }
  .contact-left { width: 100%; padding: 3rem 2rem; }
  .contact-right { width: 100%; padding: 2rem; }
  .contact-left h3 { font-size: 2.2rem; }
}
@media (max-width: 450px) {
  .contact-left h3 { font-size: 1.9rem; }
  .contact-right h4 { font-size: 1.7rem; }
  .button-area button { width: 100% !important; justify-content: center; }
}

/* ── moreProjects responsive ── */
@media (max-width: 992px) {
  #moreProjects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #moreProjects { grid-template-columns: 1fr; padding: 0 1rem; }
}

/* ── Certifications slider ── */
@media (max-width: 768px) {
  .cert-slider-wrapper { gap: 1rem; padding: 0 0.5rem; }
  .cert-slider { width: 100%; }
  .cert-card { padding: 3rem 1.5rem 5rem; min-height: auto; }
  .cert-name { font-size: 1.8rem; }
  .cert-course { font-size: 2rem; }
  .cert-arrow { width: 3rem; height: 3rem; font-size: 1.2rem; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .footer { padding: 3rem 2rem 0; }
  .footer-top { flex-direction: column; gap: 2rem; }
  .footer-brand, .footer-links, .footer-contact { width: 100%; }
}

/* ── Heading responsive ── */
@media (max-width: 768px) {
  .heading { font-size: 2.8rem; }
  section { padding: 5rem 3%; }
}
@media (max-width: 450px) {
  .heading { font-size: 2.4rem; }
  section { padding: 4rem 2%; }
}

/* ═══════════════════════════════
   PROJECTS — JIGAR STYLE CARDS
═══════════════════════════════ */
.work { background: #f7f7f7; }
.work h2 { color: #0e2431; padding: 1rem; }
.work .heading span { color: #0318a9; }

.jigar-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 0 2rem;
}

.jp-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.jp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px #0318a9;
}

.jp-img-wrap {
  position: relative;
  overflow: hidden;
  height: 18rem;
  background: #e8f0fe;
}
.jp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform 0.4s;
}
.jp-card:hover .jp-img-wrap img { transform: scale(1.04); }

/* overlay on hover - slide from left like Jigar */
.jp-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(14,36,49,0.75);
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.jp-card:hover .jp-overlay { transform: scaleX(1); }

.jp-overlay a {
  width: 4rem; height: 4rem;
  background: #fff; color: #0e2431;
  border-radius: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; transition: 0.2s;
}
.jp-overlay a:hover { background: #0e2431; color: #fff; }

.jp-info {
  padding: 1.5rem 1.8rem;
  flex: 1;
}
.jp-info h3 {
  font-size: 1.7rem; font-weight: 600;
  color: #0e2431; margin-bottom: 0.8rem;
}
.jp-info p {
  font-size: 1.3rem; color: #888;
  text-transform: none; line-height: 1.6;
}
.jp-info p span { font-weight: 600; color: #555; }

/* ── Certificate image slider ── */
.cert-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 0 2rem;
}

.cert-slider {
  overflow: hidden;
  width: 100%;
  max-width: 560px;
}

.cert-slide {
  display: none;
}
.cert-slide.active {
  display: block;
}

.cert-img-card {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(3,24,169,0.15);
  background: #f5f5f5;
}
.cert-img-card img {
  width: 100%;
  height: 32rem;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 1rem;
  transition: transform 0.4s;
}
.cert-img-card:hover img { transform: scale(1.02); }
.cert-img-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(3,24,169,0.82);
  color: #fff; font-size: 1.4rem; font-weight: 600;
  padding: 1rem 2rem; text-align: center;
  text-transform: none;
}

.cert-arrow {
  background: #0318a9;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  font-size: 1.6rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(3,24,169,0.25);
}
.cert-arrow:hover {
  background: #002057;
  transform: scale(1.1);
}

.cert-dots {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
}
.cert-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  display: inline-block;
}
.cert-dot.active {
  background: #0318a9;
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .cert-img-card img { height: 22rem; }
  .cert-slider-wrapper { gap: 0.8rem; padding: 0 0.5rem; }
  .cert-arrow { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }
}
/* ═══════════════════════════════
   VIEW MORE BUTTON
═══════════════════════════════ */
.view-more-wrap { display: flex; justify-content: center; margin-top: 3rem; }
.view-more-btn {
  position: relative; line-height: 0; padding: 1.6rem 3rem;
  border-radius: 0.5em; border: none; cursor: pointer;
  color: #fff; background: #0318a9;
  box-shadow: 0px 5px 10px rgba(37,99,235,0.4);
  font-family: "Nunito", sans-serif; font-weight: 600;
  font-size: 1.7rem; letter-spacing: 0.05rem;
  display: inline-flex; align-items: center; gap: 0.8rem;
  animation: bounce 1s infinite alternate;
  transition: background 0.3s;
}
.view-more-btn:hover { background: #002057; box-shadow: 0 8px 20px rgba(3,24,169,0.4); }
.view-more-btn i { font-size: 1.4rem; }

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* ═══════════════════════════════
   SEND BUTTON — harmonized
═══════════════════════════════ */
.button-area { margin-top: 1.8rem; display: flex; justify-content: flex-start; }
.button-area button {
  position: relative; line-height: 0; padding: 1.6rem 3rem;
  border-radius: 0.5em; border: none; cursor: pointer;
  color: #fff; background: #0318a9;
  box-shadow: 0px 5px 10px rgba(37,99,235,0.4);
  font-family: "Nunito", sans-serif; font-weight: 600;
  font-size: 1.7rem; letter-spacing: 0.05rem;
  display: inline-flex; align-items: center; gap: 0.8rem;
  width: auto !important;
  animation: bounce 1s infinite alternate;
  transition: background 0.3s;
}
.button-area button:hover { background: #002057; box-shadow: 0 8px 20px rgba(3,24,169,0.4); transform: none; }
.button-area button i {
  position: static !important; transform: none !important;
  color: #fff; font-size: 1.5rem;
  transition: transform 0.3s;
}
.button-area button:hover i { transform: translateX(5px) !important; }

/* ═══════════════════════════════
   LANG GLOBE IN NAVBAR
═══════════════════════════════ */
.lang-li { display: flex; align-items: center; }
.lang-globe {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: #0e2431; font-weight: 600;
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.8rem; border-radius: 2rem;
  transition: background 0.2s;
}
.lang-globe:hover { background: #f0f4ff; }

/* ═══════════════════════════════
   JP CARD — missing styles
═══════════════════════════════ */
.jp-tag-type {
  font-size: 1.1rem; color: #0318a9; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05rem;
  display: block; margin-bottom: 0.5rem;
}
.jp-badge {
  font-size: 1.1rem; background: #fff3cd; color: #856404;
  border-radius: 2rem; padding: 0.2rem 0.8rem;
  display: inline-block; margin-bottom: 0.5rem;
}
.jp-links {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem;
}
.jp-link {
  font-size: 1.3rem; color: #0318a9; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.4rem;
  text-decoration: none !important;
  transition: color 0.2s;
}
.jp-link:hover { color: #002057; }

/* Fix Bootstrap overriding text-decoration on navbar links */
header .navbar ul li a,
header .navbar ul li a:hover,
header .navbar ul li a.active {
  text-decoration: none !important;
}

/* Fix Bootstrap underline on footer credit */
.footer .credit a {
  text-decoration: none !important;
}

/* Remove ALL underlines including Bootstrap */
a, a:hover, a:focus, a:visited { text-decoration: none !important; }

/* Remove ALL underlines including Bootstrap override */
a, a:hover, a:focus, a:visited { text-decoration: none !important; }

/* jigar-projects responsive fix */
@media (max-width: 992px) {
  .jigar-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .jigar-projects { grid-template-columns: 1fr; }
}

/* moreProjects — centre les cartes quand peu nombreuses */
#moreProjects {
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  max-width: 1100px;
  margin: 2rem auto 0;
}