:root {
  --bg-light: #f9f7ff; /* #f0ecf9; */
  --bg-dark: #2e1a47;
  --navbar-bg-light: rgba(255, 255, 255, 0.9);
  --navbar-bg-dark: rgba(24, 12, 41, 0.9); /* darker than #2e1a47 */
  --text-light: #1a1a1a;
  --text-dark: #eaeaea;
  --transition-speed: 0.4s;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-light);
  color: var(--text-light);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

body.dark-mode {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

/* ===== Navbar Styles ===== */
.navbar {
  backdrop-filter: blur(10px);
  background-color: var(--navbar-bg-light);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Dark Mode Navbar BG */
body.dark-mode .navbar {
  background-color: var(--navbar-bg-dark);
}

/* Logo (navbar-brand) */
.navbar .navbar-brand {
  font-weight: 750;
  color: rgba(24, 12, 41, 0.9); 
  transition: color var(--transition-speed);
}

.navbar .navbar-brand:hover {
  color: #ce33e8
}

body.dark-mode .navbar .navbar-brand:hover {
  color: #ce33e8
}

body.dark-mode .navbar .navbar-brand {
  color: #ffffff;
}

/* Navbar links */
.navbar-nav .nav-link {
  color: #444;
  transition: color var(--transition-speed);
  font-weight: 470;
}

body.dark-mode .navbar-nav .nav-link {
  color: #e0e0e0;
}

/* Theme toggle icon */
#themeToggle i {
  color: #444;
  transition: color var(--transition-speed);
}

body.dark-mode #themeToggle i {
  color: #e0e0e0;
}

/* ===== Resume Button ===== */
.custom-resume-btn {
  background-color: #6b3fa0; /* dark lilac/purple */
  color: #fff;
  padding: 0.6rem 1.4rem;
  font-weight: 500;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border: none;
}

.custom-resume-btn:hover {
  background-color: #5a3290; /* slightly darker on hover */
  box-shadow: 0 0 10px rgba(107, 63, 160, 0.5);
  color: #fff;
}

/* Theme toggle button */
.theme-toggle-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: inherit;
  transition: color var(--transition-speed);
}

.theme-toggle-btn:hover {
  cursor: pointer;
}

/* Keep the mobile theme toggle left of the hamburger */
@media (max-width: 991.98px) {
  .theme-toggle-btn.d-lg-none {
    margin-left: auto;
    margin-right: 2rem;
  }

  .navbar .navbar-toggler {
    margin-left: 0;
  }
}

/* 1. More spacing between navbar items */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem; /* top-bottom, left-right */
  font-size: 1rem;
}

/* 2. Adjust logo padding to move left */
.navbar .navbar-brand {
  margin-left: 0.75rem;
  padding: 0.5rem 0; /* vertical padding, no horizontal padding */
  font-size: 1.35rem;
}

/* Add spacing between navbar items */
.navbar-nav .nav-item {
  margin: 0 0.5rem; /* left and right spacing */
}


/* 3. Increase navbar height by adding padding */
.navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Light mode: Navbar link hover */
.navbar-nav .nav-link:hover {
  color: #ce33e8
}

/* Dark mode: Navbar link hover */
body.dark-mode .navbar-nav .nav-link:hover {
  color: #ce33e8
}

/* Light mode: Theme toggle icon hover */
#themeToggle i:hover {
  color: #ce33e8
}

/* Dark mode: Theme toggle icon hover */
body.dark-mode #themeToggle i:hover {
  color: #ce33e8
}

.navbar-nav .nav-link,
#themeToggle i {
  transition: color 0.3s ease;
}

/* Dark mode: Fully white hamburger icon including outer box */
body.dark-mode .navbar-toggler {
  border: 2px solid rgba(255, 255, 255, 0.9);     /* white border */
  background-color: transparent;                 /* transparent background */
  border-radius: 6px;                            /* slight rounding like default */
}

body.dark-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ===== Hero Section ===== */
.hero-section {
  min-height: 100vh;
  padding-top: 6rem; /* account for sticky navbar */
  padding-bottom: 3rem;
  background-color: #f0ebfc;
  transition: background-color 0.4s ease;
}

body.dark-mode .hero-section {
  background-color: var(--bg-dark);
}

.hero-row {
  align-items: start !important; /* override align-items-center */
}


/* Headline */
.hero-name {
  font-size: 4.8rem; /* was 2.8rem */
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.70rem;
  color: inherit;
}

/* Subtitle */
.hero-subtitle {
  font-size: 2.2rem; /* was 1.2rem */
  margin-top: 0.4rem;
  font-weight: 400;
  color: inherit;
}

.typed-text {
  color: #6b3fa0; /* purple shade */
  padding-left: 5px;
  font-weight: 500;
}

/* Dark Mode */
body.dark-mode .typed-text {
  color: #e3c7ff;
}

/* Style the blinking cursor from Typed.js */
.typed-cursor {
  color: #6b3fa0;       /* match theme in light mode */
  font-weight: 600;
}

body.dark-mode .typed-cursor {
  color: #e3c7ff;        /* light purple in dark mode */
}


/* Objective Paragraph */
.hero-objective {
  font-size: 1.15rem;
  margin-top: 0.65rem;
  font-weight: 450;
  line-height: 1.7;
  color: #4c4646;
  max-width: 90%;
  transition: color 0.4s ease;
} 

/* Dark Mode Objective Color */
body.dark-mode .hero-objective {
  color: #f8f8f8;
}


/* Profile Image Wrapper */
.hero-img-wrapper {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at center, #f5e9ff, #d3b9f5); /* richer gradient */
  padding: 8px;
  box-shadow: 0 12px 30px rgba(107, 63, 160, 0.35); /* more intense shadow */
  transition: background 0.4s ease, transform 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.hero-img-wrapper:hover {
  transform: scale(1.08); /* Slight zoom-in */
  box-shadow: 0 0 45px rgba(107, 63, 160, 0.35);
}

/* Image inside wrapper */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid white;
}


/* Flexbox adjustments */
#home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 4%;
}

/* Push text content upwards on large screens */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0rem;
}


/* Responsive tweaks */
@media (max-width: 768px) {
  #home {
    flex-direction: column;
    text-align: center;
  }

  .hero-name {
    font-size: 2.5rem;
    margin-top: 3rem;
  }

  .hero-subtitle {
    font-size: 1.4rem;
  }

  .hero-objective {
    font-size: 1rem;        /* Slightly smaller text for mobile */
    margin-top: 0.5rem; /* Reduce spacing */
    max-width: 100%;        /* Full width for mobile */
    text-align: center;     /* Center-align for better readability */
    padding: 0 1rem;        /* Add some horizontal padding */
  }

  .hero-img-wrapper {
    width: 240px;
    height: 240px;
  }

  .hero-text {
    padding-top: 0;
    align-items: center;
  }
}

/* Dark Mode Profile Border & Glow */
body.dark-mode #home .hero-img-wrapper {
  background: radial-gradient(circle at center, #5a3290, #2e1a47);
  box-shadow: 0 0px 28px rgba(231, 194, 245, 0.816) !important;
}


/* Social Icons Container */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* Social Icon Buttons */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;   /* was 42px */
  height: 50px;  /* was 42px */
  border-radius: 50%;
  background-color: #f3e8ff;
  color: #6b3fa0;
  font-size: 1.5rem; /* was 1.2rem */
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon svg {
  width: 24px; /* was 20px */
  height: 24px; /* was 20px */
}

/* Hover Effect */
.social-icon:hover {
  background-color: #6b3fa0; /* purple */
  color: #fff;
}

/* Dark Mode Styling */
body.dark-mode .social-icon {
  background-color: #45275c; /* dark lavender */
  color: #e3c7ff;
}

body.dark-mode .social-icon:hover {
  background-color: #ab47bc; /* bright purple hover */
  color: #fff;
}

/* Responsive: Center icons on mobile */
@media (max-width: 768px) {
  .social-icons {
    justify-content: center;
    margin-top: 1rem;
  }
}