/* ============================================================
   base.css
   The original hand-written stylesheet, plus its responsive companion.
   
   Loaded first, so everything here is the lowest layer of the cascade and
   much of it is superseded by atelier.css. It is kept intact for now: the
   Phase 3 merge deliberately changed no rules, so that anything that did
   change could only have come from the pruning that follows it.
   
   Was styles.css + responsive.css. Concatenated in load order, so the
   cascade is unchanged.
   ============================================================ */

/* Self-hosted, latin subset of both variable fonts (from Google Fonts), so
   first paint doesn't wait on a third-party stylesheet. The HTML preloads
   the two upright files; the italic is only used below the fold. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Universal font settings */
*, 
*::before, 
*::after,
input, 
textarea, 
button, 
select, 
option,
::placeholder,
input::placeholder,
textarea::placeholder {
  font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: 'Outfit', 'Segoe UI', Arial, sans-serif;
  background: #f9f9f9;
  color: #222;
  font-size: 18px;  /* Increased from 16px */
  line-height: 1.6;  /* Slightly increased for better readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Scale */

h2 {
  font-size: 2.3rem;  /* Increased from 2rem */
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 1.2rem;  /* Increased bottom margin */
}

h3 {
  font-size: 2rem;  /* Increased from 1.75rem */
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 1rem;  /* Increased bottom margin */
}

h4 {
  font-size: 1.75rem;  /* Increased from 1.5rem */
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 0.875rem;  /* Increased bottom margin */
}

p, li, td, th, label, input, textarea, button, select {
  font-size: 1.1rem;  /* Increased from 1rem */
  line-height: 1.6;  /* Increased from 1.5 */
  font-weight: 400;
  margin-bottom: 1.1rem;  /* Added bottom margin for better paragraph spacing */
}

/* Navigation */
.nav-links {
  font-size: 1.2rem;  /* Increased from 1.1rem */
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Buttons */
.btn, .btn-primary, .btn-outline {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Logo */
.logo {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* Section Titles */

/* Form Elements */
input, textarea, select {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Links */
a {
  color: #2a7ae2;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #185a9d;
  text-decoration: underline;
}


.navbar {
  background: #fff;
  border-bottom: 1px solid #e6e9ef;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.4rem 0;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  height: auto;
  min-height: 64px;
}

.logo {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -1px;
  color: #222;
  user-select: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.2rem;
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  font-weight: 400;
}

/* Dropdown styles for Projects menu */
.dropdown {
  position: relative;
}

.dropbtn {
  cursor: pointer;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  z-index: 200;
  border-radius: 6px;
  top: 120%;
  left: 0;
  padding: 0.5rem 0;
}

.dropdown-content a {
  color: #222;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  display: block;
  font-size: 0.97rem;
  border-bottom: none;
  transition: background 0.2s, color 0.2s;
}

.dropdown-content a:hover {
  background: #f0f4fa;
  color: #2a7ae2;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Keep nav link highlight on dropdown parent */
.dropdown:hover > .dropbtn,
.dropdown:focus-within > .dropbtn {
  color: #2a7ae2;
  border-bottom: 2px solid #2a7ae2;
}

/* Ensure the dropdown items have proper spacing and alignment */
.dropdown-content a {
  padding: 10px 15px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.nav-links li a {
  text-decoration: none;
  color: #222;
  font-weight: 400;
  transition: color 0.2s, border-bottom 0.2s;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.nav-links li a:hover {
  color: #2a7ae2;
  border-bottom: 2px solid #2a7ae2;
}

/* Mobile Navigation Toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1001;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
  background: transparent;
}

.menu-icon {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  background: #2a7ae2;
  margin: 0 auto;
  transition: all 0.3s ease;
  pointer-events: none;
}

.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2a7ae2;
  transition: all 0.3s ease;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  bottom: -8px;
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* Hide from visual users but keep accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-toggle:focus {
  outline: 2px solid #2a7ae2;
  outline-offset: 2px;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(42, 122, 226, 0.3);
}

.menu-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(42, 122, 226, 0.25);
}

.drawer-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  z-index: 1001;
  display: none;
}

.drawer-close-btn:focus {
  outline: 2px solid #2a7ae2;
  outline-offset: 2px;
  border-radius: 4px;
}

.drawer-overlay {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
  display: none;
}


.section {
  padding: 2.2rem 0 1.2rem 0;
}

h1, h2, h3 {
  color: #2a7ae2;
}

h1, .home-title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: 0.3rem;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
h2, .about-title, .skills-title, .projects-title, .education-title, .contact-title {
  font-size: 2rem !important;
  font-weight: 800;
  color: #2a7ae2;
  margin-bottom: 0.3rem;
  text-align: center;
  letter-spacing: 0.5px;
  position: relative;
}

.btn, .btn-primary, .btn-outline, .scroll-top-btn {
  font-size: 1rem !important;
  font-weight: 600;
  padding: 0.6rem 1.3rem !important;
  border-radius: 25px !important;
  margin: 0.2rem 0.4rem 0.2rem 0 !important;
  outline: none;
  box-shadow: none;
  transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn:focus, .btn-primary:focus, .btn-outline:focus, .scroll-top-btn:focus {
  outline: 2px solid #2a7ae2 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #a259ff33 !important;
}
.btn-primary:hover, .scroll-top-btn:hover {
  background: #185a9d;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px #2a7ae233;
}
.btn-outline:hover {
  color: #fff;
  background: #2a7ae2;
  border-color: #2a7ae2;
  box-shadow: 0 4px 16px #2a7ae233;
  transform: translateY(-2px) scale(1.04);
}


.contact-form input, .contact-form textarea {
  padding: 0.75rem;
  border: 1px solid rgba(42, 122, 226, 0.5) !important;
  border-radius: 5px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  box-shadow: 0 0 2px rgba(42, 122, 226, 0.1);
  outline: 1px solid rgba(42, 122, 226, 0.3) !important;
  color: #666 !important;
}

.contact-form button {
  background: #2a7ae2;
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: 1px solid rgba(42, 122, 226, 0.4) !important;
  border-color: #a259ff !important;
  box-shadow: 0 0 4px rgba(42, 122, 226, 0.2);
  background: rgba(255, 255, 255, 1);
  color: #333 !important;
}

.contact-form input:hover, .contact-form textarea:hover {
  outline: 1px solid rgba(42, 122, 226, 0.4) !important;
  border-color: #a259ff !important;
  box-shadow: 0 0 3px rgba(42, 122, 226, 0.15);
  color: #333 !important;
}

.contact-form button:hover {
  background: #185a9d;
}

@media (max-width: 900px) {
  .nav-links {
    gap: 1.2rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  
  .nav-links {
    gap: 0.7rem;
    font-size: 0.75rem;
  }
  
}

/* About Me Section */

/* Home Section */
.home-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding-top: 60px;
  display: flex;
  align-items: center;
}
.home-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 0 0 7rem 0;
  min-height: 60vh;
  position: relative;
  z-index: 1;
}
.home-left {
  flex: 1 1 350px;
  min-width: 260px;
}
.home-desc {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 1.1rem;
  max-width: 520px;
  font-weight: 500;
  line-height: 1.7;
}
.btn-primary:hover {
  background: #185a9d;
}

.btn-outline:hover {
  color: #fff;
  background: #2a7ae2;
  border-color: #2a7ae2;
  box-shadow: 0 8px 24px rgba(42, 122, 226, 0.18), 0 1.5px 6px rgba(42,122,226,0.10);
  transform: translateY(-4px) scale(1.06);
}
.home-right {
  flex: 0 0 320px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
}

.home-photo:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@keyframes photoReveal {
  0% { opacity: 0; transform: scale(0.9) rotate(-5deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes photoFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-8px) scale(1.02) rotate(1deg); }
}

.home-photo:hover {
  transform: scale(1.15) translateY(-5px) rotateZ(-1deg);
  box-shadow: 0 20px 40px rgba(42,122,226,0.3), 0 8px 16px rgba(0,0,0,0.15);
  filter: brightness(1.1) saturate(1.2);
  z-index: 10;
}

@media (max-width: 900px) {
  .home-right {
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 600px) {
}

/* Skills & Expertise Section */
@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.skills-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f5ff 50%, #f8f4ff 100%);
  position: relative;
  overflow: hidden;
}

.skills-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(42, 122, 226, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.skills-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(162, 89, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}








body.dark-theme .project-card::before {
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #60a5fa);
}

/* Responsive styles */

.skills-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: linear-gradient(135deg, #2a7ae2 0%, #a259ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 20px rgba(42, 122, 226, 0.2);
}
/* Featured Projects Section */
.projects-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

.projects-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 122, 226, 0.3), transparent);
}

.case-studies-section {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 50%, #f0f7ff 100%);
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  position: relative;
  overflow: hidden;
}

.case-studies-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60vh;
  height: 120vh;
  background: radial-gradient(circle, rgba(42, 122, 226, 0.08) 0%, rgba(162, 89, 255, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.case-studies-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50vh;
  height: 100vh;
  background: radial-gradient(circle, rgba(162, 89, 255, 0.08) 0%, rgba(42, 122, 226, 0.04) 50%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.case-studies-section .container {
  position: relative;
  z-index: 1;
}
.projects-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  color: #181c24;
  background: linear-gradient(135deg, #2a7ae2 0%, #a259ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  position: relative;
  display: inline-block;
  width: 100%;
}

.projects-subtitle {
  text-align: center;
  color: #64748b;
  font-size: 1.15rem;
  margin-bottom: 3rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.projects-cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  justify-items: stretch;
  align-items: stretch;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.project-card {
  background: var(--card-bg, #fff);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(42,122,226,0.07), 0 2px 8px rgba(0,0,0,0.04);
  padding: 1.4rem 1.8rem 1.3rem 1.8rem;
  min-width: 0;
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(42, 122, 226, 0.08);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2a7ae2, #a259ff, #2a7ae2);
  transform: scaleX(0);
  transition: transform 0.5s ease;
  transform-origin: left;
}

.project-card:hover::before {
  transform: scaleX(1);
}

/* Interactive Project Cards */

.project-front {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #333;
  padding: 1.8rem 1.5rem;
  transform: translateY(100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 3;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}


.project-actions-content {
  text-align: center;
}

.project-actions h4 {
  margin: 0 0 1.25rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 0.5rem;
}

.project-actions h4:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}


.btn, .project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg, var(--primary-color));
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: none;
  outline: none;
  gap: 8px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.btn::before, .project-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: inherit;
}

.btn:hover::before, .project-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn:active, .project-btn:active {
  transform: translateY(2px) scale(0.98);
  transition: transform 0.1s ease;
}

.project-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: var(--btn-bg, var(--primary-color));
  color: #333;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.interactive-card:hover .project-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * 0.1s);
}

.project-btn i {
  transition: transform 0.3s ease;
}

.project-btn:hover i {
  transform: translateX(3px);
}

.project-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.code-btn {
  background: linear-gradient(45deg, #2a7ae2, #5d9cec);
  --i: 1;
}

.live-btn {
  background: linear-gradient(45deg, #a259ff, #6c5ce7);
  --i: 2;
}

.project-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: #ffe6f0;
}

.project-btn:hover::before {
  opacity: 0.9;
}

.project-btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* Hover Effects */
.interactive-card:hover .project-front {
  transform: translateY(-60px);
}

.interactive-card:hover .project-actions {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

body.dark-theme .interactive-card:hover .project-actions {
  background: rgba(25, 30, 45, 0.98);
}

/* Project cards: lift on hover */
.projects-section .interactive-card:hover,
.case-studies-section .interactive-card:hover,
#design-projects .interactive-card:hover,
#technical-projects .interactive-card:hover {
  box-shadow: 0 12px 40px rgba(42,122,226,0.18), 0 4px 16px rgba(162, 89, 255, 0.1);
  transform: translateY(-8px) scale(1.02);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.project-card:nth-child(1):hover {
  box-shadow: 0 8px 32px rgba(34,181,115,0.18);
  background: #e6ffe6;
  transform: translateY(-8px) scale(1.025);
  z-index: 2;
}
.project-card:nth-child(2):hover {
  box-shadow: 0 8px 32px rgba(162,89,255,0.18);
  background: #f8e6ff;
  transform: translateY(-8px) scale(1.025);
  z-index: 2;
}
.project-card:nth-child(3):hover {
  box-shadow: 0 8px 32px rgba(232,67,147,0.18);
  background: #ffe6f0;
  transform: translateY(-8px) scale(1.025);
  z-index: 2;
}

.project-meta {
  margin: 0.5rem 0 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.project-meta-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.project-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #2a7ae2;
  background-color: rgba(42, 122, 226, 0.1);
  border: 1px solid rgba(42, 122, 226, 0.2);
  transition: all 0.2s ease;
  height: 24px;
  box-sizing: border-box;
}

/* Dark theme styles for project tags */

/* Hover effects */
.project-tag:hover {
  background-color: rgba(42, 122, 226, 0.15);
  transform: translateY(-1px);
}

body.dark-theme .project-tag:hover {
  background-color: rgba(96, 165, 250, 0.15);
}

/* Adjust project category spacing */
.project-category {
  margin-right: 4px;
}


/* Force all project categories to blue */
.project-title, .project-desc {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.project-title {
  font-size: 1.01rem;
  font-weight: 700;
  color: #181c24;
  margin-bottom: 0.2rem;
}
.project-desc {
  color: #444;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
/* Case Study Card */

@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
}



.home-btns {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  width: 100%;
}
.form-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin-bottom: 1.1rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.form-group input,
.form-group textarea {
  padding: 0.7rem 1rem;
  border: 1px solid #ccc;
  border-radius: 7px;
  font-size: 1rem;
  background: #fff;
  margin-bottom: 0.1rem;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.form-btn {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  padding: 0.9rem 0;
}

/* Footer Section */
.footer-section {
  background: #181c24;
  color: #fff;
  padding-top: 1.2rem;
  padding-bottom: 0.3rem;
  position: relative;
  margin-top: 1.2rem;
}

.scroll-top-btn {
  position: fixed;
  right: 2.2rem;
  bottom: 2.2rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2a7ae2;
  color: #fff;
  border: none;
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgba(42,122,226,0.13);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.scroll-top-btn:hover {
  background: #185a9d;
}

/* Generic hover effect for all project cards (fallback for cards beyond the third) */
.project-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 6px 18px 0 rgba(42,122,226,0.13), 0 0 12px 3px #a259ff22, 0 1.5px 6px rgba(42,122,226,0.08);
  background: linear-gradient(120deg, #f7fafd 70%, #e3f0fc 100%) !important;
  z-index: 2;
  transition: box-shadow 0.32s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.4,0,.2,1), background 0.32s;
}

/* Ensure all project cards use the main blue color on hover for consistency */
.projects-cards-row .project-card:hover {
  background: #e3f0fc !important;
}

/* Theme Toggle Button - Compact & Enhanced */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 52px;
  height: 26px;
  background: linear-gradient(135deg, #2a7ae2 60%, #7bb6ff 100%);
  border: 2px solid #2a7ae2;
  border-radius: 20px;
  margin: 0 0 0 1rem;
  box-shadow: 0 2px 6px rgba(42,122,226,0.12), inset 0 1px 2px rgba(255,255,255,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  padding: 0;
  position: relative;
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 122, 226, 0.3);
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(42,122,226,0.15), inset 0 1px 2px rgba(255,255,255,0.1);
}

.theme-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(42,122,226,0.15), inset 0 1px 2px rgba(0,0,0,0.1);
}

.theme-toggle-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: -1px;
}

.theme-toggle-btn #theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Light mode: icon on left */
.theme-toggle-icon-wrapper {
  transform: translateX(0);
}

/* Dark mode styles */

body.dark-theme .theme-toggle-icon-wrapper {
  transform: translateX(22px);
  background: #2a7ae2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

body.dark-theme #theme-toggle-icon {
  color: #fff;
}

.drawer-theme-toggle-li {
  margin-left: 0.5rem;
}

/* Light (Day) Theme (default) */
body {
  background: #f7fafd;
  color: #181c24;
  transition: background 0.3s, color 0.3s;
}

/* Dark Theme */
body.dark-theme .navbar,
body.dark-theme .footer-section,
body.dark-theme .section {
  background: #23293a !important;
  color: #f7fafd !important;
}
body.dark-theme .nav-links li a:hover {
  color: #2a7ae2;
}
body.dark-theme .btn-outline:hover {
  background: #2a7ae2;
  color: #fff;
}
body.dark-theme .project-card:hover {
  background: #2a7ae2 !important;
  color: #fff !important;
}
body.dark-theme .form-btn:hover {
  background: #185a9d;
}

/* Certifications heading is styled in atelier.css */

/* Success message styles */
.success-message {
  color: #28a745; /* Green color for success */
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 15px 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

/* Dark theme overrides */
body.dark-theme .success-message {
  color: #d4edda;
  background-color: #1a3c27;
  border-color: #2a6e3d;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fun facts */


@media (max-width: 768px) {
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    padding: 5rem 2rem 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    margin: 0;
    gap: 0;
  }
  
  
  
  
  
  
}

@media (max-width: 600px) {
  
}

/* Project, Education, Contact, Footer: Stack and pad on mobile */
@media (max-width: 768px) {
  .projects-cards-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 1.2rem !important;
    padding: 0 0.5rem !important;
  }
  .project-card {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 auto 1.2rem auto !important;
  }
}

/* General: Prevent overflow, fix font sizes */
@media (max-width: 600px) {
  .section {
    padding: 0.7rem 0 0.3rem 0 !important;
  }
} 

/* Make about section text larger for readability */
.about-section p {
  font-size: 1rem;
  line-height: 1.7;
}

/* Section Headings & Subtitles Polished */
.projects-subtitle {
  font-size: 1.13rem;
  color: #888;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1px;
}
@media (max-width: 700px) {
  .projects-subtitle {
    font-size: 0.98rem !important;
  }
}

body.dark-theme .project-meta,
body.dark-theme .project-category {
  color: #e3f0fc !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
@media (max-width: 800px) {
  body.dark-theme .nav-links.open li a {
    color: #fff !important;
  }
}

@media (max-width: 800px) {
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 32px rgba(42, 122, 226, 0.2), 0 2px 16px rgba(162, 89, 255, 0.13);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 1.5rem 2rem;
    margin: 0;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
    z-index: 2000;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  
  .nav-links li {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
  }
  
  
  .nav-links > li > a:hover,
  .nav-links > li > a:focus {
    color: #2a7ae2;
    background: rgba(42, 122, 226, 0.08);
    outline: none;
  }
  
  
  .dropdown > a::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  
  .dropdown > a[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(225deg);
  }
  
  .dropdown-content {
    position: static !important;
    display: none;
    width: 100% !important;
    box-shadow: none !important;
    background: rgba(42, 122, 226, 0.05) !important;
    border-radius: 8px;
    padding: 0.25rem 0.5rem !important;
    margin: 0.25rem 0 0.5rem 0 !important;
    list-style: none;
  }
  
  .dropdown-content.show {
    display: block;
  }
  
  .dropdown-content a {
    display: block;
    padding: 0.7rem 1rem !important;
    font-size: 1rem !important;
    color: #555 !important;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .dropdown-content a:hover,
  .dropdown-content a:focus {
    background: rgba(42, 122, 226, 0.1) !important;
    color: #2a7ae2 !important;
    outline: none;
  }
  
  .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
  }
  
  .nav-links > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 500;
    color: #181c24 !important;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.2px;
    text-decoration: none;
    position: relative;
  }
  .nav-links > li > a:hover,
  .nav-links > li > a:focus,
  .nav-links > li > a[aria-expanded="true"] {
    background: #e3f0fc;
    color: #2a7ae2 !important;
    outline: none;
  }
  .menu-toggle {
    position: fixed;
    top: 1.2rem;
    right: 1.5rem;
    z-index: 2100;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(42, 122, 226, 0.2);
    padding: 0.6rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
  }
  .menu-toggle:focus {
    outline: 2px solid #2a7ae2;
    box-shadow: 0 0 0 3px rgba(42, 122, 226, 0.3);
  }
  
  .menu-toggle:active {
    transform: scale(0.96);
  }
  /* Dark theme styles for mobile navigation */
  
  
  body.dark-theme .nav-links > li > a:hover,
  body.dark-theme .nav-links > li > a:focus,
  body.dark-theme .nav-links > li > a[aria-expanded="true"] {
    background: rgba(42, 122, 226, 0.2) !important;
    color: #5fa3ff !important;
  }
  
  
  
  body.dark-theme .dropdown-content a:hover,
  body.dark-theme .dropdown-content a:focus {
    background: rgba(42, 122, 226, 0.25) !important;
    color: #5fa3ff !important;
  }
  
  
  body.dark-theme .menu-toggle:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  
}

@media (max-width: 800px) {.drawer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(24,28,36,0.32);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open ~ .drawer-overlay {
    opacity: 1;
    pointer-events: all;
  }
}

@media (max-width: 800px) {.drawer-close-btn-li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
  }
  .drawer-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 2rem;
    background: #23293a;
    color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px #2a7ae255;
    margin: 0 0 0.5rem 0;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    z-index: 2101;
  }
  .drawer-close-btn:hover, .drawer-close-btn:focus {
    background: #2a7ae2;
    color: #fff;
    box-shadow: 0 4px 16px #2a7ae233;
    outline: 2px solid #2a7ae2;
  }
}
@media (min-width: 801px) {
}

@media (max-width: 800px) {
  .drawer-close-btn-li {
    display: none;
  }
  .nav-links.open .drawer-close-btn-li {
    display: flex;
  }
}
@media (min-width: 801px) {.menu-toggle, .drawer-close-btn, .drawer-close-btn-li {
    display: none !important;
  }
}

@media (max-width: 800px) {.nav-links {
    background: linear-gradient(135deg, #23293a 60%, #2a7ae2 100%) !important;
    box-shadow: -8px 0 32px #2a7ae244, 0 2px 16px #a259ff22;
    border-right: 2px solid #2a7ae2;
    backdrop-filter: blur(12px) saturate(1.2);
    animation: drawerSlideIn 0.45s cubic-bezier(.4,0,.2,1);
    transition: background 0.3s, box-shadow 0.3s;
  }
  .nav-links li a {
    transition: background 0.18s, color 0.18s, transform 0.18s;
  }
  .nav-links li a:hover, .nav-links li a:focus {
    background: rgba(42,122,226,0.13);
    color: #7bb6ff !important;
    transform: translateX(4px) scale(1.04);
  }
  .drawer-theme-toggle-li .theme-toggle-btn {
    box-shadow: 0 2px 12px #2a7ae244;
    background: linear-gradient(90deg, #2a7ae2 60%, #7bb6ff 100%) !important;
    color: #fff !important;
    font-weight: 600;
    border: none;
    transition: background 0.18s, color 0.18s, transform 0.18s;
  }
  .drawer-theme-toggle-li .theme-toggle-btn:active {
    transform: scale(0.97);
    background: linear-gradient(90deg, #185a9d 60%, #7bb6ff 100%) !important;
  }
  .drawer-theme-toggle-li .theme-toggle-btn:hover, .drawer-theme-toggle-li .theme-toggle-btn:focus {
    background: linear-gradient(90deg, #7bb6ff 60%, #2a7ae2 100%) !important;
    color: #23293a !important;
  }
}

@keyframes drawerSlideIn {
  from {
    transform: translateX(-60px) scale(0.98);
    opacity: 0.2;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 600px) {html, body {
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .container,
  .section,
  .home-container,
  .home-left,
  .home-right {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .project-desc {
    font-size: 1rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    padding: 0.7rem 0.5rem !important;
    box-sizing: border-box !important;
  }


  .projects-cards-row {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
    width: 100% !important;
  }

  .btn,
  .btn-outline,
  .btn-primary {
    width: 100% !important;
    font-size: 1rem !important;
    margin: 0.3rem 0 !important;
    padding: 0.7rem 0 !important;
    box-sizing: border-box !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

}

/* ====== ANIMATIONS & INTERACTIONS ====== */
/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Fade In Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Project Card Hover Effects */

.btn, .btn-outline, .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.project-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 1.2rem;
}

@media (max-width: 768px) {.project-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .project-btn {
    width: 80%;
    max-width: 200px;
  }
}

/* ------------------------------------------------------------
   Subtle animations (cute, not overdone)
   ------------------------------------------------------------ */

/* Section reveal — visible by default when JS is disabled */

/* Ensure hero doesn't start hidden */

/* Gentle hero intro (stagger) */
body:not(.page-loaded) .home-left > * {
  opacity: 0;
  transform: translateY(10px);
}

body.page-loaded .home-left > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.page-loaded .home-left > :nth-child(1) { transition-delay: 0ms; }
body.page-loaded .home-left > :nth-child(2) { transition-delay: 80ms; }
body.page-loaded .home-left > :nth-child(3) { transition-delay: 160ms; }
body.page-loaded .home-left > :nth-child(4) { transition-delay: 240ms; }
body.page-loaded .home-left > :nth-child(5) { transition-delay: 320ms; }

/* Soft glow on interactive cards */

.interactive-card:hover,
.interactive-card:focus-within {
  filter: saturate(1.03);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {html {
    scroll-behavior: auto !important;
  }

  .section,
  .section.visible,
  body.page-loaded .home-left > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Portfolio Lock Screen */
.portfolio-lock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #f3eee4;
  overflow: hidden;
}





.unlock-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.form-group {
  position: relative;
}

.portfolio-lock .form-group input {
  width: 100%;
  color: #1a1713;
  transition: all 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #999999 !important;
}

.portfolio-lock .form-group input:focus {
  outline: none;
}

.portfolio-lock .unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  background: transparent;
  border: 1.5px solid #1a1713;
  border-radius: 999px;
  padding: 0.95rem 1.25rem;
  color: #1a1713;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  position: relative;
  overflow: hidden;
  margin-top: 0.15rem;
  box-shadow: none;
}

.portfolio-lock .unlock-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #1a1713;
  color: #f3eee4;
  filter: none;
}

.portfolio-lock .unlock-btn:active:not(:disabled) {
  transform: translateY(0);
}

.portfolio-lock .unlock-btn:disabled {
  opacity: 0.85;
  cursor: wait;
}

.btn-loader {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* ============================================================
   was responsive.css
   Breakpoint overrides for the rules above. Note this file brings its own
   set of breakpoints, which do not agree with those used elsewhere --
   unifying them is Phase 4.
   ============================================================ */

/* Enhanced Responsive CSS for All Devices */

/* ===== MOBILE FIRST APPROACH ===== */

/* Extra Small Devices (320px - 575px) */
@media (max-width: 575px) {/* Better project cards for very small screens */
  
  /* Improve navigation for very small screens */
  
  /* Better home section for very small screens */
  
  
  
  /* Better project cards */
  
  
  
  /* Base Typography */
  
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* Navigation */
  .navbar {
    padding: 0.75rem 1rem;
    position: relative;
    z-index: 1000;
  }
  
  
  
  
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 300px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    transition: right 0.3s ease-in-out, visibility 0s linear 0.3s;
    z-index: 1000;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
  }
  
  .nav-links.open {
    right: 0;
    visibility: visible;
    transition: right 0.3s ease-in-out, visibility 0s;
  }
  
  
  
  
  
  .drawer-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }
  
  .drawer-overlay.visible {
    opacity: 1;
    visibility: visible;
  }
  
  /* Home Section */
  .home-section {
    padding: 5rem 0 3rem;
    min-height: auto;
    position: relative;
    z-index: 1;
  }
  
  
  
  
  
  .home-desc {
    font-size: 0.95rem;
    margin-bottom: 2rem;
    display: block !important;
    visibility: visible !important;
  }
  
  
  .btn {
    width: 100%;
    max-width: 250px;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
  
  
  
  /* About Section */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Projects Section */
  
  
  
  
  
  .project-meta {
    margin-bottom: 1rem;
  }
  
  
  
  
  
  .project-desc ul {
    padding-left: 1.2rem;
  }
  
  .project-desc li {
    margin-bottom: 0.5rem;
  }
  
  
  
  /* Skills Section */
  
  
  /* Experience Section */

  
  
  /* Education Section */
  
  
  /* Contact Section */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Footer */
  
  
  
  
  /* Portfolio Lock */

  .unlock-form {
    width: 100%;
  }

}

/* Small Devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  
  /* Project cards for small tablets */
  
  
  /* Navigation improvements */
  
  /* Home section responsive */
  .home-container {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  
}

/* ===== MEDIUM DEVICES (768px - 991px) - TABLETS ===== */
@media (min-width: 768px) and (max-width: 991px) {
  
  /* Project cards for tablets */
  
  
  /* Better spacing for sections */
  .section {
    padding: 4rem 0;
  }
  
  /* Navigation adjustments */
  .nav-links {
    padding: 5rem 2rem 2rem;
  }
  
  .home-left {
    flex: 1;
    text-align: left;
  }
  
  .home-right {
    width: 250px;
    height: 250px;
  }
  
  
  
  
  
  
  
  .projects-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  /* Maintain original project title size for tablets and desktop */
}

/* ===== LARGE DEVICES (992px - 1199px) ===== */
@media (min-width: 992px) and (max-width: 1199px) {
  
  
  /* Better home section layout */
  
  /* Maintain original project title size for desktop */
}

/* ===== EXTRA LARGE DEVICES (1200px and up) ===== */
@media (min-width: 1200px) {.projects-cards-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Maintain original project title size for large desktop */
}

/* ===== LANDSCAPE ORIENTATIONS ===== */
@media (max-height: 500px) and (orientation: landscape) {/* Better landscape layout */
  .portfolio-lock .atelier-gate {
    padding: 1.15rem 1.35rem;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }

  .portfolio-lock .lock-subtitle {
    margin-bottom: 1rem;
  }

  .home-container {
    flex-direction: row;
    gap: 2rem;
  }
  
  .projects-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .section {
    padding: 2rem 0;
  }

  .home-section {
    padding: 2rem 0;
  }
  
  .navbar {
    padding: 0.5rem 1rem;
  }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.home-photo {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {* {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Container width + heading scale: defined further up this file and at the top
   of atelier.css (avoids Bootstrap-style overrides breaking this design) */

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive iframes */
iframe,
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

/* Responsive tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

/* Responsive utilities */

/* ===== UNIFIED RESPONSIVE OVERRIDES (final pass) ===== */

@media (max-width: 767px) {.home-right {
    flex: none;
    width: min(220px, 58vw);
    height: min(220px, 58vw);
    margin: 0 auto;
  }

  .home-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .home-btns {
    width: 100%;
    align-items: stretch;
  }

  .home-btns .btn {
    max-width: 100%;
    width: 100%;
  }

  

  

  


  

  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }


  

  

  .scroll-top-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .portfolio-lock .unlock-form input,
  .portfolio-lock #visitor-name {
    font-size: 1rem;
    min-height: 44px;
    padding: 0.55rem 0;
  }

  .portfolio-lock .unlock-btn {
    min-height: 44px;
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
  }

  

  

  

  

  

  

  
}

@media (max-width: 575px) {.menu-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  

  .navbar-container > .theme-toggle-btn {
    display: none;
  }


  .projects-subtitle {
    padding: 0 0.25rem;
    font-size: 0.92rem;
    line-height: 1.55;
  }
}

@media (max-width: 380px) {


}

/* Print styles */
@media print {*,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}