@charset "utf-8";
/* CSS Document */
/* RESET */
@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
img {
  max-width: 100%;
  height: auto;
}
html {
font-size: 18px;
background: #000;
}

body {
font-family: 'Inter', sans-serif;
background: #000;
color: #fff;
letter-spacing: 0.2px;
opacity: 0;
transition: opacity 0.3s ease;
overflow-x: hidden;
}

body.page-loaded {
  opacity: 1;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GLOBAL CONTAINER */
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
}

/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 40px;
border-bottom: 1px solid rgba(255,255,255,0.05);
position: sticky;
top: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
}

.navbar nav {
  display: flex;
  gap: 24px;
}

.navbar a {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #aaa;
  text-decoration: none;
  font-size: 14px;

  transition: all 0.2s ease;
}
.navbar a:hover {
  color: #3AAFB9;
  transform: translateY(-2px);
}

.navbar a:hover i {
  opacity: 1;
}

.logo {
  display: flex;
  align-items: center;
  height: 30px;
}

.navbar .logo img {
  height: 30px !important;
  width: auto !important;
  max-height: 30px !important;
  display: block;
}


/* HAMBURGER BUTTON */
.menu-toggle {
  display: none;
  font-size: 20px;
  cursor: pointer;
  color: #aaa;
}

@media (max-width: 768px) {

  .navbar {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center; /* center the logo */
  }

  /* HAMBURGER LEFT */
  .menu-toggle {
    display: block !important;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1001;
  }

  .navbar {
    position: relative;
    z-index: 2000;
  }

  .menu-overlay {
    z-index: 999;
  }

  /* LOGO CENTER */
  .logo {
    margin: 0;
  }

  /* HIDE NAV LINKS */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;

    width: 260px;
    height: 100vh;

    display: flex !important; /* force override */
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 20px;

    padding: 100px 20px 20px;

    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(10px);

    border-right: 1px solid rgba(255,255,255,0.05);

    transform: translateX(-100%);
    transition: transform 0.3s ease;

    z-index: 1000;
  }

  .nav-links.active {
    transform: translateX(0);
  }

}
.menu-overlay {
  position:fixed;
  width: 100%;
  max-width: 100%;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: all;
}


/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 0 20px;
}

/* glow blobs */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
max-width: 100%;
  width: 350px;
height: 350px;
filter: blur(90px);
opacity: 0.45;
  z-index: 0;
}
.hero::before {
  background: #3AAFB9;
  top: 20%;
  left: 25%;

  animation: float1 9s ease-in-out infinite;
}

.hero::after {
  background: #7a00ff;
  bottom: 20%;
  right: 25%;

  animation: float2 11s ease-in-out infinite;
}

@keyframes float1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(60px, -40px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes float2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-60px, 40px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.hero-content {
 margin: 0 auto;
position: relative;
z-index: 2;
max-width: 900px;
padding: 0 20px;
transform: translateY(-20px);	
 animation: fadeUp 1s ease-out forwards;
}

.badge {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
font-size: 14px;
background: rgba(58,175,185,0.1);
border: 1px solid rgba(58,175,185,0.2);
color: #3AAFB9;
}

.hero h1 {
font-size: 80px;
font-weight: 800;
line-height: 1.05;
margin: 24px 0;

background: linear-gradient(90deg, #fff, #3AAFB9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeUp 1s ease-out forwards;
animation-delay: 0.1s;
}

.hero p {
font-size: 20px;
color: #aaa;
line-height: 1.6;
margin-bottom: 40px;
animation: fadeUp 1s ease-out forwards;
animation-delay: 0.2s;
}

.buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
animation: fadeUp 1s ease-out forwards;
animation-delay: 0.3s;
}

/* BUTTONS */
.btn {
padding: 18px 28px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
}
.btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.course-card .btn {
margin-top: 18px;
}

.btn.primary {
background: linear-gradient(135deg, #3AAFB9, #00c3ff);
color: #000;
box-shadow: 0 0 20px rgba(58,175,185,0.4);
}

.btn.secondary {
border: 1px solid rgba(58,175,185,0.4);
color: #3AAFB9;
}

/* COURSES */
.courses {
text-align: center;
padding: 0px 20px 80px;
}

.courses h2 {
font-size: 44px;
margin-bottom: 12px;
}

.subtitle {
color: #777;
margin-bottom: 60px;
}

.course-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
gap: 32px;
}

/* COURSE CARD */
.course-card {
position: relative;
width: 100%;
padding: 24px;
border-radius: 20px;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(58,175,185,0.15);
backdrop-filter: blur(12px);

box-shadow: 0 0 60px rgba(0,255,200,0.08);

transition: all 0.3s ease;
}

.course-card h3 {
font-size: 22px;
margin: 16px 0 10px;
}

.course-card p {
color: #aaa;
font-size: 15px;
margin-top: 8px;
margin-bottom: 4px;
}

.course-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 80px rgba(58,175,185,0.2);
  border-color: rgba(58,175,185,0.4);
}
.course-card:hover .course-image img {
  transform: scale(1.08);
}

/* TAG */
.tag {
font-size: 12px;
padding: 6px 12px;
border-radius: 999px;
}

.beginner {
background: rgba(0,255,150,0.15);
color: #00ffa0;
}

.intermediate {
background: rgba(255,200,0,0.15);
color: #ffc400;
}

/* MAPS SECTION */
.maps {
  text-align: center;
}

.maps h2 {
font-size: 44px;
margin-bottom: 12px;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* CARD */
.map-card {
  text-decoration: none;
  color: inherit;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(58,175,185,0.15);
  backdrop-filter: blur(12px);

  transition: all 0.3s ease;
}

.map-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 60px rgba(58,175,185,0.2);
  border-color: rgba(58,175,185,0.4);
}

/* IMAGE */
.map-image {
  height: 180px;
  overflow: hidden;
}

.map-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.map-card:hover img {
  transform: scale(1.08);
}

/* TEXT */
.map-info {
  padding: 20px;
  text-align: left;
}

.map-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.map-info p {
  font-size: 14px;
  color: #aaa;
}

/* MAPS CTA */
.maps-cta {
display: flex;
justify-content: center;
text-align: center;
margin: 0 20px;
padding: 90px 20px;
border-radius: 20px;
position: relative;
overflow: hidden;
}

.map-stats {
  display: flex;
  gap: 14px;
  margin-top: 12px;

  font-size: 13px;
  color: #888;
}

.map-stats span {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(255,255,255,0.03);
  padding: 5px 10px;
  border-radius: 6px;
}
.map-stats span:first-child {
  color: #3AAFB9;
}
	.map-stats i {
  font-size: 12px;
  opacity: 0.8;
}

.difficulty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.diff-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;

  border: 1px solid;
  background: rgba(255,255,255,0.03);

  font-weight: 500;
  box-shadow: 0 0 6px currentColor;
}
.youtube-section {
  padding: 80px 20px;
  text-align: center;
}
.youtube-section h2 {
font-size: 44px;
margin-bottom: 12px;
}
.youtube-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* CARD */
.youtube-card {
  border-radius: 16px;
  overflow: hidden;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.05);

  text-decoration: none;
  color: inherit;

  transition: all 0.25s ease;
animation: fadeUp 0.5s ease;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.youtube-card:hover {
  transform: translateY(-6px);
  border-color: rgba(58,175,185,0.3);
  box-shadow: 0 0 40px rgba(58,175,185,0.15);
}

/* THUMBNAIL */
.youtube-thumb {
  position: relative;
  overflow: hidden;
}

.youtube-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* PLAY BUTTON */
.play-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.4);
  opacity: 0;

  transition: all 0.25s ease;
}

.play-overlay i {
  font-size: 30px;
  color: #fff;
}

/* HOVER EFFECT */
.youtube-card:hover .play-overlay {
  opacity: 1;
}

/* TITLE */
.youtube-card h3 {
  padding: 14px;
  font-size: 14px;
}







/* ABOUT */
.about-card {
  width: 100%;
  max-width: 1100px; /* ?? match your container */
  margin: 40px auto 90px;

  display: flex;
  gap: 40px;
  align-items: center;

  padding: 60px;

  border-radius: 20px;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(0,255,200,0.1);
  backdrop-filter: blur(12px);

  box-shadow: 0 0 80px rgba(0,255,200,0.05);
}

.about-image {
  flex: 1; /* ?? grows naturally */
  min-height: 320px;

  border-radius: 14px;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ?? KEY FIX */
  object-position: center;
}
.about-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text h2 {
  font-size: 30px;
  font-weight: 700;
}

.divider {
  width: 250px;
  height: 2px;
  margin: 16px 0 20px;

  background: linear-gradient(90deg, #3AAFB9, transparent);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.divider::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(58,175,185,0.6),
    transparent
  );

  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.about-text p {
  color: #bbb;
  line-height: 1.7;
  font-size: 16px;
  max-width: 500px;
}

/* SOCIALS */
.socials {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}

.socials a {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  text-decoration: none;
  color: #aaa;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);

  transition: all 0.25s ease;
}
.socials a:hover {
  color: #3AAFB9;
  border-color: rgba(58,175,185,0.4);

  box-shadow:
    0 0 12px rgba(58,175,185,0.4),
    inset 0 0 10px rgba(58,175,185,0.2);

  transform: translateY(-3px) scale(1.05);
}

/* CTA */
.cta {
text-align: center;
margin: 0 20px;
padding: 70px 20px;
border-radius: 20px;

background: linear-gradient(90deg, rgba(58,175,185,0.15), rgba(120,0,255,0.15));
box-shadow: 0 0 100px rgba(0,255,200,0.1);
position: relative;
overflow: hidden;
}

.cta h2 {
font-size: 36px;
margin-bottom: 12px;
}
.cta p {
  margin-top: 10px;
  margin-bottom: -30px;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(58,175,185,0.2),
    transparent 70%
  );

  opacity: 0;
  animation: pulseGlow 4s ease-in-out infinite;
}
.cta::before,
.cta::after {
  pointer-events: none;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.cta-form,
.kit-form {
  margin-top: 12px !important;
}
/* TARGET KIT FORM */
.kit-form form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 10px !important;
  justify-content: center !important;

  max-width: 500px;
  margin: 0 auto !important;
}
/* INPUT */
.kit-form input[type="email"] {
  padding: 16px !important;
  border-radius: 10px !important;

  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  flex: 1 !important;
  min-width: 0px !important;
  font-size: 16px !important;

  outline: none !important;
}

/* INPUT FOCUS (your glow style) */
.kit-form input[type="email"]:focus {
  border-color: rgba(58,175,185,0.5) !important;
  box-shadow: 0 0 10px rgba(58,175,185,0.3) !important;
}

/* BUTTON */
.kit-form button {
  width: auto !important;
  padding: 14px 20px !important;
  white-space: nowrap;
  border-radius: 10px !important;

  background: linear-gradient(135deg, #3AAFB9, #00c3ff) !important;
  color: #000 !important;

  font-weight: 600 !important;
  font-size: 16px !important;

  border: none !important;
  cursor: pointer !important;

  transition: all 0.25s ease !important;
}

/* BUTTON HOVER */
.kit-form button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 0 30px rgba(58,175,185,0.6) !important;
}

/* REMOVE KIT LABELS */
.kit-form label {
  display: none !important;
}

/* REMOVE EXTRA SPACING */
.kit-form div {
  margin: 0 !important;
}

.kit-form .formkit-alert-success {
  margin-top: 12px !important;

  padding: 16px !important;
  border-radius: 12px !important;

  background: rgba(58,175,185,0.1) !important;
  border: 1px solid rgba(58,175,185,0.3) !important;

  color: #3AAFB9 !important;
  font-size: 16px !important;
  text-align: center !important;
}







/* DASHBOARD LAYOUT */
.dashboard-layout {
display: flex;
}
.dashboard > * {
  margin-bottom: 30px;
}

.dashboard {
  margin-left: 280px; /* sidebar width */

  width: calc(100% - 280px); /* 👈 THIS is the missing piece */

  padding: 60px 40px;

  display: flex;
  justify-content: center;
}
.dashboard-inner {
  width: 100%;
  max-width: 1100px; /* 👈 controls layout width */
}
.dashboard h1 {
  font-size: 36px;
  margin-bottom: 6px;
}

.dashboard .subtitle {
  margin-bottom: 30px;
}
/* HERO CARD */
.dashboard-hero {
  margin-top: 30px;
  padding: 40px;
  border-radius: 20px;
  max-width: 1100px;
  background: linear-gradient(
    120deg,
    rgba(58,175,185,0.15),
    rgba(10,10,10,0.8)
  );

  border: 1px solid rgba(58,175,185,0.3);

  box-shadow:
    0 0 80px rgba(58,175,185,0.15),
    inset 0 0 40px rgba(58,175,185,0.05);

  position: relative;
  overflow: hidden;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 20% 50%,
    rgba(58,175,185,0.2),
    transparent 60%
  );

  animation: heroGlow 6s ease-in-out infinite;
}

@keyframes heroGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.dashboard-hero h2 {
  font-size: 28px;
  line-height: 1.2;
padding: 15px 0px;
}

.dashboard-hero p {
  color: #aaa;
  max-width: 800px;
}
.dashboard-hero .btn {
  margin-top: 10px;
  align-self: flex-start;
}

.lesson-meta {
display: flex;
gap: 16px;
margin: 15px 0 30px;
color: #aaa;
}

/* STATS */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 30px 0;
}

.stat-card {
  padding: 22px;
  border-radius: 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.05);

  transition: all 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(58,175,185,0.3);
  box-shadow: 0 0 30px rgba(58,175,185,0.1);
}

.stat-card h3 {
  font-size: 22px;
}

.stat-card i {
color: #3AAFB9;
margin-bottom: 10px;
}

/* MAIN GRID */
.dashboard-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 30px;
}

/* LESSONS */
.dashboard-lesson-card {
display: flex;
gap: 16px;
padding: 16px;
margin-top: 16px;
border-radius: 12px;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);

transition: all 0.25s ease;
}
.dashboard-lesson-card:hover {
  transform: translateY(-3px);
  border-color: rgba(58,175,185,0.3);
}

.lesson-icon {
width: 40px;
height: 40px;
background: rgba(58,175,185,0.1);
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}

.lesson-status {
color: #3AAFB9;
font-size: 12px;
}

/* RIGHT SIDE */
.progress-card {
  padding: 24px;
}

.progress-card h2 {
  font-size: 42px;
  color: #3AAFB9;
  margin: 10px 0;
}

.progress-card,
.quick-actions,
.achievements {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-actions .btn {
  width: 100%;
  padding:16px;
  justify-content: center;
}

/* PROGRESS BAR */
.progress-bar {
  height: 10px;
  background: #111;
  border-radius: 10px;
  margin: 16px 0 20px;
}

.progress-bar div {
  background: linear-gradient(90deg, #3AAFB9, #00c3ff);
}

/* ROWS */
.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 14px;
  margin: 8px 0;

  color: #aaa;
}

/* ACHIEVEMENTS */
.achievement-card {
display: flex;
gap: 12px;
margin-top: 12px;
padding: 10px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
 align-items: center;
}
.dashboard-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}







/* SIDEBAR */
.sidebar {
  position: fixed;
  top: 64px;
  left: 0;

  width: 280px;
  height: calc(100vh - 64px);

  padding: 30px 20px;

  background: linear-gradient(
    180deg,
    rgba(10,20,30,0.9),
    rgba(0,0,0,1)
  );

  border-right: 1px solid rgba(58,175,185,0.2);

  overflow-y: auto;
}

/* TITLE */
.sidebar-title {
  font-size: 12px;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 20px;
}

/* SECTION */
.sidebar-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 12px;
}

.section-header h3 {
  font-size: 18px;
}

.section-header span {
  color: #3AAFB9;
  font-size: 14px;
}

/* LESSON ITEMS */
.lesson-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;

  color: #aaa;
  cursor: pointer;

  transition: all 0.2s ease;
}

.lesson-item i {
  margin-top: 3px;
  font-size: 14px;
}

/* STATES */
.lesson-item.completed {
  color: #3AAFB9;
}

.lesson-item.active {
  background: rgba(58,175,185,0.1);
  border: 1px solid rgba(58,175,185,0.3);
}

.lesson-item.locked {
  opacity: 0.4;
}

/* HOVER */
.lesson-item:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(4px);
}

/* TEXT */
.lesson-item p {
  font-size: 14px;
}

.lesson-item span {
  font-size: 12px;
  color: #777;
}








/* LESSON PAGE */
.lesson-page {
margin-left: 280px;
width: calc(100% - 280px);

display: flex;
justify-content: center;
padding: 60px 40px;
}

.lesson-container {
width: 100%;
max-width: 900px;

display: flex;
flex-direction: column;
gap: 20px;
}

/* BACK LINK */
.back-link {
color: #aaa;
font-size: 14px;
cursor: pointer;
}

/* VIDEO */
.video-card {
  max-width: 1100px;
height:500px;
  border-radius: 20px;

  background: linear-gradient(
    120deg,
    rgba(58,175,185,0.15),
    rgba(0,0,0,0.9)
  );

  border: 1px solid rgba(58,175,185,0.25);

  box-shadow:
    0 0 80px rgba(58,175,185,0.12),
    inset 0 0 40px rgba(58,175,185,0.05);
}

.video-placeholder {
height: 500px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

color: #aaa;
}

.video-placeholder i {
font-size: 28px;
margin-bottom: 10px;
}

/* INFO CARD */
.lesson-info-card {
padding: 24px;
border-radius: 16px;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);
}

.lesson-info-card h2 {
margin: 10px 0;
}

/* GENERIC CARD */
.lesson-card {
padding: 24px;
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 12px;
background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);
}

.lesson-card h3 {
margin-bottom: 6px;
display: flex;
gap: 10px;
align-items: center;
}

/* LIST */
.lesson-card ul {
list-style: none;
}

.lesson-card li {
margin-bottom: 10px;
color: #aaa;
}

.lesson-card li::before {
content: "•";
color: #3AAFB9;
margin-right: 8px;
}

/* RESOURCES */
.resource-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}

.resource-btn {
padding: 14px;
border-radius: 10px;

display: flex;
gap: 10px;
align-items: center;
flex: 1;
justify-content: center;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);

text-decoration: none;
color: #aaa;

transition: all 0.2s ease;
}

.resource-btn:hover {
border-color: rgba(58,175,185,0.3);
color: #3AAFB9;
}

/* ACTIONS */
.lesson-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 20px;
}






/* COURSE PAGE */
.course-layout {
  grid-template-columns: 2fr 1fr;
  gap: 30px;

  max-width: 1200px;
  margin: 0 auto;
}
.course-main {
display: flex;
flex-direction: column;
gap: 20px;
}

.course-container {
max-width: 1100px;
width: 100%;
display: flex;
flex-direction: column;
gap: 28px;
}

/* HERO */
.course-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;

  padding: 36px 40px;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;

  background: linear-gradient(
    120deg,
    rgba(58,175,185,0.12),
    rgba(0,0,0,0.9)
  );

  border: 1px solid rgba(58,175,185,0.25);

  box-shadow:
    0 0 80px rgba(58,175,185,0.1),
    inset 0 0 40px rgba(58,175,185,0.05);
	
transition: all 0.3s ease;
}

.course-hero:hover {
  transform: translateY(-4px);
}
/* BACKGROUND IMAGE */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0.15;
  filter: blur(5px);
}

/* DARK OVERLAY */
.course-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 20% 50%,
    rgba(58,175,185,0.3),
    transparent 60%
  );

  z-index: 1;
}
/* CONTENT */
.course-hero-content {
  position: relative;
  z-index: 2;

  max-width: 600px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-meta {
display: flex;
gap: 16px;
color: #aaa;
font-size: 14px;
}

/* PROGRESS BOX */
.hero-progress {
  position: relative;
  z-index: 2;

  padding: 22px;
  border-radius: 14px;

  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05);

  min-width: 160px;

  text-align: center;

  backdrop-filter: blur(10px);
}

.course-hero h1 {
  font-size: 32px;
  line-height: 1.2;
}

.course-hero p {
  color: #aaa;
  max-width: 500px;
}

.hero-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

/* STATS */
.course-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

/* CURRICULUM */
.curriculum-card {
padding: 24px;
border-radius: 16px;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);
}

.curriculum-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  margin-bottom: 14px;
}

.curriculum-header h3 {
  margin-bottom: 4px;
}

.curriculum-header p {
  color: #777;
  font-size: 14px;
}
.curriculum-header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 8px;

  background: rgba(58,175,185,0.2);
  color: #3AAFB9;

  font-size: 14px;
  font-weight: 600;
}
.section-title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.lesson-list {
margin-top: 16px;
}

.lesson-row {
display: flex;
justify-content: space-between;
padding: 10px;
border-radius: 10px;
color: #aaa;
}

.lesson-row.completed {
color: #3AAFB9;
}

.duration {
font-size: 12px;
}


.blog-page {
margin-left: 200px;
width: calc(100% - 280px);

display: flex;
justify-content: center;
padding: 60px 40px;
}

.blog-container {
max-width: 1100px;
width: 100%;

display: flex;
flex-direction: column;
gap: 24px;
}

/* GRID */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

/* CARD */
.blog-card {
border-radius: 16px;
overflow: hidden;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);

text-decoration: none;
color: inherit;

transition: all 0.25s ease;
}

.blog-card:hover {
transform: translateY(-6px);
border-color: rgba(58,175,185,0.3);
}

/* IMAGE */
.blog-image {
height: 180px;
overflow: hidden;
}

.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* CONTENT */
.blog-content {
padding: 20px;
}

.blog-content h3 {
margin: 10px 0;
}





.post-page {
  width: 100%;

  display: flex;
  justify-content: center;

  padding: 60px 20px;
}

.post-container {
max-width: 800px;
width: 100%;

display: flex;
flex-direction: column;
gap: 28px;
}
.post-container h1 {
  font-size: 36px;
  line-height: 1.2;
}

.post-meta {
  color: #777;
  font-size: 14px;
}

/* HERO */
.post-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 320px;
  width: 100%;
}

.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
}

.post-hero-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  color: #fff;
}

/* BODY */
.post-body {
  margin-top: 40px;
  line-height: 1.8;
  color: #ccc;
}

/* HEADINGS */
.post-body h2 {
  margin-top: 36px;
  margin-bottom: 8px;
  font-size: 24px;
}

.post-body h3 {
  margin-top: 28px;
  margin-bottom: 6px;
}

/* PARAGRAPHS */
.post-body p {
  margin-bottom: 12px;
}
.post-body h2 + p {
  margin-top: 8px;
}
/* LISTS */
.post-body ul,
.post-body ol {
  margin: 16px 0;
  padding-left: 16px;
}

.post-body li {
  margin-bottom: 6px;
}

.post-body li::before {
  content: "\2022";
  color: #3AAFB9;
  margin-right: 8px;
}

/* IMAGE */
.post-image {
  margin: 32px 0;
  border-radius: 16px;
  overflow: hidden;
}

.post-image img {
  width: 100%;
  height: auto;
}

/* CALLOUTS */
.callout {
  padding: 18px;
  margin: 24px 0;
  border-radius: 12px;

  background: rgba(58,175,185,0.08);
  border: 1px solid rgba(58,175,185,0.3);

  box-shadow: 0 0 20px rgba(58,175,185,0.1);
}

.callout.warning {
  background: rgba(255,200,0,0.08);
  border-color: rgba(255,200,0,0.3);
}

.callout.error {
  background: rgba(255,0,0,0.08);
  border-color: rgba(255,0,0,0.3);
}

.post-body > * + * {
  margin-top: 16px;
}

.post-divider {
  height: 1px;
  margin: 40px 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(58,175,185,0.3),
    transparent
  );
}

/* AUTHOR */
.post-author {
  display: flex;
  gap: 16px;
  align-items: center;

  padding: 20px;
  border-radius: 16px;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.05);
}

.post-author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.post-author p {
font-size: 12pt;
color: #aaa;
}
/* SHARE */
.post-share {
  text-align: center;
}

.post-share div {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.share-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.share-buttons button {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius: 8px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.05);

  color: #aaa;
  cursor: pointer;

  transition: all 0.2s ease;
}

.share-buttons button i {
  font-size: 14px;
}

/* Hover */
.share-buttons button:hover {
  color: #3AAFB9;
  border-color: rgba(58,175,185,0.3);
  transform: translateY(-2px);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.related-card {
  border-radius: 12px;
  overflow: hidden;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.05);

  text-decoration: none;
  color: inherit;

  transition: all 0.2s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(58,175,185,0.3);
}

.related-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.related-card-content {
  padding: 12px;
}

.related-card-content h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.related-card-content p {
  font-size: 13px;
  color: #aaa;
}









/* SUPPORT PAGE */
.support-page {
display: flex;
justify-content: center;
padding: 60px 40px;
}

.support-container {
max-width: 1100px;
width: 100%;

display: flex;
flex-direction: column;
gap: 30px;
}

/* HERO */
.support-hero {
padding: 40px;
border-radius: 20px;

text-align: center;

background: linear-gradient(
120deg,
rgba(58,175,185,0.15),
rgba(0,0,0,0.9)
);

border: 1px solid rgba(58,175,185,0.25);

box-shadow:
0 0 80px rgba(58,175,185,0.1),
inset 0 0 40px rgba(58,175,185,0.05);

display: flex;
flex-direction: column;
gap: 16px;
}
.support-bg img {
height:100%;
width:100%;
object-fit:cover;
object-position:center;
}
.support-hero p {
color: #AAAAAA;
max-width: 600px;
margin: 0 auto;
margin-top: 15px;
}

/* GRID */
.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

/* CARD */
.support-card {
padding: 24px;
border-radius: 16px;

text-align: center;

background: rgba(10,10,10,0.7);
border: 1px solid rgba(255,255,255,0.05);

transition: all 0.25s ease;
}

.support-card i {
font-size: 22px;
margin-bottom: 10px;
color: #3AAFB9;
}

.support-card:hover {
transform: translateY(-4px);
border-color: rgba(58,175,185,0.3);
box-shadow: 0 0 30px rgba(58,175,185,0.1);
}
/* SECTION */
.support-section {
  padding: 60px 20px;
  text-align: center;
}

.support-custom {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.support-card {
  width: 100%;
max-width: 1100px;
  padding: 40px;
  border-radius: 20px;
  gap: 20px;
  display:flex;
  flex-direction: column;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(58,175,185,0.2);

  box-shadow:
    0 0 60px rgba(58,175,185,0.1),
    inset 0 0 30px rgba(58,175,185,0.05);

  text-align: center;
}

.support-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.support-amounts button {
  width: 100%;
	padding: 16px;
  border-radius: 8px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.05);

  color: #aaa;
  cursor: pointer;

  transition: all 0.2s ease;
}

.support-amounts button:hover {
  border-color: rgba(58,175,185,0.3);
  color: #3AAFB9;
}

#customAmount {
  width: 100%;
  margin-bottom: 20px;

  padding: 12px;
  border-radius: 10px;

  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}
.support-amounts button.active {
  border-color: #3AAFB9;
  color: #3AAFB9;
}
.support-section h2 {
  font-size: 44px;
  margin-bottom: 25px;

  background: linear-gradient(90deg, #fff, #3AAFB9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.support-section p {
  max-width: 600px;
  margin: 0 auto;
  color: #aaa;
}


/* BENEFITS GRID */
.support-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.benefit {
  padding: 20px;
  border-radius: 14px;

  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(255,255,255,0.05);

  transition: all 0.25s ease;
}

.benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(58,175,185,0.3);
}

.benefit i {
  font-size: 20px;
  color: #3AAFB9;
  margin-bottom: 10px;
}

/* FOOTER */
footer {
padding: 60px 40px;
border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

footer a {
color: #888;
text-decoration: none;
display: block;
margin: 6px 0;
}

footer p {
color: #555;
width: 55%;
font-size: 16px;
}

@media (max-width: 768px) {

  /* NAVBAR */
  .navbar {
    flex-direction: column;
    padding: 16px 20px;
    gap: 10px;
  }

  .navbar nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* HERO */
  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 16px;
  }
.hero::before,
  .hero::after {
    width: 250px;
    height: 250px;
    filter: blur(50px);
  }
  .buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  /* COURSE GRID */
  .course-grid {
    grid-template-columns: 1fr;
  }

  /* MAPS GRID */
  .map-grid {
    grid-template-columns: 1fr;
  }

  /* YOUTUBE GRID */
  .youtube-grid {
    grid-template-columns: 1fr;
  }

  .youtube-thumb img {
    height: 200px;
  }

  /* ABOUT */
  .about-card {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .about-image {
    width: 100%;
  }

  /* CTA */
  .cta {
    padding: 50px 20px;
  }

  .kit-form form {
    flex-direction: column !important;
  }

  /* DASHBOARD */
  .dashboard {
    margin-left: 0;
    width: 100%;
    padding: 40px 20px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* SIDEBAR */
  .sidebar {
    display: none;
  }

  /* LESSON PAGE */
  .lesson-page {
    margin-left: 0;
    width: 100%;
    padding: 40px 20px;
  }

  .video-card,
  .video-placeholder {
    height: 250px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  /* COURSE PAGE */
  .course-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 30px 20px;
  }

  .course-grid {
    grid-template-columns: 1fr;
  }

  .course-image {
    aspect-ratio: 16 / 10; /* ?? slightly taller for mobile */
  }
	
  .hero-meta {
    grid-template-columns: 1fr;
  }

  .course-stats {
    grid-template-columns: 1fr;
  }

  /* BLOG */
  .blog-page {
    margin-left: 0;
    width: 100%;
    padding: 40px 20px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* POST */
  .post-container {
    max-width: 100%;
  }

  .post-hero {
    height: 220px;
  }

  .post-body h1 {
    font-size: 26px;
  }

  .post-body h2 {
    font-size: 20px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  /* SUPPORT */
  .support-container {
    padding: 0 10px;
  }

  .support-benefits {
    grid-template-columns: 1fr;
  }

  .support-card {
    padding: 24px;
  }

  .support-amounts {
    grid-template-columns: 1fr;
  }

  /* FOOTER */
  .footer-content {
    flex-direction: column;
    gap: 20px;
  }

  footer p {
    width: 100%;
  }


/* CTA CARD */
.cta {
  padding: 36px 18px;
}

/* TITLE */
.cta h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

/* TEXT */
.cta p {
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* FORM */
.kit-form {
  margin-top: 12px !important;
}

/* STACK INPUT + BUTTON TIGHTER */
.kit-form form {
  flex-direction: column !important;
  gap: 8px !important;
  max-width: 300px;
  margin: 0 auto !important;
}

/* INPUT */
.kit-form input[type="email"] {
  padding: 14px !important;
  font-size: 14px !important;
}

/* BUTTON */
.kit-form button {
  padding: 14px !important;
  font-size: 15px !important;
}

/* REMOVE EXTRA BOTTOM GAP */
.kit-form .formkit-alert-success {
  margin-top: 12px !important;
}
/* BODY TEXT */
  .post-body {
    font-size: 15px;
    line-height: 1.7;
  }

  /* MAIN TITLE (hero) */
  .post-container h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  /* SECTION HEADINGS */
  .post-body h2 {
    font-size: 20px;
    margin-top: 28px;
  }

  /* SUB HEADINGS */
  .post-body h3 {
    font-size: 16px;
    margin-top: 22px;
  }

  /* PARAGRAPHS */
  .post-body p {
    font-size: 15px;
    line-height: 1.7;
  }

  /* LIST ITEMS */
  .post-body li {
    font-size: 15px;
    line-height: 1.6;
  }

  /* CALLOUTS */
  .callout {
    font-size: 14px;
    padding: 14px;
  }

  /* IMAGES */
  .post-image img {
    border-radius: 12px;
  }

}