/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #00a8ff;
  --primary-light: #87cefa;
  --secondary: #00a8ff;
  --accent: #ff3366;
  --dark: #0d0d0d;
  --darker: #080808;
  --light: #f5f5f5;
  --gray: #bbb;
  --card-bg: #151515;
  --text-light: #bbb;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --background-dark: #11121A;
  --terminal-bg: #1A1C2D;
  --primary-purple: #7B34DD;
  --accent-cyan: #00D1FF;
  --text-light: #E5E7EB;
  --text-muted: #8E94A8;
  --glow-color: rgba(123, 52, 221, 0.25);
  --background-dark: #11121A;
  --background-card: #1A1C2D;
  --primary-purple: #7B34DD;
  --primary-purple-hover: #8A4EE5;
  --text-light: #FFFFFF;
  --text-muted: #A0AEC0;
  --border-color: #2D3748;
  --input-bg: #11121A;
  --bg-color: #0d0c12;
  --primary-blue: #0099ff;
  --primary-purple: #a476f9;
  --text-primary: #ffffff;
  --text-secondary: #a9a9b2;
  --timer-bg: rgba(0, 153, 255, 0.1);
  --timer-track: rgba(0, 153, 255, 0.2);
  --glow-color: rgba(0, 153, 255, 0.3);
  --glow-color-purple: rgba(164, 118, 249, 0.4);
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--dark);
  color: var(--light);
  overflow-x: hidden;
  line-height: 1.6;
}


/* .................. NAVBAR......... */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 5%;
  background: linear-gradient(to right, rgba(20, 20, 20, 0.8), #000000);


  backdrop-filter: blur(10px);
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.3s ease;

  border-bottom: 2px solid rgba(135, 206, 250, 0.1);
}

.navbar.scrolled {
  padding: 0.8rem 5%;
  background: linear-gradient(to right, rgba(20, 20, 20, 0.8), #000000);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.logo {
  font-family: "Orbitron", sans-serif;
  font-size: 2rem;
  color: var(--primary);
  letter-spacing: 3px;
  /* animation: logoGlow 2s infinite alternate; */

  display: flex;
  position: relative;

  align-items: center;
  gap: 1.5rem;
  /* KEY: Pushes "STRIKE" to the right to make space for the fixed logo */
  padding-left: 70px;

}


/* Mobile Menu Toggle */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 5px;
}

.nav-toggle-label span {
  width: 25px;
  height: 3px;
  background: var(--primary);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

nav a {
  color: var(--light);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
  padding: 0.5rem 0;
}

nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

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

/* animation part
*/
.cssload-triangles {
  /* transform: translate(-50%, -50%); */
  height: 19px;
  width: 28px;
  /* position: relative; */
  position: fixed;
  /* Now, tell it WHERE to be fixed. Pick one from top/bottom and one from left/right */
  top: 6px;
  /* 20 pixels up from the bottom of the window */
  left: 30px;
  /* left: 30%; */
  transition: 5s;
  /* top: 30%; */
  /* margin-bottom: 12px; */
  display: flex;
}

.cssload-tri {
  position: absolute;
  animation: cssload-pulse 862.5ms ease-in infinite;
  border-top: 26px solid rgb(33, 90, 109);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 0px;
}

.cssload-tri.cssload-invert {
  border-top: 0px;
  border-bottom: 26px solid rgb(33, 90, 109);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.cssload-tri:nth-child(1) {
  left: 29px;
}

.cssload-tri:nth-child(2) {
  left: 15px;
  top: 26px;
  animation-delay: -143.75ms;
}

.cssload-tri:nth-child(3) {
  left: 29px;
  top: 26px;
}

.cssload-tri:nth-child(4) {
  left: 44px;
  top: 26px;
  animation-delay: -718.75ms;
}

.cssload-tri:nth-child(5) {
  top: 53px;
  animation-delay: -287.5ms;
}

.cssload-tri:nth-child(6) {
  top: 53px;
  left: 15px;
  animation-delay: -287.5ms;
}

.cssload-tri:nth-child(7) {
  top: 53px;
  left: 29px;
  animation-delay: -431.25ms;
}

.cssload-tri:nth-child(8) {
  top: 53px;
  left: 44px;
  animation-delay: -575ms;
}

.cssload-tri:nth-child(9) {
  top: 53px;
  left: 58px;
  animation-delay: -575ms;
}

@keyframes cssload-pulse {
  0% {
    opacity: 1;
  }

  16.666% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}



.logo-span {
  .logo-span {
    color: #00aeff;
    font-family: sans-serif;
    font-size: 32px;
    font-weight: strong;
    text-shadow: 0 0 10px #00aeff;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/*
responsive navbar
*/
/* ================================================== */
/* ============= RESPONSIVE STYLES ADDED ============ */
/* ================================================== */

@media (max-width: 992px) {
  /* ... (all your other responsive styles for the menu go here) ... */

  .logo {
    gap: 0.75rem;
    padding-left: 45px;
    /* Reduces the space between the icon and text */
  }

  .cssload-triangles {
    left: 15px;
    /* Move it closer to the edge */
    transform: scale(0.6);
    /* Make it smaller */
  }

  /* We also have the rule for the text from before */
  .logo-span {
    font-size: 26px;
    /* Reduces the text size */
  }

  /* Show the hamburger menu icon on smaller screens */
  .nav-toggle-label {
    display: flex;
    z-index: 101;
    /* Ensure it's clickable above other content */
    margin-right: 25px;

    /* margin-left: 20px; */
  }


  /* ===>>> THE LOGIN BUTTON FIX STARTS HERE <<<=== */

  /* Style all buttons consistently inside the mobile menu */
  .nav-menu .btn,
  .nav-menu .btn-login {
    padding: 0.8rem 1rem;
    border-radius: 50px;
    font-weight: 600;
  }

  /* This is the key part: make the login button a centered flex container */
  .nav-menu .btn-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }

  /* Position the nav menu as a slide-out panel */
  .nav-menu {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
   height: 100vh;
   width: 70%;
   max-width: 300px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start; /* MODIFIED: Aligns items to the left. */
   padding: 0rem 3rem; 
   background: #0d0d0d;
   transform: translateX(-100%);
   transition: transform 0.3s ease-in-out;
   margin: 0;
 }

  /* Make the links larger for better touch interaction */
  .nav-menu a {
    font-size: 1.2rem;
  }




  /* --- THE MAGIC PART --- */

  /* When the checkbox is checked, slide the nav menu into view */
  .nav-toggle:checked~.nav-menu {
    transform: translateX(0);
  }

  /* Animate the hamburger icon into an 'X' shape when the menu is open */
  .nav-toggle:checked~.nav-toggle-label span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .nav-toggle:checked~.nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked~.nav-toggle-label span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

@keyframes logoGlow {
  from {
    text-shadow: 0 0 10px var(--primary);
  }

  to {
    text-shadow: 0 0 25px var(--primary-light);
  }
}


.btn-login {
  background: linear-gradient(90deg, #00D1FF 0%, #00A3FF 70%, #4F00FF 100%);

  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.5s;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(50, 150, 255, 0.35);
  color: #000;
}

/* Login Button */
.btn {
  background: transparent;
  padding: 0.6rem 1.2rem;
  border-radius: 2px;
  color: var(--light);
  font-weight: 600;
  transition: all 0.3s ease;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.btn-login:hover {
  /* Replace your existing background property with this */
  background: rgba(10, 25, 47, 0.95);
  color: white;
  border-color: var(--primary);
  transform: scale(1.05);
}

/* ===== Navbar completed ===== */




.code-vibe {
  color: skyblue;
}



/* ===== ENHANCED HERO SECTION ===== */
.hero {
  background: radial-gradient(circle at top right, #1a1a1a, #000);
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10%;
  position: relative;
  top:0;
left: 50%;
  right: 0;
  transform: translateX(-50%);
  overflow: hidden;
  background-image:
    linear-gradient(to bottom,
      hsla(224, 71%, 4%, 0.65),
      /* 95% opaque */
      hsla(224, 71%, 4%, 0.80),
      /* 80% opaque */
      hsl(224, 71%, 4%)
      /* Solid at bottom */
    ),
    url('../assets/hero-bg.jpg');
  background-size: 100% auto ;
  background-position: center center;
   /* background-position: center center; */
  background-repeat: no-repeat;

  margin-bottom: 40px;

   background-attachment: scroll; 
  margin: 0;
}

.hero-content {
  flex: 1;
  max-width: 600px;
  animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-content h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.typing-animation {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--text-light);
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: var(--primary);
  }
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-glow {
  display: inline-block;
  background: linear-gradient(90deg, #00D1FF, #00A3FF, #4F00FF);

  color: #000;
  padding: 0.8rem 1.8rem;
  border-radius: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 2px var(--primary);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: white;
}

.btn-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transition: left 0.5s;
}

.btn-glow:hover::before {
  left: 100%;
}

.btn-glow:hover {
  transform: scale(1.1);
  box-shadow: 0 0 3px var(--primary-light);
}

/* Define primary colors */


.btn-outline {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 40px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, transform 0.3s ease;
  /* smooth text color and scale */
  z-index: 1;
  /* make text above pseudo-element */
}

.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(90deg, #00D1FF, #00A3FF); */
  background: linear-gradient(90deg, #00D1FF, #00A3FF, #4F00FF);

  transition: left 0.3s ease;
  /* smooth pseudo-element movement */
  z-index: -1;
  /* behind the text */
}

.btn-outline:hover::before {
  left: 0;
}

.btn-outline:hover {
  color: white;
  /* text color changes */
  transform: scale(1.05);
  /* optional hover scale */
}

/* --- Right Content (Code Snippet) --- */
.code-snippet-wrapper {
  perspective: 1500px;
}

.code-snippet {
  position: relative;
  margin-top: 50px;
  background-color: #1E1E2E;
  border-radius: 12px;
  padding: 1px;
  /* for border */
  overflow: hidden;
  transform: rotateY(-15deg) rotateX(5deg);
  box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.4);
}

.code-snippet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 90deg at 50% 50%, var(--primary-purple), #ff55c3, #55aaff, var(--primary-purple));
  z-index: 0;
  animation: spin 4s linear infinite;
}

.code-snippet-inner {
  position: relative;
  background-color: #16161F;
  border-radius: 11px;
  z-index: 1;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.snippet-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem 0 1rem;
  background-color: #2a2a3a;
  border-bottom: 1px solid var(--border-color);
}

.snippet-dots {
  display: flex;
  gap: 0.5rem;
}

.snippet-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red {
  background-color: #ff5f56;
}

.dot-yellow {
  background-color: #ffbd2e;
}

.dot-green {
  background-color: #27c93f;
}

.snippet-title {
  color: var(--text-muted);
  margin: 0 auto;
  font-family: var(--font-code);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #27c93f;
}

.live-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #27c93f;
}

.snippet-body {
  padding: 1.5rem;
  font-family: var(--font-code);
  font-size: 0.9rem;
  line-height: 1.7;
  counter-reset: line;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.code-line {
  display: flex;
}

.code-line::before {
  counter-increment: line;
  content: counter(line);
  margin-right: 1.5rem;
  width: 20px;
  text-align: right;
  color: var(--border-color);
}

.code-line:last-child::after {
  content: '█';
  display: inline-block;
  margin-left: 0.1em;
  color: var(--text-light);
  animation: blink 1.2s step-end infinite;
}

@keyframes blink {

  from,
  to {
    color: transparent;
  }

  50% {
    color: var(--text-light);
  }
}

/* Syntax Highlighting */
.c-keyword {
  color: #c586c0;
}

.c-type {
  color: #4ec9b0;
}

.c-string {
  color: #ce9178;
}

.c-comment {
  color: #6a9955;
}

.c-punct {
  color: #d4d4d4;
}

.c-number {
  color: #b5cea8;
}

.c-function {
  color: #dcdcaa;
}

/* ========================================================== */
/* ===== RESPONSIVE FIXES FOR HERO SECTION (ADD THIS) ===== */
/* ========================================================== */

/* For tablets and smaller devices (e.g., iPad portrait) */
@media (max-width: 1024px) {
  .hero {
    /* 1. Stack the content vertically instead of side-by-side */
    flex-direction: column;
    justify-content: center;
    /* Center the content vertically */

    /* 2. Adjust padding for smaller screens */
    padding: 8rem 2rem 4rem 2rem;
    /* More top padding to clear navbar, less on sides */

    /* 3. Add a gap between the text block and the code snippet */
    gap: 4rem;

    /* 4. Let the height be determined by content */
    min-height: auto;
  }

  .hero-content {
    /* 5. Center the text and buttons */
    text-align: center;
    max-width: 100%;
    /* Allow it to take full width */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* 6. Remove the slide-in animation on mobile for better performance */
    animation: none;
  }

  .hero-content h1 {
    font-size: 3rem;
    /* Slightly smaller title */
  }

  .hero-buttons {
    /* 7. Ensure buttons are centered */
    justify-content: center;
  }

  /* 8. Fix the typing animation for responsive text wrapping */
  .typing-animation {
    width: auto;
    /* Let it take the natural width of the text */
    white-space: normal;
    /* Allow text to wrap if needed */
    border-right: none;
    /* Remove the blinking caret on smaller screens */
    animation: none;
    /* Disable the typing animation which relies on width */
  }

  /* 9. Reset the 3D perspective and transform on the code snippet */
  .code-snippet-wrapper {
    perspective: none;
  }

  .code-snippet {
    transform: none;
    /* Remove the 3D tilt */
    margin-top: 0;
    /* Let the parent 'gap' handle spacing */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    /* A simpler shadow for flat view */
  }
}

/* For mobile phones */
@media (max-width: 768px) {
  .hero {
    padding: 6rem 1rem 3rem 1rem;
    /* Even less padding for mobile */
    gap: 3rem;
  }

  .hero-content h1 {
    font-size: 2.5rem;
    /* Further reduce title size */
    line-height: 1.3;
  }

  .typing-animation {
    font-size: 1.1rem;
    /* Adjust subtitle font size */
  }

  .snippet-body {
    padding: 1rem;
    font-size: 0.8rem;
    /* KEY FIX: Adds a horizontal scrollbar *only* if the code is too wide */
    overflow-x: auto;

    /* RECOMMENDED: Ensures code formatting is preserved during scrolling */
    white-space: pre;
    /* Make code text smaller to fit */
  }

  .code-line::before {
    margin-right: 1rem;
    /* Reduce space for line numbers */
  }
}

/* ===== complete hero SECTION ===== */


/* ===== Mentor section ===== */

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
}


.gradient-text {
  font-size: 3rem;
  /* equivalent to text-5xl */
  font-weight: bold;

  /* Gradient Text */
  background: linear-gradient(90deg, #f43f5e, #6366f1, #0ea5e9);
  /* from-rose-500 via-indigo-500 to-sky-500 */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* Background animation */
  background-size: 200% 100%;
  background-position: left;
  transition: all 0.7s ease;

  /* Cursor and hover effect */
  cursor: pointer;
}

.gradient-text:hover {
  background-position: right;
  transform: scale(1.05);
  /* hover:scale-105 */
}

.section-header p {
  color: var(--text-muted);
  font-size: 1.125rem;
  margin: 0 0 1.5rem 0;
}

/* --- NEW: Instructor Slider --- */
.instructor-slider-wrapper {
  overflow: hidden;
  /* Hides the card that is not in view */
  width: 100%;
}

.instructor-slider-track {
  display: flex;
  width: 200%;
  /* 100% for each of the 2 cards */
  /* Animation: name duration timing-function iteration-count */
  animation: slide 6s ease-in-out infinite;
  /* 3s per card * 2 cards = 6s total */
}

/* Define the sliding animation */
@keyframes slide {
  0% {
    transform: translateX(0%);
  }

  45% {
    transform: translateX(0%);
  }

  /* Stay on card 1 */
  50% {
    transform: translateX(-50%);
  }

  /* Slide to card 2 (-50% of track width) */
  95% {
    transform: translateX(-50%);
  }

  /* Stay on card 2 */
  100% {
    transform: translateX(0%);
  }

  /* Slide back to card 1 */
}

/* --- MODIFIED: Instructor Card --- */
.instructor-card {
  width: 50%;
  /* Each card takes up half of the track's width */
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: 4rem;
  padding: 0 1rem;
  /* Added padding for spacing */
}

/* Removed rule for margin-top as cards are now side-by-side */
/* .instructor-card + .instructor-card { ... } */


.instructor-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-bg-glow {
  position: absolute;
  width: 100%;
  height: 100%;

  background: linear-gradient(to right, rgba(20, 20, 20, 0.8), #000000);
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  z-index: 0;
}

.instructor-image-wrapper img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  /* border: 5px solid var(--background-dark); */
}



.instructor-details {
  text-align: left;
}

.name-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.name-header h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.name-header svg {
  color: var(--text-muted);
}

.role {
  color: var(--text-muted);
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
}

.current-role {
  color: var(--text-light);
  font-weight: 500;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.tags span {
  background-color: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--text-light);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

.description {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.8rem 1.8rem;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-purple);
  color: var(--text-light);
  border: 1px solid var(--primary-purple);
}

.btn-primary:hover {
  background-color: var(--primary-purple-hover);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(123, 52, 221, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  color: var(--text-light);
  border-color: var(--text-muted);
}

/* --- MODIFIED: Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
}

/* Remove static .active class styling */

/* NEW: Animate dots to sync with the slider */
.pagination .dot:nth-child(1) {
  animation: dot-active 6s infinite;
}

.pagination .dot:nth-child(2) {
  animation: dot-inactive 6s infinite;
}

@keyframes dot-active {

  0%,
  45% {
    background-color: var(--primary-purple);
  }

  50%,
  100% {
    background-color: var(--border-color);
  }
}

@keyframes dot-inactive {

  0%,
  45% {
    background-color: var(--border-color);
  }

  50%,
  95% {
    background-color: var(--primary-purple);
  }

  100% {
    background-color: var(--border-color);
  }
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
  .instructor-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
    padding: 0 0.5rem;
    /* Adjust padding for mobile */
  }

  .instructor-image-wrapper img {
    max-width: 200px;
  }

  .instructor-details {
    text-align: center;
  }

  .name-header,
  .tags,
  .action-buttons {
    justify-content: center;
  }

  .section-header h1 {
    font-size: 2rem;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
}

.section-header p {
  font-size: 1.125rem;
  color: whitee;
  /* color: var(--text-muted); */
  max-width: 600px;
  margin: 0 auto 1rem auto;
  line-height: 1.6;
}

/* ========================================================== */
/* ===== RESPONSIVE FIXES FOR MENTOR SECTION (ADD THIS) ===== */
/* ========================================================== */

/* For tablets (e.g., iPad portrait) */
@media (max-width: 1024px) {
  .instructor-card {
    /* Reduce the gap between the image and text on tablets */
    gap: 2rem;
    /* Adjust grid columns to be more balanced */
    grid-template-columns: 1fr 1.75fr;
  }
  
  .section-header h1 {
    font-size: 2.25rem;
  }
  
  /* IMPORTANT: Reduce the size of the animated "Instructor" text */
  .gradient-text {
    font-size: 2.75rem;
  }
}


/* For mobile phones (This enhances your existing mobile styles) */
@media (max-width: 768px) {
  .section-header {
    /* Less bottom margin on mobile */
    margin-bottom: 2rem;
  }

  .section-header h1 {
    font-size: 2rem;
  }
  
  /* Make the animated "Instructor" text even smaller for phones */
  .gradient-text {
    font-size: 2.5rem;
  }
  
  .section-header p {
    font-size: 1rem;
    padding: 0 1rem; /* Add padding to prevent text from touching edges */
  }

  .instructor-card {
    /* 1. Stack the card content vertically */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Reduce gap for a tighter layout */
    padding: 0 1rem;
  }
  
  .instructor-image-wrapper img {
    /* Make the instructor photo a bit smaller on mobile */
    max-width: 180px; 
  }

  .instructor-details {
    /* 2. Ensure all text content is centered */
    text-align: center;
  }

  .name-header,
  .tags,
  .action-buttons {
    /* 3. Center flex items like buttons and tags */
    justify-content: center;
  }
  
  .name-header h3 {
    font-size: 1.75rem;
  }

  .description {
    font-size: 0.95rem;
  }

  .pagination {
    margin-top: 2rem; /* Reduce top margin */
  }
}

/* ===== Completed Mentor section ===== */



/*
time dicount
        */


/* 
.discount {

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
} */

/* --- Corrected Code --- */
.discount {
    display: flex;
    justify-content: center;
    align-items: center;
    /* REMOVED: min-height: 100vh; */
    
    /* MODIFIED: Use padding for controlled spacing from the header and content below */
    padding: 6rem 2rem;
}

.offer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
} 
 /* Make sure this is in your base CSS, NOT inside a media query */


.rocket-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 2rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.main-heading {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.sub-heading {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0 0 3rem 0;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.time-unit {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time-unit svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  /* Start the circle from the top */
  animation: spin linear infinite;
  /* Added animation */
}

/* MODIFIED: Reduced animation durations for a faster effect */
.countdown-timer .time-unit:nth-child(1) svg {
  animation-duration: 10s;
}

.countdown-timer .time-unit:nth-child(2) svg {
  animation-duration: 8s;
}

.countdown-timer .time-unit:nth-child(3) svg {
  animation-duration: 6s;
}

.countdown-timer .time-unit:nth-child(4) svg {
  animation-duration: 4s;
}

/* Added keyframes for the rotation animation */
@keyframes spin {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(270deg);
  }
}

.time-unit .timer-track {
  fill: none;
  stroke: var(--timer-track);
  stroke-width: 6;
}

.time-unit .timer-progress {
  fill: none;
  stroke: var(--primary-blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 283;
  /* Circumference of a 90-radius circle (2 * PI * 45) */
  stroke-dashoffset: 283;
  /* Initially empty */
  transition: stroke-dashoffset 0.5s ease;
}

.time-unit .time-value {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-blue);
  line-height: 1;
}

.time-unit .time-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  /* Ensure label is on top of SVG */
  z-index: 1;
}

.unlock-button {
  padding: 1rem 3rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  /* Added a third color stop and increased background size for the hover effect */


  background-size: 200% auto;
  cursor: pointer;
  /* Added background-position to the transition */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease;
  box-shadow: 0 5px 20px var(--glow-color);
  /* background: linear-gradient(135deg, #8e2de2, #4a00e0, #1e3cfa); */
  background: linear-gradient(90deg, #00D1FF, #00A3FF, #4F00FF);
  box-shadow: 0 6px 15px rgba(30, 60, 250, 0.4);
}

.unlock-button:hover {
  /* Added scale and more prominent, colorful shadow */
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 30px var(--glow-color), 0 0 25px var(--glow-color-purple);
  background-position: right center;
  /* This shifts the gradient on hover */
}

/* --- MERGED AND CORRECTED MOBILE STYLES --- */
@media (max-width: 480px) {
    .offer-section {
        max-width: 100%;
    }

    .main-heading {
        font-size: 2rem;
    }
    
    .sub-heading {
        font-size: 1rem;
    }

    .countdown-timer {
        gap: 1rem;
        /* This forces the 2x2 grid */
        max-width: 210px; 
        /* This explicitly centers the now-narrow grid container */
        margin-left: auto;
        margin-right: auto;
    }

    .time-unit {
        /* Using the 85px value from your intended fix */
        width: 85px;
        height: 85px;
         margin-bottom: 1rem
    }

    .time-unit .timer-progress {
        /* Recalculated circumference for 85px box */
        stroke-dasharray: 248;
    }

    .time-unit .time-value {
        font-size: 2rem;
    }
    
    .unlock-button {
        padding: 0.9rem 2.5rem;
        font-size: 0.9rem;
    }

    .countdown-timer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
  }

  .time-unit {
    width: 85px;
    height: 85px;
    margin-bottom: 0; /* grid handles spacing */
  }


    
}



@media (max-width: 480px) {
  .time-unit svg {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .time-unit svg {
    display: none !important;
  }
}



/* completed discount
*/



@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .navbar {
    flex-wrap: wrap;
  }

  .nav-toggle-label {
    display: flex;
    /* margin-left: 15px; */
  }

  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
     margin-top: auto
  }

  .nav-toggle:checked~.nav-menu {
    display: flex;
  }

  nav a {
    padding: 1rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(135, 206, 250, 0.1);
  }

  .hero-buttons {
    justify-content: center;
  }

  
 
 
  
  .ai-chat-container {
    width: 300px;
    height: 450px;
    right: 20px;
    bottom: 90px;
  }

}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .ai-chat-container {
    width: 280px;
    height: 400px;
    right: 10px;
    bottom: 80px;
  }

}





/* --- Modal Styles --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);

  /* Hide by default */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

/* Show modal when it's the target */
.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal:target .modal-content {
  transform: scale(1);
}

.modal-content {
  position: relative;
  background-color: var(--background-card);
  padding: 2.5rem;
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--text-light);
}

.modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--text-light);
}

.modal-header p {
  color: var(--text-muted);
  margin: 0 0 1.5rem 0;
}

.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.modal-tabs a {
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.modal-tabs a.active {
  color: var(--text-light);
  border-bottom-color: var(--primary-purple);
}

.modal-tabs a:hover {
  color: var(--text-light);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(123, 52, 221, 0.3);
}

.btn-submit {
  width: 100%;
  background-color: var(--primary-purple);
  color: var(--text-light);
  padding: 0.9rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: var(--primary-purple-hover);
}

.forgot-password {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: var(--text-light);
}




/*
why us
        */
.why-us {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 4rem 2rem;
}

why-learn-section {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Typography */
.why-learn-section .main-heading {
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.why-learn-section .main-heading .highlight {
  color: var(--primary-purple);
}

.why-learn-section .sub-heading {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 3rem;
}

/* Features Grid Container */
.features-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  width: 100%;
}

/* Individual Feature Card */
.feature-card {
  background-color: var(--card-bg);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple);
  box-shadow: 0 8px 30px var(--glow-color);
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--text-primary);
}

.feature-card p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body {
    padding: 3rem 1rem;
  }

  .why-learn-section .main-heading {
    font-size: 2.2rem;
  }

  .features-container {
    grid-template-columns: 1fr;
  }
}


/* ======================================================= */
/* ===== COMPLETE & RESPONSIVE FOOTER (COPY ALL THIS) ===== */
/* ======================================================= */

/* --- 1. Main Footer & Container Styles --- */
footer {
    background: var(--darker, #0d0d0d);
    color: var(--text-light, #f0f0f0);
    padding: 1.75rem 0 0.5rem 0; /* Generous top padding */
    /* width: 100%; */
    box-sizing: border-box; 
    
      background: var(--darker);
  color: var(--text-light);
  /* padding: 1rem 0 1rem; */
  width: 100vw;

  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 10%; */
  position: relative;
  top:0;
left: 50%;
  right: 0;
  transform: translateX(-50%);
  overflow: hidden;/* Ensures padding is included in width */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem; /* Side padding for content */
}

/* --- 2. Desktop Layout (4 Columns) --- */
.footer-content {
    display: grid;
    /* Explicitly create 4 columns for desktop */
    grid-template-columns: 2fr 1fr 1fr 1.5fr; 
    gap: 2.5rem;
    margin-bottom: 1.5rem;
}

.footer-section h4 {
    color: var(--primary, #00D1FF);
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
}


.footer-section pre {
    /* color: var(--text-secondary, #ccc); */
    line-height: 2;
    margin: 0;
    font-size: medium;
}

.footer-section a {
    display: block;
    color: var(--text-light, #f0f0f0);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--primary, #00D1FF);
}

.social-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-links a i {
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover i {
    transform: scale(1.2);
    color: var(--primary, #00D1FF);
}

/* --- 3. Email Form --- */
.email-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.email-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light, #f0f0f0);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: var(--primary-purple, #4F00FF);
    box-shadow: 0 0 0 3px rgba(79, 0, 255, 0.3);
}

.email-container button {
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #00D1FF, #00A3FF, #4F00FF);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.email-container button:hover {
    transform: scale(1.03);
}

/* --- 4. Footer Bottom (Copyright) --- */
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #333);
    color: var(--text-secondary, #ccc);
}



.email-input {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border: 2px solid rgba(255, 102, 0, 0.3);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.email-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
}

.email-input::placeholder {
  color: var(--text-light);
}


/* --- Base Styles (Mobile First Approach) --- */
.email-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* A slightly smaller gap for mobile */
  width: 100%;
  /* Take up all available horizontal space */
  max-width: 400px;
  /* Set a max-width for larger screens */
  margin-top: 2px;
  /* Use auto for left/right margins to center it within its parent */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: transparent;
  font-size: 1.1rem;
  /* Slightly adjusted base font size for readability */
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  /* Ensures padding doesn't add to the width */
}

.email-container label {
  font-weight: 600;
  color: var(--primary);
}

.email-container input {
  padding: 12px;
  /* A bit more padding for easier tapping on mobile */
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  /* Using rem for better scalability */
  outline: none;
  transition: border-color 0.3s ease;
  background: var(--input-bg);
}

.email-container input:focus {
  border-color: #4F00FF;
}

.email-container button {
  padding: 12px;
  /* Match the input padding */
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #00D1FF 0%, #00A3FF 70%, #4F00FF 100%);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  /* Consistent font size */
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.email-container button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}


input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 80px;
  width: 80px;
  z-index: 100;
}


/* ================================= */
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* ================================= */

/* --- 5. Tablet Layout (2x2 Grid) --- */
@media (max-width: 992px) {
    footer {
        padding: 4rem 0 2rem 0; /* Slightly less padding */
    }

    .footer-content {
        /* Switch to a balanced 2-column grid */
        grid-template-columns: 1fr 1fr;
    }
}

/* --- 6. Mobile Layout (Single Column) --- */
@media (max-width: 640px) {
    footer {
        padding: 3rem 0 1.5rem 0; /* Even less padding to reduce space */
    }

    .footer-content {
        /* Stack everything into a single, centered column */
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem; /* Reduce gap for a more compact look */
        margin-bottom: 2.5rem;
    }
    
    .footer-bottom {
        padding-top: 1.5rem;
    }

    .social-links {
        /* Center the icons within their container */
        justify-content: center;
    }
    
    .email-container {
        /* Center the form */
        margin: 0 auto;
        max-width: 350px;
    }
}


/* ================================= */
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* ================================= */

/* --- 3. TABLET LAYOUT (Switches to 2x2 Grid) --- */
@media (min-width: 641px) {
    .footer-content {
        grid-template-columns: 1fr 1fr; /* Create a 2x2 grid */
        text-align: left; /* Align text to the left */
    }

    /* We no longer need the flexbox grouping, so we reset it */
    .footer-links-group {
        display: contents; /* This makes the wrapper "disappear" and its children become direct grid items */
    }

    .email-container {
        margin: 0; /* Un-center the form */
    }

    .social-links {
        justify-content: flex-start; /* Align icons left */
    }
}

/* --- 4. DESKTOP LAYOUT (Switches to 4-Column) --- */
@media (min-width: 993px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1.5fr; /* Your original desktop layout */
    }
}

/* ===== AI CHAT FEATURE ===== */
.ai-chat-toggle {
  display: none;
}

.ai-chat-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(to right, #6D55F6, #00D4FF);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 30px rgba(138, 77, 255, 0.5);
  z-index: 999;
  transition: all 0.3s ease;
  overflow: hidden;
}

.ai-chat-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 30px rgba(138, 77, 255, 0.5);

}

.ai-chat-button i {
  font-size: 1.5rem;
  margin-bottom: 2px;
}

.ai-chat-button span {
  font-size: 0.7rem;
  font-weight: 600;
}

.ai-chat-container {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 350px;
  height: 500px;
  /* background: rgba(30, 30, 30, 0.95); */

  background: transparent;
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: flex;
  flex-direction: column;
  transform: translateX(400px);
  transition: transform 0.4s ease;

  border-bottom: 2px solid rgba(135, 206, 250, 0.1);

  overflow: hidden;
}

.ai-chat-toggle:checked~.ai-chat-container {
  transform: translateX(0);
}

.ai-chat-header {
  padding: 1.2rem;
  background: linear-gradient(to right, #1A1C2D, #1C3A4A);
  border-bottom: 2px solid rgba(135, 206, 250, 0.1);

  display: flex;
  align-items: center;
  gap: 1rem;
}

.ai-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(to right, #6D55F6, #00D4FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.ai-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.ai-info p {
  font-size: 0.8rem;
  color: var(--text-light);
}

.ai-close-btn {
  margin-left: auto;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.ai-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ai-chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
ai-chat-messages{
  overflow: auto; /* scrolling works */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* For Chrome, Safari, Edge */
.ai-chat-messages::-webkit-scrollbar {
  display: none;
}
.ai-message,
.user-message {
  display: flex;
}

.ai-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-bubble {
  max-width: 80%;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  position: relative;
}

.ai-message .message-bubble {
  background: #2A2D3A;
  border-top-left-radius: 5px;
}

.user-message .message-bubble {
  background: #7B34DD;
  border-top-right-radius: 5px;
}

.message-bubble p {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.message-time {
  font-size: 0.7rem;
  color: var(--text-light);
  opacity: 0.7;
}

.ai-chat-input {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 0.5rem;
}

.ai-chat-input input {
  flex: 1;
  padding: 0.8rem 1rem;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  /* background: linear-gradient(to right, #00D1FF, #00A3FF); */

  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--light);
  font-size: 0.9rem;
}

.ai-chat-input input:focus {
  outline: none;
  border-color: var(--primary);
}

.ai-send-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(to right, #6D55F6, #00D4FF);
  /* background: linear-gradient(45deg, #00D1FF, #00A3FF); */

  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.ai-send-btn:hover {
  transform: scale(1.1);
}

.code-vibe {
  color: skyblue;
}



  .hero-buttons {
    justify-content: center;
  }



  .ai-chat-container {
    width: 300px;
    height: 450px;
    right: 20px;
    bottom: 90px;
  }

  .animated-cube {
    width: 180px;
    height: 180px;
  }



@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .ai-chat-container {
    width: 280px;
    height: 400px;
    right: 10px;
    bottom: 80px;
  }
}

/* ===== completed AI chat SECTION ===== */

/* ======================================================== */
/* ===== COMPLETE & RESPONSIVE CODE SNIPPET (FINAL) ===== */
/* ======================================================== */

/* --- 1. Desktop Styles (The 3D effect) --- */
.code-snippet-wrapper {
    perspective: 1500px; /* Enables the 3D space */
}

.code-snippet {
    position: relative;
    margin-top: 50px;
    border-radius: 12px;
    padding: 1px; /* Creates space for the animated border */
    overflow: hidden;
    /* The 3D tilt effect for desktop */
    transform: rotateY(-15deg) rotateX(5deg);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease; /* Smooth transition for responsiveness */
}

/* Animated gradient border */
.code-snippet::before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from 90deg at 50% 50%, var(--primary-purple), #ff55c3, #55aaff, var(--primary-purple));
    z-index: 0;
    animation: spin 4s linear infinite;
}

.code-snippet-inner {
    position: relative;
    background-color: #16161F; /* The dark inner background */
    border-radius: 11px;
    z-index: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Header Styles (Dots, Title, etc.) --- */
.snippet-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #2a2a3a;
    border-bottom: 1px solid var(--border-color, #2D3748);
}

.snippet-dots {
    display: flex;
    gap: 0.5rem;
}

.snippet-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.dot-red { background-color: #ff5f56; }
.dot-yellow { background-color: #ffbd2e; }
.dot-green { background-color: #27c93f; }

.snippet-title {
    color: var(--text-muted, #A0AEC0);
    margin: 0 auto;
    font-family: "Fira Code", monospace;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #27c93f;
}

.live-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #27c93f;
}

/* --- Code Body Styles --- */
.snippet-body {
    padding: 1.5rem;
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    line-height: 1.7;
    counter-reset: line;
}

.code-line {
    display: flex;
}

.code-line::before {
    counter-increment: line;
    content: counter(line);
    margin-right: 1.5rem;
    width: 20px;
    text-align: right;
    color: var(--border-color, #2D3748);
}

/* Syntax Highlighting (already in your file, kept for completeness) */
.c-keyword { color: #c586c0; }
.c-type { color: #4ec9b0; }
.c-string { color: #ce9178; }
.c-punct { color: #d4d4d4; }
.c-number { color: #b5cea8; }
.c-function { color: #dcdcaa; }


/* ================================= */
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* ================================= */

/* --- Tablet View --- */
@media (max-width: 1024px) {
    .code-snippet-wrapper {
        perspective: none; /* Disable 3D space */
    }

    .code-snippet {
        transform: none; /* THE KEY FIX: Flatten the component */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* A simpler shadow */
    }
}

/* --- Mobile View --- */
@media (max-width: 768px) {
    .snippet-body {
        padding: 1.25rem 1rem;
        font-size: 0.8rem; /* Make code text smaller to fit */
        
        /* THE KEY FIX: Adds a horizontal scrollbar *only* if the code is too wide.
           This prevents the code from breaking your page layout. */
        overflow-x: auto;
    }

    .code-line::before {
        margin-right: 1rem; /* Reduce space for line numbers */
    }
}

/* ============================================================= */
/* ===== MEDIA QUERY FOR VERY NARROW SCREENS (e.g., 350px) ===== */
/* ============================================================= */

@media (max-width: 350px) {

    /* 1. Reduce the font size of the code to prevent excessive horizontal scrolling. */
    .snippet-body {
        font-size: 0.75rem; /* Smaller font for more compact code */
        padding: 1rem 0.75rem; /* Less padding on the sides and top/bottom */
    }

    /* 2. Make the header more compact. */
    .snippet-header {
        padding: 0.6rem 0.75rem; /* Reduced vertical and horizontal padding */
    }

    .snippet-title,
    .live-indicator {
        font-size: 0.7rem; /* Make header text smaller */
    }

    /* 3. Reduce the space allocated for line numbers. */
    .code-line::before {
        margin-right: 0.75rem; /* Tighter spacing for line numbers */
        width: 15px; /* Give it a slightly smaller fixed width */
    }

    /* 4. Optional: Make the window control dots smaller. */
    .snippet-dot {
        width: 10px;
        height: 10px;
    }

    .snippet-dots {
        gap: 0.4rem;
    }
}


/* ============================================= */
/* ===== RESPONSIVE BREAKPOINTS (Mobile -> Desktop) ===== */
/* ============================================= */

/* --- 2. VERY NARROW SCREENS (e.g., 350px) --- */
@media (max-width: 380px) {
    footer {
        padding: 2.5rem 0 1.5rem 0; /* Less vertical padding */
    }
    
    .footer-content {
        gap: 2rem; /* Tighter gap between sections */
    }

    .footer-section h4 {
        font-size: 1.1rem; /* Slightly smaller headings */
    }
    
    .footer-tagline, .footer-section a {
        font-size: 0.9rem; /* Slightly smaller text */
    }
}

/* --- 3. TABLET LAYOUT (Switches to a 2x2 Grid) --- */
@media (min-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr 1fr; /* Switch to a 2x2 grid */
        gap: 3rem;
        text-align: left; /* Align text to the left */
    }
    
    .social-links {
        justify-content: flex-start; /* Un-center the icons */
    }

    .email-container {
        margin: 0; /* Un-center the form */
    }
}

/* --- 4. DESKTOP LAYOUT (Switches to the 4-Column Design) --- */
@media (min-width: 1024px) {
    footer {
        padding: 5rem 0 2rem 0; /* More top padding for desktop */
    }

    .footer-content {
        /* The classic 4-column desktop layout */
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* ================================= */
/* ===== RESPONSIVE BREAKPOINTS ===== */
/* ================================= */

/* --- 5. Tablet & Mobile Layout --- */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column; /* Stack the buttons */
        align-items: center;    /* Center them */
        width: 100%;
        gap: 1.5rem;
    }

    .btn {
        width: 100%;
        max-width: 320px;
        padding: 1rem;
        font-size: 1.1rem;
    }
}

/* --- 6. VERY NARROW Mobile Layout (Your specific request for 350px) --- */
@media (max-width: 350px) {
    .hero-buttons {
        gap: 1rem; /* Reduce vertical space between buttons */
    }

    .btn {
        padding: 0.8rem;   /* Make buttons a little less tall */
        font-size: 1rem;   /* Make text slightly smaller to fit better */
    }
}