/* =========================
   GLOBAL / BODY
   ========================= */
body {
  background: linear-gradient(135deg, #eef2f3 0%, #cfd9df 100%);
  font-family: 'Segoe UI', 'Inter', Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  color: #222b38;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
}

/* =========================
   SIDEBAR
   ========================= */
.sidebar-nav {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 2em;
  box-shadow: 0 4px 28px rgba(70,120,210,0.11);
  position: sticky;
  top: 2vw;
  height: fit-content;
  margin: 2vw 0 2vw 1vw;
  display: flex;
  flex-direction: column;
  z-index: 3;
  transition: all .2s cubic-bezier(.6,2,.4,1);
}
.profile-img {
  width: 8vw; min-width: 70px; max-width: 112px;
  height: 8vw; min-height: 70px; max-height: 112px;
  border-radius: 50%;
  border: 0.35em solid #f8fbff;
  object-fit: cover;
  box-shadow: 0 2px 14px #6dd5ed33;
  margin-bottom: 0.5em;
  background: #f8fafb;
}
.sidebar-nav h3 {
  color: #1d3557;
  font-size: 1.33em;
}
.sidebar-nav .small {
  color: #577399;
}
.sidebar-nav .nav-link {
  color: #1d2939;
  border-radius: 0.5em;
  font-size: 1.1em;
  font-weight: 500;
  padding: 0.7em 1.1em;
  margin-bottom: 0.25em;
  transition: background .15s, color .12s, font-weight .11s;
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  text-decoration: none;
}
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
  background: linear-gradient(90deg, #0072ff1a 70%, #6dd5ed22 100%);
  color: #0072ff !important;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 16px #0072ff12;
}
.sidebar-contact {
  font-size: 1em;
  border-top: 1.5px solid #e4e7ef;
  margin-top: auto;
  padding-top: 1em;
}
.sidebar-contact .sidebar-link {
  color: #26426b;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5em;
  transition: color 0.13s;
  word-break: break-all;
  font-size: 0.99em;
}
.sidebar-contact .sidebar-link:hover { color: #0072ff; }

/* =========================
   RESPONSIVE SIDEBAR
   ========================= */
@media (max-width: 991px) {
  .sidebar-nav {
    width: 100vw;
    min-width: unset;
    max-width: unset;
    border-radius: 0;
    position: static;
    margin: 0 0 2vw 0;
    top: unset;
    left: unset;
    flex: none;
  }
  .profile-img { width:16vw; height:16vw; min-width:60px; min-height:60px; max-width:80px; max-height:80px; }
}

/* =========================
   MAIN CONTENT
   ========================= */
.main-content {
  width: 100%;
  max-width: 75vw;
  margin: 0 auto;
  padding: 3vw 2vw 2vw 2vw;
  background: transparent;
  min-width: 0;
  transition: max-width 0.2s;
}
@media (max-width: 1200px) {
  .main-content { max-width: 98vw; }
}
@media (max-width: 991px) {
  .main-content {
    max-width: 100vw;
    margin-left: 0;
    padding: 2vw 1vw;
  }
}

/* =========================
   SECTION BOXES
   ========================= */
.section-box {
  background: rgba(255,255,255,0.98);
  border-radius: 2em;
  box-shadow: 0 8px 36px 0 rgba(70,120,210,0.12);
  width: 100%;
  margin: 2vw 0 0 0;
  padding: 2.5vw 2vw;
  border: 0.18em solid #f0f4fa;
  transition: box-shadow 0.18s, border-color .15s;
  position: relative;
}
.section-box:hover {
  box-shadow: 0 14px 48px 0 #6dd5ed2e, 0 2px 12px #fff1;
  border-color: #6dd5ed66;
  transform: translateY(-2px) scale(1.012) rotate(-1deg);
}
@media (max-width: 991px) {
  .section-box { margin:1.1rem 0 0 0; padding:1.1rem 0.7rem; }
}

/* =========================
   HEADINGS AND GRADIENTS
   ========================= */
.text-gradient {
  background: linear-gradient(90deg, #0072ff, #6dd5ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient2 {
  background: linear-gradient(90deg, #ff5e62, #ff9966);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   SKILLS GRID
   ========================= */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2vw;
}
@media (max-width: 700px) {
  .skills-grid { grid-template-columns: 1fr; gap: 4vw;}
}

/* =========================
   SKILL CARD
   ========================= */
.skill-card-modern {
  background: #fff;
  border-radius: 1.1em;
  box-shadow: 0 2px 14px 0 #dde8fa40;
  padding: 1.5em 1.1em 1.1em 1.1em;
  border: 1.5px solid #f0f4fa;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s, transform 0.18s, border-color 0.2s;
}
.skill-card-modern:hover {
  box-shadow: 0 10px 34px 0 #ff99663d, 0 2px 10px #6dd5ed44;
  border-color: #ff9966bb;
  transform: translateY(-7px) scale(1.03) rotate(-2deg);
}
.skill-card-modern h5 {
  font-size: 1.08em;
  font-weight: 700;
  margin-bottom: 1em;
}
.skill-card-modern ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skill-card-modern li {
  font-size: 1.01em;
  margin-bottom: 0.7em;
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  transition: color 0.15s, transform 0.13s;
}
.skill-card-modern li:hover {
  color: #0072ff;
  transform: translateX(5px) scale(1.04);
}
.text-skill1 { color: #ff5e62; }
.text-skill2 { color: #ff9966; }
.text-skill3 { color: #17a288; }

/* =========================
   TIMELINE MODERN
   ========================= */
.timeline-modern {
  position: relative;
  padding-left: 1em;
  margin-left: 0.5em;
  border-left: 0.25em solid #0072ff18;
}
.timeline-modern-item {
  position: relative;
  margin-bottom: 2em;
  transition: transform 0.17s cubic-bezier(.6,2,.4,1);
}
.timeline-modern-item:hover {
  transform: translateX(0.7em) scale(1.012);
}
.timeline-modern-dot {
  position: absolute;
  left: -1.4em;
  top: 0.8em;
  width: 1.1em; height: 1.1em;
  background: linear-gradient(135deg, #0072ff 40%, #6dd5ed 100%);
  border-radius: 50%;
  border: 0.22em solid #fff;
  box-shadow: 0 0 0 0.4em #0072ff16;
}
.glass-mini {
  background: rgba(255,255,255,0.99);
  border-radius: 0.7em;
  border-left: 0.4em solid #0072ff63;
  padding: 0.99em 1.01em;
  box-shadow: 0 2px 8px #0072ff12;
  margin-bottom: 1em;
  transition: border-left-color .2s;
}
.glass-mini:hover {
  border-left-color: #ff5e62b0;
}

/* =========================
   CUSTOM SCROLLBAR
   ========================= */
::-webkit-scrollbar {
  width: 0.6em;
  background: #e3e6ee;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(120deg,#0072ff 0%,#6dd5ed 100%);
  border-radius: 0.7em;
  box-shadow: 0 2px 6px #0072ff30 inset;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(120deg,#ff9966 0%,#ff5e62 100%);
}

/* =========================
   CONTACT INFO (ROW)
   ========================= */
@media (max-width: 700px) {
  .section-box .row > [class*="col-"] {
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* =========================
   GENERAL UTILITY CLASSES
   ========================= */
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.mb-3 { margin-bottom: 1.3em !important; }
.mb-4 { margin-bottom: 2em !important; }
.mt-auto { margin-top: auto !important; }
.pt-4 { padding-top: 2em !important; }
.pb-2 { padding-bottom: 1em !important; }
.px-4 { padding-left: 2em !important; padding-right: 2em !important; }
.px-3 { padding-left: 1.5em !important; padding-right: 1.5em !important; }
.ps-0 { padding-left: 0 !important; }
.mb-2 { margin-bottom: 0.6em !important; }
.mt-2 { margin-top: 0.7em !important; }
.small { font-size: 0.95em; }

/* =========================
   AOS ANIMATION (optional)
   ========================= */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}


::-webkit-scrollbar {
  width: 18px;                 /* Increased width */
  background: linear-gradient(135deg, #e3eefa 0%, #eaf4fd 100%);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #23a6fd 0%, #0072ff 100%);
  border-radius: 10px;
  box-shadow: 0 4px 12px #0072ff33 inset;
  border: 4px solid #eaf4fd;   /* More thickness around thumb */
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0072ff 0%, #21d4fd 100%);
}

/* Hide arrows for cleaner look */
::-webkit-scrollbar-button {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: thick;                      /* Wider */
  scrollbar-color: #23a6fd #eaf4fd;
}