/* ============================================
   THE PROBLEM SOLVERS - MODERN UI STYLESHEET
   A beginner-friendly CSS file with extensive comments
   ============================================ */

/* ============================================
   TABLE OF CONTENTS
   1. CSS Variables (Design System)
   2. Base Styles & Reset
   3. Typography
   4. Layout Components
      - Navigation
      - Hero Section
      - Cards & Carousels
      - Modals
      - Forms
      - Footer
   5. Animations & Utilities
   6. Responsive Design (Mobile First)
   ============================================ */


/* ============================================
   1. CSS VARIABLES (DESIGN SYSTEM)
   ============================================
   CSS Variables (also called Custom Properties) let you store values
   that you can reuse throughout your stylesheet. This makes it easy
   to maintain consistent colors, spacing, etc. across your entire site.
   
   Usage: var(--variable-name)
   Example: color: var(--primary-color);
*/

:root {
  /* === COLOR PALETTE === */
  /* Primary colors - main brand colors used for buttons, links, highlights */
  --primary-color: #6366f1;        /* Vibrant indigo - main brand color */
  --primary-dark: #4f46e5;         /* Darker indigo for hover states */
  --primary-light: #818cf8;        /* Lighter indigo for subtle accents */
  
  /* Secondary colors - complementary colors for variety */
  --secondary-color: #06b6d4;      /* Cyan - fresh, modern accent */
  --secondary-dark: #0891b2;       /* Darker cyan */
  --secondary-light: #22d3ee;      /* Lighter cyan */
  
  /* Accent colors - for special elements that need to stand out */
  --accent-color: #8b5cf6;         /* Purple - special highlights */
  --accent-pink: #ec4899;          /* Pink - for attention-grabbing elements */
  
  /* Gradients - modern gradient combinations for backgrounds */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-hero: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #8b5cf6 100%);
  --gradient-card: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  
  /* Neutral colors - grays for text, backgrounds, borders */
  --text-dark: #1f2937;            /* Very dark gray - main text */
  --text-medium: #4b5563;          /* Medium gray - secondary text */
  --text-light: #6b7280;           /* Light gray - subtle text */
  --white: #ffffff;                /* Pure white */
  --black: #000000;                /* Pure black */
  
  /* Background colors */
  --bg-primary: #ffffff;           /* Main background (white) */
  --bg-secondary: #f9fafb;         /* Light gray background for sections */
  --bg-dark: #111827;              /* Dark background for navbar/footer */
  --bg-overlay: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
  
  /* Glassmorphism colors - for modern frosted glass effect */
  --glass-bg: rgba(255, 255, 255, 0.15);      /* Semi-transparent white */
  --glass-border: rgba(255, 255, 255, 0.2);   /* Subtle border */
  --glass-shadow: rgba(0, 0, 0, 0.1);         /* Soft shadow */
  
  /* === SPACING SCALE === */
  /* Consistent spacing values for padding and margin */
  --space-xs: 0.5rem;      /* 8px - tiny spaces */
  --space-sm: 1rem;        /* 16px - small spaces */
  --space-md: 1.5rem;      /* 24px - medium spaces */
  --space-lg: 2rem;        /* 32px - large spaces */
  --space-xl: 3rem;        /* 48px - extra large spaces */
  --space-2xl: 4rem;       /* 64px - huge spaces */
  --space-3xl: 6rem;       /* 96px - massive spaces */
  
  /* === TYPOGRAPHY === */
  /* Font families */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font sizes - using a modular scale for harmony */
  --text-xs: 0.75rem;      /* 12px - very small text */
  --text-sm: 0.875rem;     /* 14px - small text */
  --text-base: 1rem;       /* 16px - base text size */
  --text-lg: 1.125rem;     /* 18px - slightly larger */
  --text-xl: 1.25rem;      /* 20px - large text */
  --text-2xl: 1.5rem;      /* 24px - headings */
  --text-3xl: 2rem;        /* 32px - big headings */
  --text-4xl: 2.5rem;      /* 40px - hero text */
  --text-5xl: 3rem;        /* 48px - huge hero text */
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line heights - for readable text */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  
  /* === BORDERS & RADIUS === */
  --radius-sm: 0.375rem;   /* 6px - small rounded corners */
  --radius-md: 0.5rem;     /* 8px - medium rounded */
  --radius-lg: 0.75rem;    /* 12px - large rounded */
  --radius-xl: 1rem;       /* 16px - extra rounded */
  --radius-full: 9999px;   /* Fully rounded (pills, circles) */
  
  /* === SHADOWS === */
  /* Box shadows for depth - from subtle to dramatic */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.4);  /* Glowing effect */
  
  /* === ANIMATION TIMINGS === */
  /* Transition durations - how long animations take */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  
  /* Easing functions - how animations accelerate/decelerate */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);     /* Smooth start and end */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* Quick start, slow end */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* Slow start, quick end */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy effect */
  
  /* === Z-INDEX LAYERS === */
  /* Controls stacking order of elements */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-tooltip: 2000;
}


/* ============================================
   2. BASE STYLES & RESET
   ============================================
   These styles reset browser defaults and create
   a consistent foundation across all browsers.
*/

/* Universal reset - removes default spacing from all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* Makes padding/border included in width/height */
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Base body styles */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-dark);
  background: var(--bg-primary);
  overflow-x: hidden;  /* Prevents horizontal scroll */
  -webkit-font-smoothing: antialiased;  /* Better font rendering on Mac */
  -moz-osx-font-smoothing: grayscale;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove list styles */
ul, ol {
  list-style: none;
}

/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
}


/* ============================================
   3. TYPOGRAPHY
   ============================================
   Heading and text styles with proper hierarchy
*/

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--line-height-tight);
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

h1 {
  font-size: var(--text-5xl);
  background: var(--gradient-primary);
  -webkit-background-clip: text;  /* Clips background to text */
  -webkit-text-fill-color: transparent;  /* Makes text transparent to show gradient */
  background-clip: text;
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-2xl);
}

p {
  margin-bottom: var(--space-md);
  color: var(--text-medium);
  line-height: var(--line-height-relaxed);
}


/* ============================================
   4. LAYOUT COMPONENTS
   ============================================ */

/* === NAVIGATION BAR === */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 5%;
  background: var(--bg-dark);
  position: sticky;        /* Sticks to top when scrolling */
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(10px);  /* Blur effect for modern look */
  transition: all var(--transition-base) var(--ease-in-out);
}

/* Logo text styling */
.logo {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--white);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
}

/* Navigation links container */
.nav-links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

/* Individual nav link styling */
.nav-links a {
  color: var(--white);
  font-weight: var(--font-medium);
  position: relative;  /* Needed for the animated underline */
  padding: var(--space-xs) 0;
  transition: color var(--transition-base) var(--ease-in-out);
}

/* Animated underline effect on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;           /* Starts with no width */
  height: 2px;
  background: var(--gradient-primary);
  transition: width var(--transition-base) var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;  /* Expands to full width on hover */
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-light);
}

/* Hamburger menu button (hidden on desktop, shown on mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 21px;
  cursor: pointer;
  z-index: var(--z-dropdown);
}

/* Hamburger menu bars */
.menu-toggle span {
  display: block;
  height: 3px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: all var(--transition-base) var(--ease-in-out);
}

/* Hamburger animation when menu is open */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(9px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;  /* Middle bar disappears */
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-9px);
}


/* === HERO SECTION === */
.hero {
  position: relative;
  height: 85vh;  /* 85% of viewport height */
  min-height: 600px;  /* Minimum height for small screens */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  overflow: hidden;
  background: var(--bg-dark);
}

/* Background video styling */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Fills container without distortion */
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Dark overlay on video for better text readability */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(79, 70, 229, 0.7) 0%,
    rgba(6, 182, 212, 0.6) 50%,
    rgba(139, 92, 246, 0.7) 100%
  );
  z-index: 1;
}

/* Hero content sits above video and overlay */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  animation: fadeInUp 1s var(--ease-out);  /* Fade in animation on page load */
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 4rem);  /* Responsive font size */
  color: var(--white);
  margin-bottom: var(--space-md);
  -webkit-text-fill-color: var(--white);  /* Override gradient for hero */
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);  /* Subtle shadow for depth */
}

.hero-content h1 span {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;  /* Animated gradient */
}

.hero-content p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-xl);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}


/* === BUTTONS === */
.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--white);
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  position: relative;
  overflow: hidden;  /* Clips the pseudo-element animation */
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base) var(--ease-in-out);
}

/* Hover lift effect */
.btn:hover {
  transform: translateY(-3px);  /* Lifts button up */
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

/* Ripple effect on click (optional enhancement) */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  transition: width var(--transition-slow) ease, height var(--transition-slow) ease;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}


/* === SECTIONS === */
/* General section styling */
section {
  padding: var(--space-3xl) 5%;
}

/* Alternating background colors for visual interest */
.about-preview,
.carousel-section:nth-child(even) {
  background: var(--bg-secondary);
}

.about-preview {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.about-preview h2 {
  margin-bottom: var(--space-md);
}

.about-preview p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
}


/* === CAROUSELS === */
.carousel-section {
  text-align: center;
}

.carousel-section h2 {
  margin-bottom: var(--space-xl);
}

.carousel-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

/* Carousel scroll container */
.carousel {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;  /* Horizontal scrolling */
  scroll-behavior: smooth;
  padding: var(--space-lg);
  
  /* Hide scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.carousel::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* Individual carousel cards */
.carousel-card {
  flex: 0 0 280px;  /* Fixed width, doesn't grow or shrink */
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-in-out);
  box-shadow: var(--shadow-md);
  
  /* Glassmorphism effect */
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}

.carousel-card:hover {
  transform: translateY(-8px) scale(1.02);  /* Lift and slight zoom */
  box-shadow: var(--shadow-xl);
}

.carousel-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.carousel-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  color: var(--text-dark);
}

.carousel-card p {
  font-size: var(--text-sm);
  color: var(--text-light);
  margin: 0;
}

/* Carousel navigation buttons */
.carousel-container .prev,
.carousel-container .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--text-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-2xl);
  cursor: pointer;
  z-index: var(--z-base);
  transition: all var(--transition-base) var(--ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-container .prev {
  left: 0;
}

.carousel-container .next {
  right: 0;
}

.carousel-container .prev:hover,
.carousel-container .next:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-50%) scale(1.1);
}


/* === MODALS === */
.modal {
  display: none;  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);  /* Blur the background */
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-in-out);
}

/* Show modal with fade-in */
.modal.show {
  display: flex;
  opacity: 1;
}

/* Modal content box */
.modal-content {
  position: relative;
  background: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.3s var(--ease-bounce);
  
  /* Glassmorphism styling */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Close button */
.close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-medium);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast) var(--ease-in-out);
}

.close:hover {
  background: var(--bg-secondary);
  color: var(--primary-color);
  transform: rotate(90deg);  /* Rotate on hover */
}

.modal img {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--space-lg);
  border: 4px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  margin-bottom: var(--space-sm);
}

.modal p {
  margin-bottom: var(--space-md);
}

/* Know More button in modal */
.know-more {
  display: inline-block;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--gradient-primary);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  transition: all var(--transition-base) var(--ease-in-out);
}

.know-more:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}


/* === ABOUT PAGE === */
.about-hero {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  background: var(--gradient-primary);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

.about-hero h1 {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  margin-bottom: var(--space-md);
}

.about-hero p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* Our Story Section */
.about-story {
  padding: var(--space-3xl) 5%;
  text-align: center;
  background: var(--bg-secondary);
}

.about-story h2 {
  margin-bottom: var(--space-lg);
}

.about-story p {
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--text-lg);
}

/* Team Members on About Page */
.about-team {
  padding: var(--space-3xl) 5%;
}

.about-team h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.about-member {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base) var(--ease-in-out);
}

.about-member:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* Alternate layout for even members */
.about-member:nth-child(even) {
  flex-direction: row-reverse;
}

.about-member img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  border: 4px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.about-member .info {
  flex: 1;
}

.about-member h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--text-2xl);
}

.about-member .role {
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  margin: var(--space-xs) 0 var(--space-md);
  font-size: var(--text-lg);
}

.about-member p {
  color: var(--text-medium);
  margin: 0;
}

/* Social Links */
.social-links {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-md);
}

.social-links a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  color: var(--text-dark);
  font-size: var(--text-xl);
  transition: all var(--transition-base) var(--ease-in-out);
}

.social-links a:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-3px);
}


/* === PROJECTS PAGE === */
.projects-page {
  padding: var(--space-3xl) 5%;
  text-align: center;
  min-height: 60vh;
}

.projects-page h1 {
  margin-bottom: var(--space-md);
}

.projects-page p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2xl);
  color: var(--text-medium);
}

.projects-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.project-card {
  display: flex;
  gap: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  width: 100%;
  transition: all var(--transition-base) var(--ease-in-out);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.project-card img {
  width: 300px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

.project-info {
  padding: var(--space-xl);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-info h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.project-info p {
  margin-bottom: var(--space-lg);
}

/* Download buttons */
.download-buttons {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.download-buttons .btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-base);
}

.btn.playstore {
  background: linear-gradient(135deg, #34a853, #0f9d58);
}

.btn.ios {
  background: linear-gradient(135deg, #1d1d1f, #000000);
}

.btn.website {
  background: var(--gradient-primary);
}


/* === CONTACT PAGE === */
.contact-hero {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  background: var(--gradient-primary);
  color: var(--white);
}

.contact-hero h1 {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  margin-bottom: var(--space-md);
}

.contact-hero p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.9);
}

/* Contact Form */
.contact-form {
  max-width: 700px;
  margin: var(--space-3xl) auto;
  padding: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-form input,
.contact-form textarea {
  padding: var(--space-md);
  border: 2px solid var(--bg-secondary);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--text-base);
  transition: all var(--transition-base) var(--ease-in-out);
  background: var(--bg-secondary);
}

/* Focus state with glow effect */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.contact-form button {
  padding: var(--space-md) var(--space-xl);
  background: var(--gradient-primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-in-out);
}

.contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* Quick Actions */
.quick-actions {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.quick-actions h2 {
  margin-bottom: var(--space-xl);
}

.actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg-dark);
  color: var(--white);
  border-radius: var(--radius-xl);
  font-weight: var(--font-medium);
  transition: all var(--transition-base) var(--ease-in-out);
}

.quick-btn:hover {
  background: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}


/* === CALL TO ACTION SECTION === */
.cta {
  text-align: center;
  background: var(--gradient-primary);
  color: var(--white);
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite reverse;
}

.cta h2 {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  margin-bottom: var(--space-md);
}

.cta p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta .btn {
  background: var(--white);
  color: var(--primary-color);
  font-weight: var(--font-bold);
}

.cta .btn:hover {
  background: var(--bg-secondary);
}


/* === FOOTER === */
footer {
  text-align: center;
  padding: var(--space-xl);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
}


/* ============================================
   5. ANIMATIONS & UTILITIES
   ============================================
   Reusable animation classes and keyframes
*/

/* Fade in from bottom */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Gradient shift animation */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Utility class to fade in elements */
.fade-in {
  animation: fadeInUp 0.8s var(--ease-out);
}

/* Utility class to delay animations */
.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}


/* ============================================
   6. RESPONSIVE DESIGN (MOBILE FIRST)
   ============================================
   Media queries for different screen sizes
*/

/* Tablets and smaller (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }
  
  .carousel-card {
    flex: 0 0 240px;
  }
  
  .about-member img {
    width: 150px;
    height: 150px;
  }
}

/* Tablets and smaller (max-width: 768px) */
@media (max-width: 768px) {
  /* Show hamburger menu */
  .menu-toggle {
    display: flex;
  }
  
  /* Hide nav links by default on mobile */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: var(--bg-dark);
    position: absolute;
    top: 100%;
    right: 5%;
    width: 250px;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    gap: var(--space-md);
  }
  
  /* Show nav links when menu is active */
  .nav-links.active {
    display: flex;
    animation: slideDown 0.3s var(--ease-out);
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Hero adjustments */
  .hero {
    height: 70vh;
    min-height: 500px;
  }
  
  .hero-content h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  
  .hero-content p {
    font-size: var(--text-base);
  }
  
  /* Button size */
  .btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
  }
  
  /* Carousel cards */
  .carousel-card {
    flex: 0 0 220px;
  }
  
  /* Hide carousel navigation buttons on mobile */
  .carousel-container .prev,
  .carousel-container .next {
    display: none;
  }
  
  /* About member cards stack on mobile */
  .about-member {
    flex-direction: column !important;
    text-align: center;
  }
  
  .about-member img {
    width: 180px;
    height: 180px;
  }
  
  .social-links {
    justify-content: center;
  }
  
  /* Project cards stack on mobile */
  .project-card {
    flex-direction: column;
  }
  
  .project-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
  
  .project-info {
    text-align: center;
  }
  
  .download-buttons {
    justify-content: center;
  }
  
  /* Spacing adjustments */
  section {
    padding: var(--space-2xl) 5%;
  }
}

/* Mobile phones (max-width: 480px) */
@media (max-width: 480px) {
  :root {
    --space-3xl: 3rem;
  }
  
  .hero-content h1 {
    font-size: 1.75rem;
  }
  
  .btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
  
  .carousel-card {
    flex: 0 0 200px;
  }
  
  .modal-content {
    padding: var(--space-xl);
  }
  
  .about-member {
    padding: var(--space-lg);
  }
  
  .about-member img {
    width: 150px;
    height: 150px;
  }
  
  h2 {
    font-size: var(--text-3xl);
  }
  
  .actions {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}


/* ============================================
   END OF STYLESHEET
   ============================================
   
   MAINTENANCE NOTES FOR JUNIOR DEVELOPERS:
   
   1. COLOR CHANGES: Update CSS variables in :root section
   2. SPACING CHANGES: Modify spacing scale variables
   3. ANIMATION SPEED: Adjust transition timing variables
   4. NEW COMPONENTS: Follow existing patterns and add comments
   5. RESPONSIVE: Test at 375px, 768px, 1024px, 1440px
   
   HELPFUL RESOURCES:
   - MDN Web Docs: https://developer.mozilla.org
   - CSS Tricks: https://css-tricks.com
   - Can I Use: https://caniuse.com (browser compatibility)
   
   If you get stuck, look at similar components and follow
   the same pattern. Good luck! 🚀
   ============================================ */